/* ============================================================
   BASE  ·  Fonts · Variables · Global Reset
   Loaded first on every page. No component-specific styles.
   ============================================================ */

/* ── Local fonts (paths relative to this css/ directory) ── */
@font-face {
  font-family: 'Italiana';
  src: url('../Italiana-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Custom Properties ── */
:root {
  --font-default: 'Manrope', sans-serif;
  --font-heading: 'Italiana', serif;

  /* THYS Brand Palette 2026 */
  --color-deep-plum:         #1e1030;   /* Anchor · exterior · type       */
  --color-antique-lilac-mid: #6a4a90;   /* Logo · marks · bridge          */
  --color-antique-lilac:     #ddd4e8;   /* Signature field · backgrounds  */
  --color-blushed-wisteria:  #ecdfe8;   /* Warmth · interior · draw       */
  --color-wisteria-mid:      #d4b0c8;   /* Soft borders · transitions     */
  --color-aged-gold:         #c8a06e;   /* Accent · hardware · foil       */
  --color-warm-ivory:        #f5ede8;   /* Type on dark · cream ground    */

  /* Semantic aliases */
  --color-text-dark:       #1e1030;
  --color-text-light:      #f5ede8;
  --color-text-subtle:     #6a4a90;
  --color-background:      #ddd4e8;
  --color-background-dark: #1e1030;
  --color-accent:          #6a4a90;
  --color-border:          #d4b0c8;

  /* Layout */
  --navbar-sticky-height:        40px;
  --navbar-gap-initial-desktop:  5rem;
  --placeholder-width-desktop:   80px;
  --container-max-width:         1100px;
  --container-padding:           1.5rem;
  --video-pin-height:            85vh;
  --video-scrub-duration-height: 250vh;
  --section-vertical-margin:     2.5rem;
  --navbar-links-max-width:      814px;
  --social-icon-size:            24px;
  --form-input-max-width:        250px;
  --sticky-nav-translateY:       -20px;
}

/* ── Global box-sizing & scroll ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }

/* Non-landing pages get default font + background */
html, body:not(.landing-page-body) {
  font-family: var(--font-default);
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
}
body { margin: 0; padding: 0; }

/* Prevent scroll when popup is open */
html.popup-open,
body.popup-open {
  overflow: hidden;
  height: 100%;
}

/* Centred container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* Global button font */
button { font-family: var(--font-heading); }

/* Utility: screen-reader only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Hide Instagram icon on desktop (shown on mobile via legacy.css) */
.mobile-instagram-link { display: none !important; }

/* ── Custom cursors ── */
html {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='6' fill='%231e1030' stroke='%23f5ede8' stroke-width='1.5'/></svg>") 8 8, auto;
}
a, button, [onclick], [role="button"],
input[type="button"], input[type="submit"], input[type="reset"],
select, label:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='6' fill='%236a4a90' stroke='%231e1030' stroke-width='1'/></svg>") 8 8, pointer;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], textarea {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='6' fill='%236a4a90' stroke='%231e1030' stroke-width='1'/></svg>") 8 8, pointer;
}
.landing-menu-toggle,
.landing-button,
#navbar .nav-item span,
.sticky-navbar .nav-item span,
.carousel-indicator,
.carousel-button {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='6' fill='%236a4a90' stroke='%231e1030' stroke-width='1'/></svg>") 8 8, pointer;
}