/* Hand-written styles for the Ofenbauer-Bangert site.
 *
 * Loaded after the inherited Astra theme CSS, so everything here wins without
 * touching the theme files. Keep site-specific changes in this one file — it is
 * the part that is meant to be edited, and it travels with the site if it moves
 * to other hosting (see MOVING.md).
 */

/* ---------- 1. Sticky header, translucent once the page scrolls ---------- */

#masthead {
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow .25s ease, backdrop-filter .25s ease;
}

/* The theme paints the background on the inner wrap, so the fade goes there. */
/* Translucent at 75% from the start, so content is visibly travelling behind the
 * bar rather than meeting a solid edge. The blur keeps text legible over busy
 * photos; the shadow only appears once the page has actually moved. */
/* The bar's colour is painted on .ast-primary-header-bar (Astra sets
 * background-color there from --ast-global-color-primary, i.e. white), NOT on
 * the wrap around it — styling the wrap does nothing at all. The wraps are kept
 * transparent so the translucent bar is what shows. */
#masthead .ast-main-header-wrap,
#masthead .ast-mobile-header-wrap { background: transparent; }

#masthead .ast-primary-header-bar,
#masthead .ast-below-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
  background-color: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  transition: background-color .25s ease, box-shadow .25s ease;
}

body.is-scrolled #masthead {
  box-shadow: 0 2px 16px rgba(40, 32, 24, .15);
}

/* Browsers without backdrop-filter would show the photo straight through 75%
 * white, so give those a more opaque bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #masthead .ast-primary-header-bar { background-color: rgba(255, 255, 255, .93); }
}

/* Anchor targets must clear the now-fixed header when jumped to. */
[id="über-mich"], #bilder, #ofensysteme, #leistungen, #kontakt, #startseite {
  scroll-margin-top: 92px;
}

html { scroll-behavior: smooth; }

/* ---------- 1a. Home page: first block sits directly under the menu ---------- */

/* The theme reserves 60px above #primary, 2em above .entry-header, and still
 * renders an (empty) entry title on this page — together that is the band of
 * background between the menu and the cover image. Only the home page wants it
 * gone; the Impressum keeps its normal breathing room. */
/* The theme's rule is `.ast-plain-container.ast-no-sidebar #primary` — two
 * classes plus an id — so a plain `.hero-flush #primary` loses the cascade and
 * the 60px band of page background (#f6f3e2) stays. Match its weight and add
 * ours on top. */
body.hero-flush.ast-plain-container.ast-no-sidebar #primary,
body.hero-flush #primary { margin-top: 0; padding-top: 0; }

body.hero-flush .entry-header { margin-top: 0; }
body.hero-flush .entry-title:empty { display: none; margin: 0; }
body.hero-flush .ast-article-single { padding-top: 0; }
body.hero-flush .entry-content > .wp-block-cover:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #masthead, #masthead .ast-main-header-wrap { transition: none; }
}

/* ---------- 2. Ofensysteme: each variant beside its drawing ---------- */

/* Two thirds of the content width on desktop, like the contact form (full width
 * again on phones). Across the whole container the prose ran to very long lines,
 * which left the text block far shorter than the 520px drawing beside it;
 * narrowing the column makes the text taller and evens the two out. */
.ofen-sektion {
  width: 66%;
  max-width: 900px;
  margin-inline: auto;
}

.ofen-variante {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 1.6rem 2.2rem;
  /* Centre the prose against the drawing: the paragraphs are shorter than the
     520px-tall cross-sections, and top-aligning them left the column bottom-heavy. */
  align-items: center;
  margin: 0 0 2.6rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid #e8e1d7;
}

.ofen-variante:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Alternate the drawing left/right so the column does not read as a list. */
.ofen-variante:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}

.ofen-variante:nth-of-type(even) .ofen-bild { order: 2; }

.ofen-bild {
  margin: 0;
  background: #faf7f3;
  border: 1px solid #e8e1d7;
  border-radius: 8px;
  padding: .6rem;
}

.ofen-bild img {
  display: block;
  width: 100%;
  height: auto;
}

.ofen-bild figcaption {
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.45;
  color: #6f675e;
  text-align: center;
}

.ofen-variante h6 {
  margin: 0 0 .5rem;
  font-size: 1.12rem;
  color: #2f2b28;
}

.ofen-variante p { margin: 0 0 .8rem; }
.ofen-variante p:last-child { margin-bottom: 0; }

/* ---------- 3. Leistungen as cards ---------- */

/* The list sits on a tinted band so the white cards actually read as cards —
 * the page itself is white, where they would otherwise just float. */
.leistungen-band {
  background: #faf7f3;
  border: 1px solid #efe7dc;
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.7rem;
  margin: 0 0 1.6rem;
}

.leistungen-band > p:first-child { margin-top: 0; }

.leistungen-liste {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 1rem;
}

.leistungen-liste li {
  background: #fff;
  border: 1px solid #e8e1d7;
  border-radius: 10px;
  padding: 1.05rem 1.15rem 1.1rem;
  line-height: 1.55;
  box-shadow: 0 1px 2px rgba(50, 40, 30, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.leistungen-liste li:hover {
  transform: translateY(-2px);
  border-color: #dfd0bd;
  box-shadow: 0 6px 18px rgba(50, 40, 30, .10);
}

.leistungen-liste strong {
  display: block;
  position: relative;
  margin-bottom: .35rem;
  padding-left: 1rem;
  font-size: 1.03rem;
  color: #2f2b28;
}

.leistungen-liste strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: .46em;
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  background: #e07a5f;
}

.leistungen-hinweis {
  margin: 1.3rem 0 0;
  padding: .9rem 1.1rem;
  background: #fff;
  border-left: 3px solid #e07a5f;
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
  .leistungen-liste li { transition: none; }
  .leistungen-liste li:hover { transform: none; }
}

/* ---------- 4. Contact form: narrower than the text, centred ---------- */

.kontakt-wrap {
  width: 66%;
  max-width: 820px;
  min-width: 300px;
  margin-inline: auto;
}

.kontakt-wrap .kontakt-form p { margin-bottom: 1rem; }

.kontakt-wrap label { display: block; font-weight: 600; color: #2f2b28; }

.kontakt-wrap input[type="text"],
.kontakt-wrap input[type="email"],
.kontakt-wrap textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.kontakt-wrap .kontakt-submit,
.kontakt-wrap input[type="submit"] {
  display: block;
  margin: 0 auto;
  min-width: 200px;
  cursor: pointer;
}

/* Honeypot: out of sight for people, still in the DOM for bots to fill. */
.kontakt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 5. Phones ---------- */

@media (max-width: 782px) {
  .ofen-variante,
  .ofen-variante:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Drawing first on every variant once stacked, so the rhythm stays even. */
  .ofen-variante:nth-of-type(even) .ofen-bild { order: 0; }

  .ofen-bild { max-width: 340px; margin-inline: auto; }
  .ofen-sektion { width: 100%; max-width: none; }

  /* The hero was authored with a 1069px minimum, which swallows a phone screen. */
  #startseite.wp-block-cover { min-height: 62vh !important; }

  [id="über-mich"], #bilder, #ofensysteme, #leistungen, #kontakt, #startseite {
    scroll-margin-top: 72px;
  }

  .leistungen-liste { grid-template-columns: 1fr; }
  .leistungen-band { padding: 1.1rem 1rem 1.2rem; }

  /* The desktop two-thirds rule would leave a sliver of a form on a phone. */
  .kontakt-wrap { width: 100%; max-width: none; min-width: 0; }
}

/* Nothing should be able to push the page sideways on a phone.
 * `clip` rather than `hidden` on purpose: overflow-x:hidden turns <body> into a
 * scroll container, which silently breaks the sticky header above. */
body { overflow-x: clip; }

img, svg, iframe, video { max-width: 100%; height: auto; }

/* ---------- 6. The inherited photo gallery on phones ---------- */

/* The gallery is authored as 4 columns, which is four postage stamps on a phone.
 * WordPress sizes these with flex-basis, so the override has to do the same. */
@media (max-width: 782px) {
  .wp-block-gallery.columns-4.is-layout-flex > .wp-block-image {
    flex-basis: calc(50% - 8px) !important;
  }
}

@media (max-width: 480px) {
  .wp-block-gallery.columns-4.is-layout-flex > .wp-block-image {
    flex-basis: 100% !important;
  }
}

/* ---------- 7. Photo album (Bilder) ---------- */

/* The folder is the album: these tiles come from ../galerie/, maintained in
 * /bilder. These are the work photos — the reason someone is on the page — so
 * the tiles are deliberately large: a 345px minimum gives three per row on a
 * normal desktop instead of five postage stamps. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
  gap: 10px;
  margin: 0 0 1.6rem;
}

.galerie-item {
  display: block;
  position: relative;
  padding-top: 68%;
  overflow: hidden;
  border-radius: 3px;
  background: #ece6dd;
}

.galerie-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
}

.galerie-item:hover img { transform: scale(1.04); opacity: .92; }

/* Lightbox: replaces the WordPress lightbox plugin, ~40 lines of our own JS. */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(22, 18, 15, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.2rem 1rem 3.4rem;
}

.lb-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }

.lb-overlay button {
  position: absolute;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1;
  padding: .45rem .8rem;
  cursor: pointer;
}

.lb-overlay .lb-close { top: .8rem; right: .9rem; }
.lb-overlay .lb-prev  { left: .7rem; top: 50%; transform: translateY(-50%); }
.lb-overlay .lb-next  { right: .7rem; top: 50%; transform: translateY(-50%); }
/* `position: absolute` matters: the rule above only covers <button>, so without
 * it this <span> stays in flow as a second flex item, steals width from the
 * image and pushes it off-centre — which is exactly what it was doing. */
.lb-overlay .lb-count { position: absolute; bottom: 1rem; left: 50%;
                        transform: translateX(-50%);
                        font-size: .85rem; padding: .3rem .7rem; background: none; }

@media (max-width: 480px) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .galerie-item img { transition: none; }
  .galerie-item:hover img { transform: none; }
}