/* MIGRAINETREATMENT.CO.NZ */

/* Load real Bold (700) font files - the page only references weight 400, which forces faux bold */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
    --bs-body-bg: var(--light-body-bg);
    --bs-body-color: var(--light-body-color) !important;
    --bs-h2-color: var(--light-h2-color);
    --bs-h3-color: var(--light-h3-color);
    --bs-callout-bg: var(--light-callout-bg);
    --bs-callout-color: var(--light-callout-color);
    --bs-callout2-bg: var(--light-callout2-bg);
    --bs-callout2-color: var(--light-callout2-color);
    --bs-breakout-bg: var(--light-breakout-bg);
    --bs-btn-bg: var(--light-btn-bg);
    --bs-btn-color: var(--light-btn-color);
    --bs-input-active: var(--light-input-active);
    --bs-input-inactive: var(--light-input-inactive);
    --bs-header-bg: var(--light-header-bg);
    --bs-footer-bg: var(--light-footer-bg);
    --bs-footer-color: var(--light-footer-color);

    --light-body-bg: #FFFFFF;
    --light-body-color: #63666A;
    --light-h2-color: #F15E22;
    --light-h3-color: #364550;
    --light-callout-bg: #D1DDE9;
    --light-callout-color: #364550;
    --light-callout2-bg: #364550;
    --light-callout2-color: #FFFFFF;
    --light-breakout-bg: linear-gradient(0.25turn, #96772D -50%, #F1E3B2);
    --light-btn-bg: #F15E22;
    --light-btn-color: #FFFFFF;
    --light-input-active: #364550;
    --light-input-inactive: #A3A7AB; /* Was #EDEDED - inactive tabs were nearly invisible on white; improved to visible grey */
    --light-header-bg: #FFFFFF;
    --light-footer-bg: #EDEDED;
    --light-footer-color: #63666A;

    /* Design tokens from the approved design specs */
    --AQIPTA-Blue: #364550;
    --AQUIPTA-Orange: #F15E22;
    --Text-Grey: #63666A;

    /* --dark-body-bg: #364550; */
    /* --dark-body-color: #D2D2D2; */
    /* --dark-h2-color: #D2D2D2; */
    /* --dark-h3-color: #D2D2D2; */
    /* --dark-callout-bg: #AEBCC6; */
    /* --dark-callout-color: #364550; */
    /* --dark-callout2-bg: #282A2B; */
    /* --dark-callout2-color: #FFFFFF; */
    /* --dark-breakout-bg: #282A2B; */
    /* --dark-btn-bg: #282A2B; */
    /* --dark-btn-color: #FFFFFF; */
    /* --dark-input-active: #A3A7AB; */
    /* --dark-input-inactive: #556876; */
    /* --dark-header-bg: #2B3740; */
    /* --dark-footer-bg: #282A2B; */
    /* --dark-footer-color: #D2D2D2; */
}

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--bs-small-font-size: clamp(0.94rem, 0.11vi + 0.91rem, 1rem);
		--bs-body-font-size: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
        --heading-3-font-size: clamp(1.38rem, 1.17vi + 1.09rem, 2.03rem) !important;
        --heading-2-font-size: clamp(1.48rem, 1.46vi + 1.11rem, 2.28rem) !important;
        --heading-1-font-size: clamp(2.03rem, 2vi + 1.42rem, 3.6rem) !important; /* Updated max size from 2.57rem to 3.69rem to align with design */
  }
}
/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--bs-small-font-size: 0.94rem;
		--bs-body-font-size: 1rem;
        --heading-3-font-size: 1.38rem;
        --heading-2-font-size: 1.48rem;
        --heading-1-font-size: 2.03rem;
  }
  @media screen and (min-width: 1280px) {
    :root {
			--bs-small-font-size: 1rem;
			--bs-body-font-size: 1.13rem;
            --heading-3-font-size: 2.03rem;
            --heading-2-font-size: 2.28rem;
            --heading-1-font-size: 3.69rem;
    }
  }
}

body:has(input[value="light"]:checked) {
    --bs-body-bg: var(--light-body-bg);
    --bs-body-color: var(--light-body-color) !important;
    --bs-h2-color: var(--light-h2-color) !important;
    --bs-h3-color: var(--light-h3-color) !important;
    --bs-btn-bg: var(--light-btn-bg);
    --bs-btn-color: var(--light-btn-color);
    --bs-input-active: var(--light-input-active);
    --bs-input-inactive: var(--light-input-inactive);
    --bs-callout-bg: var(--light-callout-bg);
    --bs-callout-color: var(--light-callout-color);
    --bs-callout2-bg: var(--light-callout2-bg);
    --bs-breakout-bg: var(--light-breakout-bg);
    --bs-header-bg: var(--light-header-bg);
    --bs-footer-bg: var(--light-footer-bg);
    --bs-footer-color: var(--light-footer-color);
    --light-only: unset;
    --dark-only: none;
}
/* body:has(input[value="dark"]:checked) {
    --bs-body-bg: var(--dark-body-bg);
    --bs-body-color: var(--dark-body-color) !important;
    --bs-h2-color: var(--dark-h2-color) !important;
    --bs-h3-color: var(--dark-h3-color) !important;
    --bs-btn-bg: var(--dark-btn-bg);
    --bs-btn-color: var(--dark-btn-color);
    --bs-input-active: var(--dark-input-active);
    --bs-input-inactive: var(--dark-input-inactive);
    --bs-callout-bg: var(--dark-callout-bg);
    --bs-callout-color: var(--dark-callout-color);
    --bs-callout2-bg: var(--dark-callout2-bg);
    --bs-breakout-bg: var(--dark-breakout-bg);
    --bs-header-bg: var(--dark-header-bg);
    --bs-footer-bg: var(--dark-footer-bg);
    --bs-footer-color: var(--dark-footer-color);
    --light-only: none;
    --dark-only: unset;
} */

h1,
h2,
h3,
h4,
h5 {
    color: inherit !important;
}

h2,
h3,
h4,
h5,
p {
    font-family: "Roboto", sans-serif; /* Approved design: Roboto for body copy */
}

h1 {
    font-family: "Montserrat", sans-serif; /* Approved design: Montserrat for headlines */
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.75rem !important;
}
h2 {
    font-weight: bold;
    line-height: 1.125;
    color: var(--bs-h2-color) !important;
}
/* body:has(input[value="dark"]:checked) div[role="callout"] h2 {
    color: var(--bs-callout-color) !important;
} */
h3 {
    margin-top: 1rem !important;
    font-weight: bold;
    color: var(--bs-h3-color) !important;
}
p {
    margin-bottom: 0.5rem !important;
}

/* ===== Approved design update: section-scoped typography ===== */

/* Hero section: h1 + white subtitle h2 */
[role="about-aquipta-hero"] h1 {
    color: #FFFFFF !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 34px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 40px !important;
}
[role="about-aquipta-hero"] h2 {
    color: #FFFFFF !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 24px !important;
}

/* "The power of migraine prevention" section: blue centered h2 */
[role="breakout"] h2 {
    color: var(--AQIPTA-Blue) !important;
    text-align: center !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 26px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

/* "What types of migraine" section: orange h2 */
#layout-container-4672c92ce4 h2 {
    color: var(--AQUIPTA-Orange) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 26px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

/* "How does AQUIPTA work" section (nested inside the section above):
   higher specificity required to override the orange rule */
#layout-container-4672c92ce4 [role="callout-2"] h2 {
    color: #FFFFFF !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 34px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 36px !important;
}

/* All h3 headings: blue, centered, Roboto 22px */
main.content-area h3 {
    color: var(--AQIPTA-Blue) !important;
    text-align: center !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

/* Intro card paragraph below hero: grey, Roboto 18px bold */
[role="callout"] p,
[role="callout-red"] p {
    color: var(--Text-Grey) !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

/* "How does AQUIPTA work" body paragraphs: white, Roboto 18px regular.
   Bold parts are already marked with <b> in the AEM content. */
[role="callout-2"] p {
    color: #FFFFFF !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 26px !important;
}
[role="callout-2"] p b {
    font-weight: 700 !important;
}

.headline-text a:not(.btn) {
    border-bottom: .0625rem solid !important;
    color: inherit !important;
}
.headline-text a:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

sup {
    top: -0.75em !important;
    font-size: 0.5em !important;
}

ul {
    margin-top: -0.25rem !important;
}

ol {
    padding-left: 1.125rem !important;
}

hr {
    background-color: unset !important;
}

.headline-text .large--title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
}

p:has(.small) {
    line-height: 1.25;
}
.small {
    font-size: var(--bs-small-font-size) !important;
}
.no-wrap {
    white-space: nowrap;
}

.tabs .nav {
    margin-bottom: 2rem !important;
    border-bottom: unset;
    gap: 1rem;
    justify-content: space-between;
}
.tabs .nav-link {
    width: 100%;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
    align-items: center;
    padding: 0 4rem 0 0.5rem;

    text-align: left;
    border: 2px solid var(--bs-input-inactive) !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    font-size: var(--bs-body-font-size);
    background: none !important;
    color: var(--bs-input-inactive) !important;
}
.tabs .nav-link::before {
    display: inline-block;
    content: "";
    width: 1em;
    height: 1em;
    border: 0.15em solid var(--bs-input-inactive);
    border-radius: 50%;
    background: var(--bs-body-bg);
}
.tabs .nav-link.active {
    border: 2px solid var(--bs-input-active) !important;
    color: var(--bs-input-active) !important;
}
.tabs .nav-link.active::before {
    border-color: var(--bs-input-active) !important;
    background: var(--bs-input-active) !important;
}

.image-extension img:not(.no-bgap) {
    margin-bottom: 0.75rem !important;
}

input[type="radio"] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    margin: 0;
    width: 0.75em;
    height: 0.75em;
    border: 0.15em solid var(--bs-input-inactive);
    border-radius: 50%;
}
input[type="radio"]:checked,
label:has(input[type="radio"]:checked) {
    border-color: var(--bs-input-active);
    color: var(--bs-input-active);
}

div[role="callout"],
div[role="callout-red"],
div[role="callout-2"] {
    margin-bottom: 2rem;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 12px;
}
div[role="callout"] {
    background: var(--bs-callout-bg);
    color: var(--bs-callout-color);
}
div[role="callout"].cmp-container,
div[role="callout-red"].cmp-container {
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
}
div[role="callout"]:has(div[role="pop-out"]) {
    position: relative;
    margin-bottom: 4rem;
}
div[role="callout"] div[role="pop-out"] {
    position: absolute;
    bottom: -25%;
    right: 0;
}
/* body:has(input[value="dark"]:checked) div[role="callout"]:has(div[role="pop-out"]) {
    color: var(--bs-body-color);
    background: var(--bs-breakout-bg);
} */

div[role="callout-2"] {
    background: var(--bs-callout2-bg);
    color: var(--bs-callout2-color);
}
div[role="callout-2"] .button-link {
    text-align: center;
}
/* CTA centering per approved design */
div[role="callout"] .button-link,
div[role="callout-red"] .button-link,
div[role="breakout"] .button-link {
    text-align: left; /* Desktop: left-aligned per approved design */
}
div[role="breakout"] {
    background: var(--bs-breakout-bg);
    padding-top: 3rem;
    padding-bottom: 2.5rem;
    margin: 0.75rem 0 2rem 0;
}
div[role="breakout"] h2 {
    color: var(--bs-h3-color) !important;
    text-align: center; /* Center red heading per approved design */
}

a.btn {
    padding: 0.75rem 2rem;
    font-weight: bold;
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: none;
}
a.btn:hover {
    background: rgb(from var(--bs-btn-bg) r g b / 0.8) !important;
}
a.btn[data-type*=ico-] {
    padding: .75rem 3rem .75rem 1.75rem !important;
    min-width: fit-content !important;
}
a.btn[data-type*=ico-]::after {
    background-color: unset !important;
}
/* body:has(input[value="dark"]:checked) div[role="callout"] .btn,
body:has(input[value="dark"]:checked) div[role="callout-2"] .btn,
body:has(input[value="dark"]:checked) div[role="breakout"] .btn {
    background: var(--bs-body-bg);
}
body:has(input[value="dark"]:checked) div[role="callout"] .btn:hover,
body:has(input[value="dark"]:checked) div[role="callout-2"] .btn:hover,
body:has(input[value="dark"]:checked) div[role="breakout"] .btn:hover {
    background: rgb(from var(--bs-body-bg) r g b / 0.8) !important;
} */
.btn.rounded {
    border-radius: 8px !important;
}


.container {
    /* padding: 0 !important; */ /* Removed - conflicts with mobile 15px padding */
}
.layout-container__inner {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

/* Accordion */
.accordion {
    border-top: 0 !important;
}
.cmp-accordion__header {
    margin: 0 !important;
}
.cmp-accordion--line .cmp-accordion__title {
    font-size: var(--heading-2-font-size);
}
.cmp-accordion--line .cmp-accordion__button {
    padding: 2.5rem 0 1.25rem 0 !important;
}
.cmp-accordion--line .cmp-accordion__item .cmp-accordion__panel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.accordion .headline-text>div:not(.mb-0):not(.m-0) {
    margin-bottom: 1.25rem !important;
}
.accordion button,
.cmp-accordion--line .cmp-accordion__button .cmp-accordion__icon {
    color: inherit !important;
}

/* Sensory mode toggle styles - toggle removed by client */
/* body:has(div[role="pack-sensory-mode"]) div[role="sensory-mode"] {
    display: none;
} */

div[role="light-only"] {
    display: var(--light-only);
}
div[role="dark-only"] {
    display: none;
}

/* Inline design */
div[role="sensory-mode"] {
    width: fit-content !important;
    margin-bottom: 2rem;
}
div[role="sensory-mode"] .form-group:before {
    content:"SENSORY MODE";
}
div[role="sensory-mode"] .form-group {
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border: 2px solid var(--bs-input-inactive);
    border-radius: 40px;
    font-weight: bold;
    font-size: var(--bs-body-font-size);
    color: #A3A7AB;
}

div[role="sensory-mode"] label {
    cursor: pointer;
    margin: 0;
    padding: 0 2rem 0 0.5rem;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
    align-items: center;
    border: 2px solid var(--bs-input-inactive);
    border-radius: 40px;
    font-weight: bold;
    font-size: var(--bs-body-font-size);
}

/* body:has(input[value="light"]:checked) label:has(input[value="light"]:checked) {
    border-color: var(--light-input-active);
    color: var(--light-input-active);
}
body:has(input[value="light"]:checked) input[value="light"]:checked {
    border-color: var(--light-input-active);
} */

/* body:has(input[value="dark"]:checked) label:has(input[value="dark"]:checked) {
    border-color: var(--dark-input-active);
    color: var(--dark-input-active);
}
body:has(input[value="dark"]:checked) input[value="dark"]:checked {
    border-color: var(--dark-input-active);
} */

/* Fixed design - REMOVED (pack-sensory-mode toggle removed by client) */
/* div[role="pack-sensory-mode"] {
    z-index: 999;
    position: fixed;
    top: 15rem;
    right: 0;
    width: fit-content !important;
    padding: 0 !important;
}
div[role="pack-sensory-mode"] .form-group {
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #CBBC97BB;
    border-radius: 16px 0 0 16px;
}
div[role="pack-sensory-mode"] label {
    cursor: pointer;
    margin: 0;
    padding: 0 1.25rem 0 0.5rem;
    display: grid;
    grid-template-columns: 1em auto auto;
    gap: 0.25em;
    align-items: center;
    color: #364550;
    border: 2px solid #364550;
    border-radius: 40px;
    font-weight: bold;
    font-size: calc(var(--bs-body-font-size) * 0.9);
}
div[role="pack-sensory-mode"] label::after {
    content: "MODE";
}
div[role="pack-sensory-mode"] input {
    background-color: unset;
    border-color: #364550;
}
body:has(input[value="light"]:checked) div[role="pack-sensory-mode"] label:has(input[value="light"]),
body:has(input[value="dark"]:checked) div[role="pack-sensory-mode"] label:has(input[value="dark"]) {
    border-color: #FFF;
    color: #FFF;
}
body:has(input[value="light"]:checked) div[role="pack-sensory-mode"] input[value="light"],
body:has(input[value="dark"]:checked) div[role="pack-sensory-mode"] input[value="dark"] {
    background-color: #FFF;
    border-color: #FFF;
} */


/* GLOBAL HEADER */
#global-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    background: linear-gradient(90deg, #F2E2B3 0%, #DEC069 50%, #AB903D 100%) !important; /* Golden gradient matching hero */
    box-shadow: none;
}
#global-header .global-header {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    background: transparent !important;
}
#global-header .global-header-menu {
    margin-top: 0.75rem;
    background: transparent !important;
}
#global-header button {
    border: 2px solid #FFFFFF; /* White border on golden background */
    color: #FFFFFF;
}

/* Scroll effect: semi-transparent golden gradient (requires JS to add .scrolled class) */
/* Desktop only — mobile/iPad menu should keep dark background */
@media (min-width: 992px) {
    #global-header.scrolled {
        background: linear-gradient(90deg, rgba(242, 226, 179, 0.75) 0%, rgba(222, 192, 105, 0.70) 50%, rgba(171, 144, 61, 0.65) 100%) !important;
    }
    #global-header.scrolled .global-header {
        background: transparent !important;
    }
    #global-header.scrolled .global-header-menu {
        background: transparent !important;
    }
}
#global-header.scrolled .meta-navigation ul li a {
    color: #FFFFFF !important;
}
#global-header.scrolled button {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
/* body:has(input[value="dark"]:checked) #global-header button {
    border-color: var(--bs-input-active);
    color: var(--bs-input-active);
} */
#global-header a {
    color: #FFFFFF;
}
#global-header img {
    max-height: 4rem;
    margin-bottom: 0 !important;
}
.meta-navigation ul li {
    text-align: center;
}
.meta-navigation ul li a:hover,
.meta-navigation ul li.active a {
    text-decoration: none;
    line-height: inherit !important;
}
.meta-navigation ul li a:active::after,
.meta-navigation ul li.active a::after {
    content: "•";
    display: block;
    text-align: center;
    line-height: 0.5;
    font-size: 2rem;
}

/* body:has(input[value="dark"]:checked) #global-header .global-header {
    background: #3645504D;
} */

/**
 * Global Hero Section
 **/
div[role="hero"] {
    position: relative;
    padding-left: 0 !important;
    padding-right: 0 !important;

    background: linear-gradient(90deg, #F2E2B3 0%, #DEC069 50%, #AB903D 100%); /* Approved design: warm gold CSS gradient background */
    padding-top: 0;
    padding-bottom: 0;
}
div[role="hero"] h1,
div[role="hero"] h2,
div[role="hero"] p {
    color: var(--bs-body-bg) !important;
}

div[role="hero"] .image-extension img {
    margin-bottom: 0 !important;
}

div[role="hero"] .layout-container__inner {
    padding-top: 0;
    padding-bottom: 0;
}

div[role="hero"] .headline-text {
    padding-top: 3rem;
}

div[role="hero"] > div > .container {
    margin: 0 !important;
}
div[role="hero-decoration"] .image-extension {
    position: absolute;
    bottom: 0;
    left: 0; /* Anchor to left edge to eliminate visible corner */
    width: 100%;
}
div[role="hero-decoration"] .image-extension a {
    width: 100%;
}

/* 
 * Hero section specific to the home page.
 * Due to the first column being the decorative image,
 * and the headline-text component in the second column
 */
div[role="about-aquipta-hero"] .flex-md-row > div:first-child{
    align-self: flex-end;
}
div[role="about-aquipta-hero"] .image-extension img {
    max-height: 35rem;
}

/*
 * Approved design: woman's image on the left, text on the right,
 * with warm gold CSS gradient background.
 * Desktop: image ~45% left, text ~55% right.
 * Mobile: text ~45% left, image ~55% right (row-reverse).
 */
div[role="about-aquipta-hero"] {
    background: linear-gradient(330deg, #90762C, #cdaa4f, #F1E4B0 80%);
    /* overflow: hidden removed - was clipping woman's image at bottom-left where it meets the orange wave */
    padding-left: 0 !important; /* Ensure hero extends to left edge */
    margin-left: 0 !important;
}
div[role="about-aquipta-hero"] .flex-md-row > div:first-child {
    align-self: flex-end;
    width: 45%;
}
div[role="about-aquipta-hero"] .flex-md-row > div:first-child img {
    max-height: 35rem;
    max-width: 100%;
    height: auto;
}
div[role="about-aquipta-hero"] .flex-md-row > div:last-child {
    width: 55%;
}

/*
 * Hero section that contians the pack
 */
div[role="pack-layout"] {
    padding-bottom: calc(2rem + 7vw) !important;
}
div[role="pack-layout"]  a {
    position: absolute;
    z-index: 1;
    left: 55%;
    bottom: 0;
}

/* GLOBAL FOOTER */
#global-footer {
    background: var(--bs-footer-bg);
    color: var(--bs-footer-color);
}

#global-footer div[role="footer-decoration"] {
    position: relative;
}
#global-footer div[role="footer-decoration"] .image-extension {
    position: absolute;
    top: -3.5rem; /* Move up so boundary line splits the wave */
    right: 0;
}

#global-footer .image-extension a {
    max-width: 10rem;
}

/* Footer text size per approved design: 12px / 19px line-height */
#global-footer .small {
    font-size: 0.75rem !important; /* 12px per design */
    line-height: 1.1875rem !important; /* 19px per design */
}
#global-footer p {
    line-height: 1.1875rem !important; /* 19px per design */
}
/* Top intro paragraph (no .small class): 15px per design */
#global-footer p:not(:has(.small)) {
    font-size: 0.9375rem !important; /* 15px per design */
}

/*
 * TAKING AQUIPTA - custom layout containers
 * avoid tab issue with container component
 * Included custom pacing for "!" column control as well
 */
div[role="taking-aquipta-container"],
div[role="taking-aquipta-container"] > .layout-container-content {
    padding: 0 !important;
}

@media (max-width: 1800px) {
    div[role="about-aquipta-hero"] .image-extension img {
        max-height: 35rem;
    }
    div[role="pack-layout"] .image-extension img {
        width: 85%;
    }
}
@media (max-width: 1400px) {
    div[role="callout"] div[role="pop-out"] {
        bottom: -15%;
        right: -3%;
    }
}

@media (max-width: 1200px) {
    .meta-navigation ul li {
        padding: .3125rem 1rem;
    }

    /* Hero section specific to the home page. */
    div[role="about-aquipta-hero"] .headline-text {
        padding-top: 0;
        padding-bottom: 5.5rem;
    }

    /* Hero section that contains the pack */
    div[role="pack-layout"] .image-extension img {
        width: 70%;
    }

    div[role="callout"]:has(div[role="pop-out"]) {
        margin-bottom: 3rem;
    }
    div[role="callout"] div[role="pop-out"] {
        bottom: 3%;
        right: -2%;
        width: 30%;
    }
}

@media (max-width: 991.98px) {
    .desktop-only {
        display: none;
    }
    /* CTA buttons: centered on mobile and iPad per approved design */
    .button-link {
        text-align: center !important;
    }
    .tabs .nav {
        flex-direction: column;
        height: 100%;
    }
    /* GLOBAL HEADER */
    #global-header .global-header {
        background: transparent !important; /* Keep transparent so hero gradient shows through */
    }
    #global-header .global-header-menu {
        margin-top: 0;
        background: #364550 !important; /* Dark panel per approved design */
        padding: 0.5rem 0 1rem 0;
        z-index: 1000 !important; /* Ensure menu appears above hero section */
        /* Bootstrap collapse handles visibility via .show class - do NOT override with display:none */
    }
    /* Override: keep dark menu bg even when header has .scrolled class */
    #global-header.scrolled .global-header-menu {
        background: #364550 !important;
    }
    /* Mobile menu: drop down below header instead of expanding it */
    #global-header {
        overflow: visible !important;
        clip: auto !important;
    }
    #global-header .global-header {
        overflow: visible !important;
        position: relative !important;
    }
    #global-header .global-header-navigation {
        position: relative !important;
        overflow: visible !important;
    }
    /* FIX: Use fixed positioning to completely override Bootstrap's collapse */
    #global-header .global-header-menu {
        position: fixed !important;
        top: 72px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        background: #364550 !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: 0 !important;
        display: block !important;
        transition: max-height 0.3s ease, padding 0.3s ease !important;
    }
    #global-header .global-header-menu.show {
        max-height: 2000px !important;
        padding: 0.5rem 0 1rem 0 !important;
        overflow-y: auto !important;
    }
    #global-header img {
        max-height: 3.25rem;
    }
    div[role="hero"] .headline-text {
        padding-top: 0;
    }
    /* GLOBAL HEADER - Dark mode - REMOVED */
    /* body:has(input[value="dark"]:checked) .brand-logo img {
        display: none !important;
    }
    body:has(input[value="dark"]:checked) .brand-logo a {
        width: 8.25rem;
        height: 3.25rem;
        background-image: url(/content/dam/abbvie-sitegenerator-ous/migrainetreatment/nz/images-v2/nz-aquipta-logo-dark.png);
        background-repeat: no-repeat;
        background-size: contain;
    } */
    .meta-navigation ul {
        background: unset;
    }
    .meta-navigation ul li {
        text-align: right; /* Right-aligned per approved design */
        padding: 0.5rem 1.5rem;
    }
    .meta-navigation ul li a {
        color: #FFFFFF !important;
        font-size: 1.05rem;
        font-weight: 500;
        display: inline-block; /* Make bullet center under text, not full width */
    }
    .meta-navigation ul li a:active::before,
    .meta-navigation ul li.active a::before {
        content: none; /* Hide bullet before text on mobile */
    }
    .meta-navigation ul li a:active::after,
    .meta-navigation ul li.active a::after {
        display: block; /* Show bullet below text per approved design */
        content: "•";
        text-align: center;
        line-height: 0.5;
        font-size: 2rem;
    }

    /* Hero section */
    div[role="hero"] {
        padding-top: 0;
        background: linear-gradient(90deg, #F2E2B3 0%, #DEC069 50%, #AB903D 100%);
    }

    /* Hero section specific to the home page. */
    div[role="about-aquipta-hero"] .flex-md-row {
        flex-direction: row-reverse !important; /* Text on left, image on right */
        -ms-flex-direction: row-reverse !important;
        -webkit-box-direction: reverse !important;
        align-items: flex-start; /* Image at top, not bottom */
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:first-child {
        width: 55% !important; /* Image on right - larger per approved design */
        align-self: flex-start !important; /* Image at top */
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:first-child img {
        max-height: 35rem !important; /* Larger image to match design - extends from near top to wave */
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:last-child {
        width: 45% !important; /* Text on left */
    }

    div[role="callout"] div[role="pop-out"] {
        position: unset;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .mobile-hide,
    div[role="pack-sensory-mode"] {
        display: none;
    }
    /* div[role="sensory-mode"] toggle removed by client - keeping inline sensory mode visible */
    /* div[role="sensory-mode"] {
        display: block !important;
    } */

    /*
     * Hero section specific to the home page
     * Hero section that contians the pack 
     */
    div[role="about-aquipta-hero"] .headline-text,
    div[role="pack-layout"] .headline-text {
        padding-bottom: calc(1.25rem + 5vw);
    }

    /* Mobile hero text sizes per approved design */
    div[role="about-aquipta-hero"] h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }
    div[role="about-aquipta-hero"] .headline-text p {
        font-size: 1.1rem !important;
    }

    /* Fix hero wave decoration on mobile - ensure full coverage, no gap */
    div[role="hero-decoration"] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 0; /* Remove any gap below image */
    }
    div[role="hero-decoration"] .image-extension {
        position: absolute;
        bottom: -1px; /* Overlap slightly to eliminate gap */
        left: 0;
        width: 100%;
    }
    div[role="hero-decoration"] .image-extension img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Hero section that contians the pack */
    div[role="pack-layout"] a {
        display: block !important; /* Show packshot on mobile (was hidden) */
        position: absolute;
        left: 55%; /* Position to the right per approved design */
        bottom: -10%; /* Extend below the wave */
        width: 55%; /* Larger size per approved design */
    }

    /* Footer section */
    #global-footer div[role="footer-decoration"] .image-container {
        width: 80%;
        margin: 0 0 0 auto;
    }

    /* Sensory mode */
    div[role="sensory-mode"] {
        margin: 0;
        width: 100% !important;
        padding-bottom: 2.5rem;
    }
    div[role="sensory-mode"],
    div[role="sensory-mode"] > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    div[role="sensory-mode"] .form-group {
        flex-direction: column;
        padding: 0.75rem 1rem 1.25rem 1rem;
        gap: 0.75rem;
    }
    div[role="sensory-mode"] .form-group .custom-radio {
        width: 100%;
    }

    /*
     * Packshot pop-out: half inside / half outside the block per approved design.
     * Positioned at the top of the card, centered, extending above the boundary.
     */
    div[role="callout"]:has(div[role="pop-out"]) {
        position: relative;
        margin-top: 2.5rem;
        margin-bottom: 2rem;
        padding-top: 30%; /* Make room for the pop-out image */
    }
    div[role="callout"] div[role="pop-out"] {
        position: absolute;
        top: -17%;
        bottom: auto; /* Reset general rule's bottom: -25% to prevent stretching */
        left: 50%;
        right: auto; /* Reset general rule's right: 0 to prevent stretching */
        transform: translateX(-50%);
        width: 60%;
    }

    /* Fix white gap on both sides of mobile pages */
    body,
    .page-wrapper,
    #global-header,
    #global-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    /* Steps section font sizes per approved design */
    .col-md-4 h3,
    .col-md-4 h4 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
    .col-md-4 p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* Warning/info callout: horizontal layout (icon left, text right) per approved design */
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension),
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem !important;
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .image-extension,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .image-extension {
        flex: 0 0 20%;
        max-width: 20%;
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .image-extension img,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .image-extension img {
        width: 100%;
        height: auto;
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .headline-text,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .headline-text,
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .layout-container-content,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .layout-container-content {
        flex: 1;
    }

    /* Grid-based icon callouts (column-control with col-md-2 + col-md-10):
       keep the icon column left and the text column right on mobile.
       The negative margins break out of the ancestor paddings so the card
       matches the page side margins of the approved design. */
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension),
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) {
        width: auto !important;
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding: 18px 26px 4px 26px !important; /* Design spec: 18px top, 26px sides, tighter bottom */
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .row,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .row {
        align-items: flex-start !important; /* Align the icon to the top-left */
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .row > .col-md-2,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .row > .col-md-2 {
        flex: 0 0 10% !important;
        max-width: 10% !important;
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .row > .col-md-10,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .row > .col-md-10 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
    div[role="callout"]:not(:has(div[role="pop-out"])):has(.image-extension) .column-control .image-extension img,
    div[role="callout-red"]:not(:has(div[role="pop-out"])):has(.image-extension) .column-control .image-extension img {
        width: 21px !important; /* Natural icon size */
        max-width: none !important; /* Beat the .img-fluid max-width:100% clamp */
    }

    /*
     * Stack text-heavy 2-column cards (e.g. Episodic/Chronic migraine)
     * to full width on mobile. col-6 is non-responsive (always 50%),
     * which cramps the text into ~190px on small screens.
     */
    .column-control .row > .col-6:has(.headline-text) {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /*
     * Footer decorative wave - position at white/gray boundary per approved design.
     * Applies to all pages with this decoration.
     */
    #global-footer {
        overflow-x: clip !important; /* Keep horizontal clipping for the right:-10% overhang */
        overflow-y: visible !important; /* Let the wave overlap the content above the footer */
    }
    #global-footer div[role="footer-decoration"] .image-extension {
        position: absolute;
        right: -10%; /* Extend beyond the right edge */
        /* top: -3.5rem comes from the base rule; do NOT set bottom here -
           top + bottom together force height: 0 and break the image */
        width: 60%; /* Larger size per approved design */
    }
    #global-footer div[role="footer-decoration"] .image-extension img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 768px) {
    /* TAKING AQUIPTA - custom layout containers */
    div[role="taking-aquipta-container"] .col-md-2 {
        width: 10%;
    }
    div[role="taking-aquipta-container"] .col-md-10 {
        width: 90%;
    }
}


/* ===== Approved design update: hero layout on iPad and mobile (desktop untouched) =====
 *
 * The woman image becomes a background layer of the hero container
 * (the source PNG has a transparent background, so it blends with the
 * gold gradient). The inline <img> column is hidden below 992px.
 * The hero is pulled up behind the header, which turns transparent,
 * so the image can extend to the top of the page per the design.
 *
 * NOTE: the footnote paragraph in the hero carries an AEM inline style
 * "font-size: 14.0px !important" which cannot be overridden from CSS.
 * The 11px rule below takes effect once that inline style is removed
 * in the AEM rich text editor.
 */

/* --- iPad range (768px - 991.98px): tuned pixel values --- */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Transparent header: home page only (its hero is pulled up behind the header).
       Other pages keep the default gold gradient header. */
    body:has(div[role="about-aquipta-hero"]) #global-header {
        background: transparent !important; /* Hero gradient shows through behind the logo */
    }
    body:has(div[role="about-aquipta-hero"]) #global-header.scrolled {
        background: linear-gradient(90deg, rgba(242,226,179,0.9) 0%, rgba(222,192,105,0.9) 50%, rgba(171,144,61,0.9) 100%) !important;
    }

    /* Pull the hero up behind the header, push content back down */
    div[role="about-aquipta-hero"] {
        margin-top: -72px !important; /* Approx. header height */
        padding-top: 72px !important;
        background:
            url("/content/abbvie-sitegenerator-ous/migrainetreatment/nz/en/_jcr_content/body/layout_container_cop/layout_container/column_control/par1-5050col/image_extension/item_1.coreimg.png/1769416465233-nz-aquipta-hero.png") no-repeat calc(100% + 145px) bottom / auto 95%,
            linear-gradient(330deg, #90762C, #cdaa4f, #F1E4B0 80%) !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row {
        flex-direction: row !important; /* Only the text column remains in flow */
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:first-child {
        display: none !important; /* Inline img replaced by the background layer */
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:last-child {
        width: 48% !important; /* Text column stays left */
    }
    div[role="about-aquipta-hero"] h1 .no-wrap {
        white-space: normal !important; /* Allow the h1 first line to wrap */
    }
    div[role="about-aquipta-hero"] h1 {
        max-width: 228px !important; /* Design text frame width */
        font-family: "Montserrat", sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 38px !important;
    }
    div[role="about-aquipta-hero"] h2 {
        max-width: 186px !important; /* Design text frame width */
        font-family: "Roboto", sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 21px !important;
    }
    div[role="about-aquipta-hero"] p {
        max-width: 177px !important; /* Design text frame width */
        font-family: "Roboto", sans-serif !important;
        font-size: 11px !important; /* Requires the AEM inline font-size to be removed */
        font-weight: 400 !important;
        line-height: 13px !important;
    }
}

/* --- Mobile range (<=767px): viewport-relative values so proportions hold on any phone width --- */
@media (max-width: 767px) {
    /* Transparent header: home page only (its hero is pulled up behind the header).
       Other pages keep the default gold gradient header. */
    body:has(div[role="about-aquipta-hero"]) #global-header {
        background: transparent !important;
    }
    body:has(div[role="about-aquipta-hero"]) #global-header.scrolled {
        background: linear-gradient(90deg, rgba(242,226,179,0.9) 0%, rgba(222,192,105,0.9) 50%, rgba(171,144,61,0.9) 100%) !important;
    }

    div[role="about-aquipta-hero"] {
        margin-top: -72px !important;
        padding-top: 72px !important;
        background:
            url("/content/abbvie-sitegenerator-ous/migrainetreatment/nz/en/_jcr_content/body/layout_container_cop/layout_container/column_control/par1-5050col/image_extension/item_1.coreimg.png/1769416465233-nz-aquipta-hero.png") no-repeat calc(100% + 38vw) bottom / auto 112vw,
            linear-gradient(330deg, #90762C, #cdaa4f, #F1E4B0 80%) !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row {
        flex-direction: row !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:first-child {
        display: none !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:last-child {
        width: 60% !important;
    }
    div[role="about-aquipta-hero"] h1 .no-wrap {
        white-space: normal !important;
    }
    div[role="about-aquipta-hero"] h1 {
        max-width: 59vw !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 38px !important;
    }
    div[role="about-aquipta-hero"] h2 {
        max-width: 48vw !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 21px !important;
    }
    div[role="about-aquipta-hero"] p {
        max-width: 46vw !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 11px !important; /* Requires the AEM inline font-size to be removed */
        font-weight: 400 !important;
        line-height: 13px !important;
    }

    /* Reduce the gap between the footnote text and the wave */
    div[role="about-aquipta-hero"] .headline-text {
        padding-bottom: 0.5rem !important;
    }

    /* Nudge the white wave layer down 1px to hide the orange edge sliver */
    div[role="hero-decoration"] div[role="light-only"] .image-extension {
        bottom: -2px !important;
    }
}

/* ===== Global mobile/tablet fix: clip horizontal overflow =====
 * Absolutely positioned decorations (e.g. the packshot in the
 * "taking aquipta" hero at left:55% + width:55% = 110%) extend
 * beyond the right edge and create a white stripe / horizontal scroll.
 *
 * "overflow-x: hidden" forces overflow-y to compute to "auto", which
 * turns main into a vertical clip container and cuts off the home hero
 * that extends 72px up behind the transparent header. "clip" only clips
 * the horizontal axis and keeps overflow-y "visible". "hidden" is kept
 * first as a fallback for browsers without "clip" support.
 */
@media (max-width: 991.98px) {
    main.content-area {
        overflow-x: hidden !important; /* Fallback for older browsers */
        overflow-x: clip !important; /* Does not affect overflow-y */
    }
}

/* ===== Home page desktop: seamless header/hero gradient =====
 * The home hero uses a 330deg gradient that does not match the global
 * 90deg header gradient, leaving a visible seam. Extend the hero up
 * behind a transparent header - same pattern as the mobile fix.
 * Scoped to home (body:has) and desktop only; other pages and the
 * scrolled state are untouched.
 */
@media (min-width: 992px) {
    body:has(div[role="about-aquipta-hero"]) #global-header:not(.scrolled) {
        background: transparent !important; /* .scrolled restores the gradient while scrolling */
    }
    body:has(div[role="about-aquipta-hero"]) div[role="about-aquipta-hero"] {
        margin-top: -80px !important; /* Desktop header height */
        padding-top: 80px !important; /* Keep hero content in place */
    }
}

/* ===== AEM Style System variant: peach callout background =====
 * The container component renders the selected style name as the
 * "role" attribute, so choosing "callout-red" produces
 * <div role="callout-red">. The base callout rules above include
 * this variant in their selectors; only the background differs.
 * Used for the "Side effects" tab callout on the taking-aquipta page.
 */
div[role="callout-red"] {
    background: #FDE0D5 !important;
    color: var(--bs-callout-color);
}

/* ===== Resources page: Q&A accordion titles per approved design =====
 * The accordion component only exists on the resources page, so these
 * generic selectors do not affect other pages. Overrides the default
 * var(--heading-2-font-size) (~2.5x body size).
 */
.cmp-accordion__header,
.cmp-accordion__title {
    color: var(--AQIPTA-Blue, #364550) !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

/* ===== Resources page: illustration above "For more information" (mobile) =====
 * The taking-aquipta warning callout rules (21px icon, 20% max-width)
 * also matched this callout and shrank the illustration. Restore it to
 * full column width, aligned to the top-left per the approved design.
 */
@media (max-width: 767px) {
    #layout-container-62701872a7 .image-extension {
        flex: none !important;
        max-width: none !important;
    }
    #layout-container-62701872a7 .image-container {
        justify-content: flex-start !important; /* Illustration to the top-left */
    }
    #layout-container-62701872a7 .image-extension img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===== Get AQUIPTA page: pharmacy list callout =====
 * The four pharmacy links are authored as a 1-row 2-column table inside
 * the rich text. Text style applies to all viewports per the approved
 * design; the 2-column to 4-row stacking is mobile only.
 * Scoped to this callout's container ID.
 */
/* List text per approved design */
#layout-container-35cf2a8d8f .cmp-text td,
#layout-container-35cf2a8d8f .cmp-text td a {
    color: var(--Text-Grey, #63666A) !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

@media (max-width: 767px) {
    #layout-container-35cf2a8d8f .cmp-text table,
    #layout-container-35cf2a8d8f .cmp-text tbody,
    #layout-container-35cf2a8d8f .cmp-text tr,
    #layout-container-35cf2a8d8f .cmp-text td {
        display: block !important;
        width: 100% !important;
    }
    /* Even spacing: remove the extra gap between the two original columns */
    #layout-container-35cf2a8d8f .cmp-text td ul {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}