/*
Theme Name: Solcrest
Template: twentytwentyfive
Author: Solcrest Himalayan Salt Co.
Description: Child theme for the Solcrest store front. All tokens live in theme.json; section markup lives in patterns/.
Version: 1.0.12
Text Domain: solcrest
*/

/* Only put here what theme.json genuinely cannot express:
   keyframes, font-face fallbacks, and Mini-Cart drawer overrides. */

@keyframes sc-marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes sc-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes sc-in-left  { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes sc-in-top   { from { transform: translateY(-16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes sc-fade     { from { opacity: 0 } to { opacity: 1 } }

/* Hero fills the viewport minus the measured header chrome. --sc-chrome is
   set by solcrest-hero.js; the fallback covers the first paint. */
.sc-hero {
  height: calc(100dvh - var(--sc-chrome, 118px));
  min-height: min(480px, calc(100dvh - var(--sc-chrome, 118px)));
}
@media (max-width: 560px) {
  .sc-hero { min-height: min(440px, calc(100dvh - var(--sc-chrome, 102px))) }
}

/* ---------- placeholder image plates ----------
   Sampled from the approved mockup: a 22px "/" diagonal stripe at ~3%
   contrast over the sand plate. Swap these boxes for real <img> art
   direction and the texture goes with them. */
.sc-plate {
  background-image: repeating-linear-gradient(
    135deg,
    #F0EADB 0 11px,
    #E9E1CD 11px 22px
  );
}

/* Hero plate. The mockup's hero is not a flat fill — it ramps from a light
   sand at the top to a deep warm grey at the bottom, which is what lets the
   white headline sit over it. Stops below are sampled directly from the
   approved mockup so the live hero matches it before real photography
   lands; drop a background-image on .sc-hero__plate to replace it. */
.sc-hero__plate {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 11px, rgba(0,0,0,0) 11px 22px),
    linear-gradient(180deg,
      #E7E5DE 0%,
      #DBD3C0 9%,
      #D7CFBC 16%,
      #D3CBB9 23%,
      #CFC8B5 30%,
      #CBC4B2 38%,
      #C8C0AE 45%,
      #C4BCAB 52%,
      #B6AF9E 59%,
      #ABA599 67%,
      #9B958A 74%,
      #777164 88%,
      #676156 95%,
      #5F594F 100%);
}

/* Header chrome defaults — display lives here, not inline, so the
   breakpoint overrides below can actually win the cascade. */
.sc-nav    { display: flex }
.sc-burger { display: none }
.sc-account{ display: inline-flex }

/* The only two breakpoints in the design. */
@media (max-width: 1150px) { .sc-nav { gap: 20px } .sc-nav a { letter-spacing: .12em } }
@media (max-width: 900px)  { .sc-nav { display: none } .sc-burger { display: inline-flex } }

/* Wordmark — base sizes live here (not inline) so the small-screen
   overrides below can win the cascade. */
.sc-wordmark {
  font-size: 25px; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  color: var(--wp--preset--color--brand-green); line-height: 1;
}
.sc-wordmark-sub {
  font-size: 8px; font-weight: 400; letter-spacing: .4em; text-indent: .4em;
  color: rgba(22, 17, 11, .5); line-height: 1;
}

/* Small screens keep every header icon (the approved mockup shows search,
   account and cart at 390px). Tighten the wordmark and icon gaps instead so
   the row fits without clipping the cart. */
@media (max-width: 620px) {
  .sc-wordmark      { font-size: 21px; letter-spacing: .22em; text-indent: .22em }
  .sc-wordmark-sub  { font-size: 7px; letter-spacing: .28em; text-indent: .28em }
  #hdr-icons        { gap: 16px }
  #hdr-grid         { gap: 12px; height: 68px }
}
@media (max-width: 400px) {
  .sc-wordmark      { font-size: 18px; letter-spacing: .18em; text-indent: .18em }
  #hdr-icons        { gap: 13px }
}

/* Nothing in the design is allowed to push the page sideways. */
html, body { overflow-x: hidden; max-width: 100% }

/* Nothing in this design is rounded. */
.wp-block-button__link, .wc-block-components-button { border-radius: 0 }

[hidden] { display: none !important }

/* ---------- cart badge ---------- */
.sc-cart-badge {
  position: absolute; top: -6px; right: -8px;
  background: var(--wp--preset--color--brand-green); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- scrim + drawers (nav / search / cart) ---------- */
.sc-scrim { position: fixed; inset: 0; background: rgba(22,17,11,.45); z-index: 70; animation: sc-fade .2s ease }
.sc-drawer { position: fixed; inset: 0; z-index: 80 }
.sc-drawer__panel {
  position: fixed; top: 0; bottom: 0; z-index: 81; overflow-y: auto;
  background: var(--wp--preset--color--cream); display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(22,17,11,.25);
}
.sc-drawer__panel--left  { left: 0; width: min(360px, 86vw); animation: sc-in-left .25s ease }
.sc-drawer__panel--right { right: 0; width: min(440px, 94vw); animation: sc-in-right .25s ease }
.sc-drawer__close {
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--wp--preset--color--ink); padding: 6px; min-width: 44px; min-height: 44px;
}
.sc-drawer__link {
  display: block; padding: 16px 0; border-bottom: 1px solid rgba(22,17,11,.1);
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink);
}
.sc-drawer__search {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--wp--preset--color--sand); border: 0; padding: 14px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(22,17,11,.6); cursor: pointer; text-align: left;
}

/* ---------- cart drawer internals ---------- */
.sc-cart__head {
  display: flex; align-items: center; justify-content: space-between; padding: 22px 24px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; flex: 0 0 auto;
}
.sc-cart__ship { padding: 0 24px 18px; flex: 0 0 auto }
.sc-cart__ship-msg { font-size: 12.5px; color: rgba(22,17,11,.7); margin-bottom: 8px }
.sc-cart__ship-track { height: 3px; background: rgba(22,17,11,.1) }
.sc-cart__ship-bar { height: 100%; background: var(--wp--preset--color--brand-green); transition: width .3s ease }
.sc-cart__empty { padding: 60px 24px; text-align: center; color: rgba(22,17,11,.6); flex: 1 }
.sc-cart__empty svg { margin: 0 auto 16px; color: rgba(22,17,11,.3); display: block }
.sc-cart__shop-btn {
  display: inline-block; margin-top: 18px; background: var(--wp--preset--color--brand-green); color: #fff;
  padding: 14px 28px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.sc-cart__items { flex: 1; overflow-y: auto; padding: 0 24px }
.sc-cart__item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(22,17,11,.08) }
.sc-cart__thumb { width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; background: var(--wp--preset--color--sand-deep); display: block }
.sc-cart__item-body { flex: 1; min-width: 0 }
.sc-cart__item-top { display: flex; justify-content: space-between; gap: 8px }
.sc-cart__item-name { font-size: 14px; font-weight: 700 }
.sc-cart__remove { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: rgba(22,17,11,.4); min-width: 24px }
.sc-cart__item-size { font-size: 12px; color: rgba(22,17,11,.5); margin-top: 2px }
.sc-cart__item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px }
.sc-cart__stepper { display: flex; align-items: center; border: 1px solid rgba(22,17,11,.2) }
.sc-cart__stepper button { width: 40px; height: 40px; min-width: 40px; background: none; border: 0; cursor: pointer; font-size: 16px }
.sc-cart__stepper span { min-width: 24px; text-align: center; font-size: 13px }
.sc-cart__item-total { font-size: 14px; font-weight: 700 }
.sc-cart__footer { padding: 18px 24px 24px; border-top: 1px solid rgba(22,17,11,.1); flex: 0 0 auto }
.sc-cart__subtotal { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 6px }
.sc-cart__note { font-size: 11.5px; color: rgba(22,17,11,.5); margin: 0 0 16px }
.sc-cart__checkout {
  display: block; text-align: center; background: var(--wp--preset--color--brand-green); color: #fff;
  padding: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px;
}
.sc-cart__continue {
  display: block; width: 100%; background: none; border: 0; padding: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--wp--preset--color--ink); text-decoration: underline; cursor: pointer;
}

/* ---------- search overlay ---------- */
.sc-search-overlay { position: fixed; inset: 0; z-index: 80 }
.sc-search-sheet {
  position: absolute; top: 0; left: 0; right: 0; max-height: 86dvh; overflow-y: auto;
  background: var(--wp--preset--color--cream); z-index: 81; animation: sc-in-top .25s ease;
}
.sc-search-sheet__bar {
  display: flex; align-items: center; gap: 14px; width: min(1400px, 92vw); margin: 0 auto;
  padding: 22px 0; border-bottom: 1px solid rgba(22,17,11,.1);
}
.sc-search-icon { color: var(--wp--preset--color--brand-green); flex: 0 0 auto }
.sc-search-sheet__bar input {
  flex: 1; border: 0; background: none; font-size: clamp(18px, 2.4vw, 26px); font-weight: 300;
  color: var(--wp--preset--color--ink); outline: 0;
}
.sc-search-sheet__body { width: min(1400px, 92vw); margin: 0 auto; padding: 24px 0 48px }
.sc-search-label { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(22,17,11,.5); margin-bottom: 14px }
.sc-search-chips { display: flex; gap: 10px; flex-wrap: wrap }
.sc-chip {
  background: var(--wp--preset--color--sand-deep); border: 0; padding: 10px 16px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink); cursor: pointer;
}
.sc-search-empty p { font-size: 14px; color: rgba(22,17,11,.6); margin: 0 0 14px }
.sc-search-results { display: flex; flex-direction: column; gap: 2px }
.sc-result { display: flex; align-items: center; gap: 14px; padding: 12px 8px; color: inherit; text-decoration: none }
.sc-result:hover { background: var(--wp--preset--color--sand) }
.sc-result__plate { width: 52px; height: 52px; flex: 0 0 auto; background: var(--wp--preset--color--sand-deep) }
.sc-result img { flex: 0 0 auto; object-fit: cover }
.sc-result__text { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sc-result__title { font-size: 14.5px; font-weight: 700 }
.sc-result__meta { font-size: 12.5px; color: rgba(22,17,11,.55) }

/* ---------- FAQ accordion ---------- */
summary::-webkit-details-marker { display: none }
details[open] .sc-faq-plus { transform: rotate(45deg) }

@media (max-width: 480px) {
  .sc-drawer__panel--right { width: 100vw }
}

/* ---------- tablet refinement ----------
   The four "Why Solcrest" stats sit in a core/columns block, which stays
   4-up until WordPress's own 781px breakpoint and then drops straight to
   1-up. Both ends read badly on a tablet, so pair them up in between. */
@media (min-width: 600px) and (max-width: 960px) {
  #why .wp-block-columns { flex-wrap: wrap !important }
  #why .wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 22px) !important;
    flex-grow: 0;
  }
}

/* ============================================================
   Corrections against the approved mockup
   ============================================================ */

/* ---------- links ----------
   Twenty Twenty-Five underlines every link. The mockup underlines none of
   them — emphasis is carried by colour, weight and the yellow rules that
   some links draw with their own border-bottom. Those borders are left
   alone; only the text-decoration goes. */
a,
a:where(:not(.wp-element-button)),
.wp-block-navigation a,
.wp-block-page-list a,
footer a,
.sc-drawer__link,
.sc-result {
  text-decoration: none;
}
a:where(:not(.wp-element-button)):hover,
footer a:hover {
  text-decoration: none;
}
/* Buttons never carry underlines either. */
.wp-block-button__link,
.wp-element-button,
.sc-cart__checkout,
.sc-cart__shop-btn {
  text-decoration: none !important;
}
/* Keyboard users still need a visible focus ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green);
  outline-offset: 3px;
}

/* ---------- vertical rhythm between top-level sections ----------
   WordPress gives every child of .wp-site-blocks a default block gap, which
   opens a cream stripe under the header and another between the hero and the
   marquee. The sections carry their own padding, so the gap is removed and
   the page reads as one continuous surface. */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * {
  margin-block-start: 0 !important;
}
main.wp-block-group {
  margin-block-start: 0;
  padding-block: 0;
}
.sc-hero { margin-block-start: 0 }

/* ---------- know the grain ----------
   The two halves sit in one grid row, so each text column is centred against
   the same height. When one blurb wraps to an extra line its "Everyday" /
   "Texture" label drifts off the other's baseline. Reserving four lines of
   copy keeps both columns the same height, so the labels always line up. */
.sc-grain__copy { min-height: calc(4 * 1.75 * 15px) }
@media (max-width: 520px) {
  .sc-grain__copy { min-height: 0 }
  .sc-grain__pair { align-items: start }
}

/* ---------- review avatars ----------
   A 72px circle above each quote. A real portrait fills it; with no portrait
   the reviewer's initials sit on the sand plate inside a thin brand ring, so
   the row still reads as finished. */
.sc-review__avatar {
  width: 72px; height: 72px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; object-fit: cover;
  background: var(--wp--preset--color--sand-deep);
  box-shadow: 0 0 0 1px rgba(22, 17, 11, .08), 0 0 0 5px var(--wp--preset--color--sand);
}
.sc-review__avatar--initials {
  font-size: 17px; font-weight: 700; letter-spacing: .12em; text-indent: .12em;
  color: var(--wp--preset--color--brand-green);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    var(--wp--preset--color--sand-deep);
}

/* ---------- section intros ----------
   A constrained group centres any child that sets its own max-width, which
   pushed the "Know the grain" and "How our salt is made" intros into the
   middle of the page while the grids beneath them stayed flush left. The
   mockup aligns both to the same left edge. */
.sc-section__intro {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* ---------- footer ----------
   The footer wrapper is a core/group rendered through the template-part
   pipeline, and WordPress rebuilds that opening tag from the block attributes
   — which drops the padding written into the markup. Declaring it here puts
   it beyond the serializer's reach. Values match the approved mockup
   (86px above the columns, 26px below the legal row at 1440px). */
footer.wp-block-group {
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: 26px;
}