:root {
  --betuz-blue: hsl(210, 75%, 45%);
  --betuz-blue-light: hsl(210, 60%, 65%);
  --betuz-dark: hsl(210, 65%, 22%);
  --background: #fff;
  --foreground: hsl(210, 60%, 15%);
  --muted: hsl(210, 20%, 96%);
  --muted-foreground: hsl(210, 15%, 45%);
  --border: hsl(210, 20%, 90%);
  --card: #fff;
}

* { border-color: var(--border); }

body { font-family: 'Source Sans 3', system-ui, sans-serif; }

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* BETUZ custom colors */
.bg-betuz-blue { background-color: var(--betuz-blue); }
.bg-betuz-dark { background-color: var(--betuz-dark); }
.text-betuz-blue { color: var(--betuz-blue); }
.text-betuz-blue-light { color: var(--betuz-blue-light); }
.hover\:bg-betuz-blue\/90:hover { background-color: hsl(210, 75%, 40%); }
.hover\:text-betuz-blue-light:hover { color: var(--betuz-blue-light); }
.hover\:border-betuz-blue\/30:hover { border-color: rgba(59, 130, 246, 0.3); }
.bg-betuz-dark\/95 { background-color: hsla(210, 65%, 22%, 0.95); }
.bg-betuz-blue\/10 { background-color: hsla(210, 75%, 45%, 0.1); }
.bg-betuz-blue\/5 { background-color: hsla(210, 75%, 45%, 0.05); }
.border-betuz-blue\/20 { border-color: hsla(210, 75%, 45%, 0.2); }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.hover\:text-betuz-blue\/90:hover { color: var(--betuz-blue); opacity: 0.9; }
.focus\:ring-betuz-blue:focus { --tw-ring-color: var(--betuz-blue); box-shadow: 0 0 0 2px var(--betuz-blue); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.border-white\/30 { border-color: rgba(255,255,255,0.3); }
.border-white\/40 { border-color: rgba(255,255,255,0.4); }
.border-white\/50 { border-color: rgba(255,255,255,0.5); }

.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-muted { background-color: var(--muted); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }

.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

.font-display { font-family: 'Playfair Display', serif; }
.scroll-mt-28 { scroll-margin-top: 7rem; }
/* Hero – crisp image, clean overlay */
.hero-bg img { image-rendering: auto; -ms-interpolation-mode: bicubic; }
/* Left-to-right gradient overlay */
.hero-gradient-r {
  background: linear-gradient(to right,
    hsla(210, 65%, 22%, 0.75),
    hsla(210, 65%, 22%, 0.7),
    hsla(210, 75%, 45%, 0.7));
}
/* Blue gradient bottom to top */
.hero-gradient-bt {
  background: linear-gradient(to top,
    hsla(210, 65%, 22%, 0.9),
    hsla(210, 75%, 45%, 0.5),
    transparent);
}
/* Tagline contrast – dark gradient backdrop for readability */
.hero-tagline {
  background: linear-gradient(135deg,
    hsla(210, 65%, 22%, 0.85),
    hsla(210, 65%, 22%, 0.7));
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile menu - CSS only (no JavaScript) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#mobile-menu { display: none; }
.nav-menu-icon-close { display: none !important; }
@media (max-width: 767px) {
  #mobile-menu-toggle:checked ~ #mobile-menu { display: block !important; }
  #mobile-menu-toggle:checked ~ #nav-bar .nav-menu-icon-open { display: none !important; }
  #mobile-menu-toggle:checked ~ #nav-bar .nav-menu-icon-close { display: block !important; }
}
@media (min-width: 768px) {
  #mobile-menu, .nav-menu-btn { display: none !important; }
}