/* =============================================================================
   Tavoleria — main.css
   Hand-written CSS for the marketing website. No framework; no preprocessor.
   Token reference: Branding_and_Marketing/Visual_Direction.md
   Implementation reference: Notes_from_BMO_to_WDO.md in _Shared
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts — self-hosted per Build_Approach_Memo_Rev1.md §5 (privacy posture)
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Manrope-Light.woff2') format('woff2'),
       url('/fonts/Manrope-Light.woff') format('woff');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-Light.woff2') format('woff2'),
       url('/fonts/CormorantGaramond-Light.woff') format('woff');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-Regular.woff2') format('woff2'),
       url('/fonts/CormorantGaramond-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-Italic.woff2') format('woff2'),
       url('/fonts/CormorantGaramond-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-LightItalic.woff2') format('woff2'),
       url('/fonts/CormorantGaramond-LightItalic.woff') format('woff');
}

/* -----------------------------------------------------------------------------
   Design tokens — three brand colors and a small typographic / spacing scale
   ----------------------------------------------------------------------------- */

:root {
  /* Color — three colors only. Photography carries the rest. */
  --color-text: #1A1A1A;
  --color-background: #F5F1E8;
  --color-accent: #5C6B47;

  /* Type families */
  --font-wordmark: 'Manrope', system-ui, sans-serif;
  --font-body: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;

  /* Type scale — generous, editorial */
  --size-caption: 0.875rem;     /* 14px */
  --size-body: 1.125rem;        /* 18px */
  --size-body-lg: 1.25rem;      /* 20px */
  --size-h3: 1.625rem;          /* 26px */
  --size-h2: 2.25rem;           /* 36px */
  --size-h1: 3rem;              /* 48px */
  --size-hero: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);

  /* Wordmark sizing — one job each */
  --size-wordmark-nav: 1.125rem;
  --size-wordmark-footer: 0.875rem;

  /* Line heights */
  --line-tight: 1.2;
  --line-normal: 1.45;
  --line-comfortable: 1.6;

  /* Wordmark tracking per Visual Direction §2.1 */
  --tracking-wordmark: 0.35em;

  /* Modular spacing scale (8px baseline; section spacing in larger multiples) */
  --space-1: 0.5rem;    /* 8 */
  --space-2: 1rem;      /* 16 */
  --space-3: 1.5rem;    /* 24 */
  --space-4: 2rem;      /* 32 */
  --space-5: 3rem;      /* 48 */
  --space-6: 4rem;      /* 64 */
  --space-7: 6rem;      /* 96 */
  --space-8: 8rem;      /* 128 */

  /* Container widths */
  --content-width: 64rem;      /* 1024 — comfortable inner content width */
  --content-narrow: 50rem;     /* 672 — for prose */

  /* Motion */
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;
}

/* -----------------------------------------------------------------------------
   Reset / normalize, light touch
   ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: var(--line-comfortable);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover, a:focus-visible {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Skip link — keyboard accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-text);
  color: var(--color-background);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: 0;
  color: var(--color-background);
}

/* -----------------------------------------------------------------------------
   Typography — headlines, body, captions
   ----------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: var(--line-tight);
  margin: 0 0 var(--space-3);
  text-align: center;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p {
  margin: 0 0 var(--space-3);
  max-width: 65ch;
}

em { font-style: italic; }

/* Trademark superscript — BMO preference is 0.55em with line-height: 0 so the
   superscript whispers rather than announces, per Notes_from_BMO_to_WDO.md. */
.trademark {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
}

/* -----------------------------------------------------------------------------
   Wordmark — Manrope Light, uppercase, 0.35em tracking
   ----------------------------------------------------------------------------- */

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 300;
  font-size: var(--size-wordmark-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-text);
  text-decoration: none;
  /* Pull the trailing letter-spacing back so the glyph-cluster aligns visually */
  padding-left: var(--tracking-wordmark);
}

.wordmark-footer {
  font-size: var(--size-wordmark-footer);
}

/* -----------------------------------------------------------------------------
   Navigation
   ----------------------------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  position: relative;
  z-index: 10;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-5);
}

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 400;
}

.nav-links a[aria-current="page"] {
  color: var(--color-accent);
}

/* Mobile menu toggle — text label, not an icon, per BMO direction */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  font-family: var(--font-body);
  font-size: var(--size-body);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

@media (max-width: 640px) {
  .site-nav { padding: var(--space-3); }
  .nav-toggle-label { display: inline-block; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0 0;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
}

/* -----------------------------------------------------------------------------
   Hero — full-bleed photography at top of each content page
   ----------------------------------------------------------------------------- */

.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: var(--color-text);
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tighten the hero on very tall viewports so it doesn't dominate */
@media (min-aspect-ratio: 1/1) {
  .hero { aspect-ratio: 21 / 9; max-height: 80vh; }
}

/* -----------------------------------------------------------------------------
   Content layout
   ----------------------------------------------------------------------------- */

.content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
}

.content-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

/* Center paragraph blocks within content-narrow so the text column sits in the
   visual center, not anchored at the left of the wider container. */
.content-narrow p {
  margin-left: auto;
  margin-right: auto;
}

.statement {
  font-size: var(--size-body-lg);
  line-height: var(--line-comfortable);
  font-style: italic;
  font-weight: 300;
  max-width: 55ch;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.cta-link {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.cta-link:hover, .cta-link:focus-visible {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   Contact-page specifics
   ----------------------------------------------------------------------------- */

.contact-meta {
  text-align: center;
  margin-bottom: var(--space-6);
}

.contact-meta .phone-svg {
  display: inline-block;
  width: 11.2rem;
  max-width: 56vw;
  color: var(--color-text);
}

.contact-meta .location {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.7;
  margin-top: var(--space-3);
}

.contact-form-wrapper {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-3) 0 0;
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  padding: var(--space-5) var(--space-4);
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

.footer-disclaimer {
  font-size: var(--size-caption);
  max-width: 60ch;
  margin: 0;
  line-height: var(--line-normal);
  opacity: 0.8;
}

.footer-meta {
  font-size: var(--size-caption);
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.8;
}

.footer-meta a:hover, .footer-meta a:focus-visible {
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Privacy Policy — long-form legal page
   ----------------------------------------------------------------------------- */

.legal-content {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  text-align: left;
}

/* Legal prose paragraphs stay left-anchored (no auto centering of the block). */
.legal-content p,
.legal-content li {
  margin-left: 0;
  margin-right: 0;
}

/* Privacy Policy headings stay left-aligned — legal prose reads cleaner left-aligned
   than the centered marketing pages. */
.legal-content h1, .legal-content h2, .legal-content h3 { text-align: left; }

.legal-content h1 { font-size: var(--size-h1); margin-bottom: var(--space-4); }
.legal-content h2 {
  font-size: var(--size-h2);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.legal-content h3 {
  font-size: var(--size-h3);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.legal-content p, .legal-content li { font-size: var(--size-body); line-height: var(--line-comfortable); }
.legal-content ul, .legal-content ol { padding-left: var(--space-4); }

.legal-effective-date {
  font-style: italic;
  margin-bottom: var(--space-5);
  opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   404
   ----------------------------------------------------------------------------- */

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
}

/* Form fallback message — centered for visual consistency with the centered
   phone SVG and location text immediately above it on the Contact page. */
.form-fallback {
  text-align: center;
  font-style: italic;
  margin: var(--space-3) 0;
}

/* Material disclaimer footnote — small, slightly faded, sits at the bottom of
   the Materials page where Cosentino and Dekton are actually referenced. This
   replaces the previous site-wide footer disclaimer per partner direction. */
.material-disclaimer {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(26, 26, 26, 0.15);
  text-align: center;
  opacity: 0.75;
  font-style: italic;
  max-width: 100%;
}

/* HubSpot embedded form container — constrain to a narrower column so the form
   sits as a centered block rather than spanning the full content-narrow width.
   This keeps the form visually anchored on the same X axis as the centered phone
   image and contact-meta above it. */
.hs-form-frame {
  max-width: 32rem;
  margin: 0 auto;
  text-align: left;
}

/* HubSpot form: suppress the default required-field asterisks per BMO's
   walkthrough — the form uses the (Optional) convention as the single label
   treatment, so required fields show plain labels and optional fields stay
   explicitly marked. HubSpot's newer hs-form-frame embed renders the required
   marker as <span class="hs-form-required">*</span>; older form-embed CSS
   also uses the legacy-indicator class. Cover both. */
.hs-form-frame .hs-form-required,
.hs-form-frame [class*="required-indicator"],
.hs-form-frame [class*="RequiredIndicator"],
.hs-form-frame label .hs-form-required,
.hs-form-frame .hs-field-label .hs-form-required {
  display: none !important;
}
/* Also catch the case where HubSpot uses a ::after pseudo-element for the
   asterisk rather than a child element. */
.hs-form-frame .hs-form-required::after,
.hs-form-frame label.hs-required-indicator::after,
.hs-form-frame [data-required]::after {
  content: none !important;
}