/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Sitetheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/**
 * Smooth-scroll to in-page anchor targets.
 *
 * Clicking an anchor link (e.g. a menu item pointing to
 * /plan-your-visit#tour-info) animates the scroll to the target instead of
 * jumping instantly. Set on the document scroller. Wrapped in a reduced-motion
 * guard so visitors who ask for less motion keep the instant jump. Ships with
 * the base theme and is inherited by every subtheme.
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/**
 * Content link color.
 *
 * Tailwind's Preflight resets <a> to `color: inherit`, so in-content links
 * (rich text, the webform confirmation "Back to form", status messages, …) were
 * indistinguishable from body text. Give links in the page's main content the
 * brand color. `--primary` resolves per theme (oxblood on Cathedral, the
 * default blue on plain Sitetheme), and this file loads after the compiled
 * Tailwind CSS so it wins over Preflight.
 *
 * Scoped to `main` on purpose: the site header/nav and the footer live outside
 * <main> and manage their own colors (many use bare <a> that must keep
 * inheriting), so a bare `a { … }` rule would recolor them.
 *
 * Buttons (`.ct-btn`, incl. CTA actions) are excluded: they color their text
 * with Tailwind utilities (`text-white`, `text-primary-foreground`, …) whose
 * specificity (0,0,1,0) is LOWER than `main a` (0,0,1,1), so without the
 * `:not(.ct-btn)` this rule would override a button's own color (e.g. a white
 * outline button rendering as brand-blue text). Excluded buttons keep their
 * variant colors.
 *
 * `.ct-document` is excluded for the same reason: it is a link-rooted component
 * whose filled variants set their own `--*-foreground` text color (white-ish on
 * a Primary fill). Its class selector is 0,1,0 against this rule's 0,1,2, so
 * without the exclusion every filled Document rendered brand-colored text on a
 * brand-colored background — invisible.
 *
 * ANY future component rooted on an <a> that colors its own text belongs here.
 */
main a:not(.ct-btn, .ct-document) {
  color: var(--primary);
}


/**
 * Base body copy size.
 *
 * Neither Tailwind's Preflight nor the base layer sets a body font-size, so
 * unstyled body text fell back to the browser default (16px). Set it explicitly.
 * Only affects text that inherits from <body> (paragraphs and other copy with
 * no text-* utility); headings and components keep their own utility sizes, so
 * the overall layout is not rescaled (that would need an html font-size).
 */
/**
 * Per-slot type scale, driven by two theme settings.
 *
 * How big text LOOKS is governed by each family's x-height ÷ font-size ratio,
 * and that varies enormously between the faces tenants pick:
 *
 *   Faculty Glyphic 0.550   system-ui 0.513   Outfit 0.480
 *   Poppins / Libre Baskerville 0.449   Cormorant 0.386
 *
 * Cormorant and Faculty Glyphic differ by 42% at the same specified size, so
 * "16px" means two different things on a tenant running one in each slot.
 *
 * This is corrected by scaling the SPECIFIED size, not by `font-size-adjust`.
 * The distinction is the whole point: Tailwind's line-height tokens are
 * unitless ratios (`--text-2xl--line-height: 1.3333`), so a scaled font-size
 * carries its leading with it, while font-size-adjust changes only the size the
 * glyphs are drawn at and leaves the line box computed from the unscaled value.
 * That mismatch cost five separate leading patches before this replaced it.
 *
 * Editors set the two multipliers per theme at
 * /admin/appearance/settings/<theme> ("Font size"), so a Google Font that comes
 * out too large or too small is fixed once, from the UI, rather than by
 * chasing individual components.
 *
 * The `--text-*` values below restate Tailwind's own scale so each step can be
 * multiplied. `.font-serif` re-declares them with the serif multiplier;
 * because custom properties inherit and the utilities read them at use time
 * (`font-size: var(--text-2xl)`), every element resolves the multiplier for the
 * slot it is actually in — with no compounding, since each size is an absolute
 * rem value rather than an em relative to its parent.
 */
:root {
  --text-xs: calc(0.75rem * var(--ct-font-scale-sans, 1));
  --text-sm: calc(0.875rem * var(--ct-font-scale-sans, 1));
  --text-base: calc(1rem * var(--ct-font-scale-sans, 1));
  --text-md: calc(1rem * var(--ct-font-scale-sans, 1));
  --text-lg: calc(1.125rem * var(--ct-font-scale-sans, 1));
  --text-xl: calc(1.25rem * var(--ct-font-scale-sans, 1));
  --text-2xl: calc(1.5rem * var(--ct-font-scale-sans, 1));
  --text-3xl: calc(2rem * var(--ct-font-scale-sans, 1));
  --text-4xl: calc(2.5rem * var(--ct-font-scale-sans, 1));
  --text-5xl: calc(3rem * var(--ct-font-scale-sans, 1));
  --text-6xl: calc(3.75rem * var(--ct-font-scale-sans, 1));
  --text-7xl: calc(4.5rem * var(--ct-font-scale-sans, 1));
  --text-8xl: calc(6rem * var(--ct-font-scale-sans, 1));
}

.font-serif {
  --text-xs: calc(0.75rem * var(--ct-font-scale-serif, 1));
  --text-sm: calc(0.875rem * var(--ct-font-scale-serif, 1));
  --text-base: calc(1rem * var(--ct-font-scale-serif, 1));
  --text-md: calc(1rem * var(--ct-font-scale-serif, 1));
  --text-lg: calc(1.125rem * var(--ct-font-scale-serif, 1));
  --text-xl: calc(1.25rem * var(--ct-font-scale-serif, 1));
  --text-2xl: calc(1.5rem * var(--ct-font-scale-serif, 1));
  --text-3xl: calc(2rem * var(--ct-font-scale-serif, 1));
  --text-4xl: calc(2.5rem * var(--ct-font-scale-serif, 1));
  --text-5xl: calc(3rem * var(--ct-font-scale-serif, 1));
  --text-6xl: calc(3.75rem * var(--ct-font-scale-serif, 1));
  --text-7xl: calc(4.5rem * var(--ct-font-scale-serif, 1));
  --text-8xl: calc(6rem * var(--ct-font-scale-serif, 1));
}

/* NOTE: this block must stay AFTER `.font-serif` above. Both selectors carry
   the same specificity, so the later one wins — placed earlier, the serif
   multiplier would re-apply to buttons and undo the opt-out. */
/**
 * Headings and chrome opt out of the multipliers.
 *
 * The multipliers exist to correct BODY copy: the case that prompted them is
 * `text-xs` at 12px, where Cormorant's x-height falls to 4.6px and phone text
 * becomes unreadable. Prose is picked by size and read in bulk, so normalising
 * it is right.
 *
 * CHROME is different. Heading, button and nav sizes were drawn by eye against
 * the tenant's actual face, so they are already correct and scaling them only
 * moves them off the design: an <h1> here jumps 72px -> 89px under the sans
 * multiplier, and the serif multiplier shrinks buttons from the approved
 * 12/16/20 to 10/14/17 and the main menu from 20px to 17px — the exact
 * complaint that prompted this work.
 *
 * The twelve tokens are restated unscaled rather than just setting the
 * multiplier back to 1 here. That shortcut does NOT work: `--text-7xl` is
 * declared on `:root`, so the `var(--ct-font-scale-sans)` inside it resolves
 * against the ROOT's value at declaration time. What a heading inherits is the
 * already-computed result, and overriding the multiplier further down the tree
 * cannot retroactively change it. Only re-declaring the token re-runs the calc.
 *
 * Delete this block to have the settings govern headings too.
 */
[class*="heading-size-"],
[class*="heading-responsive-"],
.ct-btn,
:is(h1, h2, h3, h4, h5, h6) {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
}


/**
 * Base body copy size.
 *
 * Neither Tailwind's Preflight nor the base layer sets a body font-size, so
 * unstyled body text fell back to the browser default (16px). Set it
 * explicitly, scaled with the sans slot it renders in.
 */
body {
  font-size: calc(1.25rem * var(--ct-font-scale-sans, 1));
}

/**
 * Form controls use the browser's default sans-serif.
 *
 * Form labels, inputs and field descriptions should never render in the theme's
 * display fonts (Outfit / Cormorant / Faculty Glyphic, or a Google Font chosen
 * in theme settings) — those are tuned for headings and body copy, not dense
 * form UI. Force the generic `sans-serif` (the browser/OS default face) instead.
 *
 * `.webform-element-description` is the inner element Webform renders inside
 * core's `.description` wrapper, and it is the one that actually carries the
 * text — styling it covers the visible string without reaching into unrelated
 * `.description` markup elsewhere in the admin UI.
 *
 * Ships with the base theme and is inherited by every subtheme; this file loads
 * after the compiled Tailwind CSS, so it overrides Preflight's
 * `font-family: inherit` on form elements. Submit / button / reset inputs are
 * excluded so themed buttons (e.g. cathedral's serif buttons) keep their face.
 */
label,
legend,
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea,
::placeholder,
.webform-element-description {
  font-family: sans-serif;
}

/**
 * Field descriptions sit at the theme's small step.
 *
 * Deliberately a separate rule from the font-family block above: that selector
 * list also covers labels, inputs, selects and textareas, and a font-size added
 * there would shrink every form control on the platform.
 *
 * Note this makes descriptions slightly LARGER, not smaller — Webform's own
 * stylesheet drops them to 12px, below the 14px small step, which is under the
 * floor for comfortable body text. `--text-sm` is the Tailwind theme token, so
 * the size stays tied to the type scale rather than being a magic number.
 */
.webform-element-description {
  font-size: var(--text-sm);
}

/**
 * Country selects (e.g. the Address element's "Country") size to their content
 * rather than stretching full-width like the theme's other selects. The theme's
 * `select { width: 100% }` (and Webform's flexbox `width: 100%`) make a country
 * list absurdly wide; reset it to the browser's normal auto width. Scoped to the
 * "[country]" field so other selects keep their full-width treatment.
 */
.webform-submission-form select.form-select[name$="[country]"] {
  width: auto;
  max-width: 100%;
}

/**
 * A Text component placed in a horizontal (row) Group fills the remaining space
 * beside its siblings instead of reserving its full content width and forcing
 * them onto the next line.
 *
 * In a `flex-row flex-wrap` group a text block defaults to `flex: 0 1 auto`, so
 * its flex basis is the paragraph's (very wide) max-content size — enough to
 * claim the whole row on its own, wrapping any sibling (e.g. a Text card) below.
 * A per-instance `max-width` only caps the rendered width, not that wrap
 * decision, so it can't fix this. Giving the text `flex: 1 1 0` makes its basis
 * 0 (it packs onto the line) and then grows to fill the space left by fixed
 * siblings; its `max-width` still caps how wide it grows. `min-width: 0` lets it
 * shrink narrower than its content so the sibling fits. Column groups have no
 * `.flex-row`, so vertical stacking is unaffected.
 *
 * Only from `md` (768px) up: below that the row group should keep stacking its
 * children (text above card, each full width). Left flexible on small screens
 * the text would shrink and sit squished beside the card instead of wrapping.
 */
@media (min-width: 768px) {
  .flex-row > .ct-text {
    flex: 1 1 0%;
    min-width: 0;
  }
}