/* safe-IT brand overrides for Quark 2 — 2026-09 redesign (brand guide 2026-09-01) */

/* ============================================================
   Brand tokens — rule 27: must match quark2's selector list,
   plain :root loses to :root[data-theme="light"] specificity.
   ============================================================ */
:root, :root[data-theme="light"] {
  --sit-hero-teal:   #0b4f55;
  --sit-deep-teal:   #11706f;
  --sit-bright-teal: #1ea2a5;
  --sit-mid-teal:    #8fcfd3;
  --sit-light-teal:  #daebf0;
  --sit-pale-teal:   #eef7f9;
  --sit-dark-teal:   #08373c;
  --sit-almost-black:#05080a;
  --sit-almost-white:#fcfdfe;
  --sit-cool-gray:   #e7eaec;
  --sit-copper:      #c45a18;
  --sit-deep-copper: #9e4815;
  --sit-mid-copper:  #d98658;

  /* Map onto quark2 / Pico tokens */
  --q2-bg: var(--sit-almost-white);
  --q2-bg-muted: var(--sit-cool-gray);
  --q2-text: var(--sit-almost-black);
  --q2-text-strong: var(--sit-hero-teal);
  --q2-link: var(--sit-bright-teal);
  --q2-accent: var(--sit-bright-teal);
  --q2-accent-contrast: var(--sit-almost-white);
  --q2-nav-bg: var(--sit-pale-teal);
  --q2-focus-ring: color-mix(in oklab, var(--sit-bright-teal) 45%, transparent);
  --pico-primary: var(--sit-hero-teal);
  --pico-primary-background: var(--sit-bright-teal);
  --pico-primary-hover: var(--sit-hero-teal);
  --pico-primary-hover-background: var(--sit-hero-teal);
  --pico-border-radius: 0.5rem;
  /* blades.min.css references these (section margins, article padding) but is
     never loaded on this site (theme.css only — see ARCHITECTURE.md), so they
     are inert; kept only as blades-compat if a future quark2 base registers it.
     Live bare-section spacing = the section + section rule further down. */
  --pico-block-spacing-vertical: 2rem;
  --pico-block-spacing-horizontal: 1.5rem;

  /* Typography (brand guide web spec) */
  --pico-font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pico-font-weight: 500;
  --pico-font-size: 16px;
  --pico-line-height: 1.2;
  --pico-h2-font-size: 35px;
  --pico-h3-font-size: 30px;

  /* Reading column (Q21, 2026-10-13): one centred measure on every text page */
  --sit-measure: 780px;
}

:root[data-theme="dark"] {
  /* Brand guide: Dark Teal / Almost Black as dark backgrounds, Almost White text */
  --q2-bg: var(--sit-almost-black);
  --q2-bg-muted: var(--sit-dark-teal);
  --q2-text: var(--sit-almost-white);
  --q2-text-strong: var(--sit-almost-white);
  --q2-link: var(--sit-bright-teal);
  --q2-accent: var(--sit-bright-teal);
  --q2-nav-bg: var(--sit-dark-teal);
  --pico-primary-background: var(--sit-bright-teal);
  --pico-primary-hover-background: var(--sit-mid-teal);
}

/* ============================================================
   Base typography
   ============================================================ */
/* quark2 draws a decorative accent bar before every h2 — not part of the
   safe-IT brand system (guide: reduced, dome-derived geometry only) */
h2::before { display: none; }
h1, h2, h3, h4 { font-weight: 700; }
h1, h2, h3 { color: var(--sit-hero-teal); letter-spacing: 0; }
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 { color: var(--sit-almost-white); }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
/* Visible page title as the real <h1> (user 2026-10-14; was a hidden h1 + an h2 copy).
   Same look as that h2, which quark2's `h1 + h2` rule styled: 35px, Bright Teal, -0.25em */
h1.page-title { font-size: 35px; line-height: 1.15; margin-top: -0.25em; color: var(--q2-accent); }
:root[data-theme="dark"] h1.page-title { color: var(--sit-almost-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ============================================================
   Header — Pale Teal background (brand guide Web 4)
   ============================================================ */
#header { background: var(--sit-pale-teal); }
:root[data-theme="dark"] #header { background: var(--sit-dark-teal); }
.navbar-brand img { height: 56px; width: auto; }
/* 4c logo on Pale Teal (light), white 1c logo on Dark Teal (dark) */
.navbar-brand .logo-dark { display: none; }
:root[data-theme="dark"] .navbar-brand .logo-light { display: none; }
:root[data-theme="dark"] .navbar-brand .logo-dark { display: inline; }

/* Dropdown (brand guide Web 3): Hero Teal bg, Almost White text */
.dropmenu ul ul {
  background: var(--sit-hero-teal);
  border-radius: var(--pico-border-radius);
}
.dropmenu ul ul a { color: var(--sit-almost-white); }
/* quark2 paints hovered/active links on --q2-bg-muted (Cool Gray in light mode):
   keep them on the teal panel. Text stays Almost White, only the background darkens
   to Dark Teal (user 2026-10-14): 17.6:1 instead of Mid Teal's 7.4:1 */
.dropmenu ul ul a:hover,
.dropmenu ul ul a.active { background: var(--sit-dark-teal); color: var(--sit-almost-white); }

/* Active nav item: quark2 draws a white pill — brand style is copper text, no pill.
   Copper #c45a18 on Pale Teal is 4.0:1, Deep Copper 5.7:1 (Bright Teal was 2.85:1) */
.dropmenu > ul > li > a.active {
  background: transparent;
  color: var(--sit-deep-copper);
}
/* quark2's a.active:hover paints a --q2-text-strong pill, which equals the Hero Teal
   text in light mode (team 2026-10-13): hover the active item like any other item */
.dropmenu > ul > li > a.active:hover { background: var(--q2-bg-muted); color: var(--q2-text-strong); }
:root[data-theme="dark"] .dropmenu > ul > li > a.active { color: var(--sit-mid-copper); } /* Bright Teal on Dark Teal is 4.2:1 */
:root[data-theme="dark"] .dropmenu > ul > li > a.active:hover { color: var(--q2-text-strong); }

/* ============================================================
   Hero — full-bleed key visual (brand guide Web 1): gradient
   from Hero Teal into the key visual, text left, image as bg
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* theme.css adds padding-block: clamp(5rem, 12vw, 9rem) on .hero — capped
     here so the key visual doesn't fill the whole first screen */
  min-height: 36vh;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background-color: var(--sit-hero-teal);
  background-size: cover;
  background-position: left 60%;
  color: var(--sit-almost-white);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sit-hero-teal) 0%, var(--sit-hero-teal) 35%, transparent 75%);
}
.hero .container { position: relative; width: 100%; }
.hero .hero-text { max-width: 640px; }
.hero h2 { color: var(--sit-almost-white); font-size: clamp(2.5rem, 6vw, 68px); margin: 0 0 0.5rem; }
.hero .hero-sub { font-size: 1.25rem; margin: 0 0 0.25rem; font-weight: 700; }
.hero .hero-intro { margin: 0 0 1.5rem; }
/* Contrast fix: blades.min.css forces `p { color: var(--pico-color) }`
   (body text) onto every paragraph, beating the color inherited from
   dark surfaces. Re-inherit inside hero + footer. */
.hero :is(p, li),
.site-footer :is(p, li, address) { color: inherit; }
.site-footer address { font-style: normal; }
@media (max-width: 768px) {
  .hero::before { background: linear-gradient(90deg, var(--sit-hero-teal) 55%, transparent 100%); }
}

/* Buttons: Bright Teal, hover Hero Teal (brand guide Web 4) */
.btn-cta, button[type=submit] {
  background: var(--sit-bright-teal);
  color: var(--sit-almost-white);
  font-weight: 700;
  border: none;
  border-radius: var(--pico-border-radius);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  display: inline-block;
}
.btn-cta:hover, button[type=submit]:hover {
  background: var(--sit-hero-teal);
  color: var(--sit-almost-white);
}
.hero .btn-cta {
  background: var(--sit-pale-teal);
  color: var(--sit-almost-black);
  box-shadow: 2px 5px 22px 0 rgba(255, 255, 255, 0.89);
}
.hero .btn-cta:hover { background: var(--sit-hero-teal); color: var(--sit-light-teal); }

/* Hero CTA slides in from the left on page load (skipped for
   prefers-reduced-motion users) */
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-cta { animation: sit-cta-in 0.6s ease-out both; }
  @keyframes sit-cta-in {
    from { opacity: 0; transform: translateX(-2.5rem); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ============================================================
   Service teaser cards (home + services index)
   ============================================================ */
.services-grid {
  display: grid;
  /* min(240px, 100%) caps the track at the container width — long German
     words (Agentic-AI-Integration) otherwise blow the column past the
     container and the cards run over the right viewport edge on mobile */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--sit-cool-gray);
  border-radius: var(--pico-border-radius);
  padding: 1.5rem;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .service-card { background: var(--sit-dark-teal); }
.service-card h2 { font-size: 24px; margin: 0 0 0.5rem; overflow-wrap: normal; hyphens: manual; }
.service-card .service-icon { color: var(--sit-bright-teal); font-size: 1.75rem; }
.service-card a { text-decoration: none; }
.service-card a:hover { color: var(--sit-hero-teal); }

/* Störer badge (brand guide Web 2): Accent Copper */
.storer {
  display: inline-block;
  background: var(--sit-copper);
  color: var(--sit-almost-white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--pico-border-radius);
}

/* Root cause of the page-wide horizontal scrollbar: quark2's theme.css has
   no universal border-box reset (component-level ones only), so .container
   computed width:100% + padding-inline as CONTENT-box — 2×padding wider
   than its parent at every viewport width. */
.container { box-sizing: border-box; }

/* Stacked bare sections: the section-margin rule lives in blades.min.css,
   which is never loaded (theme.css only) — services grid vs CTA band on
   home sat flush. */
section + section { margin-top: 2rem; }

/* CTA band */
.cta-band {
  background: var(--sit-pale-teal);
  border-radius: var(--pico-border-radius);
  padding: 2.5rem;
  text-align: center;
}
:root[data-theme="dark"] .cta-band { background: var(--sit-dark-teal); }
.cta-band h2 { margin-top: 0; }

/* Service page body: markdown h2 sections slightly below page title */
.service-body h2 { font-size: 30px; margin-top: 2.5rem; }
/* Bottom-of-page CTA (service pages, Über uns) */
.page-cta { margin-top: 2.5rem; }

/* Reading column (Q21, user 2026-10-13): running text sits in one centred
   column of --sit-measure on every text page, left-aligned inside it, so it
   lines up with the centre of the header grid instead of hugging the left
   edge (the 75ch cap from Q16 read as shifted left).
   1. All-text wrappers get the measure as a whole (hero CTA, back link,
      search input and results align with the column automatically).
   2. Mixed pages cap only their direct text children; grids and tiles
      (.team-grid, .services-grid, .contact-options) keep the full container
      width (the Kontakt address is a tile since 2026-10-14).
   3. FAQ accordion and the insights list are text, not tiles: column width
      (full-width insights cards left the heading floating at the column
      edge with 1100px excerpt lines below it).
   4. Blog post card (.content-item, quark2 default 960px) is narrowed to the
      measure, so card and text stay centred together.
   border-box keeps list/quote padding inside the column (bullets indent from
   the column edge instead of pushing the box off-centre). */
:is(.legal-page, .search-page, .team-page, .service-hero, .service-body,
    .service-page > footer, .services-index > header, .insights-index > header,
    .insights-card, .faq),
:is(.about-page, .contact-page)
  > :is(h1, h2, h3, h4, p, ul, ol, blockquote, table) {
  box-sizing: border-box;
  max-width: var(--sit-measure);
  margin-inline: auto;
}
#body-wrapper > .container > .content-item { max-width: var(--sit-measure); }

/* ============================================================
   Footer — Dark Teal (brand guide Web 2), white logo
   ============================================================ */
.site-footer {
  background: var(--sit-dark-teal);
  color: var(--sit-almost-white);
  padding: 3rem 0 2rem;
}
.site-footer a { color: var(--sit-mid-teal); text-decoration: none; }
.site-footer a:hover { color: var(--sit-bright-teal); text-decoration: underline; }
.site-footer .footer-grid {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
}
.site-footer img { height: 44px; width: auto; }
.site-footer .footer-legal { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer .footer-legal { font-size: 0.875rem; }
.site-footer .footer-copyright { font-size: 0.875rem; opacity: 0.75; width: 100%; }
/* Mobile: stack footer columns (flex row with space-between wraps them
   into cramped half-width pairs) */
@media (max-width: 720px) {
  .site-footer .footer-grid { flex-direction: column; gap: 1.25rem; }
}

/* Insights listing cards */
.insights-card { border-left: 4px solid var(--sit-bright-teal); padding-left: 1rem; margin-bottom: 1.5rem; }
.insights-card h3 { font-size: 24px; }
/* Date: Deep Copper in light (user 2026-10-14; Copper was 4.0-4.3:1, below AA), Mid Copper in dark */
.insights-card time, .content-item > header time { color: var(--sit-deep-copper); font-size: 0.875rem; }
:root[data-theme="dark"] :is(.insights-card, .content-item > header) time { color: var(--sit-mid-copper); }

/* ============================================================
   Dome watermark — content background (brand guide Web 1/4).
   SVG is Pale Teal; over Almost White it reads as a wallpaper.
   ============================================================ */
#body-wrapper {
  background: var(--q2-bg) url('/user/themes/safe-it/images/dome-pale-teal-vertical.svg') no-repeat center top;
  background-size: cover;
}
/* Watermark reaches the footer on short pages: quark2's sticky footer
   stretches #page-wrapper (flex: 1 0 auto); pass that height down through
   main#start to #body-wrapper. Header stays sticky, .mobile-menu is fixed. */
body.sticky-footer #page-wrapper { display: flex; flex-direction: column; }
body.sticky-footer #page-wrapper > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.sticky-footer #body-wrapper { flex: 1 0 auto; }
:root[data-theme="dark"] #body-wrapper {
  /* Dark variant of the dome watermark — Pale Teal is invisible on dark.
     Fill #062023 = 50 % mix of brand Dark Teal #08373C and Almost Black
     #05080A, so the watermark stays faint in dark mode. */
  background-image: url('/user/themes/safe-it/images/dome-dark-teal-vertical.svg');
}

/* ============================================================
   Team portraits — rounded triangle (brand guide Print 1:
   dome geometry). Uniformity via CSS (skill rule 17), square
   crop, faces biased to upper third via object-position.
   clip-path: url(#id) must live in the template (fragment-only
   URLs in external CSS resolve against the stylesheet URL).
   ============================================================ */
/* Über uns: tighter vertical rhythm above the portraits (owner feedback 2026-10-13) */
.about-page :is(p, ul) + h2 { margin-top: 1.75rem; }
.about-page > .team-grid + h2 { margin-top: 1.75rem; } /* same rhythm after the team cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.team-card h3 { font-size: 24px; margin: -1rem 0 0.25rem; }
.team-role { color: var(--sit-bright-teal); font-weight: 700; margin: 0 0 0.75rem; }
.team-linkedin { font-size: 0.85em; margin-left: 0.35rem; color: var(--sit-bright-teal); text-decoration: none; }
.team-linkedin:hover { color: var(--q2-text-strong); }
.team-quote {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--sit-bright-teal);
  font-size: 1.05rem;
  line-height: 1.5;
}
.team-quote p { margin: 0; }
/* Certification badges (spec 2026-10-14-team-badges-design.md): uniform height, unaltered
   colour artwork on a white tile in both themes (the logos are made for white) */
.team-badges {
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.team-badges li { margin: 0; padding: 0; list-style: none; }
.team-badges li, .team-badges a { display: flex; align-items: center; gap: 0.5rem; }
/* short label beside a small badge: on the page background, so theme text colour (light + dark) */
.team-badges .badge-label { color: var(--q2-text-strong); font-size: 0.9rem; font-weight: 700; line-height: 1.15; }
.team-badges :is(img, .badge-text) {
  display: block; box-sizing: border-box;
  height: 64px; width: auto; max-width: 150px; object-fit: contain;
  padding: 4px; background: #fff;
  border: 1px solid var(--sit-cool-gray); border-radius: var(--pico-border-radius);
}
.team-badges .badge-text {
  display: flex; align-items: center; max-width: 180px;
  color: var(--sit-almost-black); font-size: 0.8rem; font-weight: 600; line-height: 1.15;
}
.team-badges a { border-radius: var(--pico-border-radius); text-decoration: none; }
.team-badges a:hover :is(img, .badge-text) { border-color: var(--sit-bright-teal); }
.team-badges a:focus-visible { outline: 2px solid var(--sit-bright-teal); outline-offset: 2px; }
:root[data-theme="dark"] .team-badges :is(img, .badge-text) { border-color: transparent; }
.portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* apex-down tip nearly touches the name; the clip leaves ~6% empty box
     below the tip, so keep only a sliver of margin */
  margin-bottom: 0.125rem;
}

/* ============================================================
   Header search link + search page
   ============================================================ */
.search-link { color: inherit; text-decoration: none; padding: 0.25rem 0.5rem; }
.search-link:hover { color: var(--sit-bright-teal); }
.search-page input[type="search"] { font-size: 1.15rem; max-width: 32rem; }
.search-results { list-style: none; padding: 0; margin: 1rem 0 0; }
.search-results li { padding: 0.35rem 0; border-bottom: 1px solid var(--sit-cool-gray); }
.search-results a { text-decoration: none; font-weight: 700; color: var(--sit-hero-teal); }
.search-results a:hover { color: var(--sit-bright-teal); }
:root[data-theme="dark"] .search-results a { color: var(--sit-light-teal); }

/* NIS2/service section heading icons (Font Awesome, Bright Teal) */
.service-body h2 i { color: var(--sit-bright-teal); margin-right: 0.5rem; }

/* Kontakt page: mail, phone, LinkedIn and address tiles (service-card look) */
.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.contact-tile {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--sit-cool-gray);
  border-radius: var(--pico-border-radius);
  padding: 1.5rem;
  color: var(--q2-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 0.15s;
}
.contact-tile i { color: var(--sit-bright-teal); font-size: 1.75rem; margin-bottom: 0.5rem; }
.contact-label { font-size: 24px; font-weight: 700; color: var(--q2-text-strong); }
.contact-value { font-size: 1.125rem; }
.contact-tile:hover { background: var(--sit-light-teal); color: var(--q2-text); }
:root[data-theme="dark"] .contact-tile { background: var(--sit-dark-teal); }
:root[data-theme="dark"] .contact-tile:hover { background: var(--sit-hero-teal); }
.contact-tile address { font-style: normal; line-height: 1.5; margin: 0; }

/* FAQ accordion (partials/faq.html.twig). Nothing in the served stylesheets
   styles <details>/<summary> — quark2's theme.css only mentions them in comments
   and blades.min.css is not loaded here — so without this the accordion renders
   as the raw browser disclosure widget. */
.faq { margin-top: clamp(2.5rem, 6vw, 4rem); }
.faq > h2 { margin-bottom: 1rem; }
.faq details {
  background: var(--sit-cool-gray);
  border-radius: var(--pico-border-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
:root[data-theme="dark"] .faq details { background: var(--sit-dark-teal); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--q2-text-strong);
  list-style-position: outside;
}
.faq details[open] summary { margin-bottom: 0.75rem; }
.faq details > div > :first-child { margin-top: 0; }
.faq details > div > :last-child { margin-bottom: 0; }