/* ==========================================================================
   mecowi.hu - global styles
   All site styles live here. No component-scoped styles.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   PLACEHOLDER TYPEFACE. IBM Plex Sans is a working default, not a decision.
   When swapping: replace the files in /public/fonts/, the two @font-face
   blocks below, and the first name in --font-sans. Nothing else references
   the font directly. Any replacement must cover ő ű Ő Ű.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-italic-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Brand, sampled from the MECOWI logo */
  --brand-purple: #7030a0;
  --brand-lavender: #ccccff;
  --brand-grey: #aeaaa9;

  /* Light mode */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f5fa;
  --color-card-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #55505a;
  --color-border: #e2dee8;
  --color-accent: #7030a0;
  --color-accent-hover: #5a2680;
  --color-accent-contrast: #ffffff;
  --color-overlay: rgba(20, 12, 28, 0.92);

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3.5rem;

  --radius: 4px;
  --max-width: 68rem;
  --measure: 38rem;
}

:root[data-theme='dark'] {
  --color-bg: #0f0f0f;
  --color-bg-subtle: #171419;
  --color-card-bg: #1a171d;
  --color-text: #e5e5e5;
  --color-text-muted: #a9a3b0;
  --color-border: #2e2833;
  --color-accent: #b98fe0;
  --color-accent-hover: #cdaced;
  --color-accent-contrast: #14091e;
  --color-overlay: rgba(6, 4, 9, 0.94);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Typography ----------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-md);
  /* Hungarian headings use sentence case, not Title Case. */
}

h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
  margin-top: var(--spacing-xl);
}
h3 {
  font-size: 1.5rem;
  margin-top: var(--spacing-lg);
}

p {
  margin: 0 0 var(--spacing-md);
  max-width: var(--measure);
}

.lead {
  font-size: 1.2rem;
  color: var(--color-text-muted);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-xl) 0;
}

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

main {
  flex: 1 0 auto;
  padding: var(--spacing-xl) 0;
}

/* A full-bleed hero must sit flush under the nav. main's own top padding would
   otherwise show as a band of page background above the photo. */
main:has(> .hero:first-child) {
  padding-top: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--spacing-sm) var(--spacing-md);
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 4rem;
}

.nav-brand {
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text);
  margin-right: auto;
}

.nav-brand:hover {
  text-decoration: none;
  color: var(--color-accent);
}

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

.nav-links a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

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

.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.4rem;
  display: inline-flex;
  line-height: 0;
}

.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* One icon visible at a time; swapped by the inline theme script. */
.theme-toggle .icon-moon {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: inline;
}

/* --- Buttons -------------------------------------------------------------- */

.btn,
.btn-secondary {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
}

/* Set explicitly: the global a:hover rule would otherwise recolour the label. */
.btn:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-contrast);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* --- Hero ----------------------------------------------------------------- */

/* Full-bleed photographic band.
   ---------------------------------------------------------------------------
   The photos are real MECOWI site pictures, so they earn their place, but they
   are background: the veil keeps every text colour at the contrast it would
   have on a plain background. The gradient is strong across the text column and
   eases off to the right, where the photo is allowed to read.

   To add a band: give the section `photo-band` plus a modifier class that sets
   --band-image and --band-image-sm, wrap the content in a .container, and
   re-measure contrast against the darkest veiled pixel under the text.
   Do not weaken --band-veil-strong without re-measuring. */

:root {
  --band-image: none;
  --band-image-sm: none;
  --band-position: center 62%;

  --band-veil-strong: rgba(255, 255, 255, 0.93);
  --band-veil-mid: rgba(255, 255, 255, 0.72);
  --band-veil-soft: rgba(255, 255, 255, 0.34);
}

:root[data-theme='dark'] {
  --band-veil-strong: rgba(15, 15, 15, 0.93);
  --band-veil-mid: rgba(15, 15, 15, 0.74);
  --band-veil-soft: rgba(15, 15, 15, 0.38);
}

.photo-band {
  position: relative;
  padding: var(--spacing-xl) 0;
  background-color: var(--color-bg);
  background-image: linear-gradient(
      100deg,
      var(--band-veil-strong) 0%,
      var(--band-veil-strong) 46%,
      var(--band-veil-mid) 66%,
      var(--band-veil-soft) 100%
    ),
    var(--band-image);
  background-size: cover;
  background-position: var(--band-position);
  background-repeat: no-repeat;
}

/* The band supplies its own vertical padding; a leading heading must not add
   its margin on top of it. */
.photo-band > .container > :first-child {
  margin-top: 0;
}

.hero {
  --band-image: image-set(url('/images/hero-felsovezetek-1920.webp') 1x);
  --band-image-sm: image-set(url('/images/hero-felsovezetek-1024.webp') 1x);
  border-bottom: 1px solid var(--color-border);
}

.band-szemlelet {
  --band-image: image-set(url('/images/band-szemlelet-1440.webp') 1x);
  --band-image-sm: image-set(url('/images/band-szemlelet-1024.webp') 1x);
  --band-position: center 58%;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--spacing-xl) 0;
}

.hero-inner {
  position: relative;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  max-width: 20ch;
}

.hero-tagline {
  font-size: 1.25rem;
  color: var(--color-accent);
  font-style: italic;
  max-width: var(--measure);
}

/* --- Cards & lists -------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
}

.card h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.checklist {
  list-style: none;
  padding: 0;
  max-width: var(--measure);
}

.checklist li {
  padding: var(--spacing-sm) 0 var(--spacing-sm) 1.6rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
}

.data-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--spacing-xs) var(--spacing-md);
  max-width: var(--measure);
}

.data-list dt {
  font-weight: 600;
  color: var(--color-text-muted);
}

.data-list dd {
  margin: 0;
}

/* Marks an unresolved fact. Must not survive to production; see CLAUDE.md. */
.placeholder {
  background: #ffd400;
  color: #000000;
  padding: 0 0.3em;
  font-weight: 700;
}

/* --- Gallery -------------------------------------------------------------- */

.gallery {
  margin: var(--spacing-lg) 0;
}

/* --- Carousel ---------------------------------------------------------------
   Paging is done by scrolling this snap container, so touch swiping and native
   keyboard scrolling work without any extra code. The scrollbar is hidden
   because the dots and arrows are the affordance. */

.carousel {
  position: relative;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card-bg);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  display: block;
}

/* Technical drawings on white paper, in assorted wide formats. `contain` keeps
   each sheet whole rather than cropping it, and the white plate stays white in
   dark mode so the linework keeps its contrast. */
.carousel-slide img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: contain;
  background: #ffffff;
}

.carousel-slide figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.carousel-counter {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  font-weight: 600;
  flex-shrink: 0;
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 1.75rem);
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(4px);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel-prev {
  left: var(--spacing-sm);
}

.carousel-next {
  right: var(--spacing-sm);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.carousel-dots {
  display: flex;
  gap: var(--spacing-xs);
}

.carousel-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.carousel-dot:hover {
  background: var(--color-accent-hover);
}

.carousel-dot[aria-current='true'] {
  background: var(--color-accent);
}

.carousel-pause {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.carousel-pause:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--color-text);
}

.lightbox::backdrop {
  background: var(--color-overlay);
}

.lightbox-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.lightbox img {
  max-width: min(96vw, 78rem);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-caption {
  color: #f3f0f6;
  text-align: center;
  margin: 0;
  max-width: 60ch;
}

.lightbox-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lightbox-btn {
  pointer-events: auto;
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  border-radius: var(--radius);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-close {
  top: var(--spacing-md);
  right: var(--spacing-md);
}
.lightbox-prev {
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next {
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
}

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

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  padding: var(--spacing-lg) 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  justify-content: space-between;
}

.site-footer p {
  margin: 0 0 var(--spacing-xs);
  max-width: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 768px) {
  /* Text spans the full width here, so the softer end of the gradient would sit
     behind it. Flat veil, and the smaller image. */
  .photo-band {
    background-image: linear-gradient(
        var(--band-veil-strong),
        var(--band-veil-strong)
      ),
      var(--band-image-sm);
  }

  .carousel-arrow {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.2rem;
  }

  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.25rem;
  }

  .nav-inner {
    flex-wrap: wrap;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .nav-brand {
    margin-right: auto;
  }

  .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    padding-bottom: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-xl: 2.5rem;
  }

  .data-list {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .data-list dd {
    margin-bottom: var(--spacing-sm);
  }

  .btn,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
}