/*
Theme Name: arch-nk
Theme URI: https://example.com
Author: Nicolaj Kirisits
Description: Elegant-technisches Theme für Ziviltechnik / Architektur / Kunst & Forschung.
Version: 1.0
Text Domain: elegant-technisch
*/

/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-text: #0A0A0A;
  --color-muted: #777777;
  --color-line: rgba(0,0,0,0.12);

  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 24px;
  --s-lg: 48px;
  --s-xl: 72px;

  /* Layout */
  --grid-gap: clamp(16px, 3vw, 24px);
  --line: 1px;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fz-base: 18px;
  --fz-small: 14px;
  --fz-h1: 52px;
  --fz-h2: 32px;
  --fz-h3: 22px;

  /* Header */
  --header-h: 60px;

  /* Breakpoint für Nav */
  --bp-nav: 900px;

  /* Services: stabile Abstände (unabhängig von Browserbreite) */
  --service-item-gap: 12px;     /* Abstand zwischen den 3 Überschriften */
  --service-content-gap: 8px;   /* Abstand Überschrift -> Accordion-Text */
}

@media (max-width: 768px){
  :root{
    --fz-base: 16px;
    --fz-h1: 36px;
    --fz-h2: 26px;
  }
}

/* =========================================================
   RESET & BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fz-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

figure{ margin: 0; }

a{ color: inherit; }

.site-main{ min-height: 60vh; }

/* WP helper */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   LAYOUT
========================================================= */
.container{
  width: 100%;
  margin: 0;
  padding-left: var(--s-md);
  padding-right: var(--s-md);
}

.pin-stage,
.pin-stage__inner{
  margin: 0;
  padding: 0;
}

/* =========================================================
   HEADER + NAV (NUR EIN BREAKPOINT: 900px)
========================================================= */
.site-header{
  background: var(--color-surface);
  position: sticky;
  top: 0;
  /* sehr hoch, damit Mobile-Dropdown nicht von Content überdeckt wird */
  z-index: 1000;
  min-height: var(--header-h);
  padding: 16px 0 12px;
}

/* alles im Header wirklich schwarz */
.site-header,
.site-header a,
.site-header .site-brand__tagline,
.site-header .site-nav a{
  color: #000;
  opacity: 1;
}
.site-header a:hover{ opacity: 1; }

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  position: relative; /* Anker fürs Dropdown */
}

/* Brand links */
.site-brand{ display: flex; align-items: center; gap: 12px; min-width: 0; }

.site-brand__link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.site-brand__link:hover{ text-decoration:none; }

.site-brand__logo img{
  display: block;
  height: 32px;
  width: auto;
}

.site-brand__tagline{
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}

/* Desktop/Tablet: Menü sichtbar */
.site-nav-wrap{ display: block; }

.site-nav{
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  white-space: nowrap;
}

.site-nav a{
  text-decoration: none;
  color: #000;
}

/* Language switcher */
.site-nav .lang-switcher{
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav .lang-switcher .lang{ text-decoration: none; }
.site-nav .lang-switcher .lang.is-active{ font-weight: 700; }
.site-nav .lang-switcher .lang-sep{ opacity: 1; }

/* Burger-Button: default AUS */
.menu-toggle{
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* ====== MOBILE <=900px: Burger + Dropdown ====== */
@media (max-width: 900px){

  .site-brand__tagline{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    line-height: 1.15;
  }

  .menu-toggle{
    display: inline-flex;
    margin-left: auto;
    width: 44px;
    height: 32px; /* = Logo-Höhe */
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: #000;
    position: relative;
    align-items: center;
    justify-content: center;
  }

  .menu-toggle::before{
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 10px 0 currentColor, 0 20px 0 currentColor;
    transform: translateY(-10px);
  }

  .site-nav-wrap{
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 16px 18px;
    min-width: 240px;
    z-index: 9999;
  }

  .site-nav{
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    text-align: right;
  }

  .site-nav-wrap.is-open{ display: block; }

  /* optional: wenn aria-expanded genutzt wird */
  .menu-toggle[aria-expanded="true"] + .site-nav-wrap{ display: block; }

  /* optional: Hover/Fokus (nur Desktop Pointer) */
  @media (hover:hover) and (pointer:fine){
    .menu-toggle:hover + .site-nav-wrap,
    .site-nav-wrap:hover{ display: block; }
  }
  .menu-toggle:focus + .site-nav-wrap,
  .site-nav-wrap:focus-within{ display: block; }
}

/* =========================================================
   HERO
   - Keine Abstände zum Header und zur nächsten Section
========================================================= */
.hero{
  background: var(--color-surface);
  margin: 0;
  padding: 0;
}

/* Frontpage Hero (3 Bilder) */
.hero.hero--images{
  margin: 0;
  padding: 0;
}

.hero-images-grid{
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
}

.hero-image{
  flex: 1 1 0;
  min-width: 0;
  height: 173px;
  overflow: hidden;
  background: #ddd;
}

.hero-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image > a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.hero-image > a:focus-visible{
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 6px;
}

/* About Hero (1 Bild) */
.hero.hero--about{
  margin: 0;
  padding: 0;
}

.about-hero{
  display: block;     /* About hat nur ein Bild -> kein flex nötig */
  margin: 0;
  padding: 0;
}

.about-hero__image{
  display: block;
  width: 100%;
  height: 173px;
  overflow: hidden;
  background: #ddd;
}

.about-hero__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   SECTIONS
   - Default: keine vertikalen Abstände (0)
   - Inhalte steuern Abstände selbst (Grid/Gaps/Margins)
========================================================= */
.section{
  background: var(--color-surface);
  border-bottom: 0;
  margin: 0;
  padding: 0;
}

/* =========================================================
   SERVICES (Accordion)
   - immer untereinander (Desktop + Mobile)
   - Abstand zwischen den 3 Überschriften immer gleich
========================================================= */
.section--services{
  margin: 0;
  padding: 0;
}

.service-grid{
  display: flex;
  flex-direction: column;
  gap: var(--service-item-gap);
  margin: 0;
  padding: 0;
}

/* <details> als Service-Item */
details.service-item.service-acc{
  margin: 0;
  padding: 0;
  width: 100%;
  border: 0;
}

summary.service-acc__summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
summary.service-acc__summary::-webkit-details-marker{ display:none; }
summary.service-acc__summary::marker{ content:""; }

/* Titel */
.service-acc__summary > h3,
.service-item h3{
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  text-align: left;
}

/* Content */
.service-acc__content{
  margin-top: var(--service-content-gap);
}
.service-item p,
.service-acc__content p{
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
  max-width: 70ch;
}

/* Fokus */
summary.service-acc__summary:focus{ outline:none; }
summary.service-acc__summary:focus-visible{
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 4px;
}

/* =========================================================
   TYPO / CONTENT
========================================================= */
.section-title{
  font-size: var(--fz-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-md) 0;
}

.content{ max-width: 720px; }
.content p{ margin: 0 0 var(--s-sm) 0; }

/* =========================================================
   PROJECT GRID
========================================================= */
.project-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--s-lg);
}

@media (max-width: 900px){
  .project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .project-grid{ grid-template-columns: 1fr; }
}

.project-card a{
  text-decoration: none;
  color: inherit;
}

.project-card__thumb{
  margin-bottom: var(--s-sm);
  height: 280px;
  overflow: hidden;
  background: #ddd;
}

.project-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__title{
  font-size: 18px;
  margin: 0 0 2px 0;
}

.project-card__meta{
  font-size: var(--fz-small);
  color: var(--color-muted);
  margin: 0;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  border-top: none;           /* wie zuletzt bei dir */
  box-shadow: none;
  padding: var(--s-md) 0 var(--s-lg);
  font-size: var(--fz-small);
  color: var(--color-muted);
  background: var(--color-surface);
}

.site-footer::before{ content: none; }

.site-footer__inner{
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
}
/* Accordion-Text: volle Breite (wie Hero im Container) */
.section--services .service-acc__content,
.section--about-services .service-acc__content{
  width: 100%;
  max-width: none;
}

.section--services .service-acc__content p,
.section--services .service-acc__content li,
.section--about-services .service-acc__content p,
.section--about-services .service-acc__content li{
  width: 100%;
  max-width: none;
}
/* ============ NO GAP: Services -> Projects (Front + About) ============ */

/* Services unten keine Luft */
.section--services,
.section--about-services{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Projects oben keine Luft */
.section--portfolio,
.section--projects{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Wenn du "overlay-section" verwendest: killt extra Top-Padding */
.section--portfolio.overlay-section,
.section--projects.overlay-section{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Übergang direkt: Services + Projects */
.section--services + .section--portfolio,
.section--services + .section--projects,
.section--about-services + .section--portfolio,
.section--about-services + .section--projects{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Sicherstellen: Überschrift macht keinen extra Abstand nach oben */
.section--portfolio h2,
.section--projects h2,
.section--portfolio .section-title,
.section--projects .section-title{
  margin-top: 0 !important;
}
/* About Hero: soll gleiche Seitenabstände wie .container haben */
.container.about-hero{
  padding-left: var(--s-md) !important;
  padding-right: var(--s-md) !important;
}
/* About: Projects-Headline bleibt wie auf Desktop/Frontpage */
.page-template-page-about .section--portfolio h2,
.page-template-page-about .section--projects h2,
.page-template-page-about .section--portfolio .section-title,
.page-template-page-about .section--projects .section-title{
  font-size: 32px !important; /* oder dein gewünschter Fixwert */
}
/*
  Services/Accordion Hintergrund
  - Der graue Block soll NICHT full-bleed sein.
  - Er soll die gleichen Seitenabstände haben wie Hero/Projects.
  -> Hintergrund daher auf .service-grid (innerhalb .container) legen.
  Gilt für Frontpage UND About.
*/
body.home .section--services{
  background: var(--color-surface);
}
.section--services .service-grid,
.section--about-services .service-grid{
  background: var(--color-services-bg, var(--color-bg));
}
.section--services summary.service-acc__summary > h3{
  font-size: 4.0rem;     /* größer/kleiner */
  font-weight: 300;      /* 400–700 */
  letter-spacing: -0.02em;
  text-transform: none;  /* oder uppercase */
}
/* Abstand zwischen Hero und Services */
body.home .hero + .section--services{ margin-top: 23px !important; }

/* About: gleiche Abstände wie Frontpage */
.page-template-page-about .hero + .section--about-services{ margin-top: 23px !important; }
.page-template-page-about .section--portfolio{ margin-top: 37px !important; }

.section--services summary.service-acc__summary > h3{
  color: var(--color-services-heading);
}
/* Projekte-Section: oben wirklich 0 */
.section--portfolio,
.section--projects{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Projekte: Grid ohne extra Abstand nach oben */
.section--portfolio .project-grid,
.section--projects .project-grid{
  margin-top: 0 !important;
}
/* Nur Übergang Services -> Projects: Abstand oben */
.section--services + .section--projects,
.section--services + .section--portfolio,
.section--about-services + .section--projects,
.section--about-services + .section--portfolio{
  margin-top: 37px !important;
}

/* =========================================================
   SINGLE PROJECT: oberer Textbereich bleibt stehen,
   ab erstem Bild/Media-Block scrollt der Inhalt.
========================================================= */
body.single-project .project-layout{
  position: relative;
}
body.single-project .project-sticky{
  position: sticky;
  /* header = min-height(--header-h) + padding (16+12) */
  top: calc(var(--header-h) + 28px);
  z-index: 5;
  background: var(--color-surface);
  padding-top: var(--s-lg);
  padding-bottom: var(--s-md);
}
body.single-project .project-sticky::after{
  content: "";
  display: block;
  height: 1px;
  background: var(--color-line);
  margin-top: var(--s-md);
}
body.single-project .project-body{
  padding-top: var(--s-md);
}