/*
Theme Name: ALPA-KA Minimal Portfolio
Theme URI: https://alpa-ka.de
Author: Alparslan Kabasakal
Author URI: https://alpa-ka.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.0.9
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);
}
*{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; border-bottom:none;
}
.header-inner{ position:relative;display:flex; position:relative; 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;}
.burger:focus{outline:none;}
.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{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;}
.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;}
.main-menu a:hover{background:#f7f7f7;}

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

/* Gallery Grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}



/* Spezielle Kachel mit drei Hochformaten */




/* 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 */
.page-wrap{max-width:800px; margin:0 auto; padding:40px 24px;}
.page-wrap h1{margin-top:0; font-size:clamp(28px,3vw,36px);}
.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;}

/* Bild zentriert und nie beschnitten */



.burger:hover, .burger:active { border-color:#000; background:transparent; }



.burger:hover, .burger:active { background:transparent; }

/* Final image containment: never crop, perfectly centered */




/* Never crop images; center them perfectly */



/* CSS-only burger toggle (works with optimizers like 10Web Booster) */
#nav-toggle:checked ~ nav.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;}


/* --- Strict no-crop rules for the 3-image tile (8.x) --- */




/* Image base + stronger hover without cropping */





/* 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; /* clickable transparent layer */
}
/* Ensure menu is above overlay */
.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;}

/* Hazey base, normal on hover */




/* Hazy base effect, normal on hover */



/* Opacity hazey base, normal on hover */




/* --- Grid tiles: centered, no crop, opacity hover --- */





/* Triple tile (8.x): same behavior inside the three cells */





/* --- Tile & Image Rules (no crop, centered, opacity hover) --- */
.tile{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:0;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:250px; /* uniform tile height */
}
.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:0.75;
  transition:opacity .35s ease;
}
.tile a:hover img{
  opacity:1;
}

.tile.triple{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  height:250px;
}
.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:0.75;
  transition:opacity .35s ease;
}
.tile.triple:hover img{
  opacity:1;
}


/* --- Responsive Navigation --- */
/* Desktop: horizontal nav */

.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;}
  .main-menu ul{ display:flex; align-items:center; gap:24px; text-align:left; min-width:0; }
  .main-menu li{ margin:6px 0; }
  .main-menu a{ color:#666; text-decoration:none; font-size:15px; }
  .main-menu a:hover{ color:#000; text-decoration:underline; }
}

  .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;}
  .main-menu ul{ display:flex; gap:24px; text-align:left; margin:0; padding:0; }
  .main-menu li{ margin:6px 0; }
  .main-menu a{ color:#666; text-decoration:none; font-size:15px; }
  .main-menu a:hover{ color:#000; text-decoration:underline; }
}


/* --- Footer page links --- */
.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; }
.footer-menu a:hover{ color:#000; text-decoration:underline; }

.tile img{opacity:.75; transition:opacity .35s ease;}
.tile a:hover img{opacity:1;}

/* Ensure only the hovered image in the triple tile fades to 1 */
.tile.triple a:hover img{ opacity:1; }
.tile.triple img{ opacity:.75; }

#nav-toggle:checked + label.burger + label.menu-overlay + nav.main-menu{ display:block; }





  .main-menu li{ margin:6px 0; }
}


}








/* --- Mobile adjustments (<=767px): full-width menu directly below header --- */

  .header-logo img{ height:128px; }
  .burger{ margin:4px auto; }

  /* Menu occupies the whole viewport BELOW the header */
  .main-menu{
    position:fixed !important;
    left:0; right:0;
    width:100vw;
    top:var(--header-h, 160px); /* will be updated by JS */
    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; }

  /* Vertical, centered list */
  .main-menu ul{
    display:flex !important;
    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; }

  /* Ensure overlay sits below menu but above page content */
  #nav-toggle:checked ~ .menu-overlay{
    display:block;
    position:fixed;
    inset:var(--header-h, 160px) 0 0 0; /* start below header */
    z-index:150;
    background:transparent;
  }

  /* Gallery stacked, no hover */
  .gallery{ grid-template-columns:1fr; gap:20px; padding-left:16px; padding-right:16px; }
  .tile, .tile.triple{ height:260px; }
  .tile img, .tile.triple img{ opacity:1 !important; }
  .tile a:hover img, .tile.triple a:hover img{ opacity:1 !important; }
}


@media (max-width:767px){
  /* Keep big logo and tight header spacing */
  .header-inner{ flex-direction:column; align-items:center; gap:4px; padding:8px 12px !important; }
  .header-logo img{ height:128px; }
  .burger{ margin:4px auto; }

  /* Menu uses burger-bottom as top anchor */
  .main-menu{
    position:fixed !important;
    left:0; right:0;
    width:100vw;
    top:var(--menu-top, 160px);  /* computed from burger bottom */
    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; }

  /* Overlay starts exactly under burger too */
  #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;
  }

  /* Vertical, centered list */
  .main-menu ul{
    display:flex !important;
    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; }

  /* Gallery stacked, no hover */
  .gallery{ grid-template-columns:1fr; gap:20px; padding-left:16px; padding-right:16px; }
  .tile, .tile.triple{ height:260px; }
  .tile img, .tile.triple img{ opacity:1 !important; }
  .tile a:hover img, .tile.triple a:hover img{ opacity:1 !important; }
}










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

  /* Right-anchored dropdown near burger */
  .site-header .header-inner nav.main-menu{
    position:absolute !important;
    left:auto !important; right:20px !important; top:64px !important; bottom:auto !important;
    display:none;
    width:auto !important; min-width:240px !important; max-width:360px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid #e5e7eb !important; border-radius:8px !important; padding:8px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.06) !important;
    text-align:left !important;
  }
  #nav-toggle:checked ~ nav.main-menu{ display:block !important; }

  /* Vertical list inside dropdown */
  .site-header .header-inner nav.main-menu ul{ display:block !important; margin:0 !important; padding:0 !important; }
  .site-header .header-inner nav.main-menu li{ display:block !important; margin:0 !important; }
  .site-header .header-inner nav.main-menu a{ display:block !important; padding:10px 14px !important; color:#000 !important; text-decoration:none !important; }
  .site-header .header-inner nav.main-menu a:hover{ background:#f7f7f7 !important; text-decoration:none !important; }

  /* Hover effect + grid unchanged */
  .gallery .tile img{ opacity:.75 !important; transition:opacity .35s ease !important; }
  .gallery .tile a:hover img, .gallery .tile.triple a:hover img{ opacity:1 !important; }
  .gallery{ grid-template-columns:repeat(5,1fr) !important; gap:24px !important; max-width:1280px !important; margin:0 auto !important; }
  .tile, .tile.triple{ height:250px !important; }
}


/* === User requested Desktop CSS === */
@media (min-width:768px){
  .site-header .header-inner nav.main-menu{
    top:92px !important;       /* tiefer */
    min-width:200px !important;
  }
  .site-header .header-inner nav.main-menu a{
    font-size:14px !important; /* kleinere Schrift */
    font-weight:300 !important;
    color:#1a1a1a !important;
    padding:8px 12px !important;
  }
}

/* Burger WIRKLICH ganz rechts */
.site-header .header-inner .burger{
  margin-left:auto !important;
  margin-right:20px !important;
  position:relative !important;
  z-index:250 !important;
}


/* --- Desktop width: use 85% of viewport --- */
@media (min-width:768px){
  .container{ max-width:85vw !important; margin:0 auto !important; }
  .gallery{ max-width:85vw !important; margin:0 auto !important; }
}


/* --- Mobile: ensure 'Impressum' never appears in burger menu --- */
@media (max-width:767px){
  .site-header nav.main-menu a[href*="impressum"]{ display:none !important; }
}


/* --- Typewriter font for menus (header + footer) --- */
.site-header nav.main-menu a{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', Courier, monospace !important; }
.footer-menu a{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', Courier, monospace !important; }


/* --- Gallery full viewport height, top aligned --- */
main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.gallery{
  flex:1;
  align-content:start;
}