/* ==========================================================================
   Shared legal-page shell: hero / breadcrumb / accordion.
   Used by all 4 legal clone-test pages (Cookie Preferences, Privacy Policy,
   Terms of Use, Trust Center) via inc/legal-page/legal-page.php. Each page's
   own CSS file layers page-specific content styling on top of this.
   ========================================================================== */

.lgl-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 767px) {
  .lgl-inner { padding: 0 20px; }
}

/* ---------- Hero ---------- */
.lgl-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 20px 0;
}
/* Teal-green tint overlay, matching Figma (node 1764:11831) and the site's
   own hero custom_css — present in the Elementor source but wrapped
   entirely in comments (deliberately disabled), same gradient tokens used
   by the CTA banner component. Restored here as the intended visual
   design, per user direction to follow Figma's styling for these pages. */
.lgl-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  opacity: 0.72;
  pointer-events: none;
}
.lgl-hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  color: #fff;
  font-size: var(--lgl-hero-fs, 100px);
  line-height: var(--lgl-hero-lh, 104px);
}
@media (max-width: 767px) {
  .lgl-hero-title {
    font-size: var(--lgl-hero-fs-mobile, 53px);
    line-height: var(--lgl-hero-lh-mobile, 1.2em);
  }
}

/* ---------- Breadcrumb ---------- */
.lgl-breadcrumb-row {
  background: #F5F6F8;
  padding: 16px 0;
}
.lgl-breadcrumb {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7B88A1;
}
.lgl-breadcrumb a {
  color: #7B88A1;
  text-decoration: none;
}
.lgl-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Accordion ----------
   Native <details>/<summary>, ported from home-test's FAQ accordion
   technique (includes/home-test/css/home-test.css, ::details-content
   layer). No shared `name` attribute — confirmed live these Elementor
   nested-accordions allow multiple items open simultaneously.

   Bordered-card look (2px #d4dae5 border, white header bar, white body
   region) matches the Figma design (node 1764:11831) — live's actual
   Elementor render currently has NO border here at all (confirmed via
   getComputedStyle on live), same story as the hero's commented-out
   gradient overlay: this Figma file is the intended design live's
   Elementor build never fully shipped. Per explicit user direction, text
   CONTENT stays locked to live; this visual treatment follows Figma. */
.lgl-accordion {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.lgl-accordion-item {
  border: 2px solid #D4DAE5;
  background: #fff;
}
.lgl-accordion-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px;
  min-height: 70px;
  cursor: pointer;
  list-style: none;
  font-family: 'Public Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #233963;
}
.lgl-accordion-q::-webkit-details-marker { display: none; }
.lgl-accordion-q::marker { content: ''; }

.lgl-accordion-icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
}
.lgl-accordion-icon::before,
.lgl-accordion-icon::after {
  content: '';
  position: absolute;
  background: #233963;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lgl-accordion-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.lgl-accordion-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.lgl-accordion-item[open] .lgl-accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.lgl-accordion-a { min-height: 0; overflow: hidden; }
.lgl-accordion-a-inner {
  padding: 0 34px 28px;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #1E2E4C;
  max-width: 78ch;
}
.lgl-accordion-a-inner p { margin: 0 0 16px; }
.lgl-accordion-a-inner p:last-child { margin-bottom: 0; }
.lgl-accordion-a-inner ul { margin: 0 0 16px; padding-left: 22px; }
.lgl-accordion-a-inner ul:last-child { margin-bottom: 0; }
.lgl-accordion-a-inner li { margin-bottom: 8px; }
.lgl-accordion-a-inner li:last-child { margin-bottom: 0; }
.lgl-accordion-a-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  max-width: 100%;
}
.lgl-accordion-a-inner table td {
  border: 1px solid #E3E7EF;
  padding: 10px 14px;
  vertical-align: top;
  text-align: left;
}

/* Smooth open/close is handled entirely by legal-page.js, which directly
   animates the <details> element's own height via the Web Animations API
   (see that file's docblock for why: the CSS-only `::details-content` +
   `content-visibility:allow-discrete` technique used on home-test's FAQ
   silently broke on these pages under real clicks). `overflow:hidden` is
   applied by the script only while an animation runs. If JS is
   unavailable, the <details> still opens/closes instantly via native
   browser behavior — no content is ever inaccessible either way. */
@media (prefers-reduced-motion: reduce) {
  .lgl-accordion-icon::before,
  .lgl-accordion-icon::after { transition: none; }
}