/* =========================================
   CAMPFIRES
   Shared styles for:
   - Campfires landing page
   - Paws and Pages
========================================= */


/* =========================================
   COLOR PALETTE
========================================= */

:root{
    --bg:#fffaf4;
    --bg-soft:#fff3e5;
    --card:#ffffff;

    --text:#3f352f;
    --muted:#74665d;

    --forest:#36563d;
    --forest-dark:#29442f;

    --fire:#c9653d;
    --fire-dark:#a94f2f;
    --fire-light:#f8d2b5;

    --gold:#e5aa3d;
    --gold-light:#fff0bd;

    --border:#eed8c5;

    --shadow:
        0 14px 38px rgba(92,61,42,.10);

    --shadow-hover:
        0 20px 46px rgba(92,61,42,.16);
}


/* =========================================
   RESET
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.7;
    color:var(--text);
    background:var(--bg);
}

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


/* =========================================
   LINKS
========================================= */

a{
    color:inherit;
    text-decoration:none;
}


/* =========================================
   ACCESSIBILITY
========================================= */

a:focus-visible,
button:focus-visible{
    outline:3px solid rgba(229,170,61,.75);
    outline-offset:4px;
}


/* =========================================
   SITE HEADER
========================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:100;

    width:100%;

    background:rgba(54,86,61,.97);
    border-bottom:1px solid rgba(255,255,255,.12);
}

.site-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;

    gap:28px;

    max-width:1200px;
    margin:auto;
    padding:18px 20px;
}

.site-nav a{
    color:white;
    font-weight:700;

    transition:
        color .25s ease,
        transform .25s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible{
    color:var(--gold-light);
    transform:translateY(-1px);
}


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

h1,
h2,
h3{
    text-wrap:balance;
}

h1{
    margin:.2em 0 .3em;

    color:var(--fire-dark);

    font-size:clamp(3rem,7vw,5.5rem);
    line-height:1;
}

h2{
    margin:0 0 22px;

    color:var(--forest);

    font-size:clamp(2rem,4.5vw,3.2rem);
    line-height:1.15;
}

h3{
    margin:0 0 12px;

    color:var(--forest);

    font-size:1.35rem;
    line-height:1.25;
}

p{
    color:var(--muted);
    font-size:1.06rem;
}

strong{
    color:var(--text);
}


/* =========================================
   EYEBROW
========================================= */

.eyebrow{
    margin:0 0 12px;

    color:var(--fire-dark);

    font-size:.8rem;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}


/* =========================================
   GENERAL LAYOUT
========================================= */

main{
    width:100%;
    overflow:hidden;
}

section{
    width:100%;
    padding:75px 20px;
}

.centered{
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.section-heading{
    max-width:780px;
    margin:0 auto 45px;
}


/* =========================================
   HERO
========================================= */

.campfire-hero{
    position:relative;

    padding:115px 20px 90px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255,228,174,.75),
            transparent 34%
        ),
        linear-gradient(
            to bottom,
            #fff0d9,
            #fff8ef 58%,
            var(--bg)
        );
}

.campfire-hero::before,
.campfire-hero::after{
    position:absolute;
    pointer-events:none;

    color:rgba(229,170,61,.55);

    content:"✦";
}

.campfire-hero::before{
    top:76px;
    left:12%;
    font-size:1.6rem;
}

.campfire-hero::after{
    top:130px;
    right:14%;
    font-size:1.1rem;
}

.hero-content{
    position:relative;
    z-index:1;

    max-width:800px;
    margin:auto;
}

.hero-content p{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
}

.hero-intro{
    color:var(--text);
    font-size:1.35rem;
    font-weight:650;
}


/* =========================================
   TRAIL SECTIONS
========================================= */

.trail-section{
    background:var(--bg);
}

.trail-section:nth-of-type(even){
    background:var(--bg-soft);
}

.trail-card{
    max-width:880px;
    margin:auto;
    padding:52px 44px;

    background:var(--card);
    border:1px solid var(--border);
    border-radius:28px;

    box-shadow:var(--shadow);
}

.trail-card > :first-child{
    margin-top:0;
}

.trail-card > :last-child{
    margin-bottom:0;
}


/* =========================================
   CAMPFIRE GRID SECTION
========================================= */

.campfire-grid-section{
    padding:80px 20px;
    background:linear-gradient(
        to bottom,
        var(--bg-soft),
        var(--bg)
    );
}

.campfire-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:28px;

    width:100%;
    max-width:1200px;
    margin:auto;
}


/* =========================================
   CAMPFIRE CARDS
========================================= */

.campfire-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:100%;

    padding:36px 30px;

    text-align:center;

    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;

    box-shadow:var(--shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.campfire-card:hover{
    transform:translateY(-6px);
    border-color:var(--fire-light);
    box-shadow:var(--shadow-hover);
}

.campfire-card h2{
    margin-bottom:14px;
    font-size:2rem;
}

.campfire-card p{
    overflow-wrap:anywhere;
}

.campfire-icon{
    margin:0 0 10px;

    color:var(--fire);

    font-size:3.2rem;
    line-height:1;
}

.tagline{
    margin:0 0 20px;

    color:var(--fire-dark);

    font-size:1.08rem;
    font-style:italic;
    font-weight:650;
}

.campfire-card .trail-button{
    align-self:center;
    margin-top:auto;
}

.coming-soon-card{
    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #fff6ea
        );
}


/* =========================================
   BUTTONS
========================================= */

.button-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;

    gap:18px;

    margin-top:34px;
}

.trail-button{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:50px;

    padding:13px 25px;

    color:white;
    background:var(--fire);
    border:2px solid var(--fire);
    border-radius:999px;

    font-weight:750;
    line-height:1.25;
    text-align:center;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.trail-button:hover,
.trail-button:focus-visible{
    color:white;
    background:var(--fire-dark);
    border-color:var(--fire-dark);

    transform:translateY(-2px);

    box-shadow:
        0 9px 22px rgba(169,79,47,.2);
}

.trail-button.secondary{
    color:var(--forest);
    background:white;
    border-color:var(--forest);
}

.trail-button.secondary:hover,
.trail-button.secondary:focus-visible{
    color:white;
    background:var(--forest);
    border-color:var(--forest);
}

.disabled-button{
    cursor:default;
    pointer-events:none;

    color:#7a6d64;
    background:#eee5dd;
    border-color:#eee5dd;
}


/* =========================================
   CAMPFIRE STEPS
========================================= */

.campfire-steps,
.reading-steps{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(185px,1fr));

    gap:20px;

    margin-top:38px;
}

.campfire-step,
.reading-step{
    min-width:0;
    padding:25px 20px;

    background:#fffaf4;
    border:1px solid var(--border);
    border-radius:20px;

    text-align:center;
}

.step-icon{
    margin:0 0 10px;
    font-size:2.4rem;
    line-height:1;
}

.campfire-step p:last-child,
.reading-step p:last-child{
    margin-bottom:0;
}


/* =========================================
   AGREEMENT GRID
========================================= */

.agreement-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(230px,1fr));

    gap:20px;

    margin-top:38px;
}

.agreement-card{
    min-width:0;
    padding:26px 22px;

    text-align:left;

    background:#fffaf4;
    border:1px solid var(--border);
    border-radius:20px;
}

.agreement-card p:last-child{
    margin-bottom:0;
}


/* =========================================
   PROMPT LIST
========================================= */

.prompt-list{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

    margin-top:34px;
}

.prompt-card{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;
    min-height:145px;

    padding:24px;

    background:
        linear-gradient(
            145deg,
            #fffaf4,
            #fff2df
        );

    border:1px solid var(--border);
    border-radius:20px;

    text-align:center;
}

.prompt-card p{
    margin:0;
    color:var(--text);
    font-weight:600;
}


/* =========================================
   BOOK PLACEHOLDER
========================================= */

.book-placeholder{
    max-width:620px;
    margin:35px auto;
    padding:38px 28px;

    background:
        linear-gradient(
            145deg,
            #fff7e9,
            #fffdf9
        );

    border:2px dashed var(--fire-light);
    border-radius:22px;
}

.book-placeholder-icon{
    margin:0 0 12px;
    font-size:3rem;
    line-height:1;
}

.book-placeholder h3{
    color:var(--fire-dark);
}


/* =========================================
   SMALL NOTES
========================================= */

.small-note{
    color:#807168;
    font-size:.92rem;
}


/* =========================================
   CLOSING SECTION
========================================= */

.closing-section{
    position:relative;

    padding:85px 20px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(229,170,61,.25),
            transparent 45%
        ),
        linear-gradient(
            to bottom,
            var(--bg),
            #fff0dc
        );
}

.closing-content{
    max-width:900px;
    margin:auto;
    padding:52px 42px;

    background:rgba(255,255,255,.9);
    border:1px solid var(--border);
    border-radius:28px;

    box-shadow:var(--shadow);
}


/* =========================================
   FOOTER
========================================= */

.site-footer{
    padding:48px 20px;

    text-align:center;

    color:white;
    background:var(--forest);
}

.site-footer p{
    margin:7px 0;
    color:rgba(255,255,255,.9);
}

.site-footer .small-note{
    color:rgba(255,255,255,.72);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:900px){

    section{
        padding:62px 18px;
    }

    .campfire-hero{
        padding:95px 20px 72px;
    }

    .trail-card,
    .closing-content{
        padding:40px 30px;
    }

    .campfire-grid-section{
        padding:65px 18px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:700px){

    .site-header{
        position:relative;
    }

    .site-nav{
        gap:13px 18px;
        padding:16px 14px;
    }

    .site-nav a{
        font-size:.93rem;
    }

    .campfire-hero{
        padding:78px 18px 58px;
    }

    .campfire-hero::before{
        top:52px;
        left:7%;
    }

    .campfire-hero::after{
        top:105px;
        right:7%;
    }

    h1{
        font-size:clamp(2.7rem,14vw,4rem);
    }

    h2{
        font-size:clamp(1.9rem,9vw,2.6rem);
    }

    section{
        padding:48px 16px;
    }

    .trail-card,
    .closing-content{
        padding:32px 21px;
        border-radius:22px;
    }

    .campfire-grid{
        grid-template-columns:1fr;
    }

    .campfire-card{
        padding:30px 22px;
    }

    .campfire-steps,
    .reading-steps,
    .agreement-grid,
    .prompt-list{
        grid-template-columns:1fr;
    }

    .prompt-card{
        min-height:0;
    }

    .button-row{
        flex-direction:column;
        align-items:center;
    }

    .trail-button{
        width:100%;
        max-width:340px;
    }

}

/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:420px){

    .site-nav{
        gap:11px 14px;
    }

    .site-nav a{
        font-size:.87rem;
    }

    .hero-intro{
        font-size:1.18rem;
    }

    .trail-card,
    .closing-content{
        padding:28px 18px;
    }

    .campfire-card{
        padding:27px 18px;
    }

}

/* =========================================
   PAWS AND PAGES — PET VOICES
========================================= */

.paws-pages-pet-voices{
    width:100%;
    padding:60px 20px;
    margin:0;
    background:transparent;
}

.paws-pages-pet-voices__inner{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:42px 36px;

    overflow:hidden;

    color:#33283d;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.78),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fff8ed 0%,
            #f8efff 52%,
            #eef9ff 100%
        );

    border:2px solid rgba(108,75,145,.18);
    border-radius:26px;

    box-shadow:
        0 16px 38px rgba(69,47,88,.12);
}

.paws-pages-pet-voices__heading-row{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.8rem;
    margin-bottom:1rem;

    text-align:center;
}

.paws-pages-pet-voices__icon{
    display:grid;
    place-items:center;

    flex:0 0 50px;

    width:50px;
    height:50px;

    background:#ffffff;
    border-radius:50%;

    box-shadow:
        0 8px 18px rgba(69,47,88,.12);

    font-size:1.65rem;
}

.paws-pages-pet-voices h2{
    margin:0;

    color:#573c71;

    font-size:clamp(1.8rem,4vw,2.7rem);
    line-height:1.1;
}

.paws-pages-pet-voices__intro{
    max-width:780px;
    margin:0 auto 1.75rem;

    color:var(--muted);
    text-align:center;

    font-size:1.06rem;
    line-height:1.7;
}

.paws-pages-pet-voices__questions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:18px;

    width:100%;
    margin:0;
    padding:0;

    list-style:none;
}

.paws-pages-pet-voices__question{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    min-width:0;
    min-height:170px;

    padding:22px;

    background:rgba(255,255,255,.9);
    border:1px solid rgba(108,75,145,.16);
    border-radius:18px;

    box-shadow:
        0 8px 20px rgba(69,47,88,.08);

    color:var(--text);
    line-height:1.5;
}

.paws-pages-pet-voices__question-icon{
    display:block;
    margin-bottom:.65rem;

    font-size:1.55rem;
    line-height:1;
}

.paws-pages-pet-voices__question-text{
    display:block;
    overflow-wrap:anywhere;
}

.paws-pages-pet-voices__footer{
    max-width:800px;
    margin:1.5rem auto 0;
    padding:1rem 1.2rem;

    color:var(--text);
    background:rgba(87,60,113,.08);
    border-radius:16px;

    text-align:center;
    font-weight:700;
    line-height:1.55;
}


/* =========================================
   PAWS AND PAGES — TABLET
========================================= */

@media (max-width:950px){

    .paws-pages-pet-voices{
        padding:50px 18px;
    }

    .paws-pages-pet-voices__inner{
        padding:34px 26px;
    }

    .paws-pages-pet-voices__questions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .paws-pages-pet-voices__question{
        min-height:155px;
    }

}


/* =========================================
   PAWS AND PAGES — MOBILE
========================================= */

@media (max-width:600px){

    .paws-pages-pet-voices{
        padding:40px 16px;
    }

    .paws-pages-pet-voices__inner{
        padding:28px 18px;
        border-radius:20px;
    }

    .paws-pages-pet-voices__heading-row{
        gap:.5rem;
    }

    .paws-pages-pet-voices__icon{
        flex-basis:40px;

        width:40px;
        height:40px;

        font-size:1.25rem;
    }

    .paws-pages-pet-voices__questions{
        grid-template-columns:1fr;
    }

    .paws-pages-pet-voices__question{
        min-height:0;
    }

}