/* ============================================================
   BASE.CSS · Brebu Nou
   ------------------------------------------------------------
   Reset, body typography, base utilities (skip-link, container).
   Mirrors V6.1's global setup exactly.
   ============================================================ */


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

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}


/* ----- Document & body ----- */

html {
  scroll-behavior: smooth;
  font-size: calc(var(--font-base) * var(--font-scale));
  /* Reserve scrollbar gutter so opening modals doesn't shift content sideways.
     Desktop only: mobile browsers use overlay scrollbars (no width reserved),
     and on Chrome/Android the `stable` keyword still reserves a visible
     right-edge gap that makes the sticky header look narrower than the body. */
  scrollbar-gutter: stable;
  /* Sticky header is 88px tall · without scroll-padding-top, anchor jumps
     (e.g. /page#section, breadcrumb deep-links) land beneath the header.
     legal.css declares this on the article column; the site-wide value
     above ensures every page benefits. */
  scroll-padding-top: 96px;
}
@media (max-width: 900px) {
  html { scrollbar-gutter: auto; }
}

body {
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--charcoal);
  background: var(--chantilly);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Typographic orphan / widow prevention · modern browsers.
   Headings balance their line lengths; body copy avoids leaving a single
   word alone on the last line. Uses :where() so specificity stays 0 –
   any element-specific text-wrap already set elsewhere wins. Browsers
   without text-wrap support simply ignore this (graceful degradation),
   while the existing   glue keeps working everywhere. */
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li, dd, blockquote, figcaption,
       .hero-sub, .splash-tagline, .splash-tagline-lead, .eco-text) { text-wrap: pretty; }

/* German uses long compound nouns (Vermögenserklärungen, Verwaltungsverordnungen).
   Allow soft hyphenation + arbitrary break so long words don't overflow narrow
   mobile containers like nav labels, MOL doc names, footer columns. */
html[lang^="de"] body {
  hyphens: auto;
  -webkit-hyphens: auto;
}
html[lang^="de"] .nav-trigger,
html[lang^="de"] .mobile-menu-section-title,
html[lang^="de"] .mobile-menu-items a,
html[lang^="de"] .splash-portal-title,
html[lang^="de"] .doc-name,
html[lang^="de"] .hub-card-title,
html[lang^="de"] .acc-title,
html[lang^="de"] .page-article p,
html[lang^="de"] .splash-footer-col h2,
html[lang^="de"] .splash-footer-col ul a {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ----- Element defaults ----- */

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

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  color: var(--rustic-taupe);
}
/* Global keyboard focus · WCAG 2.4.7 · individual components with their
   own :focus-visible (brand, hamburger, nav-mol, cookie-tab, FAB, a11y-btn)
   override this via higher specificity. */
a:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 2px;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
/* Default focus indicator for any button without its own :focus-visible rule.
   Specific buttons override this with their own styled outline. */
button:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 2px;
}

ul {
  list-style: none;
}


/* ----- Container utilities ----- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}


/* ----- Reduced motion · WCAG 2.3.3 -----
   When the OS-level preference is "reduce motion", neutralize every
   animation and transition site-wide. Hero carousels still have their
   own static fallback rule in splash.css / tourism.css. Smooth scroll
   on html and JS-driven scrollTo({behavior:'smooth'}) are handled by
   scroll-top.js with its own matchMedia check. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 82design footer credit · delicate · small italic, taupe → chantilly on hover */
.footer-credit {
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  font-style: italic;
  opacity: 0.7;
}
.footer-credit a {
  color: #a8957f;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: #f7f6f1;
}
/* main footer · copyright centered in the middle, 82design pinned to the right.
   3-col grid (1fr | auto | 1fr): empty left, copyright center, credit right. */
.splash-footer-bottom > span:first-child { grid-column: 2; }
.splash-footer-bottom > .footer-credit { grid-column: 3; justify-self: end; }
/* Your Europe logo (SDG Reg. EU 2018/1724 art. 22) · official EU asset on a
   light plaque, per EU visual identity rules for dark backgrounds. */
.footer-ye-logo {
  display: inline-block;
  background: var(--chantilly);
  border: 1px solid var(--stone-hearth-soft);
  padding: 8px 12px;
  line-height: 0;
  transition: opacity 0.25s ease;
}
.footer-ye-logo:hover { opacity: 0.85; }
.footer-ye-logo img { display: block; height: 32px; width: auto; }
/* closing element of the footer legal column · breathing room above,
   like a discreet institutional plaque, not a list item */
.footer-ye-item { margin-top: 16px; }

/* legal compliance line (D18) · full-width second row under copyright.
   grid-column applies in the grid layout (base), flex-basis in the flex
   layout (primarie.css) · each layout ignores the other's property. */
.splash-footer-bottom > .footer-compliance {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-basis: 100%;
  justify-self: center;
  text-align: center;
  font-size: .78rem;
  line-height: 1.6;
  opacity: .55;
}
/* on phones · NO grid · two simple stacked rows, both centered:
   copyright on top, 82design below (overrides the inline display:grid) */
@media (max-width: 600px) {
  .splash-footer-bottom {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}

/* light-background footers (legal, thank-you) · cream is invisible there,
   so the credit link darkens to essex on hover instead */
.legal-footer .footer-credit a:hover,
.legal-footer .footer-credit a:focus-visible,
.thanks-footer .footer-credit a:hover,
.thanks-footer .footer-credit a:focus-visible {
  color: var(--essex);
}

/* footer · misty pine-forest photo backdrop, darkened with an essex wash so
   the columns stay legible. ::before at z-index:-1 sits above the essex fill
   but behind all footer content. position:relative reasserted as the anchor.
   Top is darker (where the dense link columns are), easing toward the bottom
   so the forest breathes near the copyright line. */
.splash-footer { position: relative; }
.splash-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(22, 32, 27, 0.88), rgba(22, 32, 27, 0.78)),
    url('../assets/img/footer.webp') center / cover no-repeat;
  pointer-events: none;
  z-index: -1;
}