/*
 * Theme header and mobile menu on the Nuance page templates (body.nuance-page).
 *
 * Those pages are dark and set their own body font and colour and a site-wide .btn, which the
 * theme header would otherwise inherit: black logo and grey menu on black, Inter instead of
 * Thicciboi, a round 56px "Let's Talk". Every value below is the one the header has on the
 * theme's own pages (e.g. /career/), so it looks the same everywhere.
 */
body.nuance-page header.attonce-header {
    background-color: #fafafa;
    font-family: Thicciboi, sans-serif;
    color: #4d5056;
}

/* .sticky-header is the theme's second copy of the header, shown after 160px of scrolling */
body.nuance-page .sticky-header,
body.nuance-page .mobile-menu,
body.nuance-page .at_offcanvus_menu {
    font-family: Thicciboi, sans-serif;
    color: #4d5056;
}

body.nuance-page header.attonce-header .header-btns .btn,
body.nuance-page .sticky-header .header-btns .btn,
body.nuance-page .mobile-menu .btn,
body.nuance-page .at_offcanvus_menu .btn {
    font-family: Thicciboi, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 1px;
    border-radius: 6px;
    min-height: auto;
    gap: normal;
    box-shadow: none;
    transform: none;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out;
}

body.nuance-page header.attonce-header .header-btns .btn-outline {
    background-color: #000;
    color: #fff;
}

body.nuance-page header.attonce-header .header-btns .btn-outline:hover,
body.nuance-page header.attonce-header .header-btns .btn-outline:focus-visible {
    background-color: #f9d342;
    color: #fff;
}

body.nuance-page header.attonce-header .header-btns .btn.mobile-menu-toggle,
body.nuance-page .sticky-header .header-btns .btn.mobile-menu-toggle {
    font-size: 15px;
}

/* The theme footer (Elementor) and back-to-top button inherit the same body font and colour,
   and the pages zero every paragraph margin. */
body.nuance-page footer#agentieco-footer {
    font-family: Thicciboi, sans-serif;
    color: #4d5056;
}

body.nuance-page #back-to-top {
    font-family: Thicciboi, sans-serif;
}

body.nuance-page footer#agentieco-footer p {
    margin-bottom: 1rem;
}

/* the pages strip list styles and make buttons inherit their colour */
body.nuance-page .mobile-menu ul {
    list-style-type: disc;
}

body.nuance-page .mobile-menu ul ul {
    list-style-type: circle;
}

body.nuance-page .mobile-menu .close-menu {
    color: #000;
}

/* icons inside the theme's own buttons (menu toggle, subscribe) */
body.nuance-page header.attonce-header .btn svg,
body.nuance-page .sticky-header .btn svg,
body.nuance-page .mobile-menu .btn svg,
body.nuance-page .at_offcanvus_menu .btn svg {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transform: none;
    transition: all 0s;
}

/*
 * Page buttons in the theme's style. The deploy script adds .nuance-btn plus the theme class
 * (btn-gold -> btn-primary, btn-ghost -> btn-outline, btn-dark -> btn-secondary), which brings
 * the theme's fill and hover animation (::before / ::after). These rules drop the page's own pill
 * shape, arrow icon, shadow and lift, and set the theme's size and type.
 */
html body.nuance-page .btn.nuance-btn,
html body.nuance-page .btn.nuance-btn:hover,
html body.nuance-page .btn.nuance-btn:focus-visible,
html body.nuance-page .btn.nuance-btn:active {
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 0;
    height: auto;
    padding: 16px 24px;
    gap: normal;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    transform: none;
    color: #fff;
    font-family: Thicciboi, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 1px;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out;
}

/* text colour follows the fill: the theme's white on gold reads at 1.5:1, so gold buttons get
   black text, and white once the dark fill slides in on hover */
html body.nuance-page .btn.nuance-btn.btn-primary {
    color: #000;
}

html body.nuance-page .btn.nuance-btn.btn-primary:is(:hover, :focus-visible, :active),
html body.nuance-page :is(.s-gold, .sec.gold, .p-gold) .btn.nuance-btn.btn-primary {
    color: #fff;
}

html body.nuance-page :is(.s-gold, .sec.gold, .p-gold) :is(.s-black, .dk, .dark, .formcard, .booking) .btn.nuance-btn.btn-primary:not(:hover, :focus-visible, :active) {
    color: #000;
}

/* btn-secondary is dark and fills with gold on hover */
html body.nuance-page .btn.nuance-btn.btn-secondary:is(:hover, :focus-visible, :active) {
    color: #000;
}

html body.nuance-page .btn.nuance-btn.btn-block {
    display: block;
    width: 100%;
}

html body.nuance-page .btn.nuance-btn .btn-ico,
html body.nuance-page .btn.nuance-btn > svg {
    display: none;
}

/* on the pages' gold sections a gold button would vanish: dark fill, and black on hover (the
   theme's btn-secondary hovers to gold, which would vanish here too) */
body.nuance-page :is(.s-gold, .sec.gold, .p-gold) .btn.nuance-btn.btn-primary::before {
    background-color: #181818;
}

body.nuance-page :is(.s-gold, .sec.gold, .p-gold) .btn.nuance-btn.btn-primary::after {
    background-color: #000;
}

/* ...but a dark card inside a gold section is dark again: back to the gold btn-primary */
body.nuance-page :is(.s-gold, .sec.gold, .p-gold) :is(.s-black, .dk, .dark, .formcard, .booking) .btn.nuance-btn.btn-primary::before {
    background-color: var(--color_primary);
}

body.nuance-page :is(.s-gold, .sec.gold, .p-gold) :is(.s-black, .dk, .dark, .formcard, .booking) .btn.nuance-btn.btn-primary::after {
    background-color: #181818;
}

/*
 * Vertical spacing. The static design gave every hero 76px for a header floating over it and a
 * full-screen minimum height, and sections up to 168px of padding. Here the theme header sits
 * above the page, so the hero starts below it, and sections are tighter on every screen.
 * Every page reads its section padding from --sec / --pad (case studies: --sec in site.css).
 */
body.nuance-page {
    --sec: clamp(56px, 6.5vw, 96px);
    --pad: clamp(56px, 6.5vw, 96px);
}

body.nuance-page main > section.hero {
    min-height: 0;
    padding-top: clamp(48px, 5.5vw, 80px);
}

/* the homepage and agency heroes run their content to the bottom edge: no bottom padding there */
body.nuance-page:not(.page-template-homepage):not(.page-template-agency-partners) main > section.hero {
    padding-bottom: clamp(48px, 5.5vw, 80px);
}

/* Customizer "Additional CSS" sets label { display: block !important } for the old forms, which
   puts the checkbox of every consent / NDA line above its text. These labels are flex rows. */
body.nuance-page main label.consent,
body.nuance-page main label.check {
    display: flex !important;
}

/* after a submission the page returns to #nf-<form>; keep the result note clear of the sticky header */
body.nuance-page form[id^="nf-"] {
    scroll-margin-top: 120px;
}

/* the footer's subscribe button shares the class name .btn */
body.nuance-page footer#agentieco-footer .btn {
    display: block;
    font-family: Thicciboi, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 1px;
    min-height: auto;
    gap: normal;
    transform: none;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out;
}

body.nuance-page footer#agentieco-footer .btn svg {
    transition: all 0s;
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transform: none;
}