/* ============================================
   BYROOH CREATIONS — Terms of Service (page-tos.php)
   Loads on top of style.css / home.css — reuses the
   same design tokens (--paper, --green, --gold, etc.)
   defined in :root there. No values are redefined here.
   ============================================ */

.tos-page{position:relative;z-index:1}

/* ── Hero ─────────────────────────────────── */
.tos-hero{padding-bottom:60px}
.tos-updated{font-family:var(--font-hand);font-size:.95rem;color:var(--ink-faded);margin-top:-20px;margin-bottom:36px}

.tos-jumpnav{display:flex;flex-wrap:wrap;gap:12px}
.tos-jumpnav a{
    padding:9px 20px;border-radius:40px;
    border:1.5px solid var(--ink-ghost);
    color:var(--ink-soft);font-size:.82rem;font-weight:600;letter-spacing:.3px;
    transition:all .35s var(--ease);
}
.tos-jumpnav a:hover{border-color:var(--green);color:var(--green);background:rgba(62,107,39,.04)}

/* ── Section shell ────────────────────────── */
/* Override .screen--flow's 120px top/bottom padding — that's meant for
   single standalone sections, but stacked TOS sections double it up
   into a huge gap. 56px keeps clear separation without the dead space. */
.tos-page .screen--flow{padding-top:56px;padding-bottom:56px}
.tos-page .tos-hero.screen--flow{padding-top:120px}

.tos-section{scroll-margin-top:40px}
.tos-section-inner{max-width:760px;margin:0 auto;width:100%}
.tos-section-no{
    display:block;font-family:var(--font-hand);font-size:2.4rem;font-weight:700;
    color:var(--green-pale);opacity:.45;line-height:1;margin-bottom:4px;
}
.tos-section .display-md{margin-bottom:32px}
.tos-lede-sm{font-size:1rem;margin-bottom:32px;max-width:100%}

/* ── Cards ────────────────────────────────── */
.tos-card{
    padding:28px 32px;margin-bottom:20px;
    border:1px solid rgba(0,0,0,.06);border-radius:4px;
    background:rgba(250,246,240,.6);backdrop-filter:blur(6px);
    transition:all .4s var(--ease);
}
.tos-card:hover{border-color:var(--green-pale);box-shadow:0 10px 36px rgba(62,107,39,.07);transform:translateY(-2px)}
.tos-card:last-child{margin-bottom:0}
.tos-card h3{margin-bottom:10px}
.tos-card p{color:var(--ink-soft);margin-bottom:0}
.tos-card p + p{margin-top:12px}

.tos-list{margin:14px 0 16px;padding-left:0}
.tos-list li{
    position:relative;padding-left:24px;margin-bottom:10px;
    color:var(--ink-soft);line-height:1.7;
}
.tos-list li::before{
    content:'';position:absolute;left:2px;top:10px;
    width:6px;height:6px;border-radius:50%;background:var(--green-pale);
}
.tos-list li:last-child{margin-bottom:0}

.tos-note{
    font-family:var(--font-hand);font-size:1.02rem;color:var(--ink-faded);
    padding-left:20px;border-left:2px solid var(--green-pale);
    margin-top:28px;line-height:1.6;
}

/* ── Shipping ledger reuse ───────────────── */
.tos-ledger{margin-top:8px;margin-bottom:28px}
.tos-ledger .ledger-row:last-child{border-bottom:none}

/* ── Contact section (dark) ──────────────── */
.tos-contact .tos-section-inner{max-width:820px}
.tos-brand-name{
    font-family:var(--font-heading);font-size:1.3rem;font-weight:600;
    color:var(--cream);margin-bottom:36px;
}
.tos-contact-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px;
}
.tos-contact .contact-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
}
.tos-contact .contact-card:hover{
    border-color:var(--green-pale);
    background:rgba(255,255,255,.06);
    box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.tos-contact .contact-card-label{color:rgba(255,255,255,.4)}
.tos-contact .contact-card-value{color:rgba(255,255,255,.85)}
.tos-response-note{font-family:var(--font-hand);font-size:.95rem;color:rgba(255,255,255,.45)}

/* ═══════════════════════════════════════════
   RESPONSIVE — full scale: 1100 / 900 / 768 / 600 / 480 / 380
   (matches the breakpoints already used across home.css /
   style.css so the TOS/Privacy pages scale in step with the
   rest of the site instead of jumping straight to mobile at 768px)
   ═══════════════════════════════════════════ */

@media(max-width:1100px){
    .tos-section-inner{max-width:680px}
    .tos-contact .tos-section-inner{max-width:720px}
}

@media(max-width:900px){
    .tos-page .screen--flow{padding-top:48px;padding-bottom:48px}
    .tos-page .tos-hero.screen--flow{padding-top:100px}
    .tos-card{padding:24px 26px}
}

@media(max-width:768px){
    .tos-page .screen--flow{padding-top:40px;padding-bottom:40px}
    .tos-page .tos-hero.screen--flow{padding-top:90px}
    .tos-section-inner{max-width:100%}

    .tos-section-no{font-size:2rem}
    .tos-section .display-md{margin-bottom:24px}

    .tos-card{padding:22px 22px;margin-bottom:16px}
    .tos-card h3{font-size:1.05rem}
    .tos-card p{font-size:.95rem}

    .tos-list li{font-size:.95rem}

    .tos-note{font-size:.95rem;margin-top:22px}

    .tos-contact-grid{grid-template-columns:1fr}
    .tos-brand-name{margin-bottom:28px}

    .tos-jumpnav{gap:8px}
    .tos-jumpnav a{padding:8px 16px;font-size:.78rem}
}

@media(max-width:600px){
    .tos-updated{font-size:.88rem;margin-bottom:28px}
    .tos-lede-sm{font-size:.95rem;margin-bottom:24px}
    .tos-card{padding:20px 20px}
}

@media(max-width:480px){
    .tos-page .screen--flow{padding-top:32px;padding-bottom:32px}
    .tos-page .tos-hero.screen--flow{padding-top:80px}

    .tos-hero{padding-bottom:40px}
    .tos-section-no{font-size:1.7rem}

    .tos-card{padding:18px 16px;border-radius:3px}
    .tos-card h3{font-size:1rem;margin-bottom:8px}
    .tos-card p{font-size:.9rem}

    .tos-list{margin:12px 0 14px}
    .tos-list li{padding-left:20px;font-size:.9rem;margin-bottom:8px}
    .tos-list li::before{top:9px;width:5px;height:5px}

    .tos-note{font-size:.9rem;padding-left:16px;margin-top:18px}

    .tos-ledger{margin-bottom:20px}

    .tos-brand-name{font-size:1.15rem;margin-bottom:24px}
    .tos-contact-grid{gap:12px;margin-bottom:24px}
    .tos-response-note{font-size:.88rem}

    .tos-jumpnav{gap:6px}
    .tos-jumpnav a{padding:7px 14px;font-size:.74rem}
}

@media(max-width:380px){
    .tos-page .tos-hero.screen--flow{padding-top:64px}
    .tos-section-no{font-size:1.5rem}
    .tos-card{padding:16px 14px}
    .tos-card h3{font-size:.95rem}
    .tos-card p,.tos-list li{font-size:.86rem}
    .tos-jumpnav a{padding:6px 12px;font-size:.7rem}
}