/**
 * @file cathedral.css
 * Cathedral Basilica palette — overrides sitetheme's shadcn design tokens with
 * the oxblood/gold/ivory scheme and exposes the raw brand tokens used by the
 * cathedral-specific SDC styling (eyebrow, divider, arch-photo, dark bands).
 *
 * Loaded after sitetheme's src/theme.css (base-theme libraries load before
 * subtheme libraries), so these :root declarations win on source order.
 */

:root {
  /* Raw brand palette (from the mockup :root). */
  --oxblood-dark: #4a1216;
  --gold: #c9a356;
  --ivory: #fbf7ef;
  --ivory-2: #f4eddd;
  --cream: #ebd9b4;
  --cream-2: #f5e9cf;
  --ink: #2e2318;
  --body: #5a4a34;
  --brand-border: #e2d5bc;
}

/* Map the brand palette onto sitetheme's shadcn tokens so existing components
 * (button, card, cta, section, footer, …) adopt the cathedral scheme with no
 * per-component overrides. Applied to both schemes; cathedral is light-first. */
:root,
.dark {
  --background: var(--ivory);
  --foreground: var(--ink);
  --card: #ffffff;
  --card-foreground: var(--ink);
  --popover: #ffffff;
  --popover-foreground: var(--ink);
  --primary: #6e1f24;
  --primary-foreground: var(--cream-2);
  --secondary: var(--ivory-2);
  --secondary-foreground: var(--ink);
  --muted: var(--ivory-2);
  --muted-foreground: var(--body);
  --accent: var(--gold);
  --accent-foreground: var(--ink);
  --border: var(--brand-border);
  --input: var(--brand-border);
  --ring: var(--accent);
}

/* Body defaults: medium weight + black text. Unlayered so it overrides
   sitetheme's compiled @layer base body styles (font-normal / text-foreground). */
body {
  font-weight: 500;
  color: #000;
}

/* Buttons are squared across the cathedral design (mockup uses no radius). */
.ct-btn {
  border-radius: 0 !important;
}

/* Mockup-style button treatment for BODY buttons: generous fixed padding and
 * the cathedral's heavier, letterspaced label. The header CTA is EXCLUDED so
 * its component `size` prop drives its padding too.
 *
 * font-size is deliberately NOT set here. It used to be pinned at 0.84375rem,
 * which — being unlayered — beat the component's `text-*` utilities (Tailwind
 * puts those in @layer utilities, and any unlayered rule wins regardless of
 * specificity). That froze every body button at 13.5px and made the Button
 * size prop do nothing but change padding, which is exactly the failure mode
 * the comment above warns about. Size now comes from the component.
 *
 * font-weight is gone for the same reason: it was pinned at 600 and beat the
 * component's font-* utilities, so the Font weight prop could never take
 * effect. Weight now comes from the component too (default Normal). Padding and
 * letter-spacing stay — those are cathedral design decisions with no
 * corresponding prop. */
.ct-btn:not(.region-header .navbar--links .ct-btn) {
  letter-spacing: 0.08em;
}

/* Padding per size. This used to be a single `padding: 14px 32px` for every
   body button, which — being unlayered — beat the component's own
   px- and py- utilities (Tailwind puts those in @layer utilities). The Button size prop
   therefore changed the label size but never the button's shape, so all three
   sizes rendered as the same slab. Same failure the note above describes for
   font-size, one property along.

   Kept generous per the mockup, but now stepped so the sizes read as a scale. */
.ct-btn--size-small:not(.region-header .navbar--links .ct-btn) {
  padding: 8px 20px;
}

.ct-btn--size-medium:not(.region-header .navbar--links .ct-btn) {
  padding: 12px 28px;
}

.ct-btn--size-large:not(.region-header .navbar--links .ct-btn) {
  padding: 16px 36px;
}

/* Hero button hovers (match mockup): the solid CTA carries a faint cream border
 * and inverts to a white button with oxblood text; the outline CTA goes green. */
.ct-cta .ct-btn--primary {
  border: 1px solid rgba(235, 217, 180, 0.4);
}

.ct-cta .ct-btn--primary:hover,
.ct-cta .ct-btn--primary:focus-visible {
  border-color: var(--gold);
}

/* Primary buttons everywhere (hero, header CTA, button components) invert on
   hover: gold background with oxblood (primary) text — like the events pager. */
.ct-btn.ct-btn--primary:hover,
.ct-btn.ct-btn--primary:focus-visible {
  background: var(--gold);
  color: var(--primary);
}

.ct-cta .ct-btn--outline-light:hover,
.ct-cta .ct-btn--outline-light:focus-visible {
  background: var(--gold);
  color: var(--primary);
}

/* -------------------------------------------------------------------------
 * Header — utility bar (oxblood, from utility-bar SDC) sits above the main
 * navbar. The navbar bar is ivory with a bottom border and Cormorant links.
 * ------------------------------------------------------------------------- */
.region-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
}

.region-header .navbar {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  align-items: center;
}

/* Logo: constrain to a fixed height, keep aspect ratio, never clip. The base
 * navbar applies h-full/w-full + flex wrappers that otherwise blow it up. */
.region-header .navbar--logo,
.region-header .navbar--logo > div,
.region-header .navbar--logo a,
.region-header .navbar--logo .branding {
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

.region-header .navbar--logo img {
  /* Fit within a 74px height AND a max width, preserving aspect ratio. Compact
     logos (~3.33:1) hit the 74px height; wide wordmarks (e.g. the default OFM
     logo 6.23:1) are capped by width so they don't dominate. */
  height: auto !important;
  max-height: 74px !important;
  width: auto !important;
  max-width: 300px !important;
}

/* Main menu (top-level bar): horizontal serif links, no underline. Hover turns
 * the link gold. Scoped to the top-level ct-nav__list / ct-nav__link so it does
 * NOT reach the dropdown submenus — those are styled in navbar.css. */
.region-header .ct-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Fluid, with a floor. The design's spacing is 2.125rem and that is what the
     menu wears whenever there is room; below roughly 1550px it tapers, which
     buys width back before any label has to wrap. The 1.25rem floor is the
     point where the items would start reading as one run-on line — navbar.js
     hands over to the hamburger rather than going below it. */
  gap: clamp(1.25rem, 2.2vw, 2.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.region-header .ct-nav__item {
  background: transparent;
  width: auto;
  max-width: none;
}

.region-header .ct-nav__link {
  display: inline-flex;
  width: auto;
  padding: 0;
  min-height: 0;
  font-family: var(--font-serif);
  /* Deliberately NOT scaled by the slot multiplier. The menu is chrome, sized
     by eye against this tenant's face; applying the serif multiplier (0.864
     here) shrinks it to 17px, which is the "main menu is too small" report that
     started this work. Prose is normalised, chrome is not. */
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  color: #000;
  text-decoration: none;
}

.region-header .ct-nav__item--parent:hover .ct-nav__link,
.region-header .ct-nav__item--parent:focus-within .ct-nav__link,
.region-header .ct-nav__link:hover,
.region-header .ct-nav__link:focus {
  color: var(--accent);
}

/* Lay the nav out like the mockup: logo far left, CTA pinned far right, and the
 * main menu in the band between them. The menu wrapper GROWS to fill that gap so
 * the navbar's `menu_align` prop (which sets justify-content on the menu) has
 * room to position the menu — left = hug the logo, center = centered, right =
 * against the CTA. The CTA stays content-width so it never gets crowded. */
@media (min-width: 768px) {
 :root:not(.navbar-compact) {
  .region-header .navbar--menu {
    gap: 2.75rem;
  }
  .region-header .navbar--dropdown-menu-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
  }
  /* Fill the (now-growing) wrapper so justify-content can distribute the slack. */
  .region-header .navbar--dropdown-menu {
    width: 100%;
  }
  /* When menu_align = left the menu (md:justify-start) would butt right up
     against the branding; add a gap so it doesn't hug the logo. Center/right
     use md:justify-center / md:justify-end and are unaffected. */
  .region-header .navbar--dropdown-menu.wide\:justify-start {
    padding-left: 2.75rem;
  }
  .region-header .navbar--links {
    margin-left: 0;
    width: auto;
    flex: 0 0 auto;
  }
 }
}

/* Shrink the main menu links on tablet / small-desktop so they fit alongside
   the logo and CTA — this buys real estate, so the header stays a horizontal
   bar down to a narrower width before navbar.js switches it to the hamburger.
   The fit measurement reads the live DOM, so it accounts for this by itself. */
@media (min-width: 768px) and (max-width: 1279px) {
  :root:not(.navbar-compact) .region-header .ct-nav__link {
    font-size: 1rem;
  }
}

/* Header CTA: its fill, border, padding, size and label color all come from the
 * button component's `variant` + `size` props — NOT hardcoded here, or picking a
 * different Style/Size in Canvas wouldn't visibly change it. The component
 * already provides oxblood-fill/white-text (primary), squared corners (global
 * `.ct-btn`) and serif-uppercase (button.css). Keep only the prop-agnostic
 * nicety of not wrapping the label. Hover is likewise variant-driven. */
.region-header .navbar--links a {
  white-space: nowrap;
}

/* The calendar icon inherits the label color via currentColor, and must not
 * shift on hover (base button adds a group-hover translate). */
.region-header .navbar--links a :where(span, svg) {
  color: inherit;
  transform: none !important;
  translate: none !important;
}


/* -------------------------------------------------------------------------
 * Mobile menu (< 768px). The navbar hamburger overlay becomes a full-height
 * oxblood panel that also carries the utility bar's search + links (folded in
 * by cathedral/mobile-nav) and the Plan Your Visit button:
 *   logo/close → search → main menu → button → utility links.
 * The folded-in clones (.navbar--m-search / .navbar--m-utility) are hidden on
 * desktop below.
 * ------------------------------------------------------------------------- */
/* Keyed on `.navbar-compact` rather than a width: navbar.js sets it below 768px
   AND whenever the menu stops fitting, so this styling follows the hamburger to
   whatever width it appears at. Almost every rule here is gated on
   `.navbar--menu--open`, which only JS can produce, so there is no pre-JS gap —
   the two rules that DO affect the closed header are repeated in a plain media
   query below so they still hold before the script runs. */
:root.navbar-compact {
  /* The utility strip is not shown as a top bar on mobile; its content lives
     inside the menu instead. */
  .region-header .ct-utility-bar {
    display: none;
  }

  /* Overlay → single scrolling oxblood column. */
  .region-header .navbar--menu.navbar--menu--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--primary);
    color: var(--cream-2);
    overflow-y: auto;
    padding: 1rem 1.5rem 2.5rem;
  }

  /* Logo row: white logo + light close button. */
  .region-header .navbar--menu--open .navbar--modal-top {
    flex: 0 0 auto;
    padding: 0.5rem 0 1.25rem;
  }
  .region-header .navbar--menu--open .navbar--modal-logo :where(img) {
    filter: brightness(0) invert(1);
  }
  .region-header :is(.navbar--logo, .navbar--modal-logo) .branding {
    height: 68px;
    width: auto !important;
  }
  /* In-menu logo only: the <img> ships with Tailwind `h-full w-full`, which
     stretches it to the container width. Scale by aspect ratio instead (fill
     the height, auto width). Scoped to the modal logo so the header logo
     (governed by the desktop rule) is left untouched. */
  .region-header .navbar--modal-logo .branding img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }
  .region-header .navbar--menu--open .navbar--hide-menu {
    color: var(--cream-2);
  }

  /* Search box. */
  .region-header .navbar--m-search {
    flex: 0 0 auto;
    margin-bottom: 1.5rem;
  }
  .region-header .navbar--m-search .ct-utility-bar__search {
    position: relative;
    display: flex;
    width: 100%;
  }
  .region-header .navbar--m-search .ct-utility-bar__input {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 1rem;
    font-size: 1.05rem;
    border-color: rgba(235, 217, 180, 0.4);
    color: var(--cream-2);
  }

  /* Main menu: full-width serif links in cream with hairline dividers. */
  .region-header .navbar--menu--open .navbar--dropdown-menu-wrapper {
    flex: 0 0 auto;
    padding: 0;
  }
  .region-header .navbar--menu--open .navbar--dropdown-menu-wrapper::after {
    display: none;
  }
  .navbar--dropdown-menu-wrapper > :last-child {
    padding-bottom: 0;
  }
  .region-header .navbar--menu--open .navbar--dropdown-menu :where(ul) {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .region-header .navbar--menu--open .navbar--dropdown-menu :where(li) {
    width: 100%;
  }
  .region-header .navbar--menu--open .navbar--dropdown-menu :where(a) {
    display: block;
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--cream-2);
  }
  .region-header .navbar--menu--open .navbar--dropdown-menu :where(a)::after {
    display: none;
  }

  /* Plan Your Visit button: full-width gold. */
  .region-header .navbar--menu--open .navbar--links {
    flex: 0 0 auto;
    width: 100%;
    margin: 1.75rem 0 0;
  }
  .region-header .navbar--menu--open .navbar--links .ct-btn {
    width: 100%;
  }
  /* Gold button on the oxblood panel (the desktop header paints it oxblood). */
  .region-header .navbar--menu--open .navbar--links a {
    justify-content: center;
    background: var(--gold);
    color: var(--primary);
    border-color: var(--gold);
  }

  /* Utility links: two-column grid at the bottom, separated by a rule. */
  .region-header .navbar--m-utility {
    flex: 0 0 auto;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(235, 217, 180, 0.22);
  }
  .region-header .navbar--m-utility .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
  }
  .region-header .navbar--m-utility .menu__item {
    display: block;
  }
  .region-header .navbar--m-utility .menu__item::before {
    display: none;
  }
  .region-header .navbar--m-utility :where(a) {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 400;
  }
}

/* Closed-header rules from the block above, repeated for the pre-JS window
   below 768px (the class is only set once navbar.js has measured). */
@media (max-width: 767px) {
  .region-header .ct-utility-bar {
    display: none;
  }

  .region-header :is(.navbar--logo, .navbar--modal-logo) .branding {
    height: 68px;
    width: auto !important;
  }
}

/* The folded-in clones belong only to the hamburger overlay. */
:root:not(.navbar-compact) .navbar--m-search,
:root:not(.navbar-compact) .navbar--m-utility {
  display: none;
}

/* Uppercase all headings sitewide. Cormorant reads well in caps, and the
 * cathedral design calls for uppercase h1–h6 throughout the front end. This
 * only affects cathedral-rendered (front-end) pages, not the Gin admin theme. */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

/* Cathedral: the address "Get Directions" button-styled link uses the serif
 * display face instead of the base theme's sans. Prefixed with `body` (one extra
 * element) so it outranks sitetheme's `.ct-address .ct-address__directions`
 * (0,2,0) regardless of which stylesheet loads first. */
body .ct-address .ct-address__directions {
  font-family: var(--font-serif);
}

/* Cathedral: hide the header cart indicator entirely while the cart is empty —
 * only show it once an item is in the cart. custom_store's storefront.css shows
 * the indicator (icon, no badge) even at 0 items; here we hide the whole <a>
 * whenever its count badge carries `is-empty` (count === 0). storefront.js
 * toggles `is-empty` on the count as items are added/removed, so `:has()` makes
 * this reactive with no JS. Specificity (0,3,0) outranks
 * `.cs-cart-indicator.is-placed` (0,2,0), so it wins after the placement JS runs
 * regardless of stylesheet order. */
.cs-cart-indicator:has(.cs-cart-indicator__count.is-empty) {
  display: none;
}