/*
	Theme Name: Max UHS
	Theme URI: https://max-uhs.com/
	Description: Eigenständiges Theme für Max Unterharnscheidt — Expedition Photography. Custom Page-Templates (Home, About, Speaking, Svalbard, Portfolio + Subpages) mit ACF-Feldern.
	Author: Max Unterharnscheidt
	Author URI: https://max-uhs.com/
	Version: 1.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: max-uhs
*/

/* ============================================
   MAX UHS DESIGN SYSTEM
   ============================================ */

/* ============================================
   LOKALE WEBFONTS — selbst gehostet (DSGVO/revDSG:
   keine Besucher-IPs an Google). Schnitte exakt wie
   zuvor von Google geladen, 600 ungenutzt = weggelassen.
   ============================================ */

/* Cormorant Garamond */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
}

/* Jost */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-v20-latin-500.woff2') format('woff2');
}

:root {
  --deep: #0d1b2a;
  --mid: #1e2d3d;
  --slate: #4a6274;
  --fog: #a0b4c0;
  --accent: #c8a96e;
  --white: #f5f2ee;
  --ice: #e8eef2;
}

body {
  background-color: var(--deep);
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--white);
}

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

/* ============================================
   NAV + MOBILE-NAV (global zentralisiert)
   Zuvor inline in allen Page-Templates dupliziert.
   #mobileNav-Overrides (Logo/X/CTA/Fade) bleiben in header.php.
   ============================================ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  background: transparent;
  transition: background 0.4s;
}
nav.scrolled {
  background: rgba(13,27,42,0.92);   /* vereinheitlicht (Svalbard war 0.95) */
  backdrop-filter: blur(12px);
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;                   /* vereinheitlicht (Blog war 1.1rem) */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}

.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  color: var(--fog);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active {                          /* volle Variante, global */
  color: var(--white);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* Burger-Icon */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 200;
}
.burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--white);
  transition: all 0.3s;
}
.burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile-Nav Overlay (Basis; #mobileNav in header.php verfeinert Logo/X/CTA/Fade) */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.98);
  backdrop-filter: blur(20px);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;                 /* Basiswert; header.php #mobileNav setzt 1.55rem */
  font-weight: 300;
  color: var(--fog);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--white); }
.mobile-nav .mobile-nav-label {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}

/* Mobile-Breite: Burger ein, Desktop-Links aus, kompakteres Nav-Padding */
@media (max-width: 900px) {
  nav { padding: 1.2rem 1.5rem; }
  .burger { display: flex; }
  .nav-links { display: none; }
}

/* ============================================
   HERO-FOKUSPUNKT (horizontal, nur Mobile ≤900px)
   Desktop bleibt zentriert. Pro Hero via Inline --hero-focus-x steuerbar
   (siehe hero_focus_x() in functions.php). Hintergrundbild liegt auf
   .hero (about/speaking/nepal/travel/portfolios) bzw. .hero-bg (home/svalbard).
   Default 50% = zentriert = bisheriges Verhalten.
   ============================================ */
.hero,
.hero-bg { background-position: center; }

@media (max-width: 900px) {
  .hero,
  .hero-bg { background-position-x: var(--hero-focus-x, 50%); }
}

/* ============================================
   PHOTO GRID (Portfolio-Subpages + Nepal-Galerie)
   Markup kommt aus mux_portfolio_gallery() in functions.php:
   .grid-section > .photo-grid.grid-{1,2,3} > .photo-item.{landscape|wide}
   landscape = 3/2, wide (Panorama) = 16/7, Caption-Overlay bei Hover.
   ============================================ */
.grid-section { padding: 0 2px 2px; }
.photo-grid { display: grid; gap: 2px; }
.photo-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid.grid-1 { grid-template-columns: 1fr; }
.photo-item { position: relative; overflow: hidden; }
.photo-item img { width: 100%; object-fit: cover; display: block; transition: filter 0.4s, transform 0.6s; }
.photo-item.landscape img { aspect-ratio: 3/2; }
.photo-item.wide img { aspect-ratio: 16/7; }
.photo-item:hover img { filter: brightness(1.05); transform: scale(1.03); }
.photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.5rem 1.2rem; background: linear-gradient(to top, rgba(13,27,42,0.85), transparent); opacity: 0; transition: opacity 0.4s; }
.photo-item:hover .photo-caption { opacity: 1; }
.photo-caption-title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--white); margin-bottom: 0.2rem; }
.photo-caption-loc { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }

/* SECTION BREAK */
.section-break { padding: 4rem 3rem; display: flex; align-items: center; gap: 2rem; }
.break-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.break-label { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic; color: var(--slate); white-space: nowrap; }

@media (max-width: 900px) {
  .photo-grid.grid-3 { grid-template-columns: 1fr; }
  .photo-grid.grid-2 { grid-template-columns: 1fr; }
}