/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: Child theme for Hello Elementor
Version: 1.0
*/

:root {
    /* Brand Colors */
    --primary: #116F59;
    --orange: #FF6B35;
    --yellow: #FFD23F;
    --blue: #4A90D9;
    --cream: #fdf9f2;
    --cream-2: #f5efe0;
    --green: #15803d;
    --green-mid: #22c55e;
    --green-light: #86efac;
    --green-pale: #f0fdf4;
    --green-glow: rgba(34,197,94,0.18);
    --yellow-pale: #fef9c3;
    --teal: #0891b2;
    --charcoal: #111827;
    --dark: #1f2937;
    --mid: #374151;
    --muted: #9ca3af;
    --white: #ffffff;

    /* Typography */
    --font-display: 'Luckiest Guy', cursive;
    --font-bold: 'Bangers', cursive;
    --font-body: 'Nunito', sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Spacing */
    --pad: clamp(80px, 11vw, 140px);
    --gap: clamp(20px, 5vw, 80px);
    --r: 16px;
    --r2: 24px;
}


/* ============================================================
   PAGE-SPECIFIC BACKGROUNDS
   Targeted by WordPress page ID.
   ============================================================ */

/* ABOUT — ID 48957 */
.page-id-48957 body {
    font-family: var(--font-body);
    color: var(--charcoal);
    background: var(--cream);
    background-image:
        radial-gradient(ellipse at 0% 0%,    rgba(34,197,94,0.10)  0%, transparent 40%),
        radial-gradient(ellipse at 100% 15%,  rgba(251,191,36,0.08) 0%, transparent 38%),
        radial-gradient(ellipse at 0% 55%,    rgba(34,197,94,0.07)  0%, transparent 40%),
        radial-gradient(ellipse at 100% 70%,  rgba(249,115,22,0.06) 0%, transparent 38%),
        radial-gradient(ellipse at 50% 100%,  rgba(34,197,94,0.09)  0%, transparent 45%),
        linear-gradient(160deg, #fdf9f2 0%, #f0fdf4 35%, #fdf9f2 65%, #f0fdf4 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    line-height: 1.6;
}

.page-id-48957 body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9000;
    opacity: 0.5;
}

/* CONTACT — ID 49236 */
.page-id-49236 body {
    font-family: var(--font-body);
    color: #f5f0e8;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 15% 10%,   rgba(34,197,94,0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 88% 20%,   rgba(34,197,94,0.07) 0%, transparent 40%),
        radial-gradient(ellipse at 10% 65%,   rgba(34,197,94,0.09) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%,   rgba(251,191,36,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%,  rgba(34,197,94,0.10) 0%, transparent 45%),
        linear-gradient(155deg,
            #060d07 0%,
            #0a1a0d 20%,
            #060a06 42%,
            #0d1f10 62%,
            #060808 82%,
            #0a1508 100%
        );
    background-attachment: fixed;
    overflow-x: hidden;
    line-height: 1.6;
}

.page-id-49236 body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 100;
    opacity: 0.45;
}

/* PRESS — ID 53394 */
.page-id-53394 body {
    font-family: var(--font-body);
    color: #f5f0e8;
    background-color: #0a0f0a;
    background-image:
        radial-gradient(ellipse at 15% 8%,    rgba(74,222,128,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 25%,   rgba(74,222,128,0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 8% 58%,    rgba(74,222,128,0.06) 0%, transparent 42%),
        radial-gradient(ellipse at 92% 75%,   rgba(74,222,128,0.04) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 95%,   rgba(74,222,128,0.05) 0%, transparent 45%),
        linear-gradient(168deg,
            #0a0f0a 0%,
            #0d1a0f 18%,
            #080d08 38%,
            #0f1a0c 58%,
            #0a0b0a 78%,
            #0d1408 100%
        );
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
    line-height: 1.6;
}

.page-id-53394 body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
}


/* ============================================================
   BLOG POST DESIGN SYSTEM
   Font stack: Playfair Display (H1) / Fraunces (H2) /
               Syne (H3) / DM Sans (body)
   Scoped to .single-post — zero impact on rest of site.

   POST STRUCTURE:
   [1] Hero        — .post-hero (Elementor section CSS class)
   [2] Intro       — .post-intro (Elementor widget CSS class)
   [3] TOC         — standard Elementor widget, no class needed
   [4] Featured    — first image widget after TOC
   [5] Body        — standard Text Editor + Heading widgets
   ============================================================ */

/* --- PAGE BACKGROUND --- */
.single-post body {
    background-color: #F9F8F4 !important;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- CONTENT COLUMN CONSTRAINT ---
   Centers and constrains all post content to 700px. */
.single-post .elementor-widget-wrap {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
}


/* ============================================================
   [1] HERO SECTION
   Apply CSS class "post-hero" to the Elementor section.
   Seamless with page background. No image. Typography only.
   ============================================================ */

.single-post .elementor-section.post-hero,
.single-post .e-con.post-hero {
    background-color: #F9F8F4 !important;
    width: 100% !important;
    padding-top: 72px !important;
    padding-bottom: 56px !important;
    border-bottom: 1px solid rgba(17,111,89,0.08) !important;
}

/* Hero inner container — constrained to 700px like content */
.single-post .elementor-section.post-hero .elementor-widget-wrap,
.single-post .e-con.post-hero .elementor-widget-wrap {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Green rule — appears above category tag via ::before on hero section */
.single-post .elementor-section.post-hero::before,
.single-post .e-con.post-hero::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: #116F59;
    border-radius: 2px;
    margin: 0 auto 0 calc((100% - 700px) / 2);
    margin-bottom: 0;
}

/* Category tag — apply CSS class "post-category" to Heading widget, use H4 */
.single-post .post-category .elementor-heading-title {
    font-family: 'Syne', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #116F59 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 1rem !important;
    margin-top: 0.75rem !important;
}

/* Hero H1 title */
.single-post .elementor-section.post-hero h1.elementor-heading-title,
.single-post .e-con.post-hero h1.elementor-heading-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    color: #1A1A1A !important;
    margin-bottom: 1.5rem !important;
}

/* Metadata row — apply CSS class "post-meta" to Text Editor widget */
.single-post .post-meta .elementor-widget-container,
.single-post .post-meta p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Metadata separator dots */
.single-post .post-meta p span {
    margin: 0 6px;
    opacity: 0.5;
}


/* ============================================================
   [2] INTRO PARAGRAPH
   Apply CSS class "post-intro" to the first Text Editor widget.
   Renders larger and slightly darker than standard body copy.
   ============================================================ */

.single-post .post-intro .elementor-widget-container p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    color: #2D2D2D !important;
    margin-bottom: 1.75rem !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .single-post .post-intro .elementor-widget-container p {
        font-size: 19px !important;
    }
    .single-post .elementor-section.post-hero h1.elementor-heading-title,
    .single-post .e-con.post-hero h1.elementor-heading-title {
        font-size: 40px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .single-post .post-intro .elementor-widget-container p {
        font-size: 17px !important;
        line-height: 1.8 !important;
    }
    .single-post .elementor-section.post-hero h1.elementor-heading-title,
    .single-post .e-con.post-hero h1.elementor-heading-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
    .single-post .elementor-section.post-hero,
    .single-post .e-con.post-hero {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* --- H1 --- */
.single-post .elementor-widget-heading h1.elementor-heading-title,
.single-post h1.entry-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #1A1A1A !important;
    margin-bottom: 1.2rem !important;
}

/* --- H2 --- */
.single-post .elementor-widget-heading h2.elementor-heading-title {
    font-family: 'Fraunces', serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #1A1A1A !important;
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
    position: relative;
}

/* Green accent bar above H2 */
.single-post .elementor-widget-heading h2.elementor-heading-title::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: #116F59;
    margin-bottom: 0.75rem;
    border-radius: 2px;
}

/* --- H3 --- */
.single-post .elementor-widget-heading h3.elementor-heading-title {
    font-family: 'Syne', sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    color: #1A1A1A !important;
    margin-top: 2.25rem !important;
    margin-bottom: 0.65rem !important;
}

/* --- H4 --- */
.single-post .elementor-widget-heading h4.elementor-heading-title {
    font-family: 'Syne', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #116F59 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.4rem !important;
}

/* --- H5 / H6 --- */
.single-post .elementor-widget-heading h5.elementor-heading-title,
.single-post .elementor-widget-heading h6.elementor-heading-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #374151 !important;
    letter-spacing: 0.01em !important;
}

/* --- BODY COPY --- */
.single-post .elementor-widget-text-editor p,
.single-post .elementor-widget-text-editor .font-claude-response-body {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #3D3D3D !important;
    margin-bottom: 1.5rem !important;
    word-break: normal !important;
    white-space: normal !important;
}

.single-post .elementor-widget-text-editor p strong {
    font-weight: 600 !important;
    color: #1A1A1A !important;
}

.single-post .elementor-widget-text-editor p em {
    font-style: italic !important;
    color: #4b5563 !important;
}


/* ============================================================
   LISTS
   ============================================================ */

/* --- UNORDERED --- */
.single-post .elementor-widget-text-editor ul {
    padding-left: 0 !important;
    list-style: none !important;
    margin-bottom: 1.6rem !important;
}

.single-post .elementor-widget-text-editor ul li {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #3D3D3D !important;
    padding-left: 1.6rem !important;
    position: relative;
    margin-bottom: 0.6rem !important;
    list-style: none !important;
}

.single-post .elementor-widget-text-editor ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #116F59;
}

/* --- ORDERED --- */
.single-post .elementor-widget-text-editor ol {
    padding-left: 0 !important;
    list-style: none !important;
    counter-reset: post-counter;
    margin-bottom: 1.6rem !important;
}

.single-post .elementor-widget-text-editor ol li {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #3D3D3D !important;
    padding-left: 2.4rem !important;
    position: relative;
    margin-bottom: 0.65rem !important;
    counter-increment: post-counter;
    list-style: none !important;
}

.single-post .elementor-widget-text-editor ol li::before {
    content: counter(post-counter);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #116F59;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   BLOCKQUOTE
   ============================================================ */
.single-post .elementor-widget-text-editor blockquote {
    margin: 2.5rem 0 !important;
    padding: 1.5rem 2rem !important;
    background: #f0fdf4 !important;
    border-left: 4px solid #116F59 !important;
    border-radius: 0 12px 12px 0 !important;
}

.single-post .elementor-widget-text-editor blockquote p {
    font-family: 'Fraunces', serif !important;
    font-size: 1.2rem !important;
    font-style: italic !important;
    color: #1f2937 !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   LINKS
   ============================================================ */
.single-post .elementor-widget-text-editor a {
    color: #4A90D9 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(74,144,217,0.35) !important;
    text-underline-offset: 3px !important;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.single-post .elementor-widget-text-editor a:hover {
    color: #2563eb !important;
    text-decoration-color: #2563eb !important;
}


/* ============================================================
   IMAGES
   ============================================================ */
.single-post .elementor-widget-image img,
.single-post .elementor-widget-text-editor img {
    border-radius: 12px !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}


/* ============================================================
   DIVIDER
   ============================================================ */
.single-post .elementor-widget-divider .elementor-divider-separator {
    border-color: #d1fae5 !important;
}


/* ============================================================
   SECTION SPACING
   ============================================================ */
.single-post .elementor-widget-text-editor,
.single-post .elementor-widget-heading {
    margin-bottom: 0.25rem !important;
}


/* ============================================================
   RESPONSIVE — TABLET (768px–1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    .single-post .elementor-widget-wrap {
        max-width: 90% !important;
    }

    .single-post .elementor-widget-heading h1.elementor-heading-title,
    .single-post h1.entry-title {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    .single-post .elementor-widget-heading h2.elementor-heading-title {
        font-size: 28px !important;
    }

    .single-post .elementor-widget-heading h3.elementor-heading-title {
        font-size: 20px !important;
    }

    .single-post .elementor-widget-text-editor p,
    .single-post .elementor-widget-text-editor ul li,
    .single-post .elementor-widget-text-editor ol li {
        font-size: 17px !important;
        line-height: 1.75 !important;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (below 768px)
   ============================================================ */
@media (max-width: 767px) {

    .single-post .elementor-widget-wrap {
        max-width: 92% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .single-post .elementor-widget-heading h1.elementor-heading-title,
    .single-post h1.entry-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    .single-post .elementor-widget-heading h2.elementor-heading-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .single-post .elementor-widget-heading h3.elementor-heading-title {
        font-size: 18px !important;
    }

    .single-post .elementor-widget-text-editor p,
    .single-post .elementor-widget-text-editor ul li,
    .single-post .elementor-widget-text-editor ol li {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .single-post .elementor-widget-text-editor blockquote p {
        font-size: 1.05rem !important;
    }
}


/* ============================================================
   YOUR CUSTOM CSS BELOW THIS LINE
   ============================================================ */