/*
Theme Name: Alan Prachar Child
Template: Divi
Description: Child theme for AlanPrachar.com
Author: Alan M. Prachar
Version: 1.2.0
*/

/*
 * AlanPrachar.com / Divi 5
 * Fonts: Urbanist (headings, navigation, buttons), Poppins (body).
 * Load Urbanist 500 and 600, and Poppins 400 and 500 in Divi.
 * Urbanist Light 300 is outlined in the wordmark SVG, so the SVG does
 * not depend on a webfont. Check font requests on the published site.
 * Add ap-header and ap-footer to Theme Builder sections when built.
 */

/* ==========================================================
   0. DESIGN TOKENS
   ========================================================== */
:root {
  --ap-blue: #2874A6;          /* Accessible brand blue on the light canvas */
  --ap-blue-hover: #1D5479;    /* Darker interactive state */
  --ap-blue-bright: #3498DB;   /* Optional decorative Chief Blue reference */
  --ap-orange: #F05428;        /* Original AlanPrachar.com heritage accent */

  --ap-canvas: #F4F7FA;
  --ap-surface: #FFFFFF;
  --ap-surface-blue: #E7F1F7;
  --ap-ink: #243E50;
  --ap-ink-strong: #111827;
  --ap-muted: #4F6677;
  --ap-border: #CEDBE5;
  --ap-error: #B42318;

  --ap-font-display: 'Urbanist', sans-serif;
  --ap-font-body: 'Poppins', sans-serif;
  --ap-content-width: 72ch;
  --ap-anchor-offset: 96px; /* Adjust once the actual header is built */

  /* Desktop type scale, 981px and wider. Weight is set on each heading. */
  --ap-body-size: 18px;
  --ap-body-leading: 1.67;
  --ap-h1-size: 58px;
  --ap-h1-leading: 1.17;
  --ap-h2-size: 40px;
  --ap-h2-leading: 1.20;
  --ap-h3-size: 27px;
  --ap-h3-leading: 1.30;
  --ap-h4-size: 22px;
  --ap-h4-leading: 1.35;
  --ap-h5-size: 19px;
  --ap-h5-leading: 1.40;
  --ap-h6-size: 16px;
  --ap-h6-leading: 1.50;
  --ap-subhead-size: 22px;
  --ap-subhead-leading: 1.55;
}

/* ==========================================================
   1. BASE CANVAS, TEXT & ACCESSIBLE CONTENT LINKS
   ========================================================== */
html,
body,
#page-container,
#main-content {
  background-color: var(--ap-canvas);
}

body {
  color: var(--ap-ink);
  font-family: var(--ap-font-body);
  font-size: var(--ap-body-size);
  line-height: var(--ap-body-leading);
}

/* Divi retains control of section, row, column and module backgrounds.
   Do NOT carry over T&T's global transparent !important overrides. */

.ap-small,
.ap-caption {
  color: var(--ap-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Underline actual content links; don't accidentally underline buttons,
   entire linked images, or navigation items. */
.et_pb_text p a,
.et_pb_text li a,
.entry-content p a,
.entry-content li a,
.ap-legal a {
  color: var(--ap-blue);
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  transition: color .18s ease;
}

.et_pb_text p a:hover,
.et_pb_text li a:hover,
.entry-content p a:hover,
.entry-content li a:hover,
.ap-legal a:hover {
  color: var(--ap-blue-hover);
}

/* Keep a clear visible keyboard focus indicator for interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ap-blue);
  outline-offset: 3px;
}

/* ==========================================================
   2. RESPONSIVE TYPOGRAPHY: URBANIST HEADINGS + POPPINS BODY
   Desktop defaults live in :root above. Breakpoints below modify
   size and line-height tokens without duplicating every heading rule.
   Avoid setting explicit per-module heading typography in Divi unless
   intentionally overriding these sitewide defaults.
   ========================================================== */
h1,
.et_pb_text h1 {
  margin: 0 0 16px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h1-size);
  font-weight: 500;
  line-height: var(--ap-h1-leading);
}

h2,
.et_pb_text h2 {
  margin: 0 0 14px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h2-size);
  font-weight: 500;
  line-height: var(--ap-h2-leading);
}

h3,
.et_pb_text h3 {
  margin: 0 0 12px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h3-size);
  font-weight: 600;
  line-height: var(--ap-h3-leading);
}

/* Smaller heading levels are useful for legal pages and fine-grained
   content structure; do not skip heading levels just for visual size. */
h4,
.et_pb_text h4 {
  margin: 0 0 10px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h4-size);
  font-weight: 600;
  line-height: var(--ap-h4-leading);
}

h5,
.et_pb_text h5 {
  margin: 0 0 8px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h5-size);
  font-weight: 600;
  line-height: var(--ap-h5-leading);
}

h6,
.et_pb_text h6 {
  margin: 0 0 8px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: var(--ap-h6-size);
  font-weight: 600;
  line-height: var(--ap-h6-leading);
}

/* Tablet: 768px–980px (aligned with Divi's typical tablet range). */
@media (min-width: 768px) and (max-width: 980px) {
  :root {
    --ap-body-size: 18px;
    --ap-body-leading: 1.65;
    --ap-h1-size: 46px;
    --ap-h1-leading: 1.18;
    --ap-h2-size: 34px;
    --ap-h2-leading: 1.23;
    --ap-h3-size: 25px;
    --ap-h3-leading: 1.32;
    --ap-h4-size: 21px;
    --ap-h4-leading: 1.40;
    --ap-h5-size: 18px;
    --ap-h5-leading: 1.45;
    --ap-h6-size: 16px;
    --ap-h6-leading: 1.50;
    --ap-subhead-size: 20px;
    --ap-subhead-leading: 1.50;
  }
}

/* Mobile: up to 767px. */
@media (max-width: 767px) {
  :root {
    --ap-body-size: 17px;
    --ap-body-leading: 1.65;
    --ap-h1-size: 38px;
    --ap-h1-leading: 1.18;
    --ap-h2-size: 30px;
    --ap-h2-leading: 1.25;
    --ap-h3-size: 23px;
    --ap-h3-leading: 1.30;
    --ap-h4-size: 20px;
    --ap-h4-leading: 1.40;
    --ap-h5-size: 18px;
    --ap-h5-leading: 1.45;
    --ap-h6-size: 16px;
    --ap-h6-leading: 1.50;
    --ap-subhead-size: 18px;
    --ap-subhead-leading: 1.55;
  }
}

/* ==========================================================
   3. THEME BUILDER: SCOPED HEADER / FOOTER APPEARANCE
   Apply ap-header and ap-footer to the appropriate Divi
   Theme Builder sections. Layout and orange borders are
   configured in Divi rather than duplicated here.
   ========================================================== */

/* ----------------------------------------------------------
   3.1 HEADER
   ---------------------------------------------------------- */
.ap-header,
.ap-header.et_pb_section {
  background-color: var(--ap-surface);
}

.ap-header .et_pb_menu .et-menu > li > a {
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color .18s ease;
}

/* Current page keeps the primary brand blue and underline. */
.ap-header .et_pb_menu .et-menu > li.current-menu-item > a,
.ap-header .et_pb_menu .et-menu > li.current_page_item > a {
  color: var(--ap-blue);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Hover also covers the currently active page. */
.ap-header .et_pb_menu .et-menu > li > a:hover {
  color: var(--ap-blue-hover);
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ap-header .et_pb_menu a:focus-visible {
  outline: 3px solid var(--ap-blue);
  outline-offset: 3px;
}

/* ----------------------------------------------------------
   3.2 HEADER: MOBILE NAVIGATION
   ---------------------------------------------------------- */
@media (max-width: 980px) {
  .ap-header .et_pb_menu .mobile_menu_bar::before,
  .ap-header .et_pb_menu .et_pb_menu__icon {
    color: var(--ap-blue);
  }

  .ap-header .et_mobile_menu {
    width: min(80vw, 420px);
    max-width: 420px;
    left: auto;
    right: 0;
    padding: 24px 0;
    background-color: var(--ap-surface);
    border-top: 2px solid var(--ap-blue);
  }

  .ap-header .et_mobile_menu li a {
    display: block;
    width: 100%;
    padding: 16px 28px;
    color: var(--ap-ink);
    font-family: var(--ap-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: color .18s ease;
  }

  .ap-header .et_mobile_menu li.current-menu-item > a,
  .ap-header .et_mobile_menu li.current_page_item > a {
    color: var(--ap-blue);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
  }

  .ap-header .et_mobile_menu li a:hover {
    color: var(--ap-blue-hover);
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
  }
}

/* ----------------------------------------------------------
   3.3 FOOTER
   ---------------------------------------------------------- */
.ap-footer,
.ap-footer.et_pb_section {
  background-color: var(--ap-blue);
  color: var(--ap-surface);
  /* Section and row spacing remain controlled in Divi. */
}

.ap-footer p,
.ap-footer .et_pb_text {
  color: var(--ap-surface);
  font-family: var(--ap-font-body);
  font-size: 14px;
  line-height: 1.7;
}

.ap-footer h2,
.ap-footer h3,
.ap-footer .et_pb_text h2,
.ap-footer .et_pb_text h3 {
  color: var(--ap-surface);
  font-family: var(--ap-font-display);
}

/* Only ordinary text links: do not underline the CTA button. */
.ap-footer .et_pb_text a:not(.et_pb_button) {
  color: var(--ap-surface);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.ap-footer .et_pb_text a:not(.et_pb_button):hover {
  color: var(--ap-surface);
  text-decoration-thickness: .14em;
}

/* ----------------------------------------------------------
   3.4 FOOTER NAVIGATION
   ---------------------------------------------------------- */
.ap-footer .et_pb_menu ul li a {
  color: var(--ap-surface);
  font-family: var(--ap-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
}

.ap-footer .et_pb_menu ul li a:hover,
.ap-footer .et_pb_menu ul li.current-menu-item > a,
.ap-footer .et_pb_menu ul li.current_page_item > a {
  color: var(--ap-surface);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 980px) {
  .ap-footer .et_pb_menu .mobile_menu_bar::before,
  .ap-footer .et_pb_menu .et_pb_menu__icon {
    color: var(--ap-surface);
  }

  .ap-footer .et_mobile_menu {
    background-color: var(--ap-blue);
    border-top: 2px solid var(--ap-surface);
  }

  .ap-footer .et_mobile_menu li a {
    color: var(--ap-surface);
    line-height: 1.4;
  }
}

/* ----------------------------------------------------------
   3.5 FOOTER UTILITIES / LINKEDIN
   ---------------------------------------------------------- */
.ap-footer a:focus-visible,
.ap-footer button:focus-visible {
  outline: 3px solid var(--ap-surface);
  outline-offset: 3px;
}

.ap-footer .ap-copyright {
  color: var(--ap-surface);
  font-size: 14px;
  line-height: 1.6;
}

/* Footer Code module: icon + LinkedIn label. */
.ap-footer .ap-footer-social {
  text-align: right;
}

.ap-footer a.ap-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ap-surface);
  font-family: var(--ap-font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.ap-footer .ap-linkedin svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.ap-footer a.ap-linkedin:hover {
  color: var(--ap-surface);
  text-decoration: none;
}

.ap-footer a.ap-linkedin:hover span {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 767px) {
  .ap-footer .ap-footer-social {
    text-align: center;
  }
}

/* ==========================================================
   4. REUSABLE DIVI BUTTONS
   Add ap-btn plus ap-btn-primary or ap-btn-secondary in the
   individual Button module's Advanced > CSS ID & Classes.
   ========================================================== */
.et_pb_button.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--ap-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Prevent Divi's default hover icon from changing button padding. */
.et_pb_button.ap-btn::after {
  display: none;
}

.et_pb_button.ap-btn-primary {
  background-color: var(--ap-blue);
  color: #FFFFFF;
}

.et_pb_button.ap-btn-primary:hover,
.et_pb_button.ap-btn-primary:focus-visible {
  background-color: var(--ap-blue-hover);
  color: #FFFFFF;
}

.et_pb_button.ap-btn-secondary {
  border-color: var(--ap-blue);
  background-color: transparent;
  color: var(--ap-blue);
}

.et_pb_button.ap-btn-secondary:hover,
.et_pb_button.ap-btn-secondary:focus-visible {
  border-color: var(--ap-blue-hover);
  background-color: var(--ap-blue-hover);
  color: #FFFFFF;
}

/* Orange is decorative for now, not a default white-text CTA:
   #F05428 and white do not meet normal-text contrast on their own. */

/* ==========================================================
   5. REUSABLE PAGE TITLE / DIVIDERS
   Optional classes; apply only when building these components.
   ========================================================== */
.ap-page-title {
  margin: 0 0 28px;
}

.ap-page-title__heading {
  margin: 0 0 8px;
}

.ap-page-title__subhead {
  max-width: var(--ap-content-width);
  margin: 0;
  color: var(--ap-muted);
  font-family: var(--ap-font-body);
  font-size: var(--ap-subhead-size);
  line-height: var(--ap-subhead-leading);
}

.ap-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 28px 0;
  border: 0;
  background-color: var(--ap-border);
}

.ap-rule--short { width: 64px; }
.ap-rule--orange { height: 3px; background-color: var(--ap-orange); }
.ap-rule--blue { height: 2px; background-color: var(--ap-blue); }

/* ==========================================================
   6. LEGAL PAGES & TABLE OF CONTENTS
   Styles markup generated by [ap_toc] in functions.php, or
   matching manually authored TOC markup and heading IDs.
   ========================================================== */
.ap-legal {
  color: var(--ap-ink);
}

.ap-legal p,
.ap-legal li {
  max-width: var(--ap-content-width);
}

.ap-toc {
  margin: 16px 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  background-color: var(--ap-surface);
  color: var(--ap-ink);
}

.ap-toc__title,
.ap-legal .ap-toc__title {
  margin: 0 0 10px;
  color: var(--ap-ink);
  font-family: var(--ap-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.ap-toc__list,
.ap-toc__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-toc__list > li {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--ap-border);
}

.ap-toc__list > li:first-child { border-top: 0; }

.ap-toc__list a,
.ap-legal .ap-toc__list a {
  color: var(--ap-blue);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.ap-toc__list a:hover,
.ap-legal .ap-toc__list a:hover {
  color: var(--ap-blue-hover);
}

.ap-toc__sub {
  margin-top: 8px;
  padding-left: 16px !important;
  border-left: 2px solid var(--ap-blue);
}

.ap-toc__sub > li {
  margin-left: 14px;
  padding: 5px 0;
}

.ap-toc a:focus-visible { border-radius: 3px; }

/* To account for an eventual sticky header; no brittle :target hack. */
.ap-legal h2[id],
.ap-legal h3[id] {
  scroll-margin-top: var(--ap-anchor-offset);
}

@media (max-width: 767px) {
  .ap-toc { padding: 14px 16px; }
  .ap-toc__list a { font-size: 16px; line-height: 1.45; }
}

/* ==========================================================
   7. CONTACT: FLUENT FORMS
   Apply ap-contact-form to the form wrapper/module on Contact.
   Configure form field structure, behavior and notifications in
   Fluent Forms; these styles do not replace accessible form markup.
   ========================================================== */
.ap-contact-form .ff-el-group {
  margin-bottom: 16px;
}

.ap-contact-form .ff-el-input--label label,
.ap-contact-form .ff-el-form-check-label {
  color: var(--ap-ink);
  font-family: var(--ap-font-body);
  font-weight: 500;
}

.ap-contact-form .ff-el-input--label label {
  display: block;
  margin-bottom: 6px;
}

.ap-contact-form .ff-el-form-control,
.ap-contact-form input[type='text'],
.ap-contact-form input[type='email'],
.ap-contact-form input[type='tel'],
.ap-contact-form input[type='url'],
.ap-contact-form select,
.ap-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ap-muted);
  border-radius: 6px;
  background-color: var(--ap-surface);
  box-shadow: none;
  color: var(--ap-ink);
  font-family: var(--ap-font-body);
  font-size: 16px;
  line-height: 1.45;
}

.ap-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.ap-contact-form input::placeholder,
.ap-contact-form textarea::placeholder {
  color: var(--ap-muted);
  opacity: 1;
}

.ap-contact-form .ff-el-form-control:focus,
.ap-contact-form input:focus-visible,
.ap-contact-form select:focus-visible,
.ap-contact-form textarea:focus-visible {
  border-color: var(--ap-blue);
  outline: 3px solid var(--ap-blue);
  outline-offset: 2px;
  box-shadow: none;
}

/* Do not forcibly override browser autofill background/text rendering.
   Verify in Safari and Chrome when the actual form is built. */

.ap-contact-form .ff-el-form-check-label a {
  color: var(--ap-blue);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ap-contact-form .ff-el-form-check-label a:hover {
  color: var(--ap-blue-hover);
}

.ap-contact-form form.fluent_form_1
.ff-btn-submit:not(.ff_btn_no_style) {
  min-height: 44px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: var(--ap-blue);
  color: #FFFFFF;
  cursor: pointer;
  font-family: var(--ap-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.ap-contact-form form.fluent_form_1
.ff-btn-submit:not(.ff_btn_no_style):hover {
  background-color: var(--ap-blue-hover);
  color: #FFFFFF;
}

.ap-contact-form .ff-el-is-error .ff-el-form-control {
  border-color: var(--ap-error);
}

.ap-contact-form .ff-el-is-error .ff-el-input--label label,
.ap-contact-form .error,
.ap-contact-form .ff-message-error {
  color: var(--ap-error);
}

.ap-contact-form .ff-message-success {
  color: var(--ap-ink);
}

@media (max-width: 767px) {
  .ap-contact-form .ff-btn-submit,
  .ap-contact-form button[type='submit'] {
    width: 100%;
  }
}

/* ==========================================================
   8. MOTION / ACCESSIBILITY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }

  a,
  button,
  .et_pb_button,
  .ap-header .et_pb_menu .et-menu > li > a {
    transition: none !important;
  }
}

/* ==========================================================
   9. COOKIEYES
   Appearance overrides use selective !important because CookieYes
   injects its generated styles after the child theme stylesheet.
   Leave CookieYes layout and consent mechanics untouched.
   ========================================================== */

/* ----------------------------------------------------------
   9.1 TYPOGRAPHY / SHARED SURFACES
   ---------------------------------------------------------- */

.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper {
  font-family: var(--ap-font-body) !important;
}

.cky-consent-container .cky-consent-bar {
  background: var(--ap-canvas) !important;
  color: var(--ap-ink) !important;
  border: 1px solid var(--ap-border) !important;
  border-top: 3px solid var(--ap-orange) !important;
  box-shadow: 0 -6px 24px rgb(36 62 80 / 12%) !important;
}

.cky-consent-container .cky-notice .cky-title,
.cky-modal .cky-preference-header .cky-preference-title {
  color: var(--ap-ink) !important;
  font-family: var(--ap-font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des *,
.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-content-wrapper p,
.cky-modal .cky-accordion-header-des,
.cky-modal .cky-accordion-header-des p,
.cky-modal .cky-dma-content-wrapper,
.cky-modal .cky-dma-content-wrapper p {
  color: var(--ap-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Inline links only; this does not style consent buttons. */
.cky-consent-container .cky-notice-des a.cky-policy,
.cky-consent-container .cky-notice-des button.cky-policy,
.cky-consent-container .cky-notice-des a.cky-link-default,
.cky-modal .cky-preference-content-wrapper .cky-show-desc-btn,
.cky-modal .cky-dma-content-wrapper a.cky-policy,
.cky-modal .cky-dma-content-wrapper button.cky-policy {
  color: var(--ap-blue) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px !important;
}

.cky-consent-container .cky-notice-des a.cky-policy,
.cky-consent-container .cky-notice-des button.cky-policy,
.cky-modal .cky-dma-content-wrapper a.cky-policy,
.cky-modal .cky-dma-content-wrapper button.cky-policy {
  border: 0 !important;
}

/* ----------------------------------------------------------
   9.2 CONSENT ACTIONS
   Matching treatment for Accept All and Reject All.
   ---------------------------------------------------------- */

.cky-consent-container .cky-notice-btn-wrapper .cky-btn,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn {
  min-height: 44px;
  padding: 9px 20px;
  border-radius: 4px !important;
  font-family: var(--ap-font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-accept,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-reject {
  background: var(--ap-blue) !important;
  border: 2px solid var(--ap-blue) !important;
  color: var(--ap-surface) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept:hover,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject:hover,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-accept:hover,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-reject:hover {
  background: var(--ap-blue-hover) !important;
  border-color: var(--ap-blue-hover) !important;
  color: var(--ap-surface) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences {
  background: var(--ap-surface) !important;
  border: 2px solid var(--ap-blue) !important;
  color: var(--ap-blue) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:hover,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences:hover {
  background: var(--ap-surface-blue) !important;
  border-color: var(--ap-blue-hover) !important;
  color: var(--ap-blue-hover) !important;
}

/* Disable CookieYes's brightness filter, which washes out our hover colors. */
.cky-consent-container .cky-btn:hover,
.cky-modal .cky-btn:hover {
  filter: none !important;
}

/* ----------------------------------------------------------
   9.3 PREFERENCE CENTER
   Preserve vendor modal mechanics, scrolling, and toggle behavior.
   ---------------------------------------------------------- */

.cky-modal {
  background: var(--ap-canvas) !important;
  color: var(--ap-ink) !important;
  border-top: 3px solid var(--ap-orange) !important;
  border-radius: 6px !important;
}

.cky-modal .cky-preference-header,
.cky-modal .cky-accordion,
.cky-modal .cky-prefrence-btn-wrapper,
.cky-modal .cky-horizontal-separator {
  border-color: var(--ap-border) !important;
}

.cky-modal .cky-accordion-header .cky-accordion-btn {
  color: var(--ap-ink) !important;
  font-family: var(--ap-font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.cky-modal .cky-accordion-header .cky-always-active {
  color: var(--ap-blue) !important;
}

.cky-modal .cky-accordion .cky-accordion-chevron i::before {
  border-color: var(--ap-muted) !important;
}

.cky-modal .cky-audit-table {
  background: var(--ap-surface) !important;
  color: var(--ap-ink) !important;
  border-radius: 6px !important;
}

.cky-modal .cky-footer-shadow {
  background: linear-gradient(180deg, transparent, var(--ap-canvas)) !important;
}

/* Checkboxes and switches preserve all existing checked/disabled logic. */
.cky-modal .cky-switch input[type="checkbox"]:checked,
.cky-modal .cky-opt-out-checkbox-wrapper input[type="checkbox"].cky-opt-out-checkbox:checked {
  background: var(--ap-blue) !important;
}

/* Retain accessible, easily tapped modal close control. */
.cky-modal .cky-preference-header .cky-btn-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cky-modal .cky-preference-header .cky-btn-close img {
  width: 12px;
  height: 12px;
}

/* ----------------------------------------------------------
   9.4 REVISIT BUTTON / TOOLTIP
   Leave CookieYes's existing positioning alone.
   ---------------------------------------------------------- */

.cky-btn-revisit-wrapper {
  background: var(--ap-blue) !important;
}

.cky-revisit-bottom-left:hover::before,
.cky-revisit-bottom-right:hover::before {
  background: var(--ap-ink) !important;
  color: var(--ap-surface) !important;
}

.cky-revisit-bottom-left:hover::after {
  border-right-color: var(--ap-ink) !important;
}

.cky-revisit-bottom-right:hover::after {
  border-left-color: var(--ap-ink) !important;
}

/* ----------------------------------------------------------
   9.5 ACCESSIBILITY / RESPONSIVE
   ---------------------------------------------------------- */

.cky-consent-container a:focus-visible,
.cky-consent-container button:focus-visible,
.cky-modal a:focus-visible,
.cky-modal button:focus-visible,
.cky-modal input:focus-visible,
.cky-btn-revisit-wrapper button:focus-visible {
  outline: 3px solid var(--ap-ink-strong) !important;
  outline-offset: 3px !important;
}

@media (max-width: 576px) {
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn,
  .cky-modal .cky-prefrence-btn-wrapper .cky-btn {
    width: 100%;
    white-space: normal;
  }

  /* Give Reject the same easy access as Accept on small screens. */
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept,
  .cky-modal .cky-prefrence-btn-wrapper .cky-btn-accept { order: 1; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject,
  .cky-modal .cky-prefrence-btn-wrapper .cky-btn-reject { order: 2; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize,
  .cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences { order: 3; }
}

@media (max-width: 352px) {
  .cky-consent-container .cky-notice .cky-title,
  .cky-modal .cky-preference-header .cky-preference-title { font-size: 18px !important; }
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-des *,
  .cky-modal .cky-preference-content-wrapper,
  .cky-modal .cky-accordion-header-des { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cky-consent-container .cky-btn,
  .cky-modal .cky-btn { transition: none; }
}