/* MIGRAINETREATMENT.CO.NZ */
: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: #EDEDED;
    --light-header-bg: #FFFFFF;
    --light-footer-bg: #EDEDED;
    --light-footer-color: #63666A;

    --dark-body-bg: #364550;
    --dark-body-color: #D2D2D2;
    --dark-h2-color: #D2D2D2;
    --dark-h3-color: #D2D2D2;
    --dark-callout-bg: #D1DDE9;
    --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.69rem) !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-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-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;
}

h1 {
    margin-bottom: 0.75rem !important;
}
h2 {
    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;
    color: var(--bs-h3-color) !important;
}
p {
    margin-bottom: 0.5rem !important;
}
.headline-text .large--title {
  font-size: var(--heading-3-font-size) !important;
  line-height: 3rem !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;
}

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;
}
.tabs .nav-link {
    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: 0.75em;
    height: 0.75em;
    border: 0.15em solid var(--bs-input-inactive);
    border-radius: 50%;
}
.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;
}

.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-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 {
    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;
}
div[role="callout-2"] {
    background: var(--bs-callout2-bg);
    color: var(--bs-callout2-color);
}
div[role="callout-2"] .button-link {
    text-align: center;
}
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;
}

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;
}
.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 */
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: var(--dark-only);
}

/* 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 */
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;
}

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: var(--bs-body-font-size);
}
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: absolute;
    width: 100%;
    z-index: 999;
}
#global-header .global-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#global-header .global-header-menu {
    margin-top: 0.75rem;
}
#global-header button {
    border: 2px solid #364550;
    color: #364550;
}
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: 1;
}

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

    background: linear-gradient(330deg, #90762C, #cdaa4f, #F1E4B0 80%);
    padding-top: 5.75rem;
    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"] > div > .container {
    margin: 0 !important;
}
div[role="hero-decoration"] .image-extension {
    position: absolute;
    bottom: 0;
    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;
}

/*
 * 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 .image-extension a {
    max-width: 10rem;
}

/*
 * 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;
    }
    .tabs .nav {
        flex-direction: column;
        height: 100%;
    }
    /* GLOBAL HEADER */
    #global-header .global-header {
        background: var(--bs-header-bg);
    }
    #global-header .global-header-menu {
        margin-top: 0;
        background: var(--bs-body-bg);
    }
    .global-header-menu {
        background: var(--bs-body-bg);
    }
    #global-header img {
        max-height: 3.25rem;
    }
    /* GLOBAL HEADER - Dark mode*/
    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;
    }
    .meta-navigation ul li a {
        color: var(--bs-body-color) !important;
    }
    .meta-navigation ul li a:active::before,
    .meta-navigation ul li.active a::before {
        content: "•";
        padding-right: 0.5em;
    }
    .meta-navigation ul li a:active::after,
    .meta-navigation ul li.active a::after {
        display: none;
    }

    /* Hero section */
    div[role="hero"] {
        padding-top: 8rem;
        background: linear-gradient(330deg, #90762C, #cdaa4f, #F1E4B0);
    }

    /* Hero section specific to the home page. */
    div[role="about-aquipta-hero"] .flex-md-row {
        flex-direction: column-reverse !important    
        -ms-flex-direction: column-reverse !important;
        -webkit-box-direction: reverse !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row > div {
        width: 100% !important;
    }
    div[role="about-aquipta-hero"] .flex-md-row > div:first-child {
        display: none;
    }

    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"] {
        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);
    }

    /* Hero section that contians the pack */
    div[role="pack-layout"] a {
        display: none;
    }

    /* 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%;
    }

    div[role="callout"] div[role="pop-out"] {
        width: 65%;
        margin: 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%;
    }
}