/* Override Ketch's inline body styles that break layout */
body[style*='position: fixed'] {
  inline-size: auto;
  inset-block-start: auto;
  position: relative !important;
}

/* =========================================
   Ketch Font Customization
   Teodor for headings, Montserrat for body
   Note: !important required to override Ketch's inline styles
   ========================================= */

/* Main container - Apply Body Font to all elements */
[id='lanyard_root'],
[id='lanyard_root'] *,
[id='ketch-banner'],
[id='ketch-banner'] * {
  font-family: var(--body-font-family) !important;
}

/* Headings - Apply Heading Font to both Privacy Center and Banner */
[id='lanyard_root'] h1.ketch-font-bold,
[id='lanyard_root'] h2.ketch-font-bold,
[id='lanyard_root'] h3.ketch-font-bold,
[id='lanyard_root'] h4.ketch-font-bold,
[id='lanyard_root'] h5.ketch-font-bold,
[id='lanyard_root'] h6.ketch-font-bold,
[id='ketch-banner'] h1.ketch-font-bold,
[id='ketch-banner'] h2.ketch-font-bold,
[id='ketch-banner'] h3.ketch-font-bold,
[id='ketch-banner'] h4.ketch-font-bold,
[id='ketch-banner'] h5.ketch-font-bold,
[id='ketch-banner'] h6.ketch-font-bold,
[id='lanyard_root'] h1,
[id='lanyard_root'] h2,
[id='lanyard_root'] h3,
[id='lanyard_root'] h4,
[id='lanyard_root'] h5,
[id='lanyard_root'] h6,
[id='ketch-banner'] h1,
[id='ketch-banner'] h2,
[id='ketch-banner'] h3,
[id='ketch-banner'] h4,
[id='ketch-banner'] h5,
[id='ketch-banner'] h6 {
  font-family: var(--heading-font-family) !important;
}

[id='ketch-banner'] h1.ketch-font-semibold,
[id='ketch-banner'] h2.ketch-font-semibold {
  font-weight: var(--font-weight-medium);
}
/* stylelint-disable selector-class-pattern, selector-id-pattern -- Ketch utility classes don't follow BEM */

/* =========================================
   Ketch Privacy Center Accordion Text Fix
   Ensure long text in accordions is fully visible on mobile
   ========================================= */

/* Fix accordion button layout - ensure proper flex column display */
[id='lanyard_root'] .ketch-min-h-\[57px\] > button{
  align-items: start;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  justify-content: start;
}

/* Add spacing between chevron and text */
[id='lanyard_root'] button .ketch-overflow-hidden.ketch-max-w-\[70\%\] {
  inline-size: 100% !important;
  justify-content: space-between !important;
  max-inline-size: 100% !important;
}

/* Fix accordion text overflow on mobile - allow text wrapping for Essential text */
[id='lanyard_root'] button .ketch-overflow-hidden.ketch-max-w-\[70\%\] span {
  inline-size: initial !important;
  white-space: normal !important;
}

/* =========================================
   Ketch Privacy Preferences Dropdown Fixes
   Tab alignment and text wrapping
   Note: !important required to override Ketch's inline styles
   ========================================= */

/* Scope text display fixes to dropdown buttons only to prevent unintended layout issues */
[id='lanyard_root'] button[role='option'] [class*='ketch-text'],
[id='lanyard_root'] button[role='option'] [class*='ketch-m-0'] {
  display: inline !important;
}

/* Fix privacy policy link wrapping - prevent split links from breaking to new line */
[id='lanyard_root'] [aria-label*='Privacy Polic'],
[id='lanyard_root'] [aria-label='y (opens in a new tab)'] {
  display: inline !important;
  white-space: nowrap !important;
}

/* =========================================
   Ketch Mobile Menu Alignment
   Align "Purposes" with "Welcome"
   ========================================= */

/* Left-align mobile menu items */
[id='lanyard_root'] button[role='option'],
[id='lanyard_root'] [role='menu'] button,
[id='lanyard_root'] [role='menuitem'] {
  justify-content: flex-start !important;
  text-align: start !important;
}

[id='lanyard_root'] button[role='option'] p,
[id='lanyard_root'] [role='presentation'] button p {
  text-transform: uppercase !important;
}

/* Align exit button with Save */
#lanyard_root .ketch-w-\[328px\] .ketch-pb-8 {
  padding-block-end: 12px;
}

/* =========================================
   Ketch Button Style Overrides
   Apply site primary/secondary button styles
   ========================================= */

/* Override Ketch buttons with site button styles */
[id='ketch-banner'] button,
[id='lanyard_root'] button:not([role='option'], [role='menuitem']),
[id='lanyard_root'] button:not([role='option'], [role='menuitem']) span {
  font-family: var(--body-font-family) !important;
  font-size: var(--font-size-b1) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
}

/* increase opacity of disabled toggle for visibility/accessibility */
#lanyard_root label[for='essential_services'] {
  opacity: 0.8;
}

/* reverse color on opted-in toggle to improve visbiility/accessibility */
input[id='analytics'] ~ span [id='ketch-preferences-purpose-list-switch-icon-on'],
input[id='targeted_advertising'] ~ span [id='ketch-preferences-purpose-list-switch-icon-on'] {
  color: #F3F3FB;
}

/* stylelint-enable selector-class-pattern, selector-id-pattern */