/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:ital,wght@0,200..900;1,200..900&display=swap');
:root {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Cormorant Garamond", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Color scheme inspired by reference */
  --accent-primary: #5E6B82; /* slate blue */
  --accent-gold: #C2A26A;    /* warm gold */
  --bg-soft: #F6F6F3;        /* soft light background */
}

/* Map font utility classes used in markup */
.font-inter { font-family: var(--font-sans); }
.font-playfair { font-family: var(--font-serif); }

/* Smooth scrolling for anchor navigation */
html {
  scroll-behavior: smooth;
}


/* Image rendering improvements */
img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* helps smooth hover scale transitions */
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lightbox tweaks */
.lightbox-open {
  overflow: hidden;
}

/* Utility to improve focus visibility */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Minor container padding tweak for very large screens */
@media (min-width: 1536px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.zalando-sans-normal {
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* Team grid adjustments - left align and spacing */
.team-grid figcaption {
  text-align: left;
  padding-left: 1rem;
  padding-right: 1rem;
}
.team-grid figure {
  padding: 0;
  overflow: hidden;
}
.team-grid img {
  object-fit: cover;
  object-position: top;
  display: block;
}
/* Typography to match reference card */
.team-grid figcaption p:first-child {
  font-size: 1.25rem; /* ~20px */
  line-height: 1.75rem; /* ~28px */
  font-weight: 600;
  color: #111827; /* neutral-900 */
}
.team-grid figcaption p + p {
  font-size: 1rem; /* ~16px */
  line-height: 1.5rem; /* ~24px */
  color: #6B7280; /* neutral-500 */
  font-weight: 500;
}

/* Hero Ken Burns animation */
@keyframes kenburns {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(0.5%, 1%, 0); }
}
.kenburns {
  animation: kenburns 8s ease-out forwards;
  will-change: transform;
}

/* Subtle film grain overlay for hero */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: cover;
  pointer-events: none;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Service card lift and accent underline */
.service-card {
  position: relative;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}
.service-card::after {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0.5rem;
  height: 2px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}
.service-card:hover::after {
  transform: scaleX(1);
}

/* Masonry layout for Projects page */
.masonry {
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 640px) {
  .masonry { column-count: 2; }
}
@media (min-width: 1024px) {
  .masonry { column-count: 3; }
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Filter links */
.filter-link {
  color: #111827; /* neutral-900 */
  transition: color 200ms ease;
}
.filter-link:hover { color: var(--accent-primary); }
.filter-link.active {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
  text-underline-offset: 3px;
}

/* Header menu style inspired by reference */
.menu-link {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem; /* ~12.8px */
  font-weight: 600;
  color: #111827; /* neutral-900 */
  transition: color 200ms ease;
}
.menu-link:hover { color: var(--accent-primary); }
.menu-link.active { color: var(--accent-primary); }

.menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  opacity: 0.85;
  transition: color 200ms ease, opacity 200ms ease;
}
.menu-social a:hover {
  color: var(--accent-primary);
  opacity: 1;
}
.menu-social svg {
  width: 18px;
  height: 18px;
}

/* Parallax utility */
.parallax {
  will-change: transform;
  transform: translateZ(0) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .parallax {
    transform: none !important;
  }
}

/* ================================
   About page: normalize typography
   Scope: Left column "About MCD" only
   ================================ */
.about-mcd-typography, .about-mcd-typography * {
  font-family: var(--font-sans) !important;  /* single font: Source Sans 3 */
  font-weight: 400 !important;               /* remove bold variations */
  font-style: normal !important;             /* remove italics */
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}

.about-mcd-typography h1,
.about-mcd-typography h2,
.about-mcd-typography h3,
.about-mcd-typography p,
.about-mcd-typography em,
.about-mcd-typography strong,
.about-mcd-typography span {
  font-size: 1rem !important;         /* unify size */
  line-height: 1.75 !important;       /* consistent leading */
  color: #111827 !important;          /* neutral-900 */
}

/* =========================================
   Dark Theme
   ========================================= */
.theme-dark {
  color-scheme: dark;
  --bg-0: #0b0f14;   /* page background */
  --bg-1: #111827;   /* header/footer/panels */
  --bg-2: #1f2937;   /* subtle surface */
  --text-0: #f9fafb; /* near white */
  --text-1: #e5e7eb; /* light text */
  --text-2: #d1d5db; /* dim text */
  --muted:  #9ca3af; /* placeholders */
  --border-0: #111827;
  --border-1: #1f2937;
  --border-2: #374151;
}

/* Base page surfaces */
.theme-dark,
.theme-dark body {
  background-color: var(--bg-0);
  color: var(--text-1);
}

/* Utility overrides - backgrounds */
.theme-dark .bg-white { background-color: var(--bg-1) !important; }
.theme-dark .bg-neutral-50 { background-color: var(--bg-2) !important; }

/* Utility overrides - text */
.theme-dark .text-neutral-900,
.theme-dark .text-neutral-800,
.theme-dark .text-neutral-700,
.theme-dark .text-neutral-600,
.theme-dark .text-neutral-500 {
  color: var(--text-1) !important;
}

/* Utility overrides - borders */
.theme-dark .border-neutral-100,
.theme-dark .border-neutral-200,
.theme-dark .border-neutral-300 {
  border-color: var(--border-2) !important;
}

/* Header/Footer surfaces */
.theme-dark header {
  background-color: var(--bg-1) !important;
  border-color: var(--border-1) !important;
}
.theme-dark footer {
  background-color: var(--bg-1) !important;
  border-color: var(--border-1) !important;
}

/* Navigation links */
.theme-dark .menu-link {
  color: var(--text-1) !important;
}
.theme-dark .menu-link:hover,
.theme-dark .menu-link.active {
  color: var(--accent-primary) !important;
}

/* Social icons */
.theme-dark .menu-social a {
  color: var(--text-1) !important;
  opacity: 0.85;
}
.theme-dark .menu-social a:hover {
  color: var(--accent-primary) !important;
  opacity: 1;
}

/* Filter links */
.theme-dark .filter-link {
  color: var(--text-1) !important;
}
.theme-dark .filter-link:hover,
.theme-dark .filter-link.active {
  color: var(--accent-primary) !important;
  text-decoration-color: var(--accent-gold) !important;
}

/* Cards and separators */
.theme-dark .service-card:hover {
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* Team grid text on dark */
.theme-dark .team-grid figcaption p:first-child {
  color: var(--text-0) !important;
}
.theme-dark .team-grid figcaption p + p {
  color: var(--text-2) !important;
}

/* Forms */
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="number"],
.theme-dark input[type="date"],
.theme-dark input[type="time"],
.theme-dark input[type="file"],
.theme-dark textarea,
.theme-dark select {
  background-color: var(--bg-1) !important;
  color: var(--text-0) !important;
  border-color: var(--border-2) !important;
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: var(--muted) !important;
}
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: var(--accent-primary) !important;
}

/* Panels commonly used with light classes -> dark surfaces */
.theme-dark .bg-white.border,
.theme-dark .bg-white.border-neutral-200,
.theme-dark .bg-neutral-50.border,
.theme-dark .bg-neutral-50.border-neutral-200 {
  background-color: var(--bg-1) !important;
  border-color: var(--border-2) !important;
}

/* Hero buttons with border-white keep proper contrast on hover */
.theme-dark .border-white\/80:hover {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* ================================
   Header logo size transitions
   ================================ */
header .site-logo{
  height: 70px; /* match two-line brand title when at top */
  font-size: 1rem;
  transition: height 200ms ease, transform 200ms ease, opacity 200ms ease, filter 200ms ease;
  will-change: height, transform;
  /* Recolor raster logo to match text color in light theme */
  filter: brightness(0) saturate(100%);
}
header .menu-link {  
  font-size: 1.2rem;
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform;
}
header .menu-social svg{
  height: 24px;
  width: 24px;
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform;
}
@media (min-width: 768px) {
  header .site-logo { height: 85px; }
}
header.is-scrolled .site-logo {
  height: 36px; /* shrink on scroll */
}
header.is-scrolled .menu-social svg{
  height: 18px;
  width: 18px;
}
header.is-scrolled .menu-link{
  font-size: 0.9rem;
}
@media (min-width: 768px) {
  header.is-scrolled .site-logo { height: 40px; }
}

/* Compact header padding when scrolled */
header.is-scrolled .container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Header brand title behavior */
header .brand-title {
  display: inline-block;  
  font-weight: 600;
  color: #111827;
  line-height: 1.1;
}
header .brand-title-expanded {
  display: inline;
}
header .brand-title-compact {
  display: none;
  white-space: nowrap;
}

/* Collapse to single-line when scrolled */
header.is-scrolled .brand-title-expanded {
  display: none;
}
header.is-scrolled .brand-title-compact {
  display: inline;
}

/* Optional sizing to harmonize with logo transitions */
header .brand-title {
  font-size: 1.3rem;
  transition: font-size 200ms ease, opacity 200ms ease;
}
@media (min-width: 768px) {
  header .brand-title { font-size: 1.40rem; }
}
header.is-scrolled .brand-title {
  font-size: 1rem;
}
@media (min-width: 768px) {
  header.is-scrolled .brand-title { font-size: 1rem; }
}

/* Dark theme color for brand title */
.theme-dark header .brand-title {
  color: var(--text-1) !important;
}

/* Dark theme logo recolor to match text */
.theme-dark header .site-logo {
  /* Invert to light to match dark theme text */
  filter: brightness(0) invert(1);
}

/* Inverted header palette (dark header, light items) */
header.header-invert {  
  border-color: #1f2937 !important;     /* theme dark border-1 */
}
header.header-invert .brand-title,
header.header-invert .menu-link,
header.header-invert .menu-social a {
  color: #f9fafb !important; /* light text */
}
header.header-invert .menu-link:hover,
header.header-invert .menu-link.active {
  color: var(--accent-primary) !important;
}
header.header-invert #site-header-toggle {
  border-color: #374151 !important; /* darker border */
  color: #e5e7eb !important;        /* light icon */
}
header.header-invert #site-header-toggle:hover {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}
/* Logo recolor for inverted header */
header.header-invert .site-logo {
  filter: brightness(0) invert(1);
}

/* Mobile panel for inverted header */
.header-invert-panel {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
}
.header-invert-panel .menu-link {
  color: #f9fafb !important;
}