/*
Theme Name: Home Decor Boom
Theme URI: https://home-decor-boom.example.com
Author: Home Decor Boom
Author URI: https://home-decor-boom.example.com
Description: A warm, editorial home-decor & interior blog theme with a terracotta accent, high-contrast serif headings and clean sans body. Built for Elementor & Elementor Theme Builder with drag-and-drop blog layouts (hero featured, 2-column card grid, 4-column card row) and a single-post template. Includes custom header (logo + nav + search) and footer builder templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homedecor-boom
Tags: blog, elementor, custom-header, custom-menu, featured-images, threaded-comments, translation-ready, editor-style, full-width-template
*/

/* =========================================================
   Home Decor Boom — Design Tokens
   Palette + type reconstructed to match the reference site.
   ========================================================= */
:root {
    /* Brand / accents */
    --hdb-terracotta: #C56A3E;      /* primary accent: buttons, pills, links */
    --hdb-terracotta-dark: #A9552E; /* hover */
    --hdb-sage: #8B9B7E;            /* secondary category pill (e.g. Bedroom) */
    --hdb-sage-dark: #74836A;

    /* Neutrals */
    --hdb-cream: #FAF8F5;          /* page background */
    --hdb-cream-2: #F5F1EB;        /* alt section background */
    --hdb-card: #FFFFFF;           /* card background */
    --hdb-ink: #2B2724;            /* headings */
    --hdb-body: #4A453F;           /* body text */
    --hdb-muted: #8A837B;          /* meta text */
    --hdb-border: #ECE7DF;         /* hairline borders */
    --hdb-overlay: rgba(30, 26, 22, 0.55); /* hero image overlay */

    /* Type */
    --hdb-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
    --hdb-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Radius / shadow */
    --hdb-radius: 14px;
    --hdb-radius-sm: 10px;
    --hdb-radius-pill: 999px;
    --hdb-shadow: 0 10px 30px rgba(43, 39, 36, 0.08);
    --hdb-shadow-sm: 0 4px 14px rgba(43, 39, 36, 0.06);

    /* Layout */
    --hdb-container: 1180px;
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.homedecor-boom {
    margin: 0;
    font-family: var(--hdb-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--hdb-body);
    background: var(--hdb-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hdb-font-head);
    color: var(--hdb-ink);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1.2em; }

a {
    color: var(--hdb-terracotta);
    text-decoration: none;
    transition: color .18s ease;
}
a:hover { color: var(--hdb-terracotta-dark); }

img { max-width: 100%; height: auto; display: block; }

.hdb-container {
    width: 100%;
    max-width: var(--hdb-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Skip link (a11y) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hdb-ink);
    color: #fff;
    padding: 10px 16px;
    z-index: 100000;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================================================
   Fallback Header (used only if no Elementor header is set)
   ========================================================= */
.hdb-fallback-header {
    background: var(--hdb-cream);
    border-bottom: 1px solid var(--hdb-border);
    position: sticky;
    top: 0;
    z-index: 999;
}
.hdb-fallback-header .hdb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    gap: 24px;
}
.hdb-logo {
    font-family: var(--hdb-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hdb-ink);
    letter-spacing: -0.02em;
}
.hdb-logo span { color: var(--hdb-terracotta); font-style: italic; }
.hdb-nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.hdb-nav a {
    color: var(--hdb-body);
    font-weight: 500;
    font-size: .98rem;
    padding: 6px 0;
    position: relative;
}
.hdb-nav a:hover,
.hdb-nav .current-menu-item > a {
    color: var(--hdb-terracotta);
}
.hdb-nav .current-menu-item > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--hdb-terracotta);
    border-radius: 2px;
}
.hdb-search-btn {
    background: none;
    border: 1px solid var(--hdb-border);
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--hdb-ink);
    transition: all .18s ease;
}
.hdb-search-btn:hover { border-color: var(--hdb-terracotta); color: var(--hdb-terracotta); }
.hdb-menu-toggle { display: none; }

/* =========================================================
   Category Pill
   ========================================================= */
.hdb-pill {
    display: inline-block;
    background: var(--hdb-terracotta);
    color: #fff !important;
    font-family: var(--hdb-font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--hdb-radius-pill);
    line-height: 1;
}
.hdb-pill.is-sage { background: var(--hdb-sage); }

/* =========================================================
   Post Card
   ========================================================= */
.hdb-card {
    background: var(--hdb-card);
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius);
    overflow: hidden;
    box-shadow: var(--hdb-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hdb-card:hover { transform: translateY(-4px); box-shadow: var(--hdb-shadow); }
.hdb-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.hdb-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.hdb-card:hover .hdb-card__media img { transform: scale(1.05); }
.hdb-readtime {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(30,26,22,.6);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 11px 5px 9px;
    border-radius: var(--hdb-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}
.hdb-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.hdb-card__title {
    font-size: 1.32rem;
    line-height: 1.25;
    margin: 0;
}
.hdb-card__title a { color: var(--hdb-ink); }
.hdb-card__title a:hover { color: var(--hdb-terracotta); }
.hdb-card__excerpt {
    color: var(--hdb-body);
    font-size: .96rem;
    line-height: 1.6;
    margin: 0;
}
.hdb-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--hdb-muted);
    font-size: .85rem;
}
.hdb-card__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--hdb-cream-2);
}
.hdb-card__meta .dot { opacity: .5; }

/* =========================================================
   Grid helpers (used by archive + template parts)
   ========================================================= */
.hdb-grid { display: grid; gap: 28px; }
.hdb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hdb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hdb-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================
   Hero Featured (Image 2 layout)
   ========================================================= */
.hdb-hero {
    position: relative;
    border-radius: var(--hdb-radius);
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--hdb-shadow);
}
.hdb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hdb-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,26,22,0) 30%, var(--hdb-overlay) 100%);
}
.hdb-hero__content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 40px;
    max-width: 620px;
}
.hdb-hero__content .hdb-card__title,
.hdb-hero__title {
    color: #fff;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.12;
    margin: 14px 0 12px;
}
.hdb-hero__excerpt { color: rgba(255,255,255,.9); font-size: 1.02rem; max-width: 520px; }
.hdb-hero__meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: rgba(255,255,255,.85); font-size: .9rem; }
.hdb-hero__meta img { width: 30px; height: 30px; border-radius: 50%; }

/* =========================================================
   Buttons
   ========================================================= */
.hdb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hdb-terracotta);
    color: #fff !important;
    font-weight: 600;
    font-size: .95rem;
    padding: 12px 22px;
    border-radius: var(--hdb-radius-pill);
    border: none;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.hdb-btn:hover { background: var(--hdb-terracotta-dark); transform: translateX(2px); }
.hdb-btn .arrow { transition: transform .2s ease; }
.hdb-btn:hover .arrow { transform: translateX(3px); }

/* =========================================================
   Section headings for archive
   ========================================================= */
.hdb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 46px 0 26px;
    gap: 16px;
    flex-wrap: wrap;
}
.hdb-section-head h2 { margin: 0; }
.hdb-section-head .hdb-sub { color: var(--hdb-muted); font-size: .95rem; }

/* =========================================================
   Single Post
   ========================================================= */
.hdb-single { padding: 40px 0 60px; }
.hdb-single__header { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.hdb-single__title { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 16px 0; }
.hdb-single__meta {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; color: var(--hdb-muted); font-size: .95rem;
}
.hdb-single__meta img { width: 40px; height: 40px; border-radius: 50%; }
.hdb-single__hero {
    max-width: 1000px;
    margin: 0 auto 40px;
    border-radius: var(--hdb-radius);
    overflow: hidden;
    box-shadow: var(--hdb-shadow);
}
.hdb-single__hero img { width: 100%; }
.hdb-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--hdb-body);
}
.hdb-content h2, .hdb-content h3 { margin-top: 1.6em; }
.hdb-content img { border-radius: var(--hdb-radius-sm); margin: 1.6em 0; }
.hdb-content blockquote {
    border-left: 4px solid var(--hdb-terracotta);
    margin: 1.8em 0;
    padding: .4em 0 .4em 24px;
    font-family: var(--hdb-font-head);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--hdb-ink);
}
.hdb-content ul, .hdb-content ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.hdb-content li { margin-bottom: .5em; }

/* =========================================================
   Pagination
   ========================================================= */
.hdb-pagination { display: flex; justify-content: center; gap: 8px; margin: 50px 0 20px; flex-wrap: wrap; }
.hdb-pagination a, .hdb-pagination span {
    min-width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--hdb-border);
    color: var(--hdb-body);
    font-weight: 600;
    padding: 0 10px;
    background: #fff;
}
.hdb-pagination .current { background: var(--hdb-terracotta); color: #fff; border-color: var(--hdb-terracotta); }
.hdb-pagination a:hover { border-color: var(--hdb-terracotta); color: var(--hdb-terracotta); }

/* =========================================================
   Fallback Footer
   ========================================================= */
.hdb-fallback-footer {
    background: var(--hdb-ink);
    color: #cfc7bd;
    padding: 54px 0 26px;
    margin-top: 70px;
}
.hdb-fallback-footer a { color: #e7ddceff; }
.hdb-fallback-footer a:hover { color: #fff; }
.hdb-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.hdb-fallback-footer h4 { color: #fff; font-family: var(--hdb-font-head); margin-bottom: 14px; }
.hdb-fallback-footer ul { list-style: none; padding: 0; margin: 0; }
.hdb-fallback-footer li { margin-bottom: 8px; }
.hdb-foot-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 36px; padding-top: 20px;
    font-size: .85rem; color: #9a9188;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* =========================================================
   WP core alignment / caption / gallery
   ========================================================= */
.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { font-size: .85rem; color: var(--hdb-muted); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { } /* required by theme check */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px; width: 1px; overflow: hidden;
    position: absolute !important; word-wrap: normal !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
    .hdb-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hdb-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .hdb-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) {
    .hdb-nav { display: none; }
    .hdb-menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: 50%;
        border: 1px solid var(--hdb-border); background: none; cursor: pointer;
    }
    .hdb-nav.is-open {
        display: block; position: absolute; top: 74px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--hdb-border);
        padding: 16px 24px;
    }
    .hdb-nav.is-open ul { flex-direction: column; gap: 4px; }
    .hdb-hero__content { padding: 26px; }
}
@media (max-width: 640px) {
    .hdb-grid--2, .hdb-grid--3, .hdb-grid--4 { grid-template-columns: 1fr; }
    .hdb-foot-grid { grid-template-columns: 1fr; }
    body.homedecor-boom { font-size: 16px; }
}

/* =========================================================
   CATEGORY ARCHIVE PAGE
   ========================================================= */

/* Soft banner */
.hdb-cat-banner {
    background: linear-gradient(180deg, #F6ECE4 0%, #F9F3EC 100%);
    padding: 34px 0 30px;
    border-bottom: 1px solid var(--hdb-border);
}

/* Breadcrumb */
.hdb-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hdb-font-body);
    font-size: 0.82rem;
    color: var(--hdb-muted);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.hdb-crumb a { color: var(--hdb-muted); text-decoration: none; }
.hdb-crumb a:hover { color: var(--hdb-terracotta); }
.hdb-crumb__sep { opacity: 0.5; }
.hdb-crumb__current { color: var(--hdb-ink); font-weight: 600; }

/* Title + description */
.hdb-cat-title {
    font-family: var(--hdb-font-head);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    color: var(--hdb-ink);
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.hdb-cat-desc {
    font-family: var(--hdb-font-body);
    color: var(--hdb-muted);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 620px;
    margin-bottom: 22px;
}
.hdb-cat-desc p { margin: 0; }

/* Filter tab bar */
.hdb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hdb-tab {
    display: inline-block;
    font-family: var(--hdb-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--hdb-body);
    background: #fff;
    border: 1px solid var(--hdb-border);
    padding: 9px 20px;
    border-radius: var(--hdb-radius-pill);
    text-decoration: none;
    transition: all 0.18s ease;
    line-height: 1.2;
}
.hdb-tab:hover {
    border-color: var(--hdb-terracotta);
    color: var(--hdb-terracotta);
}
.hdb-tab.is-active {
    background: var(--hdb-terracotta);
    border-color: var(--hdb-terracotta);
    color: #fff;
}
.hdb-tab.is-active:hover { color: #fff; background: var(--hdb-terracotta-dark); }

/* Two-column layout: content + sidebar */
.hdb-cat-main { padding-top: 34px; padding-bottom: 20px; }
.hdb-cat-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
.hdb-cat-content { min-width: 0; }

/* Category grid: match reference 2-up on desktop */
.hdb-cat-content .hdb-grid--2 { gap: 28px; }

.hdb-cat-empty {
    text-align: center;
    padding: 70px 20px;
    border: 1px dashed var(--hdb-border);
    border-radius: var(--hdb-radius);
}

/* =========================================================
   CATEGORY SIDEBAR
   ========================================================= */
.hdb-cat-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.hdb-sb-box {
    background: #fff;
    border: 1px solid var(--hdb-border);
    border-radius: 16px;
    padding: 22px;
}
.hdb-sb-title {
    font-family: var(--hdb-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hdb-muted);
    margin-bottom: 16px;
}

/* Popular in Category (numbered) */
.hdb-pop { list-style: none; margin: 0; padding: 0; }
.hdb-pop__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hdb-pop__item + .hdb-pop__item { margin-top: 16px; }
.hdb-pop__num {
    font-family: var(--hdb-font-head);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: #E3D5C8;
    min-width: 22px;
    flex: 0 0 auto;
}
.hdb-pop__thumb {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #efe9e1;
}
.hdb-pop__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    transition: transform 0.4s ease;
}
.hdb-pop__item:hover .hdb-pop__thumb img { transform: scale(1.05); }
.hdb-pop__text { flex: 1; min-width: 0; }
.hdb-pop__title {
    margin: 0;
    font-family: var(--hdb-font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.hdb-pop__title a {
    color: var(--hdb-ink);
    text-decoration: none;
    transition: color 0.18s ease;
}
.hdb-pop__title a:hover { color: var(--hdb-terracotta); }

/* Browse by Category (list with icons + counts) */
.hdb-browse { list-style: none; margin: 0; padding: 0; }
.hdb-browse__item {
    border-radius: 8px;
    transition: background-color 0.16s ease;
}
.hdb-browse__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
}
.hdb-cat-ico { color: var(--hdb-terracotta); flex: 0 0 auto; transition: color 0.16s ease; }
.hdb-browse__name {
    flex: 1;
    font-family: var(--hdb-font-body);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--hdb-ink);
    transition: color 0.16s ease;
}
.hdb-browse__count {
    font-family: var(--hdb-font-body);
    font-size: 0.86rem;
    color: var(--hdb-muted);
    flex: 0 0 auto;
}
.hdb-browse__item:hover { background: #F7F1EA; }
.hdb-browse__item:hover .hdb-browse__name { color: var(--hdb-terracotta); }
/* Active category highlight (Image 4) */
.hdb-browse__item.is-active { background: #F1EbE3; }
.hdb-browse__item.is-active .hdb-browse__name { color: var(--hdb-ink); font-weight: 600; }

.hdb-noimg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #efe9e1 0%, #e4dcd0 100%);
}

/* =========================================================
   THEMED COMMENT FORM & LIST (single posts)
   ========================================================= */
.hdb-comments {
    max-width: 760px;
    margin: 54px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--hdb-border);
}
.hdb-comments > h3,
.comments-title,
.comment-reply-title {
    font-family: var(--hdb-font-head);
    font-size: 1.6rem;
    color: var(--hdb-ink);
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Comment list */
.comment-list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}
.comment-list li { list-style: none; }
.comment-body {
    background: #fff;
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--hdb-shadow-sm);
}
.comment-list .children {
    list-style: none;
    margin: 0 0 0 32px;
    padding: 0;
}
.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.comment-author .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}
.comment-author .fn {
    font-family: var(--hdb-font-head);
    font-weight: 700;
    font-style: normal;
    color: var(--hdb-ink);
    font-size: 1.05rem;
}
.comment-author .says { display: none; }
.comment-metadata {
    font-family: var(--hdb-font-body);
    font-size: 0.82rem;
    color: var(--hdb-muted);
    margin-bottom: 8px;
}
.comment-metadata a { color: var(--hdb-muted); text-decoration: none; }
.comment-metadata a:hover { color: var(--hdb-terracotta); }
.comment-content {
    font-family: var(--hdb-font-body);
    color: var(--hdb-body);
    font-size: 1rem;
    line-height: 1.7;
}
.comment-content p { margin: 0 0 0.8em; }
.reply { margin-top: 8px; }
.comment-reply-link {
    display: inline-block;
    font-family: var(--hdb-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hdb-terracotta);
    text-decoration: none;
    padding: 5px 14px;
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius-pill);
    transition: all 0.18s ease;
}
.comment-reply-link:hover {
    background: var(--hdb-terracotta);
    color: #fff;
    border-color: var(--hdb-terracotta);
}
.bypostauthor > .comment-body {
    border-color: var(--hdb-terracotta);
    background: #FCF6F1;
}

/* Comment form */
.comment-respond {
    background: var(--hdb-cream-2);
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius);
    padding: 30px;
}
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* Put name + email side by side */
.comment-form-author,
.comment-form-email {
    flex: 1 1 calc(50% - 8px);
}
.comment-form {
    flex-flow: row wrap;
}
.comment-form-comment,
.comment-form-url,
.comment-form-cookies-consent,
.comment-form .form-submit {
    flex: 1 1 100%;
}
.comment-form label {
    font-family: var(--hdb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hdb-ink);
    margin-bottom: 6px;
}
.comment-form label .required { color: var(--hdb-terracotta); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    font-family: var(--hdb-font-body);
    font-size: 0.98rem;
    color: var(--hdb-body);
    background: #fff;
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius-sm);
    padding: 12px 14px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--hdb-terracotta);
    box-shadow: 0 0 0 3px rgba(197, 106, 62, 0.12);
}
.comment-form textarea { min-height: 130px; resize: vertical; }
.comment-form-cookies-consent {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.comment-form-cookies-consent input { margin: 0; accent-color: var(--hdb-terracotta); }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--hdb-muted); }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"],
.comment-form #submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hdb-terracotta);
    color: #fff;
    font-family: var(--hdb-font-body);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 13px 28px;
    border: none;
    border-radius: var(--hdb-radius-pill);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.comment-form input[type="submit"]:hover,
.comment-form #submit:hover {
    background: var(--hdb-terracotta-dark);
    transform: translateY(-1px);
}
.comment-notes,
.logged-in-as {
    font-family: var(--hdb-font-body);
    font-size: 0.88rem;
    color: var(--hdb-muted);
    flex: 1 1 100%;
    margin: 0 0 4px;
}
.comment-notes a,
.logged-in-as a { color: var(--hdb-terracotta); }
.no-comments {
    font-family: var(--hdb-font-body);
    color: var(--hdb-muted);
    font-style: italic;
}

/* =========================================================
   CATEGORY PAGE RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
    .hdb-cat-layout { grid-template-columns: 1fr; }
    .hdb-cat-sidebar { position: static; }
    .hdb-cat-content .hdb-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
    .comment-form-author,
    .comment-form-email { flex: 1 1 100%; }
}
@media (max-width: 640px) {
    .hdb-cat-content .hdb-grid--2 { grid-template-columns: 1fr; }
    .comment-respond { padding: 22px; }
}

/* =========================================================
   SIDEBAR: SUBSCRIBE BOX
   ========================================================= */
.hdb-subscribe {
    background: #F6ECE4;
    border: 1px solid var(--hdb-border);
    border-radius: 16px;
    padding: 24px 22px;
    text-align: center;
}
.hdb-subscribe__title {
    font-family: var(--hdb-font-head);
    font-size: 1.3rem;
    color: var(--hdb-ink);
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.hdb-subscribe__sub {
    font-family: var(--hdb-font-body);
    font-size: 0.92rem;
    color: var(--hdb-muted);
    margin: 0 0 16px;
}
.hdb-subscribe__form { display: flex; flex-direction: column; gap: 10px; }
.hdb-subscribe__input {
    font-family: var(--hdb-font-body);
    font-size: 0.95rem;
    color: var(--hdb-body);
    background: #fff;
    border: 1px solid var(--hdb-border);
    border-radius: var(--hdb-radius-sm);
    padding: 12px 14px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hdb-subscribe__input:focus {
    outline: none;
    border-color: var(--hdb-terracotta);
    box-shadow: 0 0 0 3px rgba(197, 106, 62, 0.12);
}
.hdb-subscribe__btn {
    font-family: var(--hdb-font-body);
    font-weight: 600;
    font-size: 0.98rem;
    color: #fff;
    background: var(--hdb-terracotta);
    border: none;
    border-radius: var(--hdb-radius-sm);
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.hdb-subscribe__btn:hover { background: var(--hdb-terracotta-dark); transform: translateY(-1px); }

/* =========================================================
   SIDEBAR: PINTEREST GRID
   ========================================================= */
.hdb-pin__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.hdb-pin__cell {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #efe9e1;
}
.hdb-pin__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform 0.4s ease;
}
.hdb-pin__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(197, 106, 62, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
    pointer-events: none;
}
.hdb-pin__cell:hover::after { opacity: 1; }
.hdb-pin__cell:hover img { transform: scale(1.08); }
.hdb-pin__follow {
    display: block;
    text-align: center;
    font-family: var(--hdb-font-body);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--hdb-terracotta);
    text-decoration: none;
    transition: color 0.18s ease;
}
.hdb-pin__follow:hover { color: var(--hdb-terracotta-dark); }

/* =========================================================
   NUMBERED PILL PAGINATION (Prev 1 2 3 Next)
   ========================================================= */
.hdb-numpag {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 46px 0 10px;
}
.hdb-numpag a,
.hdb-numpag span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: var(--hdb-radius-pill);
    font-family: var(--hdb-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hdb-body);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.18s ease;
}
.hdb-numpag a:hover {
    color: var(--hdb-terracotta);
    background: #F6ECE4;
}
.hdb-numpag .current {
    background: var(--hdb-terracotta);
    color: #fff;
    border-color: var(--hdb-terracotta);
}
.hdb-numpag .prev,
.hdb-numpag .next {
    color: var(--hdb-body);
    font-weight: 600;
}
.hdb-numpag .prev:hover,
.hdb-numpag .next:hover { color: var(--hdb-terracotta); background: transparent; }
.hdb-numpag .dots { border: none; background: transparent; }

/* =========================================================
   FOOTER (four-column, matches reference)
   ========================================================= */
.hdb-foot-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap: 44px;
}
.hdb-foot-col h4 {
    color: #fff;
    font-family: var(--hdb-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.hdb-foot-logo {
    font-family: var(--hdb-font-head);
    font-size: 1.4rem !important;
    margin-bottom: 14px !important;
}
.hdb-foot-logo span { color: var(--hdb-terracotta); font-style: italic; }
.hdb-foot-about {
    font-family: var(--hdb-font-body);
    font-size: 0.9rem;
    line-height: 1.7;
    color: #b3aaa0;
    max-width: 300px;
    margin: 0 0 18px;
}
.hdb-foot-social { display: flex; gap: 10px; }
.hdb-foot-social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cfc7bd;
    font-family: var(--hdb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
}
.hdb-foot-social a:hover {
    background: var(--hdb-terracotta);
    border-color: var(--hdb-terracotta);
    color: #fff;
}
.hdb-foot-list { list-style: none; padding: 0; margin: 0; }
.hdb-foot-list li { margin-bottom: 10px; }
.hdb-foot-list a {
    font-family: var(--hdb-font-body);
    font-size: 0.92rem;
    color: #b3aaa0;
    text-decoration: none;
    transition: color 0.18s ease;
}
.hdb-foot-list a:hover { color: #fff; }

/* Recent posts with thumbnails */
.hdb-foot-recent { list-style: none; padding: 0; margin: 0; }
.hdb-foot-recent__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.hdb-foot-recent__thumb {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}
.hdb-foot-recent__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.hdb-foot-recent__noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.hdb-foot-recent__title {
    font-family: var(--hdb-font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    color: #cfc7bd;
    text-decoration: none;
    transition: color 0.18s ease;
    font-weight: 500;
}
.hdb-foot-recent__title:hover { color: #fff; }

.hdb-foot-bottom a { color: #b3aaa0; text-decoration: none; }
.hdb-foot-bottom a:hover { color: #fff; }

/* Footer responsive */
@media (max-width: 960px) {
    .hdb-foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
    .hdb-foot-grid { grid-template-columns: 1fr; }
}