/* ================================================
   main.css - Global Styles
   KOD Müzik Website
   
   Contents:
   1. Design Tokens (Variables)
   2. CSS Reset
   3. Global & Typography Styles
   4. Side Menu Layout (Left Rail)
   5. Main Content Layout
   6. Language Toggle
   7. Accessibility & Interaction
   8. Responsive Design
   ================================================ */

/* 1. Design Tokens (Variables)
   ================================================ */
:root {
  /* Typography */
  --font-primary: "Inter", sans-serif;
  --font-display: "Anton", sans-serif;

  /* Core Colors */
  --color-text: #eaeaea;
  --color-background: #121212; /* base UI tokens used across the site */
  --color-accent: #ffffff;
  --color-muted: #a0a0a0;
  --color-black: #000000;
  --color-white: #ffffff;

  /* UI Colors */
  --color-border: #333333;
  --color-border-light: #282828;

  /* Layout */
  --menu-width-desktop: 200px;
  --menu-width-mobile: 45px;
  --transition-speed: 0.3s;
  --logo-top-offset: calc(2rem + 3rem); /* ~80px */

  /* Menu Colors */
  --menu-color-inactive: #b6b6b6; /* lighter than now */
  --menu-color-active: #8a8a8a; /* your current inactive */
  --menu-color-hover: #ececec; /* near-white for hover/focus */

  /* Animations */
  --menu-hover-duration: 420ms;
  --menu-hover-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncier ease-out */

  /* Overlays */
  --overlay-main: rgba(0, 0, 0, 0.1);
  --overlay-menu: transparent;

  /* Background KOD logo transform controls */
  --kod-bg-rotate: -15deg; /* counter-clockwise tilt from bottom-left to top-right */
  --kod-bg-scale: 1; /* base scale for 161vmin sized logo */

  /* Language switcher sizing */
  --lang-circle-size-desktop: 45px; /* visible circle size on desktop */
  --lang-circle-size-mobile: 36px; /* visible circle size on mobile */
  --lang-hit-desktop: 60px; /* clickable area (>=44px) */
  --lang-hit-mobile: 44px; /* clickable area (>=44px) */
  --lang-circle-gap: 2px; /* vertical gap between visible circles */
  --lang-hover-duration: 640ms; /* slower hover/reveal */
  --lang-bg-hover-duration: 420ms; /* slower background tone animation */
  --lang-text-color: var(--color-black); /* solid black text for max contrast */
  --lang-text-size-desktop: 14px;
  --lang-text-size-mobile: 12px;

  /* Spacing & Borders */
  --spacing-input: 0.75rem 1rem;
  --border-radius-small: 6px;
  --border-radius-medium: 8px;
  --border-radius-pill: 20px;

  /* Glassmorphism */
  --glass-gradient: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.015)
  );
  --glass-bg: rgba(18, 18, 18, 0.48);
  --glass-bg-alt: rgba(18, 18, 18, 0.5);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-alt: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  --glass-shadow-alt: 0 12px 36px rgba(0, 0, 0, 0.6);
  --glass-blur: blur(16px) saturate(140%);
}

/* 2. CSS Reset
   ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Globally hint that this is a dark-themed document */
  color-scheme: dark;
}

body {
  font-family: var(--font-primary);
  /* Site-wide brand background */
  background-color: var(--color-background); /* keep generic site color */
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative; /* create containing context for pseudo background */
}

/* Fixed KOD watermark element (injected by JS as #kod-bg) */
#kod-bg {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(var(--kod-bg-rotate))
    scale(var(--kod-bg-scale));
  width: 161vmin;
  height: calc(161vmin * 28.05 / 74.62);
  pointer-events: none;
  /* Lighten watermark for better contrast on dark bg */
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-mask-image: url("/KodLogo.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("/KodLogo.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 100% 100%;
  z-index: 0 !important;
  will-change: transform;
  backface-visibility: hidden;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 3. Global & Typography Styles
   ================================================ */
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 1.5px;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

p {
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 65ch;
}

/* Utility Classes
   ================================================ */
.glass-panel {
  background: var(--glass-gradient), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-medium);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.glass-panel--alt {
  background: var(--glass-gradient), var(--glass-bg-alt);
  border-color: var(--glass-border-alt);
  box-shadow: var(--glass-shadow-alt);
}

/* Focus State Utilities
   ================================================ */
.focus-none:focus,
.focus-none:focus-visible {
  outline: none;
}

.focus-outline:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.focus-accent:focus-visible {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}

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

/* 4. Side Menu Layout (Left Rail)
   ================================================ */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--menu-width-desktop);
  /* Option A: fully transparent rail so background is continuous */
  background-color: transparent;
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1rem;
  z-index: 1000;
}

/* anchor that wraps the logo */
.menu-logo {
  display: inline-flex; /* keep content width; caption inherits logo width */
  flex-direction: column;
  align-items: stretch;
  line-height: 0; /* remove extra inline spacing */
  color: var(--color-accent);
  /* Align logo top with content top (4rem content padding - 2rem menu padding) */
  margin-top: 3rem; /* avoid transforms on wrapper */
  position: relative; /* anchor caption spacing */
  width: 130px; /* lock container to logo width so caption can't expand it */
}

/* the <img> itself */
.menu-logo-img {
  display: block; /* kill baseline gap */
  width: 130px; /* match your HTML width */
  height: auto;
}

/* also support inline SVG as the logo graphic */
.menu-logo > svg {
  display: block;
  width: 130px;
  height: auto;
}

/* Hover scale applies to the graphic only, not the wrapper */
.menu-logo:hover > .menu-logo-img,
.menu-logo:hover > svg {
  transform: scale(1.05);
}

/* Caption element directly under the logo (semantic HTML) */
.menu-logo-caption {
  display: flex; /* render letters on one row */
  width: 100%;
  justify-content: space-between; /* stretch letters edge-to-edge within logo width */
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden; /* ensure no overflow beyond logo width */
  font-family: "TASA Orbiter", sans-serif;
  color: var(--color-accent);
  font-size: 22px; /* scaled to fit 8 letters within 130px safely */
  line-height: 1;
  letter-spacing: 0; /* natural kerning */
  margin-top: 8px;
  padding-top: 8px; /* desktop-only tweak for spacing under logo */
  text-indent: 0; /* no extra offset when using flex layout */
}

/* individual letters as flex items for precise spacing */
.menu-logo-letter {
  display: inline-block;
}

.menu-nav {
  width: 100%;
}

/* Base state */
.menu-link {
  position: relative;
  padding-left: 18px; /* space for the indicator bar */
  font-family: "Anton", sans-serif !important;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--menu-color-inactive);
  transition:
    color var(--menu-hover-duration) var(--menu-hover-ease),
    transform var(--menu-hover-duration) var(--menu-hover-ease);
}

/* Active (current page) */
.menu-link.active,
.menu-link[aria-current="page"] {
  color: var(--menu-color-active);
  font-weight: 500;
}

/* Keep active color on hover */
.menu-link.active:hover,
.menu-link[aria-current="page"]:hover {
  color: var(--menu-color-active);
}

/* Align links left so the indicator has a home */
.menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* was center */
  gap: 1.5rem;
}

/* The thin vertical bar to the left of each item */
.menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0; /* collapsed by default */
  transform: translateY(-50%);
  transition:
    height var(--menu-hover-duration) var(--menu-hover-ease),
    background-color var(--menu-hover-duration) var(--menu-hover-ease);
  opacity: 0.9;
}

/* Hover/keyboard focus: color + gentle nudge */
.menu-link:hover,
.menu-link:focus-visible {
  color: var(--menu-color-hover); /* near-white, not full white */
  transform: translateX(3px);
}

/* Grow the bar on hover/focus (active page has no bar) */
.menu-link:hover::before,
.menu-link:focus-visible::before {
  height: 16px;
}

/* Bar color aligns with states */
.menu-link::before {
  background-color: var(--menu-color-active);
}
.menu-link:hover::before,
.menu-link:focus-visible::before {
  background-color: var(--menu-color-hover);
}
.menu-link[aria-current="page"]::before {
  height: 0; /* no indicator for the active page */
}

/* Reduced motion: disable hover nudge on links & logo */
@media (prefers-reduced-motion: reduce) {
  /* This applies to both desktop and mobile link hover effects */
  .menu-link:hover,
  .menu-link:focus-visible {
    transform: none;
  }
  .menu-logo:hover {
    transform: translateY(2.75rem); /* Keep position, disable scale */
  }
}

/* 5. Main Content Layout
   ================================================ */
.main-content {
  margin-left: var(--menu-width-desktop);
  padding: 4rem;
  background-color: transparent; /* remove page-level tint */
  min-height: 100vh; /* ensure overlay covers full viewport height */
}

.content-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 6. Language Toggle
   ================================================ */
.lang-toggle-menu {
  font-family: var(--font-display);
  position: relative;
  z-index: 1000; /* ensure above nearby elements */
  align-self: flex-start; /* align left like menu */
  margin-left: 8px; /* align with menu items left padding */
}

/* New stacking container for language links */
.lang-switcher {
  position: relative;
  display: inline-block;
  padding: 20px; /* generous hover zone incl. buffer between circles */
  min-width: var(--lang-hit-desktop);
  line-height: 1;
}

/* Invisible hover zone extender above the active circle so moving upward keeps hover */
.lang-switcher::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * (var(--lang-hit-desktop) + var(--lang-circle-size-desktop)));
  width: var(--lang-hit-desktop);
  height: calc(var(--lang-hit-desktop) + var(--lang-circle-size-desktop));
  background: transparent;
  pointer-events: auto; /* retain hover when moving between circles */
  z-index: 1001;
}

.lang-link {
  position: absolute;
  left: 0;
  bottom: 0; /* active baseline */
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center; /* perfect centering for text */
  width: var(--lang-hit-desktop); /* clickable area (>=44px) */
  height: var(--lang-hit-desktop);
  color: var(--lang-text-color) !important; /* force solid black text */
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: var(--lang-text-size-desktop);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  user-select: none;
  cursor: pointer;
  z-index: 1010; /* active baseline above container */
}

/* Circle background rendered on a separate layer to keep text crisp */
.lang-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lang-circle-size-desktop);
  height: var(--lang-circle-size-desktop);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #f2f2f2 0%,
    #e6e6e6 30%,
    #d4d4d4 70%,
    #bfbfbf 100%
  );
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    /* inner highlight */ inset 0 -2px 4px rgba(0, 0, 0, 0.1),
    /* inner shadow */ 0 6px 16px rgba(0, 0, 0, 0.2),
    /* outer depth */ 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    box-shadow var(--lang-bg-hover-duration) ease-in-out,
    background var(--lang-bg-hover-duration) ease-in-out,
    background-color var(--lang-bg-hover-duration) ease-in-out;
  z-index: -1; /* behind text */
}

/* Specular highlight */
.lang-link::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 22%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 65%
  );
  pointer-events: none;
}

/* Keep dark text color on hover/focus for language buttons */
.lang-link:hover,
.lang-link:focus,
.lang-link:focus-visible {
  color: var(--lang-text-color) !important;
}

/* Active language visible by default */
.lang-link.active,
.lang-link[aria-current="true"] {
  position: absolute;
}

/* Inactive language hidden by default (still accessible to SR) */
.lang-switcher .lang-link:not(.active):not([aria-current="true"]) {
  /* Start overlapped with the active circle; animate upward on reveal */
  bottom: 0;
  top: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0) scale(0.94);
  pointer-events: none;
  z-index: 1020;
  transition:
    opacity var(--lang-hover-duration) var(--menu-hover-ease),
    visibility 0s 150ms,
    transform var(--lang-hover-duration) var(--menu-hover-ease);
}

/* Hover/focus reveal on hover-capable devices */
@media (hover: hover) {
  /* Hover tone-down for either button (background layer only) */
  .lang-link:hover::before {
    background: radial-gradient(
      circle at 30% 30%,
      #eaeaea 0%,
      #e0e0e0 30%,
      #cdcdcd 70%,
      #b8b8b8 100%
    );
    box-shadow:
      inset 0 1px 3px rgba(255, 255, 255, 0.7),
      inset 0 -3px 6px rgba(0, 0, 0, 0.16),
      0 12px 24px rgba(0, 0, 0, 0.3),
      0 5px 12px rgba(0, 0, 0, 0.24);
  }

  /* Reveal inactive on hover/focus */
  .lang-switcher:hover .lang-link:not(.active):not([aria-current="true"]),
  .lang-switcher:focus-within
    .lang-link:not(.active):not([aria-current="true"]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(
        calc(-1 * (var(--lang-circle-size-desktop) - var(--lang-circle-gap)))
      )
      scale(1);
    pointer-events: all; /* clickable */
    transition-delay: 0ms; /* show immediately */
  }
}

/* Ensure keyboard focus reveals inactive link even without hover */
.lang-switcher .lang-link:not(.active):not([aria-current="true"]):focus,
.lang-switcher
  .lang-link:not(.active):not([aria-current="true"]):focus-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(
      calc(-1 * (var(--lang-circle-size-desktop) - var(--lang-circle-gap)))
    )
    scale(1);
  pointer-events: all;
}

/* Backdrop-filter fallback no longer needed (solid fill used) */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .lang-link,
  .lang-link::before,
  .lang-link::after {
    transition: none !important;
  }
}

/* 7. Accessibility & Interaction
   ================================================ */
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: var(--color-accent);
  color: var(--color-background);
  padding: 1rem;
  z-index: 9999;
}

.skip-to-content:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
}

/* Focus and Hover states for links */
a:hover,
a:focus {
  color: var(--color-accent);
  outline: 2px solid transparent; /* Remove default outline */
}
a:focus-visible {
  outline: 2px dashed var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Focus outlines for keyboard users (menu items + logo) */
.menu-logo:focus-visible,
.menu-link:focus-visible {
  outline: 2px dashed var(--color-accent);
  outline-offset: 4px;
}

/* Button Component System
   ================================================ */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-speed);
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

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

.btn-primary:hover {
  background: var(--color-white);
  color: var(--color-black);
}

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

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-background);
}

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

.btn-ghost:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-pill {
  border-radius: var(--border-radius-pill);
  padding: 0.4rem 1.3rem;
}

.btn-rectangular {
  border-radius: 0;
  padding: 0.75rem 1.75rem;
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
}

/* Discogs Link (Desktop Only)
   ================================================ */
.discogs-link {
  display: none; /* Hidden by default (mobile) */
}

@media (min-width: 769px) {
  .discogs-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1001;
    color: var(--color-text);
    opacity: 0.6;
    transition:
      opacity var(--transition-speed),
      transform var(--transition-speed);
  }

  .discogs-link:hover,
  .discogs-link:focus-visible {
    opacity: 1;
    transform: scale(1.05);
  }

  .discogs-link:focus-visible {
    outline: 2px dashed var(--color-accent);
    outline-offset: 4px;
  }

  .discogs-link svg {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .discogs-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 300;
    white-space: nowrap;
  }

  /* Show Turkish text only when html lang is tr */
  html[lang="tr"] .discogs-text-en {
    display: none;
  }

  /* Show English text only when html lang is en */
  html[lang="en"] .discogs-text-tr {
    display: none;
  }
}

/* 8. Responsive Design
   ================================================ */

@media (max-width: 768px) {
  :root {
    --kod-bg-rotate: 90deg; /* Fully vertical orientation on mobile */
    --kod-bg-scale: 1.02; /* Slightly larger background for mobile viewport */
  }

  .side-menu {
    width: var(--menu-width-mobile);
    padding: 2rem 0.5rem 1.5rem 0.5rem; /* Align logo group with main content title */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between; /* Distribute: top, center, bottom */
    row-gap: 0; /* Remove gap to let space-between handle spacing */
  }

  /* Logo block with icon and caption side by side */
  .menu-logo {
    display: inline-flex;
    align-items: center;
    gap: 22px; /* Space between icon and caption */
    margin-left: -9px; /* Align with menu items */
    margin-top: 15px; /* Fine-tune vertical position */
    transform: none; /* No rotation on container */
    width: 60px; /* Lock width on mobile */
  }

  /* Logo image - rotate only if needed based on your asset */
  .menu-logo-img {
    width: 58px;
    height: auto;
    display: block;
    transform: rotate(90deg); /* Rotate just the logo image */
    transform-origin: center;
  }

  /* Caption - vertical text; allow full length so it isn't clipped by the logo */
  .menu-logo-caption {
    display: inline-flex;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1;
    height: auto; /* let full KODMÜZİK fit */
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* ensure caption sits above logo if overlapping */
  }

  .menu-logo-letter {
    display: inline;
  }

  /* Remove hover transform on container */
  .menu-logo:hover {
    transform: none; /* Could add opacity change instead if desired */
  }

  /* Optional: Add hover effect to just the image */
  .menu-logo:hover .menu-logo-img {
    transform: rotate(90deg) scale(1.05);
  }

  /* Navigation section */
  .menu-nav {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 0; /* Spacing handled by row-gap */
  }

  .menu-items {
    align-items: flex-start;
    gap: 1.2rem;
    padding-left: 8px; /* Same as logo for alignment */
  }

  .menu-link {
    font-size: 0.95rem; /* Increased from 0.85rem for better prominence */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.03em;
    padding-left: 0;
    transform: none;
    transition:
      color var(--menu-hover-duration) var(--menu-hover-ease),
      transform var(--menu-hover-duration) var(--menu-hover-ease);
  }

  /* Hover bar above text */
  .menu-link::before {
    top: -8px;
    left: 50%;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    transition:
      width var(--menu-hover-duration) var(--menu-hover-ease),
      background-color var(--menu-hover-duration) var(--menu-hover-ease);
    background-color: var(--menu-color-active);
  }

  .menu-link:hover,
  .menu-link:focus-visible {
    color: var(--menu-color-hover);
    transform: translateY(3px);
  }

  .menu-link:hover::before,
  .menu-link:focus-visible::before {
    width: 14px;
    height: 2px;
    background-color: var(--menu-color-hover);
  }

  .menu-link[aria-current="page"]::before {
    width: 0;
  }

  /* Language toggle */
  .lang-toggle-menu {
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    writing-mode: horizontal-tb;
  }

  /* Language switcher sizing and positions (mobile) */
  .lang-switcher {
    padding: 16px; /* generous touch zone */
    min-width: var(--lang-hit-mobile);
  }
  .lang-link {
    width: var(--lang-hit-mobile);
    height: var(--lang-hit-mobile);
    font-size: var(--lang-text-size-mobile);
  }
  .lang-link::before {
    width: var(--lang-circle-size-mobile);
    height: var(--lang-circle-size-mobile);
  }
  .lang-switcher .lang-link:not(.active):not([aria-current="true"]) {
    bottom: 0;
    top: auto;
    transform: translateY(0) scale(0.94);
  }

  /* Main content */
  .main-content {
    margin-left: var(--menu-width-mobile);
    padding: 2rem;
  }

  /* Typography */
  h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  p {
    font-size: 1rem;
  }

  /* ---- Height-responsive mobile menu ----
     Elements stay at their ORIGINAL fixed sizes at normal phone
     heights (500px+). Only start shrinking below ~500px CSS height
     (landscape, split-screen, very short devices).
     vh multipliers are calibrated so: original_size / 500 * 100 */

  .side-menu {
    padding-top: clamp(0.75rem, 6.4vh, 2rem);
    padding-bottom: clamp(0.5rem, 4.8vh, 1.5rem);
  }

  .menu-logo {
    margin-top: clamp(4px, 3vh, 15px);
  }

  .menu-logo-img {
    width: clamp(34px, 11.6vh, 58px);
  }

  .menu-logo-caption {
    font-size: clamp(0.6rem, 3.2vh, 1rem);
  }

  .menu-items {
    gap: clamp(0.4rem, 3.8vh, 1.2rem);
  }

  .menu-link {
    font-size: clamp(0.65rem, 3vh, 0.95rem);
  }

  .lang-switcher {
    padding: clamp(6px, 3.2vh, 16px);
  }

  .lang-link {
    width: clamp(28px, 8.8vh, var(--lang-hit-mobile));
    height: clamp(28px, 8.8vh, var(--lang-hit-mobile));
    font-size: clamp(9px, 2.4vh, var(--lang-text-size-mobile));
  }

  .lang-link::before {
    width: clamp(24px, 7.2vh, var(--lang-circle-size-mobile));
    height: clamp(24px, 7.2vh, var(--lang-circle-size-mobile));
  }
}