/* NILS German Academy – shared styles.
   Most layout styles are inline in each page; this file holds the site-wide basics. */
:root {
  --ink: #17191C;
  --paper: #F7F5F0;
  --gold: #D5AE62;
  --red: #B9232D;
  --muted: #66676B;
  --line: #E5E0D7;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--ink); }
img { max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero particle animation */
@keyframes nils-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
@keyframes nils-twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.3); } }
@media (prefers-reduced-motion: reduce) { .nils-p { animation: none !important; } }

::selection { background: #F1C9C8; color: var(--ink); }
body { -webkit-font-smoothing: antialiased; }

/* ===== Responsive header: hamburger menu on tablets and phones ===== */
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .site-header-inner { flex-wrap: nowrap !important; gap: 12px !important; }
  .nav-toggle { display: inline-flex !important; }
  .site-nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 6px 20px 16px !important; background: #FAF8F4; border-bottom: 1px solid #E5E0D7; box-shadow: 0 18px 30px rgba(23, 25, 28, 0.10); }
  .site-nav.is-open { display: flex !important; }
  .site-nav a { min-height: 50px !important; padding: 0 6px !important; border-bottom: 1px solid #ECE6DC !important; font-size: 16px !important; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 #B9232D; padding-left: 14px !important; }
}
@media (max-width: 560px) {
  .header-cta { min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
  .site-logo img { height: 56px !important; }
}

/* ===== Page-specific responsive fixes ===== */
@media (max-width: 640px) { .letter-p { text-align: left !important; } }
@media (max-width: 860px) {
  .mission-hero-img { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 250px !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%) !important; mask-image: linear-gradient(180deg, transparent 0%, #000 32%) !important; background-position: center bottom !important; }
  .mission-hero-text { padding-bottom: 260px !important; }
}
@media (max-width: 980px) { .courses-section .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .courses-section .course-grid { grid-template-columns: 1fr !important; } }

/* ===== Footer social icons ===== */
.social-link { transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.social-link:hover { transform: translateY(-2px); border-color: transparent !important; }
.social-link[aria-label="LinkedIn"]:hover { background: #0A66C2 !important; }
.social-link[aria-label="Instagram"]:hover { background: #E1306C !important; }
.social-link[aria-label="YouTube"]:hover { background: #FF0000 !important; }