/* Our own overrides on top of the mirrored 2017 theme.
 *
 * Loaded last (see scripts/build.py), so it wins on specificity ties. Nothing
 * in site/ is edited — that stays a byte-for-byte mirror of the origin.
 *
 * Every rule here fixes something measured with scripts/check-site.py, not
 * something assumed. Re-run it after changing this file.
 *
 * Sizes are in px, never rem. The theme computes `html` to **10px**, so a rem
 * here is 10px and not the 16px it reads as — every rem value in an earlier
 * version of this file was silently rendering at 62.5% of its intended size.
 */

/* ==========================================================================
   1. Horizontal overflow
   ==========================================================================
   Measured: the page scrolled to 546px inside a 375px viewport, so every
   phone showed a sideways scrollbar and a page shifted off-centre.

   The fixed navbar has no left/right anchor, so `position: fixed` makes it
   shrink-wrap its content instead of spanning the viewport — and its content
   is the 350px logo plus the toggle button. Anchoring both edges makes it
   track the viewport width, which is what the theme assumed all along.
   Supersized's fullscreen background list inherited the same wrong width. */

.navbar-fixed-top,
.navbar-fixed-bottom {
  left: 0;
  right: 0;
  width: auto;
}

ul#supersized {
  width: 100%;
  left: 0;
}

/* The logo carries width="350" as an HTML attribute, which wins over a
   stylesheet that never mentions it. On a 320-375px phone that alone pushes
   the header past the viewport. */
.site-logo {
  max-width: 100%;
  height: auto;
}

/* The actual cause of the 546px page width: the "random facts" counters.
   Four <li> float at width:25% — about 94px on a 375px phone — but each holds
   an 86px circular icon with a 20px right margin, so the content cannot fit
   and the row pushes the layout viewport out to 546px. Every fixed-position
   element then inherits that width, which is why the navbar looked guilty.

   Stack them two-up instead, and drop the 52px section heading to something
   that fits a phone. */

@media (max-width: 767px) {
  #random-facts {
    padding: 60px 0;
  }

  #random-facts .title {
    font-size: 26px;
  }

  /* `float: left` is restated deliberately. The theme's own 767px rule set
     `float: none` to stack these full width; the build now strips that pair of
     declarations, but the base rule at style.css:1667 floats them left, and
     saying so here keeps this block readable on its own. */
  #random-facts ul li {
    float: left;
    width: 50%;
    margin-bottom: 30px;
    text-align: center;
  }

  /* The icon wrapper is `display: table` (style.css:1674), which shrink-wraps,
     so `text-align: center` inside it has no width to centre against. */
  #random-facts ul li div {
    display: block;
    width: auto;
    float: none;
    text-align: center;
  }

  #random-facts ul li i {
    width: 62px;
    height: 62px;
    line-height: 62px;
    font-size: 28px;
    margin-right: 0;
  }

  #random-facts ul li span {
    width: auto;
    display: block;
    text-align: center;
    font-size: 34px;
  }

  #random-facts ul li h5 {
    text-align: center;
  }
}

@media (max-width: 360px) {
  #random-facts ul li {
    width: 100%;
  }
}

/* Backstop only. Note it does NOT prevent the layout viewport from expanding —
   measured: with this rule in place the page still reported innerWidth 546
   until #random-facts above was fixed. It is kept to suppress a stray
   scrollbar from any small future overflow, not as a substitute for finding
   the cause. check-site.py measures scrollWidth and will still fail. */
html {
  overflow-x: hidden;
}

/* ==========================================================================
   2. Client logos: a 6-column <table> on a phone
   ==========================================================================
   The "Unsere Kunden" section is a real <table> with six <td> per row and a
   fixed 190px row height. At 375px that is ~58px per logo — unreadable.

   The theme had its own attempt at style.css:2457 that stacked every cell full
   width with `display: inline-block !important` — all 28 logos in a single
   column, roughly 2500px of scrolling through one section.

   scripts/build.py now removes that rule outright, so everything below is
   ordinary CSS. It used to need `!important` to win; if these declarations
   ever stop applying, check that the build still strips the theme rule rather
   than reaching for `!important` again. */

@media (max-width: 767px) {
  #our-clients table,
  #our-clients tbody {
    display: block;
    width: 100%;
  }

  #our-clients tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  #our-clients td,
  #our-clients td.first,
  #our-clients td.last {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 92px;
    padding: 6px;
    /* The theme strips borders off the first and last cell of each row to
       build one continuous grid. Those cells are no longer first or last once
       the row is three wide, so put a uniform border back. `!important` is
       needed here and only here: the theme's own border rules use it. */
    border: 1px solid #dbe2e2 !important;
  }

  #our-clients td a {
    width: 100%;
    padding: 0;
  }

  #our-clients table td img {
    /* style.css:2330 sets `width: 100% !important` on these. */
    width: auto !important;
    max-width: 100%;
    max-height: 74px;
  }

  /* Decorative corner ticks assume the original grid geometry. */
  #our-clients .corner-tr {
    display: none;
  }
}

@media (max-width: 400px) {
  #our-clients tr {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   3. Gallery
   ==========================================================================
   Items are a fixed 330px. On a 320px phone that overflows its column; on a
   414px phone it leaves a dead margin. Make it track the viewport but never
   exceed the original size, so the sly slider's measurements stay sane. */

@media (max-width: 767px) {
  .gallery-item {
    width: calc(100vw - 44px);
    max-width: 330px;
  }
}

/* The thumbnails are now 720px JPEGs displayed at ~330px. Fixing the box
   height stops the grid from reflowing as each lazy image arrives. */
.gallery-item .item-thumbnail img {
  aspect-ratio: 720 / 440;
  object-fit: cover;
  max-height: 220px;
}

/* ==========================================================================
   4. Tap targets
   ==========================================================================
   Measured 4 links under 24px — the footer social icons and the small nav
   anchors. 44px is the WCAG 2.2 / iOS guidance for a touch target. */

@media (max-width: 767px) {
  .footer-socials a,
  .navbar-custom .nav li a,
  .media-btns .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .footer-socials a {
    margin: 0 4px;
  }
}

/* ==========================================================================
   5. Readability on small screens
   ========================================================================== */

@media (max-width: 767px) {
  /* The Impressum is a single long <p> of <br>-separated lines. */
  #contacts p {
    line-height: 1.7;
    word-break: break-word;
  }

  /* The hero slide headings are h2/h3, not h1 — an earlier rule here targeted
     `#intro h1` and therefore did nothing at all.

     Measured at 390px: the h2 is 60px, so a single word ("GUMMITECHNIK",
     "KONDITIONEN") is 473px wide inside a 330px box and simply runs off the
     slide, which is why the text read "KONDITIONE". */
  #intro .item h2 {
    font-size: 27px;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  #intro .item h3 {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  #intro .item p {
    font-size: 15px;
    line-height: 1.5;
  }

  .title,
  h2.title {
    font-size: 26px;
  }
}

/* ==========================================================================
   8. Video section
   ==========================================================================
   `.video-content` is `overflow: hidden` and takes its height from the video
   itself. Deferring the YouTube API (see scripts/build.py) means #player is
   empty until the section is scrolled to, so the box collapses to ~239px while
   the overlay text needs more — the headline was cut off mid-word.

   Give it a floor tall enough for the overlay, and drop the theme's 32px
   headline, which needs three lines on a 390px phone. */

/* The box used to take its height from the YouTube iframe. The self-hosted
   <video> is absolutely positioned so it cannot do that, so give it one. The
   poster doubles as the background: it shows before the first frame decodes,
   and it is what remains if the video is suppressed below. */
.video-content {
  position: relative;
  min-height: 420px;
  background: #090909 url(../img/server-room-poster.jpg) no-repeat center center;
  background-size: cover;
}

.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* The theme's .overlay is the dark wash and the text sits inside it; both have
   to stay above the video. */
.video-content .overlay {
  z-index: 50;
}

/* An autoplaying background video is exactly what this setting is for. The
   poster background above stays, so the section still looks the same. */
@media (prefers-reduced-motion: reduce) {
  .video-bg {
    display: none;
  }
}

/* CC BY attribution. Small and out of the way, but present — the licence
   requires it. */
.video-credit {
  /* Pinned to the bottom: the <video> is absolutely positioned, so this is the
     only element left in normal flow and would otherwise sit at the top of the
     section, above the picture it is crediting. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  margin: 0;
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.45);
}

.video-credit a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .video-content {
    min-height: 340px;
    /* The theme caps this at 300px, which would clamp the min-height above. */
    max-height: none;
  }

  .video-content h3 {
    /* The theme's own rule is `font-size: 32px !important`. */
    font-size: 22px !important;
    line-height: 1.4;
    padding: 0 18px;
  }
}

/* ==========================================================================
   6. Contact form (<headless-mailing>)
   ==========================================================================
   The component styles itself through --hm-* custom properties and exposes
   ::part() hooks. Match the theme's green accent (#06cc58, the same colour the
   site uses for ::selection) and its light form fields. */

headless-mailing {
  display: block;
  width: 100%;

  --hm-ink: #707070;
  --hm-muted: #9a9a9a;
  --hm-hairline: #e1e1e1;
  --hm-field-bg: #fff;
  --hm-accent: #06cc58;
  --hm-accent-ink: #fff;
  --hm-error: #c0392b;
  --hm-font-body: "Open Sans", Helvetica, Arial, sans-serif;
  --hm-font-label: "Open Sans", Helvetica, Arial, sans-serif;
  --hm-corner: 3px;
  --hm-gap: 14px;
  --hm-label-tracking: 0.04em;
}

/* Comfortable touch targets and no iOS zoom-on-focus, which is triggered by
   any font-size below 16px. */
headless-mailing::part(field) {
  font-size: 16px;
  min-height: 44px;
}

headless-mailing::part(button) {
  min-height: 48px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ==========================================================================
   7. Address card (replaces the Google Maps embed)
   ==========================================================================
   scripts/build.py removes the Maps script and its JS block — it was the last
   third party on the page, and its 2017 referrer-restricted key meant it was
   almost certainly not rendering here anyway. This is what sits in #map now:
   the address, and two links that only reach a map when the visitor clicks. */

#map {
  width: 100%;
  /* The theme pins this to `height: 300px` (420px above 767px) because it held
     a Google Maps canvas that filled whatever box it was given. The card here
     is taller than that on a phone, and a fixed height meant it overflowed and
     the footer text rendered on top of it. */
  height: auto;
  min-height: 300px;
  background: #f4f6f6;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.map-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* The image is 1536x768 and shown at roughly half that, which keeps the street
   labels sharp on a retina screen. It is lazy-loaded and sits below the fold. */
.map-image {
  display: block;
  flex: 1 1 420px;
  min-height: 240px;
  overflow: hidden;
  line-height: 0;
}

.map-image img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: center;
}

.map-card-inner {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 34px 26px;
}

.map-attribution {
  margin: 14px 0 0;
  font-size: 12px;
  color: #9a9a9a;
}

.map-attribution a {
  /* Padded to a real tap target: an underlined word is about 14px tall, which
     check-site.py flags and a thumb misses. */
  display: inline-block;
  padding: 6px 2px;
  color: #9a9a9a;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .map-image {
    flex-basis: 100%;
    min-height: 200px;
  }

  .map-image img {
    min-height: 200px;
  }

  .map-card-inner {
    flex-basis: 100%;
    padding: 26px 20px;
  }
}

.map-card-inner h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.map-card-inner p {
  margin: 0 0 18px;
  line-height: 1.7;
  color: #707070;
}

.map-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid #06cc58;
  border-radius: 3px;
  color: #06cc58;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.map-link:hover,
.map-link:focus {
  background: #06cc58;
  color: #fff;
  text-decoration: none;
}

/* Must come after `.map-link`, not before it. Both selectors are one class, so
   the later rule wins — declared earlier, `color: #fff` lost to `.map-link`'s
   green and the button rendered as green text on a green fill: a solid block
   with the label invisible. */
.map-link-primary {
  background: #06cc58;
  color: #fff;
  border-color: #06cc58;
}

.map-link-primary:hover,
.map-link-primary:focus {
  background: #05b34d;
  border-color: #05b34d;
  color: #fff;
}