/* ==========================================================================
   Legacy: new header and footer on pages with the old template
   --------------------------------------------------------------------------
   Loaded by Partials/Legacy/Assets.html when the constant
   awsitepackage.legacy.newHeaderFooter = 1 (Configuration/TypoScript/Legacy/header-footer.typoscript).
   After theme.css / the brand file (tokens only), before main-nav-top.css / footer.css.

   The global CSS of the new layout (fonts, reset, typography, layout, components)
   is NOT loaded on old pages: it would change the old content. Instead this file
   contains what header and footer need from it, limited to .site-header /
   .site-footer / .lightbox-content-element (Partials/ContentLightbox.html), and neutralizes the old global styles there
   (fileadmin/sys/Public/css/style.css: orange / black links, black buttons,
   orange input borders, body font size 75 %, .container 1200 px …).

   Specificity: :where(.site-header, .site-footer, .lightbox-content-element) adds nothing, so the rules
   below are exactly as specific as the old ones (e.g. "button", "a:link") and win
   by order (this file comes after the old CSS). The classes of the partial CSS
   still win over them, like on the new pages.

   TODO: remove together with Configuration/TypoScript/Legacy/header-footer.typoscript.

   01. Fonts (own names: the old CSS uses "Roboto" without loading it)
   02. Frame: font, size, color like the body of the new layout
   03. Old global styles neutralized (links, buttons, inputs, lists …)
   04. From the global CSS: utilities, container, buttons, link with arrow
   ========================================================================== */


/* ==========================================================================
   01. FONTS
   Same files as Css/Global/fonts.css. Own family names, so the old content
   ("Roboto" in style.css, system font so far) keeps its look.
   ========================================================================== */
@font-face {
  font-family: "AW Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../../Fonts/roboto/roboto-latin-wght-normal.woff2") format("woff2-variations"),
       url("../../Fonts/roboto/roboto-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "AW Roboto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../../Fonts/roboto-serif/roboto-serif-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../../Fonts/roboto-serif/roboto-serif-latin-opsz-normal.woff2") format("woff2");
}


/* ==========================================================================
   02. FRAME
   ========================================================================== */
.site-header,
.site-footer,
.lightbox-content-element {
  --ff-base: "AW Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-heading: "AW Roboto Serif", Georgia, "Times New Roman", serif;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

/* Sticky header: the old "html, body { height: 101% }" would end the sticky area after one screen */
body:has(> .site-header) {
  height: auto;
  min-height: 101%;
}


/* ==========================================================================
   03. OLD GLOBAL STYLES NEUTRALIZED
   ========================================================================== */
:where(.site-header, .site-footer, .lightbox-content-element) :focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
:where(.site-header, .site-footer, .lightbox-content-element) [hidden]:where(:not([hidden="until-found"])) { display: none !important; }

/* Links: old a:link orange, a:visited black, a:hover orange */
:where(.site-header, .site-footer, .lightbox-content-element) a:is(:link, :visited, :hover) { color: inherit; }

/* Old "button": black, white text, padding */
:where(.site-header, .site-footer, .lightbox-content-element) button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Old "input": orange border, 12px; "input:focus": no outline */
:where(.site-header, .site-footer, .lightbox-content-element) input {
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
:where(.site-header, .site-footer, .lightbox-content-element) input:focus { box-shadow: none; }
:where(.site-header, .site-footer, .lightbox-content-element) input:focus-visible { outline: 2px solid var(--c-primary); }

/* Old "label": padding below; "li a": full width; "h1–h3, p": automatic hyphens (style_resp.css) */
:where(.site-header, .site-footer, .lightbox-content-element) label { padding-bottom: 0; }
:where(.site-header, .site-footer, .lightbox-content-element) li a { width: auto; }
:where(.site-header, .site-footer, .lightbox-content-element) :is(h1, h2, h3, h4, h5, h6, p) { hyphens: manual; }

/* Element defaults of Css/Global/reset.css */
:where(.site-header, .site-footer, .lightbox-content-element) :where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
}
:where(.site-header, .site-footer, .lightbox-content-element) :where(address) { font-style: normal; }
:where(.site-header, .site-footer, .lightbox-content-element) :where(ul, ol)[role="list"] { list-style: none; }
:where(.site-header, .site-footer, .lightbox-content-element) :where(img, svg) {
  display: block;
  max-width: 100%;
}
:where(.site-header, .site-footer, .lightbox-content-element) :where(img) { height: auto; }


/* ==========================================================================
   04. FROM THE GLOBAL CSS
   ========================================================================== */
/* ---- Utilities (Css/Global/utilities.css) ---- */
:where(.site-header, .site-footer, .lightbox-content-element) .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:where(.site-header, .site-footer, .lightbox-content-element) .icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
:where(.site-header, .site-footer, .lightbox-content-element) .u-nowrap { white-space: nowrap; }

/* ---- Container (Css/Global/layout.css). Old .container: max. 1200px ---- */
:where(.site-header, .site-footer, .lightbox-content-element) .container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  max-width: none;
  margin-inline: auto;
}

/* ---- Buttons (Css/Global/components.css, only what header / footer use) ---- */
:where(.site-header, .site-footer, .lightbox-content-element) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.25em 1.5em;
  border: 1px solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
:where(.site-header, .site-footer, .lightbox-content-element) .btn:hover {
  background: var(--c-text);
  color: var(--c-white);
}
:where(.site-header, .site-footer, .lightbox-content-element) .btn--dark {
  background: var(--c-text);
  color: var(--c-white);
}
:where(.site-header, .site-footer, .lightbox-content-element) .btn--dark:hover {
  background: var(--c-white);
  color: var(--c-text);
}
/* Text color of button links: as specific as the old a:link / a:visited / a:hover (and the rule in 03.) */
:where(.site-header, .site-footer, .lightbox-content-element) a.btn { color: var(--c-text); }
:where(.site-header, .site-footer, .lightbox-content-element) a.btn:hover,
:where(.site-header, .site-footer, .lightbox-content-element) a.btn--dark { color: var(--c-white); }
:where(.site-header, .site-footer, .lightbox-content-element) a.btn--dark:hover { color: var(--c-text); }
/* Social icons: base color as link (hover: footer.css) */
:where(.site-footer) a.site-footer__social-link { color: var(--c-text); }

/* ---- Link with arrow (Css/Global/typography.css), footer "Anfahrt" / "Alle Öffnungszeiten" ---- */
:where(.site-header, .site-footer, .lightbox-content-element) .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: var(--fw-medium);
  text-decoration: none;
}
:where(.site-header, .site-footer, .lightbox-content-element) .link-arrow::after {
  content: "";
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.75'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.75'/></svg>") center / contain no-repeat;
  transition: translate var(--transition);
}
:where(.site-header, .site-footer, .lightbox-content-element) .link-arrow:hover::after { translate: 0.25em 0; }