/* ==========================================================
   Hometuary Post Template — v2.1.0
   ========================================================== */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Variables ───────────────────────────────────────────── */
:root {
    --hpt-green:      #2e7d32;
    --hpt-green-lt:   #e8f5e9;
    --hpt-text:       #1a1a1a;
    --hpt-meta:       #666;
    --hpt-border:     #e0e0e0;
    --hpt-bg:         #ffffff;
    --hpt-radius:     8px;
    --hpt-max-w:      760px;
    --hpt-side-w:     160px;
}

/* ── Base ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body.hpt-single-post {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    color: var(--hpt-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.75;
}

/* ── Layout containers ───────────────────────────────────── */
.hpt-container {
    max-width: var(--hpt-max-w);
    margin: 0 auto;
    padding: 0 20px;
    background: var(--hpt-bg);
}
.hpt-container-wide {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}
.hpt-layout { padding-bottom: 60px; }
.hpt-main   { width: 100%; }

/* ── Reading progress bar ────────────────────────────────── */
#hpt-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: var(--hpt-green);
    z-index: 99999;
    transition: width 0.1s linear;
}

/* ── Fixed side ads ──────────────────────────────────────── */
.hpt-side-ad {
    display: none;
    position: fixed;
    top: 160px;
    width: var(--hpt-side-w);
    min-height: 600px;
    z-index: 50;
}
/* Position outside the 760px centered column */
.hpt-side-ad-left  { left:  calc(50% - 380px - var(--hpt-side-w) - 24px); }
.hpt-side-ad-right { right: calc(50% - 380px - var(--hpt-side-w) - 24px); }

@media (min-width: 1280px) {
    .hpt-side-ad { display: flex; flex-direction: column; align-items: center; }
}

/* AdSense ad label (required by Google policy) */
.hpt-ad-label {
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
    color: #aaa;
    margin: 0 0 2px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}

/* Side ad skyscraper placeholder (160×600) */
.hpt-side-ad ins.adsbygoogle {
    display: inline-block !important;
    width: 160px !important;
    height: 600px !important;
    background: #f5f5f5;
    border: 1px dashed #ccc;
}

/* ── Leaderboard ad strip (top + footer) ─────────────────── */
.hpt-ad-leaderboard-wrap,
.hpt-ad-footer-wrap {
    background: #f9f9f9;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    text-align: center;
    padding: 6px 0;
}
.hpt-ad-mid {
    margin: 32px 0;
}

/* ── Generic AdSense unit placeholder ───────────────────── */
.hpt-ad-unit {
    position: relative;
    background: #fafafa;
    border: 1px dashed #d0d0d0;
    border-radius: 4px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    overflow: hidden;
}
/* Label so empty ads are visible */
.hpt-ad-unit::before {
    content: 'Advertisement';
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bbb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}
.hpt-ad-unit ins { display: block; width: 100%; }

/* In-content ad (injected between paragraphs) */
.hpt-ad-in-content {
    margin: 28px 0;
    background: #fafafa;
    border: 1px dashed #d0d0d0;
    border-radius: 4px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hpt-ad-in-content::before {
    content: 'Advertisement';
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bbb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.hpt-breadcrumbs-wrap { padding: 16px 0 0; }
.hpt-breadcrumbs {
    font-size: 0.78rem;
    font-family: sans-serif;
    color: var(--hpt-meta);
}
.hpt-breadcrumbs ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.hpt-breadcrumbs li { display: flex; align-items: center; gap: 4px; }
.hpt-breadcrumbs li + li::before { content: '›'; color: #bbb; }
.hpt-breadcrumbs a   { color: var(--hpt-green); text-decoration: none; }
.hpt-breadcrumbs a:hover { text-decoration: underline; }

/* ── Category links ──────────────────────────────────────── */
.hpt-cats { margin: 14px 0 10px; }
.hpt-cat-link {
    display: inline-block;
    background: var(--hpt-green-lt);
    color: var(--hpt-green);
    font-size: 0.72rem;
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 100px;
    text-decoration: none;
    margin: 0 4px 4px 0;
}

/* ── Post header ─────────────────────────────────────────── */
.hpt-post-header { margin-bottom: 20px; }
.hpt-title {
    font-family: Georgia, serif;
    font-size: clamp(1.65rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--hpt-text);
    margin: 8px 0 16px;
}

/* ── Meta row ────────────────────────────────────────────── */
.hpt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 0.82rem;
    font-family: sans-serif;
    color: var(--hpt-meta);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hpt-border);
}
.hpt-meta-author {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--hpt-text);
    text-decoration: none;
}
.hpt-author-avatar-sm {
    width: 32px; height: 32px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--hpt-green-lt);
    flex-shrink: 0;
}
.hpt-meta-sep   { color: #ccc; }
.hpt-updated    { color: var(--hpt-meta); }

/* ── Featured image ──────────────────────────────────────── */
.hpt-featured-image {
    margin: 20px 0 28px;
    border-radius: var(--hpt-radius);
    overflow: hidden;
}
.hpt-feat-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--hpt-radius);
}

/* ── Table of Contents ───────────────────────────────────── */
.hpt-toc-wrap { margin: 24px 0; }
.hpt-toc {
    background: var(--hpt-green-lt);
    border-left: 4px solid var(--hpt-green);
    border-radius: var(--hpt-radius);
    padding: 16px 20px;
    font-family: sans-serif;
}
.hpt-toc-toggle {
    background: none; border: none;
    font-size: 0.95rem; font-weight: 700;
    color: var(--hpt-green);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0;
}
.hpt-toc-icon { font-size: 0.7rem; transition: transform 0.25s; }
.hpt-toc-toggle[aria-expanded="false"] .hpt-toc-icon { transform: rotate(-90deg); }
.hpt-toc-list {
    margin: 12px 0 0; padding-left: 18px;
    font-size: 0.88rem; line-height: 1.7;
}
.hpt-toc-item          { margin: 4px 0; }
.hpt-toc-item.hpt-toc-sub { margin-left: 18px; list-style-type: circle; }
.hpt-toc-item a        { color: var(--hpt-green); text-decoration: none; }
.hpt-toc-item a:hover  { text-decoration: underline; }
.hpt-toc-item.hpt-toc-active > a { font-weight: 700; color: #1b5e20; }

/* ── Article body ────────────────────────────────────────── */
.hpt-content { font-size: 1rem; line-height: 1.85; color: var(--hpt-text); }
.hpt-content h2 {
    font-size: 1.5rem; margin: 2em 0 0.6em;
    border-bottom: 2px solid var(--hpt-green-lt); padding-bottom: 6px;
}
.hpt-content h3 { font-size: 1.2rem; margin: 1.6em 0 0.4em; color: #2c3e50; }
.hpt-content p  { margin: 0 0 1.2em; }
.hpt-content ul, .hpt-content ol { padding-left: 1.6em; margin: 0 0 1.2em; }
.hpt-content li { margin-bottom: 0.4em; }
.hpt-content a  { color: var(--hpt-green); }
.hpt-content a:hover { text-decoration: none; }
.hpt-content blockquote {
    border-left: 4px solid var(--hpt-green);
    margin: 1.5em 0; padding: 10px 20px;
    background: var(--hpt-green-lt);
    border-radius: 0 var(--hpt-radius) var(--hpt-radius) 0;
    font-style: italic;
}
.hpt-content img { max-width: 100%; height: auto; border-radius: 4px; }
.hpt-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.92rem; font-family: sans-serif; }
.hpt-content th { background: var(--hpt-green); color: #fff; padding: 10px 14px; text-align: left; }
.hpt-content td { padding: 9px 14px; border-bottom: 1px solid #eee; }
.hpt-content tr:nth-child(even) td { background: #f9f9f9; }
.hpt-content code { background: #f0f4f8; border-radius: 3px; padding: 2px 6px; font-size: 0.88em; }
.hpt-content pre { background: #1e1e2e; color: #cdd6f4; padding: 18px; border-radius: var(--hpt-radius); overflow-x: auto; font-size: 0.88rem; line-height: 1.6; }
.hpt-content pre code { background: none; padding: 0; color: inherit; }

/* ── Tags ────────────────────────────────────────────────── */
.hpt-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 28px 0 0; font-family: sans-serif; font-size: 0.82rem;
}
.hpt-tags-label { color: var(--hpt-meta); font-weight: 600; }
.hpt-tag {
    background: #f0f0f0; color: #444;
    padding: 3px 12px; border-radius: 100px;
    text-decoration: none; font-size: 0.8rem;
    border: 1px solid #e0e0e0;
    transition: background 0.2s;
}
.hpt-tag:hover { background: var(--hpt-green-lt); color: var(--hpt-green); border-color: #c8e6c9; }

/* ── Social share ────────────────────────────────────────── */
.hpt-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 20px 0; font-family: sans-serif; font-size: 0.82rem;
}
.hpt-share-label { color: var(--hpt-meta); font-weight: 600; margin-right: 4px; }
.hpt-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600;
    text-decoration: none; transition: opacity 0.2s;
}
.hpt-share-btn:hover { opacity: 0.85; }
.hpt-share-fb  { background: #1877f2; color: #fff; }
.hpt-share-tw  { background: #000; color: #fff; }
.hpt-share-pin { background: #e60023; color: #fff; }

/* ── Section headings ────────────────────────────────────── */
.hpt-section-title {
    font-family: Georgia, serif;
    font-size: 1.25rem; font-weight: 700;
    margin: 0 0 18px;
    border-bottom: 2px solid var(--hpt-green-lt);
    padding-bottom: 8px;
    color: var(--hpt-text);
}

/* ── Author box ──────────────────────────────────────────── */
.hpt-author-box {
    display: flex; align-items: flex-start; gap: 20px;
    background: #f9fbf9;
    border-left: 5px solid var(--hpt-green);
    border-radius: var(--hpt-radius);
    padding: 22px 24px; margin: 40px 0;
    font-family: sans-serif;
}
.hpt-author-avatar {
    width: 80px; height: 80px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.hpt-author-info { flex: 1; }
.hpt-author-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hpt-author-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hpt-meta); }
.hpt-author-name { font-size: 1.05rem; font-weight: 700; color: var(--hpt-text); text-decoration: none; }
.hpt-author-name:hover { color: var(--hpt-green); }
.hpt-author-bio { margin: 0 0 10px; font-size: 0.88rem; color: #555; line-height: 1.6; }
.hpt-author-posts-link { font-size: 0.82rem; color: var(--hpt-green); text-decoration: none; font-weight: 600; }
.hpt-author-posts-link:hover { text-decoration: underline; }

/* ── Browse topics grid ──────────────────────────────────── */
.hpt-browse-topics { margin: 40px 0; font-family: sans-serif; }
.hpt-topics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.hpt-topic-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 8px;
    background: var(--hpt-green-lt);
    border: 1px solid #c8e6c9;
    border-radius: var(--hpt-radius);
    text-decoration: none; text-align: center;
    transition: background 0.2s, transform 0.2s;
}
.hpt-topic-card:hover { background: var(--hpt-green); transform: translateY(-2px); }
.hpt-topic-card:hover .hpt-topic-name,
.hpt-topic-card:hover .hpt-topic-count { color: #fff; }
.hpt-topic-name { font-size: 0.85rem; font-weight: 700; color: var(--hpt-green); margin-bottom: 3px; }
.hpt-topic-count { font-size: 0.72rem; color: #777; }

/* ── Related posts ───────────────────────────────────────── */
.hpt-related { margin: 40px 0; font-family: sans-serif; }
.hpt-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.hpt-related-card {
    border: 1px solid var(--hpt-border);
    border-radius: var(--hpt-radius);
    overflow: hidden; text-decoration: none; color: var(--hpt-text);
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hpt-related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.hpt-related-img-wrap { overflow: hidden; }
.hpt-related-img-wrap img { width: 100%; height: 170px; object-fit: cover; display: block; transition: transform 0.3s; }
.hpt-related-card:hover .hpt-related-img-wrap img { transform: scale(1.04); }
.hpt-related-body { padding: 12px; flex: 1; }
.hpt-related-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hpt-green); font-weight: 700; margin-bottom: 5px; display: block; }
.hpt-related-post-title { font-size: 0.88rem; font-weight: 700; line-height: 1.4; margin: 0; color: var(--hpt-text); }

/* ── Post navigation ─────────────────────────────────────── */
.hpt-post-nav {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 48px 0 32px; font-family: sans-serif;
    border-top: 1px solid var(--hpt-border); padding-top: 24px;
}
.hpt-nav-item {
    display: flex; flex-direction: column; max-width: 48%;
    color: var(--hpt-green); text-decoration: none;
    padding: 14px 18px; border: 1px solid var(--hpt-border);
    border-radius: var(--hpt-radius); transition: background 0.2s;
}
.hpt-nav-item:hover { background: var(--hpt-green-lt); }
.hpt-nav-arrow { font-size: 0.78rem; color: var(--hpt-meta); margin-bottom: 4px; font-weight: 600; }
.hpt-nav-post-title { font-size: 0.88rem; line-height: 1.4; font-weight: 600; color: var(--hpt-text); }
.hpt-nav-next { align-items: flex-end; margin-left: auto; }

/* ── Comments ────────────────────────────────────────────── */
.hpt-comments { margin: 32px 0; font-family: sans-serif; font-size: 0.92rem; }
.hpt-comments .comment-respond { background: var(--hpt-green-lt); padding: 20px; border-radius: var(--hpt-radius); }

/* ── Site footer ─────────────────────────────────────────── */
.hpt-site-footer {
    background: #1b2a1b;
    color: #c8d8c8;
    margin-top: 60px;
    font-family: sans-serif;
    font-size: 0.88rem;
    line-height: 1.7;
}

/* 4-column footer grid */
.hpt-footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 52px 32px 40px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 40px 28px;
}

/* Brand column */
.hpt-footer-brand {}
.hpt-footer-logo-link { display: inline-block; margin-bottom: 14px; }
.hpt-footer-logo-link img {
    max-width: 160px; height: auto; display: block;
    filter: brightness(0) invert(1); opacity: 0.85;
}
.hpt-footer-tagline {
    font-size: 0.82rem; color: #8aaa8a;
    margin: 0 0 16px; line-height: 1.6;
}
.hpt-footer-contact { margin: 0; padding: 0; list-style: none; }
.hpt-footer-contact li {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 7px; font-size: 0.8rem; color: #8aaa8a;
    line-height: 1.4;
}
.hpt-footer-contact a { color: #8aaa8a; text-decoration: none; }
.hpt-footer-contact a:hover { color: #fff; }
.hpt-footer-contact svg { flex-shrink: 0; margin-top: 2px; }

/* Social icons */
.hpt-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.hpt-footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #c8d8c8; text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.hpt-footer-social a:hover { background: var(--hpt-green); color: #fff; }

/* Nav columns */
.hpt-footer-col-title {
    font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #e0ece0; margin: 0 0 14px;
}
.hpt-footer-links { list-style: none; margin: 0; padding: 0; }
.hpt-footer-links li { margin-bottom: 8px; }
.hpt-footer-links a { color: #8aaa8a; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.hpt-footer-links a:hover { color: #fff; }

/* Bottom bar */
.hpt-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    max-width: 1160px; margin: 0 auto;
    padding: 18px 32px;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 10px; font-size: 0.78rem; color: #5a7a5a;
}
.hpt-footer-bottom p { margin: 0; }
.hpt-footer-disclaimer { max-width: 65%; line-height: 1.5; }

/* ── Back-to-top ─────────────────────────────────────────── */
#hpt-back-to-top {
    position: fixed; bottom: 28px; right: 24px;
    width: 44px; height: 44px;
    background: var(--hpt-green); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 9000;
}
#hpt-back-to-top.hpt-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#hpt-back-to-top:hover { background: #1b5e20; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .hpt-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 40px 24px 28px;
    }
    .hpt-footer-brand { grid-column: 1 / -1; }
    .hpt-topics-grid { grid-template-columns: repeat(3, 1fr); }
    .hpt-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    body.hpt-single-post { font-size: 16px; }
    .hpt-container { padding: 0 16px; }
    .hpt-footer-inner { grid-template-columns: 1fr; padding: 32px 20px 24px; }
    .hpt-footer-bottom { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
    .hpt-footer-disclaimer { max-width: 100%; }
    .hpt-related-grid { grid-template-columns: 1fr; }
    .hpt-topics-grid { grid-template-columns: repeat(2, 1fr); }
    .hpt-post-nav { flex-direction: column; }
    .hpt-nav-item { max-width: 100%; }
    .hpt-nav-next { align-items: flex-start; margin-left: 0; }
    .hpt-author-box { flex-direction: column; align-items: center; text-align: center; }
    .hpt-share-btn span { display: none; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
    .hpt-side-ad, #hpt-back-to-top, #hpt-progress,
    .hpt-toc-wrap, .hpt-related, .hpt-browse-topics,
    .hpt-post-nav, .hpt-site-footer,
    .hpt-ad-unit, .hpt-ad-in-content,
    .hpt-ad-leaderboard-wrap, .hpt-ad-footer-wrap { display: none !important; }
    body.hpt-single-post { font-size: 12pt; background: #fff; }
    .hpt-container { max-width: 100%; padding: 0; }
}