/* =========================================================
   ALMARA Partner Platform — Cookie Policy — v1.0
   Scope:  #alm-cookie-hero, #alm-cookie-what, #alm-cookie-types,
           #alm-cookie-management, #alm-cookie-thirdparty,
           #alm-cookie-changes, #alm-cookie-contact
   Routes: /de/partner-cookie-richtlinie(-eu), /de/partner-cookies
           /en/partner-cookie-policy(-eu), /en/partner-cookies

   Pattern mirrors almara-legal.css v2 (depth-tolerant, no
   dependency on body.elementor-page ancestor), extended from
   a single-container page model to a 7-section container model
   as required by the ALMARA Elementor widget guidelines
   (Heading / Text-Editor / Spacer / Divider / Button only).
   ========================================================= */

:root {
  --alm-cookie-max-width: 820px;
  --alm-cookie-gutter: 32px;
}

/* ---------------------------------------------------------
   Sections — each is an independent top-level container,
   centred to the same reading column as the B2C legal pages.
   --------------------------------------------------------- */

#alm-cookie-hero,
#alm-cookie-what,
#alm-cookie-types,
#alm-cookie-management,
#alm-cookie-thirdparty,
#alm-cookie-changes,
#alm-cookie-contact {
  box-sizing: border-box !important;
  width: min(var(--alm-cookie-max-width), calc(100% - (2 * var(--alm-cookie-gutter)))) !important;
  max-width: var(--alm-cookie-max-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero carries the page's top padding; Contact carries the
   page's bottom padding. Interior sections stay flush so the
   dividers between them control vertical rhythm. */
#alm-cookie-hero {
  padding-top: clamp(72px, 8vw, 120px) !important;
}
#alm-cookie-contact {
  padding-bottom: clamp(80px, 8vw, 140px) !important;
}

#alm-cookie-hero > .e-con-inner,
#alm-cookie-what > .e-con-inner,
#alm-cookie-types > .e-con-inner,
#alm-cookie-management > .e-con-inner,
#alm-cookie-thirdparty > .e-con-inner,
#alm-cookie-changes > .e-con-inner,
#alm-cookie-contact > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------
   Defensive: neutralise wrapping Elementor Template widgets,
   same rationale as almara-legal.css (Cookie page loaded via
   a Template widget in some layouts).
   --------------------------------------------------------- */

.elementor-widget-template:has(#alm-cookie-hero),
.elementor-widget-template:has(#alm-cookie-what),
.elementor-widget-template:has(#alm-cookie-types),
.elementor-widget-template:has(#alm-cookie-management),
.elementor-widget-template:has(#alm-cookie-thirdparty),
.elementor-widget-template:has(#alm-cookie-changes),
.elementor-widget-template:has(#alm-cookie-contact) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   Widget container padding reset (Heading / Text-Editor /
   Divider / Button all inject their own top padding by
   default — this collapses it so vertical rhythm is driven
   entirely by our own margin rules below).
   --------------------------------------------------------- */

#alm-cookie-hero .elementor-widget-container,
#alm-cookie-what .elementor-widget-container,
#alm-cookie-types .elementor-widget-container,
#alm-cookie-management .elementor-widget-container,
#alm-cookie-thirdparty .elementor-widget-container,
#alm-cookie-changes .elementor-widget-container,
#alm-cookie-contact .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   Base typography — Inter, body text-editor content
   --------------------------------------------------------- */

#alm-cookie-hero .elementor-widget-text-editor,
#alm-cookie-what .elementor-widget-text-editor,
#alm-cookie-types .elementor-widget-text-editor,
#alm-cookie-management .elementor-widget-text-editor,
#alm-cookie-thirdparty .elementor-widget-text-editor,
#alm-cookie-changes .elementor-widget-text-editor,
#alm-cookie-contact .elementor-widget-text-editor {
  font-family: var(--almara-font-ui) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--almara-ink) !important;
}

/* ---------------------------------------------------------
   Heading widgets — H1 hero title (display font)
   --------------------------------------------------------- */

#alm-cookie-hero .elementor-heading-title {
  font-family: var(--almara-font-display) !important;
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--almara-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
}

/* Section H2 headings (Heading widget, header_size=h2) */
#alm-cookie-what .elementor-heading-title,
#alm-cookie-types .elementor-heading-title,
#alm-cookie-management .elementor-heading-title,
#alm-cookie-thirdparty .elementor-heading-title,
#alm-cookie-changes .elementor-heading-title,
#alm-cookie-contact .elementor-heading-title {
  font-family: var(--almara-font-ui) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--almara-ink) !important;
  margin: 0 0 clamp(14px, 1.4vw, 18px) !important;
}

/* Meta line under the hero H1 (Stand: / Last updated:) */
.alm-legal-meta {
  font-family: var(--almara-font-ui) !important;
  font-size: 0.9375rem !important;
  color: var(--almara-ink) !important;
  opacity: 0.65;
  margin-top: clamp(16px, 2vw, 24px) !important;
}
.alm-legal-meta p {
  margin: 0 !important;
}

/* Placeholder / dev-note callouts (Complianz wiring notes) */
.alm-legal-note {
  font-size: 0.875rem !important;
  opacity: 0.7;
}
.alm-legal-note p {
  margin: 8px 0 0 !important;
}

/* ---------------------------------------------------------
   Paragraphs + lists inside Text-Editor widgets
   --------------------------------------------------------- */

#alm-cookie-hero p, #alm-cookie-what p, #alm-cookie-types p,
#alm-cookie-management p, #alm-cookie-thirdparty p,
#alm-cookie-changes p, #alm-cookie-contact p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--almara-ink) !important;
  margin: 0 0 clamp(12px, 1.2vw, 16px) !important;
}
#alm-cookie-hero p:last-child, #alm-cookie-what p:last-child,
#alm-cookie-types p:last-child, #alm-cookie-management p:last-child,
#alm-cookie-thirdparty p:last-child, #alm-cookie-changes p:last-child,
#alm-cookie-contact p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

#alm-cookie-hero a, #alm-cookie-what a, #alm-cookie-types a,
#alm-cookie-management a, #alm-cookie-thirdparty a,
#alm-cookie-changes a, #alm-cookie-contact a {
  color: var(--almara-blue) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  transition: color 160ms ease !important;
  word-break: break-word !important;
}
#alm-cookie-hero a:hover, #alm-cookie-hero a:focus-visible,
#alm-cookie-what a:hover, #alm-cookie-what a:focus-visible,
#alm-cookie-types a:hover, #alm-cookie-types a:focus-visible,
#alm-cookie-management a:hover, #alm-cookie-management a:focus-visible,
#alm-cookie-thirdparty a:hover, #alm-cookie-thirdparty a:focus-visible,
#alm-cookie-changes a:hover, #alm-cookie-changes a:focus-visible,
#alm-cookie-contact a:hover, #alm-cookie-contact a:focus-visible {
  color: var(--almara-aqua) !important;
}

/* ---------------------------------------------------------
   Divider widgets between sections — thin hairline, generous
   vertical rhythm instead of relying on section padding.
   --------------------------------------------------------- */

#alm-cookie-hero .elementor-widget-divider,
#alm-cookie-what .elementor-widget-divider,
#alm-cookie-types .elementor-widget-divider,
#alm-cookie-management .elementor-widget-divider,
#alm-cookie-thirdparty .elementor-widget-divider,
#alm-cookie-changes .elementor-widget-divider {
  margin: clamp(32px, 3.5vw, 48px) auto !important;
  max-width: var(--alm-cookie-max-width) !important;
  width: min(var(--alm-cookie-max-width), calc(100% - (2 * var(--alm-cookie-gutter)))) !important;
}
.elementor-widget-divider .elementor-divider-separator {
  border-top-color: color-mix(in srgb, var(--almara-ink) 12%, transparent) !important;
}

/* ---------------------------------------------------------
   Button widget — "Cookie-Einstellungen verwalten"

   v1.1 fix: the generic link-color rules above also match this
   element (it renders as an <a class="elementor-button">), and
   on :hover the generic "#alm-cookie-management a:hover" rule
   (specificity 1,1,1) was MORE specific than the button's own
   base color rule (1,1,0) — since the hover rule below only set
   background-color and never declared `color`, the generic aqua
   link-hover color won the cascade for the `color` property,
   matching the aqua background and making the label invisible.
   Fix: declare `color` explicitly in every button state (base,
   hover, focus) at equal-or-higher specificity, and target the
   nested text/content spans directly so no inherited or
   externally-injected font-size (Kit defaults, plugin CSS
   riding on the .cmplz-show-banner class, etc.) can win.
   --------------------------------------------------------- */

#alm-cookie-management .elementor-button,
#alm-cookie-management .elementor-button-text,
#alm-cookie-management .elementor-button-content-wrapper {
  font-family: var(--almara-font-ui) !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
#alm-cookie-management .elementor-button {
  background-color: var(--almara-blue) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 12px 22px !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: background-color 160ms ease, color 160ms ease !important;
}

/* Belt-and-braces: the Complianz trigger class itself, in case the
   button markup ever loses the .elementor-button class (e.g. a
   future widget swap) but keeps cmplz-show-banner. Browsers default
   to a text cursor here because Elementor's "#" link placeholder
   does not render a real href attribute, so the element isn't
   recognised as a native clickable link. */
.cmplz-show-banner {
  cursor: pointer !important;
}
#alm-cookie-management .elementor-button .elementor-button-text {
  color: #ffffff !important;
}
#alm-cookie-management .elementor-button:hover,
#alm-cookie-management .elementor-button:focus-visible {
  background-color: var(--almara-aqua) !important;
  color: #ffffff !important;
}
#alm-cookie-management .elementor-button:hover .elementor-button-text,
#alm-cookie-management .elementor-button:focus-visible .elementor-button-text {
  color: #ffffff !important;
}

/* Belt-and-braces: explicitly exclude the button from the
   generic link color rules above, in case a future edit to
   this stylesheet re-introduces the same conflict. */
#alm-cookie-management a.elementor-button,
#alm-cookie-management a.elementor-button:hover,
#alm-cookie-management a.elementor-button:focus-visible {
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   Legal tables (.alm-legal-table) — cookie overview + version
   history. Mobile-first: horizontally scrollable, never lets
   the table force the section wider than the reading column.
   --------------------------------------------------------- */

.alm-legal-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--almara-font-ui) !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: var(--almara-ink) !important;
  margin: 0 0 clamp(16px, 1.6vw, 20px) !important;
}
.alm-legal-table th,
.alm-legal-table td {
  text-align: left !important;
  vertical-align: top !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--almara-ink) 12%, transparent) !important;
}
.alm-legal-table thead th {
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  opacity: 0.7;
  border-bottom: 2px solid color-mix(in srgb, var(--almara-ink) 22%, transparent) !important;
}
.alm-legal-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Wrap the table in a horizontally scrollable frame on all
   viewports narrower than the table's natural width — the
   Text-Editor widget's own wrapper becomes the scroll frame,
   so no extra markup is required inside the WYSIWYG content. */
#alm-cookie-types .elementor-widget-text-editor:has(.alm-legal-table),
#alm-cookie-changes .elementor-widget-text-editor:has(.alm-legal-table) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.alm-legal-table {
  min-width: 560px !important;
}

/* =========================================================
   Tablet — ≤1024px
   ========================================================= */

@media (max-width: 1024px) {
  #alm-cookie-hero {
    padding-top: clamp(60px, 7vw, 90px) !important;
  }
  #alm-cookie-contact {
    padding-bottom: clamp(64px, 7vw, 100px) !important;
  }
  #alm-cookie-hero .elementor-heading-title {
    font-size: clamp(2.4rem, 5.4vw, 3.4rem) !important;
  }
}

/* =========================================================
   Mobile — ≤640px
   ========================================================= */

@media (max-width: 640px) {
  :root {
    --alm-cookie-gutter: 20px;
  }

  #alm-cookie-hero {
    padding-top: 56px !important;
  }
  #alm-cookie-contact {
    padding-bottom: 72px !important;
  }

  #alm-cookie-hero .elementor-heading-title {
    font-size: 2.2rem !important;
  }

  #alm-cookie-what .elementor-heading-title,
  #alm-cookie-types .elementor-heading-title,
  #alm-cookie-management .elementor-heading-title,
  #alm-cookie-thirdparty .elementor-heading-title,
  #alm-cookie-changes .elementor-heading-title,
  #alm-cookie-contact .elementor-heading-title {
    font-size: 1.0625rem !important;
  }

  #alm-cookie-hero .elementor-widget-divider,
  #alm-cookie-what .elementor-widget-divider,
  #alm-cookie-types .elementor-widget-divider,
  #alm-cookie-management .elementor-widget-divider,
  #alm-cookie-thirdparty .elementor-widget-divider,
  #alm-cookie-changes .elementor-widget-divider {
    margin: 28px auto !important;
  }

  /* Tables: smaller type + tighter padding so more columns
     are visible before the horizontal scroll kicks in. */
  .alm-legal-table {
    font-size: 0.8125rem !important;
    min-width: 480px !important;
  }
  .alm-legal-table th,
  .alm-legal-table td {
    padding: 8px 10px !important;
  }

  #alm-cookie-management .elementor-button {
    width: 100% !important;
    text-align: center !important;
  }
}