/*
Theme Name: ALPA-KA Minimal Portfolio
Theme URI: https://akabasakal.de
Author: Alparslan Kabasakal
Author URI: https://akabasakal.de
Description: Minimalistisches, responsives Portfolio-Theme für Fotograf/Künstler. Enthält Startseiten-Galerie (15 Bilder) mit Lightbox, Header mit Logo & Burger-Menü.
Version: 1.4.3
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: alpa-ka-theme
Tags: portfolio, photography, minimal, responsive
*/

:root{
  --bg:#fff;
  --fg:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --gap:16px;
  --maxw:1280px;
  --overlay:rgba(0,0,0,.06);
  --overlay-strong:rgba(0,0,0,.12);
  --tile-h:250px;
  --tile-h-mobile:260px;
  --menu-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', Courier, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
}
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 20px;
}
.header-logo img{ height:128px; width:auto; display:block; }

.burger{
  font-size:28px; line-height:1; cursor:pointer; user-select:none;
  padding:6px 10px; border:none; background:transparent;
  display:inline-block; z-index:250; position:relative;
  margin-left:auto; margin-right:20px;
}
.burger:focus{ outline:none; }
.burger:hover, .burger:active{ background:transparent; }

/* Dropdown menu (shared base; overridden per breakpoint below) */
.main-menu{
  display:none;
  position:absolute; right:20px; top:64px; z-index:200;
  background:rgba(255,255,255,.96);
  border:1px solid #e5e7eb; border-radius:8px; padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
body.menu-open .main-menu,
#nav-toggle:checked ~ nav.main-menu{ display:block; }

.main-menu ul{ list-style:none; margin:0; padding:0; min-width:220px; text-align:right; }
.main-menu li{ margin:6px 0; }
.main-menu a{
  display:block; padding:10px 14px; color:#000; text-decoration:none;
  background:transparent; font-family:var(--menu-font);
}
.main-menu a:hover{ background:#f7f7f7; }

/* Overlay to close menu when clicking outside (CSS-only) */
.menu-overlay{ display:none; }
#nav-toggle:checked ~ .menu-overlay{
  display:block; position:fixed; inset:0; z-index:150; background:transparent;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{ width:100%; margin:0; padding:0; }

/* ==========================================================================
   Gallery Grid
   ========================================================================== */
main{ min-height:100vh; display:flex; flex-direction:column; }

.gallery{
  flex:1;
  align-content:start;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
  max-width:1280px;
  margin:0 auto;
}

.tile{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:0;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--tile-h);
}
.tile a{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.tile img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  opacity:.75; transition:opacity .35s ease;
}
.tile a:hover img{ opacity:1; }

/* Spezielle Kachel mit drei Hochformaten nebeneinander */
.tile.triple{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  height:var(--tile-h);
}
.tile.triple a{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.tile.triple img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; opacity:.75; transition:opacity .35s ease;
}
.tile.triple a:hover img{ opacity:1; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999;
  align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:86vh; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lightbox .close, .lightbox .prev, .lightbox .next{
  position:absolute; color:#fff; font-weight:700; font-size:32px; cursor:pointer; user-select:none;
}
.lightbox .close{ top:22px; right:28px; }
.lightbox .prev{ left:18px; top:50%; transform:translateY(-50%); padding:10px 14px; background:var(--overlay-strong); }
.lightbox .next{ right:18px; top:50%; transform:translateY(-50%); padding:10px 14px; background:var(--overlay-strong); }

/* ==========================================================================
   Page content (About / Impressum / Newsletter etc.)
   ========================================================================== */
.page-wrap{ max-width:1040px; margin:0 auto; padding:24px 32px 64px; }
.page-wrap h1{ margin-top:0; margin-bottom:12px; font-size:clamp(28px,3vw,36px); font-weight:400; letter-spacing:-0.01em; }
.page-wrap h2,
.page-wrap h3{ font-weight:400; margin-top:48px; letter-spacing:-0.01em; }
.page-content img.akb-lightbox-img{ cursor:zoom-in; }
.page-content p{ margin:0 0 24px; }
.page-content figure,
.page-content .wp-block-image{ margin:48px 0; }
.page-content > figure:first-child,
.page-content > .wp-block-image:first-child{ margin-top:0; }
.page-content img{ display:block; }

/* Tabellen in Seiteninhalten */
.page-content{ overflow-x:auto; }
.page-content table{
  width:100%; border-collapse:collapse; margin:40px 0;
  font-size:15px;
}
.page-content table caption{ text-align:left; color:var(--muted); font-size:13px; margin-bottom:8px; }
.page-content th,
.page-content td{
  border:1px solid var(--border); padding:10px 14px; text-align:left; vertical-align:top;
}
.page-content th{ background:#f7f7f7; font-weight:600; }
.page-content tr:nth-child(even) td{ background:#fafafa; }

/* Zweisprachige Inhalte: zweite Sprache dezent grau absetzen */
.lang-muted{ color:var(--muted); }
.lang-en{ color:var(--muted); }
.lang-de{ color:var(--fg); }
.page-wrap p{ color:#222; }
.page-wrap a{ color:#000; text-decoration:underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--border); margin-top:40px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:20px 24px; color:var(--muted); font-size:14px; text-align:center; }

.footer-menu{ margin-top:8px; }
.footer-menu ul{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; list-style:none; padding:0; margin:0; }
.footer-menu a{ color:#666; text-decoration:none; font-size:14px; font-family:var(--menu-font); }
.footer-menu a:hover{ color:#000; text-decoration:underline; }

/* ==========================================================================
   Responsive: Desktop (>=768px) — dropdown menu, right-anchored
   ========================================================================== */
@media (min-width:768px){
  .site-header .header-inner{
    position:relative; flex-direction:row; align-items:center; justify-content:space-between;
    padding:12px 20px;
  }
  .site-header .header-inner .burger{ margin-left:auto; position:relative; z-index:250; }

  .site-header .header-inner nav.main-menu{
    position:absolute; left:auto; right:20px; top:92px; bottom:auto;
    width:auto; min-width:200px; max-width:360px;
    background:rgba(255,255,255,.96);
    border:1px solid #e5e7eb; border-radius:8px; padding:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    text-align:left;
  }
  #nav-toggle:checked ~ nav.main-menu{ display:block; }

  .site-header .header-inner nav.main-menu ul{ display:block; margin:0; padding:0; }
  .site-header .header-inner nav.main-menu li{ display:block; margin:6px 0; }
  .site-header .header-inner nav.main-menu a{
    display:block; padding:8px 12px; color:#1a1a1a; text-decoration:none;
    font-size:14px; font-weight:300;
  }
  .site-header .header-inner nav.main-menu a:hover{ background:#f7f7f7; text-decoration:none; }

  .gallery{ grid-template-columns:repeat(5,1fr); gap:24px; max-width:85vw; margin:0 auto; }
  .tile, .tile.triple{ height:var(--tile-h); }
}

/* ==========================================================================
   Responsive: Mobile (<=767px)
   ========================================================================== */
@media (max-width:767px){
  .header-inner{ flex-direction:column; align-items:center; gap:4px; padding:8px 12px; }
  .header-logo img{ height:128px; }
  .burger{ margin:4px auto; }

  /* Menü: volle Breite, unterhalb des Headers */
  .main-menu{
    position:fixed; left:0; right:0; width:100vw;
    top:var(--menu-top, 160px); bottom:0;
    display:none;
    background:#fff; border:none; border-radius:0;
    padding:16px 20px; box-shadow:none; z-index:200; margin:0;
  }
  #nav-toggle:checked ~ nav.main-menu{ display:block; }

  #nav-toggle:checked ~ .menu-overlay{
    display:block; position:fixed;
    left:0; right:0; bottom:0; top:var(--menu-top, 160px);
    z-index:150; background:transparent;
  }

  .main-menu ul{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:18px; max-width:100%; margin:0 auto; text-align:center;
  }
  .main-menu li{ display:block; margin:0; }
  .main-menu a{ font-size:18px; }

  /* Impressum-Link nie im mobilen Burger-Menü anzeigen */
  .site-header nav.main-menu a[href*="impressum"]{ display:none; }

  /* Galerie: gestapelt, kein Hover-Fade auf Touch */
  .gallery{ grid-template-columns:1fr; gap:20px; padding-left:16px; padding-right:16px; }
  .tile, .tile.triple{ height:var(--tile-h-mobile); }
  .tile img, .tile.triple img,
  .tile a:hover img, .tile.triple a:hover img{ opacity:1; }
}