/**
 * ============================================================
 * LEGAL PAGES COMPONENTS — Developer Handoff Package
 * Bidcorp Group Corporate Site
 * ============================================================
 *
 * PURPOSE
 * -------
 * Standalone CSS extract for the two /legal/ pages:
 *   legal/disclaimer.html      — Disclaimer
 *   legal/cookie-policy.html   — Cookie & Privacy Policy
 *
 * USAGE
 * -----
 * This file replaces the full three-file cascade for isolated
 * development or handoff. In production, use the full cascade:
 *
 *   <link rel="stylesheet" href="assets/css/design-tokens.css">
 *   <link rel="stylesheet" href="assets/css/base.css">
 *   <link rel="stylesheet" href="assets/css/components.css">
 *   <link rel="stylesheet" href="assets/css/region-selector.css">
 *
 * CONTENTS
 * --------
 *  A. DESIGN TOKENS     (from design-tokens.css) — full :root block
 *  B. BUTTONS           (.btn, .btn--secondary, .btn--sm — Expand All toggle only)
 *  C. ANIMATE-IN         (.animate-in, .is-visible — scroll fade-in system)
 *  D. PAGE HERO          (.page-hero flat variant + flat-hero contrast fix)
 *  E. LEGAL ACCORDION    (.dis-* — shared by both pages, see README)
 *
 * EXCLUDED
 * --------
 *  • Site header / primary nav / ticker bar
 *  • Site footer
 *  • Tip-offs FAB and modal
 *  • Search overlay behaviour (main.js) — markup only, no unique CSS needed
 *    beyond what's already in the full components.css
 *  • .page-hero--has-image and its section-tint modifiers — neither legal
 *    page uses a background image; included in full components.css if
 *    a future legal page needs one
 *  • .btn--primary / .btn--ghost / .btn--white / .btn--icon — unused here
 *
 * NOTE: .container, .container--narrow, .section are defined in base.css,
 *  not components.css. Include base.css alongside this file, or copy those
 *  three rules from base.css (they are small — see README for the exact
 *  rules if working from this file standalone).
 * ============================================================
 */


/* ============================================================
   A. DESIGN TOKENS (from design-tokens.css)
   ============================================================ */

:root {

  /* Core brand — navy / dark purple (primary brand colour) */
  --color-brand-primary:        #1F1346;   /* Deep navy — headlines, nav bg, footer */
  --color-brand-primary-alt:    #110541;   /* Deeper variant — hero overlays */
  --color-brand-secondary:      #184A87;   /* Mid blue — accents, links, CTA hover */
  --color-brand-dark-grey:      #262626;   /* Dark grey — body text, secondary text */

  /* Accent colours */
  --color-accent-green:         #79BF43;   /* Bidcorp green — primary CTA buttons */
  --color-accent-teal:          #93C9BB;
  --color-accent-blue:          #8AB4D1;
  --color-accent-amber:         #E2A44A;
  --color-accent-coral:         #F18E82;
  --color-accent-yellow:        #F2CE66;

  /* Neutrals */
  --color-white:                #FFFFFF;
  --color-off-white:            #F2F2F2;
  --color-grey-light:           #BBBDBF;
  --color-grey-dark:            #4B4B4B;

  /* Semantic aliases */
  --color-text-primary:         #1F1346;
  --color-text-body:            #4B4B4B;
  --color-text-muted:           #BBBDBF;
  --color-text-inverse:         #FFFFFF;
  --color-text-link:            #184A87;
  --color-text-link-hover:      #79BF43;

  --color-bg-page:              #F2F2F2;
  --color-bg-white:             #FFFFFF;
  --color-bg-dark:              #1F1346;
  --color-bg-dark-alt:          #110541;
  --color-bg-section-alt:       #F2F2F2;

  --color-border:               #BBBDBF;
  --color-border-light:         #E8E8E8;
  --color-border-navy:          #110541;

  /* Typography — font families */
  --font-display:     'Comfortaa', cursive;
  --font-body:        'Lato', sans-serif;

  /* Typography — type scale */
  --text-xs:    0.6875rem;
  --text-sm:    0.8125rem;
  --text-base:  1rem;
  --text-md:    1.1875rem;
  --text-lg:    1.4375rem;
  --text-xl:    clamp(1.375rem, 2vw, 1.75rem);
  --text-2xl:   clamp(1.5rem, 2.5vw, 2.0625rem);
  --text-3xl:   clamp(1.75rem, 3vw, 2.5rem);
  --text-4xl:   clamp(2rem, 3.5vw, 3rem);
  --text-5xl:   clamp(2.5rem, 5vw, 3.875rem);
  --text-6xl:   clamp(3.75rem, 6vw, 5rem);

  /* Typography — line heights */
  --leading-xs:     1.18;
  --leading-sm:     1.23;
  --leading-base:   1.625;
  --leading-md:     1.3;
  --leading-lg:     1.4;
  --leading-xl:     1.25;
  --leading-2xl:    1.3;
  --leading-3xl:    1.2;
  --leading-4xl:    1.15;
  --leading-5xl:    1.1;
  --leading-6xl:    1.0;

  /* Typography — font weights */
  --weight-light:     300;
  --weight-normal:    400;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Spacing scale */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  --section-padding-y:        80px;
  --section-padding-y-sm:     48px;

  --container-max:            1640px;
  --container-content:        900px;   /* Narrower for editorial content — used by .container--narrow */
  --container-padding-x:      clamp(1.5rem, 5vw, 6rem);

  /* Border radius */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:    0 1px 4px rgba(17, 5, 65, 0.06);
  --shadow-md:    0 4px 16px rgba(17, 5, 65, 0.10);
  --shadow-lg:    0 8px 32px rgba(17, 5, 65, 0.14);
  --shadow-card:  0 2px 12px rgba(17, 5, 65, 0.08);

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* Component tokens — buttons */
  --btn-primary-bg:         #79BF43;
  --btn-primary-bg-hover:   #65a835;
  --btn-primary-text:       #FFFFFF;
  --btn-primary-radius:     var(--radius-sm);

  --btn-secondary-bg:       transparent;
  --btn-secondary-border:   #1F1346;
  --btn-secondary-text:     #1F1346;
  --btn-secondary-hover-bg: #1F1346;
  --btn-secondary-hover-text: #FFFFFF;

  /* Z-index scale */
  --z-base:       0;
  --z-above:      10;
  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-tipoffs:    400;

  /* Overlay backgrounds — used by the flat page-hero gradient */
  --overlay-dark-70:    rgba(17, 5, 65, 0.70);
  --overlay-dark-95:    rgba(17, 5, 65, 0.95);
  --overlay-dark-90:    rgba(17, 5, 65, 0.90);
  --overlay-dark-65:    rgba(17, 5, 65, 0.65);

}


/* ============================================================
   B. BUTTONS — Expand All / Collapse All toggle only
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--btn-primary-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary — navy outline (used for the Expand All button) */
.btn--secondary {
  background-color: transparent;
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn--secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text);
  border-color: var(--btn-secondary-hover-bg);
}

/* Small button variant */
.btn--sm {
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
}


/* ============================================================
   C. ANIMATE-IN — scroll-triggered fade-in system
   Global rules — elements start hidden, JS (main.js) adds .is-visible.
   Delay set via --anim-delay CSS custom property on element.
   ============================================================ */

.animate-in {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
  transition-delay: var(--anim-delay, 0ms);
}

.animate-in--from-left {
  transform: translateX(-48px) translateY(0);
}

.animate-in--from-right {
  transform: translateX(48px) translateY(0);
}

.animate-in.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   D. PAGE HERO — flat variant (no background image)
   Both legal pages use the flat gradient hero, not .page-hero--has-image.
   ============================================================ */

.page-hero {
  position: relative;
  min-height: 550px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-16) 0 var(--space-16);
  background: var(--color-brand-primary);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(24, 74, 135, 0.40) 100%);
  z-index: 0;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-6);
}

.page-hero__breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-brand-primary);
}


body.fm01 .page-hero__breadcrumb li::after, body.fm02 .page-hero__breadcrumb li::after {
  content: '/';
      color: var(--color-white);
}


.page-hero__breadcrumb li::after {
  content: '/';
  color: var(--color-brand-primary);
}

.page-hero__breadcrumb li:last-child::after {
  display: none;
}

.page-hero__breadcrumb a {
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-brand-primary);
}

.page-hero__breadcrumb span {
  color: rgba(255, 255, 255, 0.80);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-4xl);
  color: var(--color-brand-primary);
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.page-hero__sub {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  line-height: var(--leading-md);
}

/*
 * DESIGN DECISION: the flat (no --has-image) hero background is solid navy,
 * so title/breadcrumb text needs to flip to white here — the default
 * brand-primary colour is tuned for the lighter has-image overlay used on
 * every other page's hero. Bug found and fixed while building these two
 * pages — neither page in the live site used the flat variant before.
 */
.page-hero__title,
.page-hero__breadcrumb li,
.page-hero__breadcrumb a {
  color: var(--color-white);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-accent-green);
}

/*
 * If integrating into the full site stylesheet (components.css), the two
 * rules above must instead be scoped as:
 *   .page-hero:not(.page-hero--has-image) .page-hero__title, ...
 * so pages using .page-hero--has-image keep their existing colour. That
 * scoping is omitted here because this extract only ever renders the flat
 * variant — see components.css §"PAGE HERO" (~line 2138) for the live rule.
 */


/* ============================================================
   E. LEGAL ACCORDION — shared by Disclaimer and Cookie & Privacy Policy
   Modelled on .faq-item (components.css §27) but under its own class
   names — main.js's global FAQ handler force-closes every other
   .faq-item on open, which is wrong here: clauses (and the "Expand all"
   control) need to stay open independently. See each page's own
   <script> block for the accordion behaviour.
   ============================================================ */

.dis-body {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.dis-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-6);
}

.dis-section {
  border-bottom: 1px solid var(--color-border-light);
}

.dis-section__question {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.dis-section__question:hover {
  color: var(--color-brand-secondary);
}

.dis-section__question::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: 1;
  flex-shrink: 0;
  color: var(--color-accent-green);
  transition: transform var(--transition-base);
}

.dis-section.is-open .dis-section__question::after {
  content: '\2212';
}

.dis-section__answer {
  display: none;
  padding-bottom: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
}

.dis-section.is-open .dis-section__answer {
  display: block;
}

.dis-section__answer p {
  margin-bottom: var(--space-4);
}

.dis-section__answer p:last-child {
  margin-bottom: 0;
}

.dis-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dis-list li {
  padding-left: var(--space-5);
  position: relative;
}

.dis-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-green);
}

.dis-address {
  font-style: normal;
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
}

/* Sub-section heading inside a .dis-section__answer (Cookie Policy §3, §5, §8) */
.dis-subheading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: var(--space-6) 0 var(--space-2);
}

.dis-subheading:first-child {
  margin-top: 0;
}

/* Closing "Last Updated / Contact" note (Cookie Policy only) */
.dis-meta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
}

.dis-meta p {
  margin: 0 0 var(--space-2);
}

.dis-meta p:last-child {
  margin-bottom: 0;
}