/**
 * Base layout styles for xdimaging.com — resets, element-level typography, layout primitives,
 * and header/nav/footer chrome (Task T07). Built entirely on assets/css/tokens.css's custom
 * properties — per docs/STYLE_GUIDE.md, no hardcoded color or font-family value belongs here.
 * Page-specific styles (hero sections, tiles, legal-page prose, …) belong in T08/T09's
 * assets/css/site.css instead, not here.
 *
 * Breakpoint reference (not tokens — CSS custom properties don't work inside @media conditions):
 *   tablet up:  640px
 *   desktop up: 1024px
 * Mobile-first: unprefixed rules are the mobile baseline; min-width media queries layer up from
 * there. These two numbers are repeated verbatim at each usage site below — don't add others.
 */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Base element typography ---------- */

body {
  /* T28: restored per explicit stakeholder correction -- "the hexagon pattern should remain on
     the primary, white background." The sixth-wave "more corporate" pass (competitor benchmarking
     against Basler/Vision Components/PHYTEC/FRAMOS) had removed this entirely, reading the
     earlier "no hexagon pattern in the gray area" note as "remove it everywhere" rather than its
     intended, narrower meaning: keep it off gray/dark surfaces (footer, closing-CTA card) but
     keep it on the primary white page background. Solid cards (.tile, .wizard-card, ...) simply
     paint over it with their own opaque background, same as any watermark-style page texture. */
  background-color: var(--color-paper);
  background-image: url("../img/hex-pattern-light.svg");
  background-size: 297px 114.32px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

h1 {
  font-size: var(--text-display);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

h4 {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: var(--space-3);
}

h5 {
  font-size: var(--text-body);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-small);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  text-decoration-color: currentColor;
}

/* ---------- Accessibility ---------- */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout primitives ---------- */

.container,
.site-header,
.site-footer__inner {
  width: 100%;
  max-width: 1120px; /* standard content width for this layout; not a tokens.css value since it's
                         a layout dimension, not a brand color/type/spacing/radius/shadow value —
                         declared once here so header/footer/page content all share it. */
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container {
  padding-block: var(--space-7);
}

/* Keep the main content column itself solid white/paper -- the new page-wide hex texture (body,
   above) should only show in the surrounding margins/gutters and the two dark bands, not compete
   with the actual page content ("the background behind the main content part (middle) should
   still be white," stakeholder). `.container` is, in practice, always a light content section in
   this codebase except the one usage inside `.closing-cta-band` (home.php/capabilities.php's
   closing CTA) -- excluded here so that band's own dark background isn't painted over. */
.container:not(.closing-cta) {
  background: var(--color-paper);
  box-shadow: var(--shadow-panel);
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Primary/secondary, not "accent" -- names the button's ROLE, not which token colors it,
   consistent with assets/css/wizard.css (T11), which defined this pair first. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  filter: brightness(0.94);
  color: var(--color-accent-ink);
}

.btn--secondary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-line);
}

/* ---------- Header & logo ---------- */

.site-header {
  /* Same "white content card on the textured page body" treatment as .container below -- the
     header is a .container-width element but doesn't share that class (it's never full-bleed
     like the dark bands), so it needs its own background + shadow rather than picking up
     .container's rule. */
  background: var(--color-paper);
  box-shadow: var(--shadow-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.site-logo {
  display: flex;
  align-items: center;
}

/* D-072: xdimg-logo.svg (the full logo incl. its corner frame). 40px tall keeps the letters about
   as large as the old 28px xD glyph, since the frame takes up the top and bottom of the box. */
.site-logo__img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---------- Nav ---------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-paper-dim);
}

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.nav-links,
.nav-lang {
  display: none; /* revealed by .site-nav--open (mobile) or the 1024px breakpoint (desktop) below */
}

.site-nav--open .nav-links,
.site-nav--open .nav-lang {
  display: block;
}

.nav-links {
  width: 100%;
}

.nav-links li + li {
  margin-top: var(--space-2);
}

.site-logo,
.nav-links a,
.footer-legal a {
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-line);
}

/* ---------- Nav dropdown (Products; language switcher) ---------- */

/* Generic open/close-on-click-outside/Escape widget (site.js) -- reused for both the Products
   menu and the language switcher (seventh feature wave: "make a dropdown for the Products menu",
   "add flags and proper formatting with dropdown menu for the language selection"). Below the
   1024px breakpoint the submenu is always shown inline/flattened (mobile visitors are already
   inside the expanded hamburger nav, so a second layer of click-to-reveal is just friction); the
   popover-on-click behavior only applies once there's a horizontal nav bar to pop over. */
.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-links .nav-dropdown__trigger {
  text-decoration: none;
}

.nav-dropdown__trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

.nav-dropdown__menu {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-4);
}

.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-lang {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.nav-lang .nav-dropdown__trigger {
  color: inherit;
  font-size: inherit;
}

.nav-lang img,
.nav-dropdown__menu img {
  border-radius: 2px;
  flex-shrink: 0;
}

.nav-dropdown__menu a.is-current {
  color: var(--color-ink);
  font-weight: 700;
}

/* Deliberately the 1024px (desktop) tier here, not 640px (tablet) -- fourth-wave header cleanup.
   Six nav links + the language switch genuinely don't fit next to the logo between 640-1023px,
   especially in German (longer link labels crowd this range) -- the hamburger menu now covers
   that whole range instead of just below 640px, and the horizontal nav only appears once there's
   genuinely enough width for it. The persistent header CTA button this section used to also fit
   is gone (sixth feature wave -- "don't push the wizard so aggressively... remove it from the top
   menu"), which gives the remaining links more breathing room than four-links-plus-a-button ever
   had. */
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .nav-links,
  .nav-lang {
    display: flex;
  }

  .nav-links {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .nav-links li + li {
    margin-top: 0;
    margin-left: var(--space-5);
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-2);
    padding: var(--space-2);
    min-width: 220px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 20;
  }

  .nav-lang .nav-dropdown__menu {
    left: auto;
    right: 0;
    min-width: 160px;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    display: block;
  }

  /* margin-left reset: `.nav-links li + li` above (same specificity, meant for the top-level items)
     also matches these nested items and would otherwise indent every entry after the first. */
  .nav-dropdown__menu li + li {
    margin-top: var(--space-1);
    margin-left: 0;
  }

  .nav-dropdown__menu a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
  }

  .nav-dropdown__menu a:hover,
  .nav-dropdown__menu a:focus-visible {
    background: var(--color-paper-dim);
    text-decoration: none;
  }
}

/* ---------- Footer ---------- */

/* Full-bleed dark band (fourth-wave "more corporate" pass) -- xdevelop.at's own #414752 tone,
   applied to a large surface rather than as text ink (see tokens.css's own note on
   --color-surface-dark). The hex-grid texture this used to carry is gone (sixth feature wave --
   see body's own note above): a flat dark fill, no decoration, matching every reference
   competitor site's own plain footer treatment. */
.site-footer {
  background-color: var(--color-surface-dark);
  margin-top: var(--space-8);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
  text-align: center;
}

.footer-legal {
  display: flex;
  gap: var(--space-4);
}

.footer-legal a {
  color: var(--color-on-dark-muted);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--color-on-dark);
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---------- Desktop breathing room ---------- */

@media (min-width: 1024px) {
  .container,
  .site-header,
  .site-footer__inner {
    padding-inline: var(--space-6);
  }
}