/* ---------------------------------------------------------------
   Base: type, ground, and the header/footer chrome.
   Astra's own selectors are fairly specific, so a few rules here are
   deliberately qualified rather than relying on load order alone.
   --------------------------------------------------------------- */

body,
.ast-container {
  font-family: var(--ss-font-body);
  color: var(--ss-ink);
}

body {
  background: var(--ss-paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
  font-family: var(--ss-font-display);
  color: var(--ss-ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; }
h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; }

/* Counts, prices, phone numbers line up in columns. */
.ss-num,
.woocommerce-result-count,
.ss-util a[href^="tel:"] { font-variant-numeric: tabular-nums; }

a { color: var(--ss-ink); }
a:hover, a:focus { color: var(--ss-yellow-dk); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ss-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- utility bar ---------- */
.ss-util {
  background: var(--ss-yellow);
  color: var(--ss-yellow-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.ss-util__inner {
  max-width: var(--ss-max);
  margin: 0 auto;
  padding: 9px var(--ss-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.ss-util a { color: var(--ss-yellow-ink); text-decoration: none; }
.ss-util a:hover { text-decoration: underline; }
.ss-util__contact { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .ss-util__inner { justify-content: center; text-align: center; }
  .ss-util__promo { display: none; }   /* keep the phone number, drop the pitch */
}

/* ---------- logo ---------- */
.ss-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; padding: 4px 0; }
.ss-logo__a {
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .42em;
  color: var(--ss-ink);
  text-transform: lowercase;
}
.ss-logo__b {
  font-family: "Sacramento", cursive;
  font-size: 34px;
  line-height: .96;
  color: var(--ss-script);
  /* Sacramento carries taller ascenders than the artwork's script, so the
     original -8px tuck made the loops cut straight through "season". Sit the
     two parts adjacent instead of overlapped. */
  margin: 1px 0 0 10px;
}
.site-title, .site-description { position: absolute; left: -9999px; }

/* ---------- header ---------- */
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-hair);
}
.main-header-menu > .menu-item > .menu-link {
  font-family: var(--ss-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ss-ink);
}
.main-header-menu > .menu-item > .menu-link:hover { color: var(--ss-yellow-dk); }

/* ---------- sticky header ----------
   Only #masthead sticks. The utility bar above it scrolls away for good:
   it carries the phone number and the collection note, which are worth
   reading once and not worth a permanent band of a phone screen.

   The header is fixed only after it has scrolled off on its own, then
   revealed on the way back up, so the top of a page still reads as an
   ordinary document rather than something pinned. */
.ss-sticky-spacer { height: 0; }

#masthead.ss-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  transform: translateY(-100%);
  transition: transform .28s ease;
  will-change: transform;
}
#masthead.ss-sticky.ss-sticky--in {
  transform: translateY(0);
  /* A hairline plus a soft drop, so it reads as sitting above the page
     rather than as a band welded across it. */
  box-shadow: 0 1px 0 var(--ss-hair), 0 12px 28px -20px rgba(18,23,28,.55);
}

/* The admin bar is fixed above everything for logged-in users, and stops
   being fixed at 600px, where WordPress lets it scroll away. */
body.admin-bar #masthead.ss-sticky { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #masthead.ss-sticky { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar #masthead.ss-sticky { top: 0; } }

/* Astra's mobile menu is absolutely positioned against the header, so it
   sits outside the header's own 90px box. Any overflow on the header itself
   clips the menu to a sliver - the cap belongs on the menu panel, where it
   only ever engages if the menu grows taller than the screen. */
body.ast-header-break-point #masthead.ss-sticky .ast-mobile-header-content {
  max-height: calc(100dvh - var(--ss-header-h, 90px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Anchored links land below a revealed header rather than under it. */
html { scroll-padding-top: 96px; }

/* ---------- buttons ---------- */
.ss-btn,
.wp-block-button__link,
.ast-button,
button.ss-btn {
  display: inline-block;
  background: var(--ss-yellow);
  color: var(--ss-yellow-ink);
  font-family: var(--ss-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--ss-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ss-btn:hover, .wp-block-button__link:hover, .ast-button:hover {
  background: var(--ss-yellow-dk);
  color: var(--ss-yellow-ink);
  transform: translateY(-1px);
}
.ss-btn--ink { background: var(--ss-ink); color: #fff; }
.ss-btn--ink:hover { background: var(--ss-ink-soft); color: #fff; }
.ss-btn--ghost {
  background: transparent;
  color: var(--ss-ink);
  border: 1px solid var(--ss-hair);
}
.ss-btn--ghost:hover { background: var(--ss-surface); border-color: var(--ss-ink); }

/* ---------- footer ---------- */
.ss-foot { background: var(--ss-ink); color: #9FA9B4; }
.ss-foot__inner {
  max-width: var(--ss-max);
  margin: 0 auto;
  padding: 54px var(--ss-gutter) 40px;
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ss-foot h4 {
  font-family: var(--ss-font-display);
  color: #EDF1F4;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: 0;
}
.ss-foot a { color: #9FA9B4; text-decoration: none; }
.ss-foot a:hover { color: var(--ss-yellow); }
.ss-foot ul { list-style: none; margin: 0; padding: 0; }
.ss-foot li { margin-bottom: 7px; }
.ss-foot__legal {
  border-top: 1px solid #252D35;
  max-width: var(--ss-max);
  margin: 0 auto;
  padding: 20px var(--ss-gutter) 34px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.ss-foot__legal-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

/* A credit is not a policy page, so it does not sit in the same run as
   Privacy and Returns without a break. A divider in the footer's own
   hairline separates the two groups; it is dropped once the row wraps,
   where a rule at the start of a new line reads as a stray mark. */
.ss-foot__credit {
  margin-left: 4px;
  padding-left: 22px;
  border-left: 1px solid #252D35;
}
.ss-foot__credit:hover { color: var(--ss-yellow); }
@media (max-width: 640px) {
  .ss-foot__credit { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ---------- header menu colours ----------
   Astra paints menu hover and the current item from its own global palette,
   which defaults to blue. Its dynamic CSS is inline in <head>, so match its
   selector with one extra element of specificity rather than !important. */
body .ast-builder-menu-1 .menu-link:hover,
body .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
body .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
body .ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
body .ast-builder-menu-1 .menu-item.current_page_item > .menu-link,
body .ast-builder-menu-mobile .menu-link:hover,
body .ast-builder-menu-mobile .menu-item.current-menu-item > .menu-link {
  color: var(--ss-yellow-dk);
}
/* Astra draws a hover underline from the same palette. */
body .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::before,
body .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after {
  background-color: var(--ss-yellow);
}

/* ---------------------------------------------------------------
   Type on a phone
   ---------------------------------------------------------------
   Every clamp on the site bottoms out at its minimum below ~800px,
   and those minimums were set defensively: 30px headlines, 15px body,
   16px running text. On the device most parents actually use - often
   one-handed, often in a queue - that reads timid and small.

   This block is the mobile end of the type system, set deliberately
   rather than left as whatever the clamps happened to floor at. Body
   copy is 18px throughout; supporting text holds at 16.5px so the
   hierarchy still reads.
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  body { font-size: 18px; line-height: 1.6; }
}