/*
Theme Name:  Salient Child — Scoops
Theme URI:   https://www.ilovescoopsmn.com
Description: Scoops Ice Cream & More — "Parlor Light" palette on the Wilds-style conversion layout. Full-bleed hero, by-the-numbers band, about split, hover amenity grid, 2x2 order CTA, map + reviews, split final CTA, footer, nav, CF7 forms.
Author:      Purple AI https://gopurple.ai
Template:    salient
Version:     2.0.0
*/

/* ============================================================
   SCOOPS DESIGN SYSTEM v2 — Wilds-structure build
   Scope: wrap page content in <div class="scp">.
   Shared "brand dark" (--scp-ink) is used by: nav (scrolled),
   by-the-numbers band, map/reviews section, footer.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Fraunces:ital,opsz,wght@1,9..144,500;1,9..144,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

.scp{
  --scp-ink:#1c0f16;          /* brand dark — nav/numbers/map/footer */
  --scp-ink-2:#2a1722;
  --scp-paper:#fdf6fa;
  --scp-paper-2:#fbecf3;
  --scp-card:#ffffff;
  --scp-pink:#ff2e83;
  --scp-pink-deep:#d61a6b;
  --scp-pink-soft:#ffd6e7;
  --scp-cyan:#10b3c0;
  --scp-cyan-deep:#0a8d98;
  --scp-cyan-soft:#d3f3f6;
  --scp-muted:#7c6471;
  --scp-muted-d:#c4a8b6;      /* muted text on dark */
  --scp-line:#f0d9e4;
  --scp-line-2:#e7c8d6;
  --scp-line-d:rgba(255,255,255,.14);
  --scp-display:'Bricolage Grotesque',sans-serif;
  --scp-accent:'Fraunces',serif;          /* italic accent words */
  --scp-body:'Mulish',sans-serif;
  font-family:var(--scp-body);color:var(--scp-ink);background:var(--scp-paper);
  -webkit-font-smoothing:antialiased;
}
.scp *,.scp *::before,.scp *::after{box-sizing:border-box}
.scp a{text-decoration:none;color:inherit}
.scp img{max-width:100%;display:block}
.scp h1,.scp h2,.scp h3,.scp h4{font-family:var(--scp-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--scp-ink);margin:0}
.scp p{margin:0}
.scp em,.scp .scp-it{font-family:var(--scp-accent);font-style:italic;font-weight:500;letter-spacing:0}

.scp-wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.scp-sec{padding:96px 0}
.scp-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.22em;color:var(--scp-pink);text-transform:uppercase;display:block;margin-bottom:14px}
.scp-eyebrow--cyan{color:var(--scp-cyan)}
.scp-h2{font-size:clamp(32px,4.8vw,54px)}
.scp-h2 em{color:var(--scp-pink)}
.scp-lead{font-size:17.5px;color:var(--scp-muted);line-height:1.65}

/* ---------- buttons ---------- */
.scp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--scp-body);font-weight:800;font-size:15px;padding:15px 28px;border-radius:12px;cursor:pointer;transition:.2s;background:var(--scp-pink);color:#fff;border:1.5px solid var(--scp-pink);box-shadow:0 10px 26px -10px rgba(255,46,131,.75);text-align:center}
.scp-btn:hover{background:var(--scp-pink-deep);border-color:var(--scp-pink-deep);transform:translateY(-2px);color:#fff}
.scp-btn--ghost{background:transparent;color:var(--scp-ink);border-color:var(--scp-line-2);box-shadow:none}
.scp-btn--ghost:hover{background:var(--scp-ink);border-color:var(--scp-ink);color:#fff;transform:translateY(-2px)}
.scp-btn--light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none;backdrop-filter:blur(4px)}
.scp-btn--light:hover{background:#fff;color:var(--scp-ink);border-color:#fff}
.scp-btn--cyan{background:var(--scp-cyan);border-color:var(--scp-cyan);box-shadow:0 10px 26px -10px rgba(16,179,192,.75)}
.scp-btn--cyan:hover{background:var(--scp-cyan-deep);border-color:var(--scp-cyan-deep)}

/* ============================================================
   NAV — transparent over hero → solid brand dark on scroll.
   (.scp-nav is the reference implementation used in the preview;
   JS toggles .scp-nav--solid after 40px scroll.)
   ============================================================ */
.scp-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s,padding .3s;background:linear-gradient(rgba(20,8,16,.45),transparent);padding:22px 0}
.scp-nav-in{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
.scp-nav-brand{font-family:var(--scp-display);font-weight:800;font-size:19px;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.scp-nav-brand span{opacity:.7;font-weight:600}
.scp-nav .scp-btn{padding:11px 22px;font-size:14px}
.scp-nav--solid{background:var(--scp-ink);box-shadow:0 6px 24px -12px rgba(0,0,0,.5);padding:14px 0}

/* --- Salient header overrides (use instead of .scp-nav in WP) ---
   Enable per-page: Page Settings → Header → Transparent. Selectors
   may need adjusting to your Salient version — verify in inspector. */
body[data-header-color] #header-outer[data-transparent-header="true"]:not(.scrolled-down){background:transparent!important}
#header-outer{background-color:#1c0f16!important;transition:background-color .3s}
#header-outer #logo,#header-outer nav>ul>li>a{font-family:'Bricolage Grotesque',sans-serif!important;letter-spacing:.04em}

/* ============================================================
   HERO — full-bleed photo, dark scrim, centered copy
   ============================================================ */
.scp-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  /* TEMP hotlinked Google photo — replace url() with WP media upload.
     680px source will look soft full-screen: request the original or reshoot ~2400px wide. */
  background:
    linear-gradient(rgba(20,8,16,.52),rgba(20,8,16,.66)),
    url('https://lh3.googleusercontent.com/gps-cs-s/APNQkAGCr6fDryOSdpj5oqyQLtpRUSFSeTGRCLrJgpl2S-Y_JL8VT3o8owbzFbNF-C3EG0PW7F7QAnguZu-RKVzGKwjVQosVoEV0kHTocttKbm9AVub01Ll13o8OKunmW9rryu0h90zH3Q=s680-w680-h510-rw') center/cover no-repeat,
    #1c0f16;
}
.scp-hero-in{max-width:880px;padding:120px 28px 90px}
.scp-hero h1{color:#fff;font-size:clamp(46px,7.4vw,92px);line-height:1.02}
.scp-hero h1 em{color:var(--scp-pink-soft)}
.scp-hero-addr{margin-top:18px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.scp-hero-desc{margin:22px auto 0;max-width:620px;font-size:18.5px;line-height:1.65;color:rgba(255,255,255,.92)}
.scp-hero-punch{display:block;margin-top:14px;font-family:var(--scp-accent);font-style:italic;font-weight:600;font-size:22px;color:#fff}
.scp-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.scp-hero-bottom{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}

/* ============================================================
   BY THE NUMBERS — brand dark band, 4 boxes
   ============================================================ */
.scp-numbers{background:var(--scp-ink);color:#fff;padding:64px 0}
.scp-numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--scp-line-d);border:1px solid var(--scp-line-d);border-radius:18px;overflow:hidden}
.scp-num{background:var(--scp-ink);padding:34px 22px;text-align:center;transition:.2s}
.scp-num:hover{background:var(--scp-ink-2)}
.scp-num b{display:block;font-family:var(--scp-display);font-weight:800;font-size:clamp(32px,3.6vw,46px);color:var(--scp-pink);line-height:1}
.scp-num span{display:block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--scp-muted-d)}

/* ============================================================
   ABOUT — text left, image right
   ============================================================ */
.scp-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.scp-about p{font-size:16.5px;line-height:1.75;color:var(--scp-muted);margin-top:18px}
.scp-about .scp-btn{margin-top:30px}
.scp-about-img{border-radius:22px;overflow:hidden;box-shadow:0 36px 70px -36px rgba(214,26,107,.5);border:1px solid var(--scp-line)}
.scp-about-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.scp-img-ph{display:grid;place-items:center;background:linear-gradient(150deg,var(--scp-pink-soft),#ffe9f3 55%,var(--scp-cyan-soft))}
.scp-img-ph span{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:rgba(28,15,22,.45);text-transform:uppercase;text-align:center;line-height:1.9;padding:20px}
.scp-about-img .scp-img-ph{aspect-ratio:4/5}

/* ============================================================
   COMMUNITY EVENTS — 6 photo tiles, hover overlay
   ============================================================ */
.scp-amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.scp-amen{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--scp-line)}
.scp-amen img,.scp-amen .scp-img-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.scp-amen:hover img,.scp-amen:hover .scp-img-ph{transform:scale(1.05)}
.scp-amen-cap{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(20,8,16,.85));color:#fff;transition:.3s}
.scp-amen-cap h3{color:#fff;font-size:21px}
.scp-amen-more{position:absolute;inset:0;background:rgba(20,8,16,.82);color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .3s}
.scp-amen-more h3{color:#fff;font-size:21px;margin-bottom:12px}
.scp-amen-more p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88)}
.scp-amen:hover .scp-amen-more,.scp-amen:focus-within .scp-amen-more{opacity:1}
.scp-amen:hover .scp-amen-cap{opacity:0}

/* ============================================================
   THE $$ SECTION — 2x2 order/menu/catering boxes
   ============================================================ */
.scp-order{background:var(--scp-paper-2)}
.scp-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.scp-ocard{background:var(--scp-card);border:1px solid var(--scp-line);border-radius:20px;padding:38px;display:flex;flex-direction:column;align-items:flex-start;transition:.2s}
.scp-ocard:hover{transform:translateY(-5px);box-shadow:0 28px 56px -30px rgba(214,26,107,.45)}
.scp-ocard-k{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--scp-cyan-deep)}
.scp-ocard h3{font-size:clamp(22px,2.4vw,28px);margin:10px 0 12px}
.scp-ocard p{font-size:15.5px;line-height:1.6;color:var(--scp-muted);margin-bottom:26px}
.scp-ocard .scp-btn{margin-top:auto}

/* ============================================================
   MAP + REVIEWS — brand dark section
   ============================================================ */
.scp-loc{background:var(--scp-ink);color:#fff}
.scp-loc .scp-h2,.scp-loc h3{color:#fff}
.scp-loc .scp-h2 em{color:var(--scp-pink-soft)}
.scp-loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:48px;align-items:start}
.scp-review{background:var(--scp-ink-2);border:1px solid var(--scp-line-d);border-radius:18px;padding:26px;margin-bottom:18px}
.scp-stars{color:#ffce3d;font-size:15px;letter-spacing:2px}
.scp-review p{margin-top:12px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.92)}
.scp-review .scp-review-by{margin-top:14px;font-size:13px;font-weight:700;color:var(--scp-muted-d)}
.scp-loc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.scp-loc-photos .scp-img-ph{aspect-ratio:1;border-radius:12px;position:relative}
.scp-map-card{background:var(--scp-ink-2);border:1px solid var(--scp-line-d);border-radius:20px;overflow:hidden}
.scp-map-card iframe{width:100%;height:330px;border:0;display:block;filter:saturate(.9)}
.scp-map-meta{padding:26px}
.scp-map-meta h3{font-size:22px}
.scp-map-meta h3 em{color:var(--scp-pink-soft)}
.scp-map-meta .scp-addr{margin:10px 0 20px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--scp-muted-d);line-height:1.8}
.scp-map-meta .scp-row{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   FINAL CTA — half + half
   ============================================================ */
.scp-final{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.scp-final-half{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 36px;color:#fff;position:relative}
.scp-final-half--pickup{background:linear-gradient(rgba(214,26,107,.86),rgba(214,26,107,.92)),var(--scp-pink-deep)}
.scp-final-half--cater{background:linear-gradient(rgba(10,141,152,.88),rgba(10,141,152,.94)),var(--scp-cyan-deep)}
.scp-final-half h2{color:#fff;font-size:clamp(26px,3vw,38px)}
.scp-final-half p{margin:14px 0 28px;max-width:380px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.92)}
.scp-final-half .scp-btn{background:#fff;color:var(--scp-ink);border-color:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.scp-final-half .scp-btn:hover{transform:translateY(-2px);background:var(--scp-paper)}

/* ============================================================
   FOOTER — brand dark (markup in footer-snippet.html)
   ============================================================ */
.scp-footer{background:var(--scp-ink);color:#fff;padding:70px 0 36px;border-top:1px solid var(--scp-line-d)}
.scp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px}
.scp-footer-brand{font-family:var(--scp-display);font-weight:800;font-size:24px;color:#fff}
.scp-footer-brand em{color:var(--scp-pink-soft)}
.scp-footer p{margin-top:14px;font-size:14px;line-height:1.7;color:var(--scp-muted-d)}
.scp-footer h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.scp-footer ul{list-style:none;margin:0;padding:0}
.scp-footer ul li{margin-bottom:11px}
.scp-footer ul a{font-size:14.5px;color:var(--scp-muted-d);transition:.2s}
.scp-footer ul a:hover{color:var(--scp-pink-soft)}
.scp-footer-hours{font-size:14px;color:var(--scp-muted-d);line-height:1.9}
.scp-footer-hours b{color:#fff;font-weight:700}
.scp-footer-bottom{margin-top:54px;padding-top:24px;border-top:1px solid var(--scp-line-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--scp-muted-d)}
.scp-social{display:flex;gap:10px}
.scp-social a{width:40px;height:40px;border:1px solid var(--scp-line-d);border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:12.5px;color:#fff;transition:.2s}
.scp-social a:hover{background:var(--scp-pink);border-color:var(--scp-pink)}

/* ============================================================
   SUBPAGE HEADER (gopurple-style bold page intro — for /menu etc.)
   ============================================================ */
.scp-pagehead{background:var(--scp-ink);color:#fff;padding:170px 0 80px;text-align:center}
.scp-pagehead h1{color:#fff;font-size:clamp(40px,6vw,72px)}
.scp-pagehead h1 em{color:var(--scp-pink-soft)}
.scp-pagehead p{margin:18px auto 0;max-width:560px;font-size:17px;line-height:1.6;color:var(--scp-muted-d)}

/* ============================================================
   CONTACT FORM 7 — works for general + catering forms.
   Wrap each CF7 form: [contact-form-7 ...] inside <div class="scp scp-form">
   ============================================================ */
.scp-form{max-width:680px}
.scp-form label{display:block;font-size:13px;font-weight:800;letter-spacing:.04em;margin-bottom:7px;color:var(--scp-ink)}
.scp-form .scp-field{margin-bottom:18px}
.scp-form .scp-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scp-form input[type=text],.scp-form input[type=email],.scp-form input[type=tel],
.scp-form input[type=date],.scp-form input[type=number],.scp-form select,.scp-form textarea{
  width:100%;background:var(--scp-card);border:1px solid var(--scp-line-2);border-radius:12px;
  padding:14px 16px;font-family:var(--scp-body);font-size:15px;color:var(--scp-ink);transition:.2s}
.scp-form input:focus,.scp-form select:focus,.scp-form textarea:focus{outline:none;border-color:var(--scp-pink);box-shadow:0 0 0 3px rgba(255,46,131,.12)}
.scp-form input[type=submit]{display:inline-flex;font-weight:800;font-size:15px;padding:15px 30px;border-radius:12px;background:var(--scp-pink);color:#fff;border:1.5px solid var(--scp-pink);cursor:pointer;transition:.2s;box-shadow:0 10px 26px -10px rgba(255,46,131,.75)}
.scp-form input[type=submit]:hover{background:var(--scp-pink-deep);transform:translateY(-2px)}
/* dark-section variant (e.g. forms placed on .scp-loc/.scp-footer) */
.scp-form--dark label{color:#fff}
.scp-form--dark input,.scp-form--dark select,.scp-form--dark textarea{background:var(--scp-ink-2);border-color:var(--scp-line-d);color:#fff}
/* CF7 feedback */
.scp-form .wpcf7-not-valid{border-color:#e35d6a!important}
.scp-form .wpcf7-not-valid-tip{font-size:12.5px;color:#e35d6a;margin-top:5px}
.scp-form .wpcf7-response-output{margin:18px 0 0;padding:14px 18px;border-radius:12px;border:1px solid var(--scp-line-2)!important;font-size:14px}
.scp-form .wpcf7-form.sent .wpcf7-response-output{border-color:#23c277!important;background:rgba(35,194,119,.08);color:#13734a}

/* mockup-only note bar */
.scp-note{background:#fff8e6;border-top:1px dashed #e7cf86;border-bottom:1px dashed #e7cf86;text-align:center;padding:13px;font-size:12.5px;color:#9a7b22}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .scp-numbers-grid{grid-template-columns:1fr 1fr}
  .scp-amen-grid{grid-template-columns:1fr 1fr}
  .scp-about-grid,.scp-loc-grid{grid-template-columns:1fr}
  .scp-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .scp-sec{padding:70px 0}
  .scp-order-grid,.scp-amen-grid,.scp-final,.scp-footer-grid{grid-template-columns:1fr}
  .scp-form .scp-field-row{grid-template-columns:1fr}
  .scp-hero-cta .scp-btn{width:100%}
  /* touch devices: hover overlay shown as caption text instead */
  .scp-amen{aspect-ratio:auto}
  .scp-amen img,.scp-amen .scp-img-ph{position:relative;aspect-ratio:16/10}
  .scp-amen-cap{display:none}
  .scp-amen-more{position:relative;opacity:1;background:var(--scp-ink);padding:22px}
}