/* ==========================================================
   Semography custom overrides
   Loaded AFTER assets/css/style.css.
   Project-specific styling lives here instead of vendor files.
   ========================================================== */

/* --- Brand palette ------------------------------------------
   Confirmed Semography brand colors. Everything below should
   draw from these variables rather than hard-coded hex values. */
:root {
    --semography-cream: #F3E9DC;
    --semography-caramel: #C08552;
    --semography-brownie: #5E3023;
    --semography-coffee: #895737;
}

/* --- Logo -----------------------------------------------------
   Final Semography logo (assets/images/semography-logo.png),
   replacing the temporary text wordmark. Sized by height with
   width left auto so the source aspect ratio is preserved. */
.wpo-site-header .navbar-header .navbar-brand.logo img {
    height: 40px;
    width: auto;
    max-width: none;
}

@media (max-width: 767px) {
    .wpo-site-header .navbar-header .navbar-brand.logo img {
        height: 32px;
    }
}

.wpo-site-footer .about-widget .logo img {
    height: 34px;
    width: auto;
    max-width: none;
    /* The source artwork is dark ink; invert it to read clearly on the
       footer's dark Brownie background (CSS filter only — not a redraw). */
    filter: brightness(0) invert(1);
}

/* --- Base heading color ----------------------------------------
   Vendor default is a navy (#002642) left over from the template's
   original palette. More specific rules elsewhere (hero, page-title
   band, dark CTA bands, footer) already set their own light-on-dark
   colors and continue to win over this on specificity. */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--semography-brownie);
}

/* --- Pending content system ---------------------------------
   Applied to whole sections (Selected Films, Testimonials,
   Journal) and to individual media elements (Featured Film
   play button, Semo portrait) that are awaiting real
   Semography content. The HTML structure is kept in the DOM
   so it can be revealed later just by removing this class. */
.content-pending {
    display: none !important;
}

/* When a media column is hidden via .content-pending, let its
   sibling text column take the full row width instead of
   leaving an empty half-column gap. */
.pending-fullwidth {
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- Header CTA ---------------------------------------------- */
.wpo-site-header .header-right .header-btn {
    display: flex;
    align-items: center;
}

.wpo-site-header .header-right .header-btn .theme-btn,
.wpo-site-header .header-right .header-btn .view-cart-btn {
    padding: 12px 28px;
    font-size: 14px;
}

/* --- Hero ------------------------------------------------------ */
.wpo-hero-style-2 .wedding-announcement .couple-text .hero-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    color: var(--semography-cream);
    font-family: "Jost", sans-serif;
    margin-bottom: 10px;
}

.wpo-hero-style-2 .wedding-announcement .couple-text .hero-tagline {
    margin: 15px 0 0;
}

.wpo-hero-style-2 .wedding-announcement .couple-text .hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Experience section steps --------------------------------- */
.wpo-story-section .wpo-story-content-inner .step-number {
    display: block;
    letter-spacing: 2px;
    color: var(--semography-caramel);
    font-family: "Jost", sans-serif;
    margin-bottom: 5px;
}

/* --- Packages --------------------------------------------------- */
.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 {
    font-size: 40px;
    color: var(--semography-caramel);
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item {
    border-top: 3px solid var(--semography-caramel);
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a {
    color: var(--semography-brownie);
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:before,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:before {
    background: var(--semography-brownie);
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover {
    color: var(--semography-coffee);
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover:before,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover:before {
    background-color: var(--semography-coffee);
}

.wpo-pricing-section-s2 .wpo-section-title h2 {
    color: var(--semography-brownie);
}

/* --- Inquiry form pending notice --------------------------------- */
.inquiry-pending-notice {
    display: none;
    margin-top: 20px;
    padding: 15px 20px;
    border: 1px solid #e7e7e7;
    background: #faf7f5;
    color: #6b7884;
    font-size: 15px;
}

/* --- Simplified footer ------------------------------------------- */
.wpo-site-footer .about-widget p.footer-descriptor {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-top: 5px;
}

/* --- Mobile navigation -------------------------------------------
   Paired with the delegated open/close controller in custom.js. The
   backdrop sits above everything in normal page flow (hero slider
   included) but below the slide-out drawer itself (z-index: 999999
   in style.css), so a tap meant to dismiss the menu is captured here
   instead of falling through to whatever is underneath it. */
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 16, 17, 0.45);
    z-index: 999998;
}

.mobile-nav-backdrop.is-visible {
    display: block;
}

body.mobile-nav-open {
    overflow: hidden;
}

/* --- Inner-page title banner (films.html, about.html, experience.html,
   film-single.html) --------------------------------------------------- */
.wpo-page-title .wpo-breadcumb-wrap .page-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 15px;
    color: var(--semography-cream);
    font-family: "Jost", sans-serif;
    margin-bottom: 10px;
}

.wpo-page-title .wpo-breadcumb-wrap .page-title-text {
    color: #f1e9ea;
    max-width: 560px;
    margin: 0 auto;
}

.wpo-page-title .wpo-breadcumb-wrap .page-title-text.film-meta {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

/* --- 404 page ---------------------------------------------------------- */
.wpo-page-title .wpo-breadcumb-wrap .not-found-buttons {
    margin-top: 25px;
}

/* --- Films page empty state ------------------------------------------ */
.film-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8a8a8a;
    font-family: "Jost", sans-serif;
    letter-spacing: 1px;
}

/* --- Film detail template: pending-content notice --------------------- */
.film-notice {
    text-align: center;
    padding: 20px;
    margin-bottom: 30px;
    color: #8a8a8a;
    font-family: "Jost", sans-serif;
    letter-spacing: 1px;
}

.film-cta {
    text-align: center;
    padding: 40px 0 10px;
}

/* --- Reused "wpo-video-section" band as a lightweight page CTA -------- */
.film-page-cta {
    height: auto;
    padding: 80px 0;
    display: flex;
    align-items: center;
}

.film-page-cta .wpo-section-title h2 {
    color: #fff;
}

.film-page-cta-buttons {
    margin-top: 10px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* --- Accessibility utility ------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Inquiry form (homepage Contact section + contact.html) ---------- */
.semography-inquiry-form .form-field {
    position: relative;
}

.semography-inquiry-form .field-error {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    font-size: 13px;
    color: #b3423a;
}

.semography-inquiry-form .form-control.is-invalid {
    border-color: #b3423a;
}

/* --- Packages page ----------------------------------------------------- */
.packages-page-note {
    text-align: center;
    max-width: 560px;
    margin: -10px auto 30px;
    color: #8a8a8a;
    font-size: 14px;
}

.packages-secondary-cta {
    text-align: center;
    margin-top: 10px;
}

/* --- Journal listing empty state -------------------------------------- */
.journal-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8a8a8a;
    font-family: "Jost", sans-serif;
    letter-spacing: 1px;
}

/* --- Active navigation state --------------------------------------- */
.wpo-site-header #navbar > ul > li.current-page > a {
    color: var(--semography-caramel);
}

@media screen and (min-width: 992px) {
    .wpo-site-header #navbar > ul > li.current-page > a:before {
        opacity: 1;
        visibility: visible;
    }
}

/* --- H1 parity ------------------------------------------------------
   Phase 4 promotes each page's primary heading to <h1> for a correct,
   single-H1 document outline. These mirror the vendor's own h2 rules
   for the same classes exactly, so the visual design is unaffected. */
.wpo-page-title .wpo-breadcumb-wrap h1 {
    font-size: 60px;
    color: #fff;
    line-height: 60px;
    margin-top: -10px;
    margin-bottom: 20px;
    font-weight: 900;
}

@media (max-width: 767px) {
    .wpo-page-title .wpo-breadcumb-wrap h1 {
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 10px;
    }
}

.wpo-hero-style-2 .wedding-announcement .couple-text h1 {
    font-size: 100px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

@media (max-width: 991px) {
    .wpo-hero-style-2 .wedding-announcement .couple-text h1 {
        font-size: 80px;
    }
}

@media (max-width: 767px) {
    .wpo-hero-style-2 .wedding-announcement .couple-text h1 {
        font-size: 50px;
    }
}

@media (max-width: 575px) {
    .wpo-hero-style-2 .wedding-announcement .couple-text h1 {
        font-size: 35px;
    }
}

/* --- Focus visibility -------------------------------------------------
   The vendor stylesheet leans on browser defaults for :focus and some
   components (e.g. .mobail-menu button) zero out the outline. Restore a
   clear, consistent focus indicator for keyboard users everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.theme-btn:focus-visible,
.theme-btn-s2:focus-visible,
.theme-btn-s3:focus-visible,
.view-cart-btn:focus-visible {
    outline: 2px solid var(--semography-coffee);
    outline-offset: 3px;
}

.wpo-site-header .mobail-menu button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wpo-site-header .mobail-menu button {
    background-color: var(--semography-caramel);
}

/* --- Package cards ------------------------------------------------------
   Equal-height, evenly balanced cards regardless of how much text each
   package's inclusion list holds, on every breakpoint. */
.wpo-pricing-section .wpo-pricing-wrap .row,
.wpo-pricing-section-s2 .wpo-pricing-wrap .row {
    display: flex;
    flex-wrap: wrap;
}

.wpo-pricing-section .wpo-pricing-wrap .row > div,
.wpo-pricing-section-s2 .wpo-pricing-wrap .row > div {
    display: flex;
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text ul,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text ul {
    flex: 1;
}

.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text a,
.wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom-text a {
    margin-top: auto;
}

@media (max-width: 767px) {

    .wpo-pricing-section .wpo-pricing-wrap .row,
    .wpo-pricing-section-s2 .wpo-pricing-wrap .row {
        row-gap: 20px;
    }
}

/* --- Forms: focus, error, and small-screen polish ----------------------
   The vendor's own form-control rule (.wpo-contact-section
   .wpo-contact-section-wrapper .wpo-contact-form-area .form-control) is
   4 classes deep, which out-specifies a plain ".semography-inquiry-form
   .form-control" override. Repeating that exact selector chain here
   (this file loads after style.css) is what actually wins the cascade. */
.wpo-contact-section .wpo-contact-section-wrapper .wpo-contact-form-area .form-control {
    border-bottom-color: rgba(192, 133, 82, 0.35);
}

.wpo-contact-section .wpo-contact-section-wrapper .wpo-contact-form-area .form-control:focus {
    border-bottom-color: var(--semography-caramel);
    box-shadow: none;
}

.semography-inquiry-form select.form-control {
    cursor: pointer;
}

.semography-inquiry-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.semography-inquiry-form .submit-area .theme-btn-s3 {
    min-height: 48px;
    cursor: pointer;
}

@media (max-width: 575px) {
    .semography-inquiry-form .form-control {
        font-size: 16px;
        /* prevents iOS Safari from auto-zooming in on focus */
    }
}

/* --- Buttons ------------------------------------------------------------
   Standardize the primary/secondary CTA styling on the brand palette.
   theme-btn / theme-btn-s3 / theme-btn-s4 / view-cart-btn share the
   vendor's primary button look; theme-btn-s2 is the lighter secondary
   variant used alongside a primary button (hero, CTA bands, 404). */
.theme-btn,
.view-cart-btn,
.theme-btn-s3,
.theme-btn-s4 {
    background: var(--semography-caramel);
    color: #fff;
}

.theme-btn:hover,
.view-cart-btn:hover,
.theme-btn:focus,
.view-cart-btn:focus,
.theme-btn:active,
.view-cart-btn:active,
.theme-btn-s3:hover,
.theme-btn-s3:focus,
.theme-btn-s3:active,
.theme-btn-s4:hover,
.theme-btn-s4:focus,
.theme-btn-s4:active {
    background: var(--semography-coffee);
    color: #fff;
}

.theme-btn:hover:after,
.view-cart-btn:hover:after,
.theme-btn:focus:after,
.view-cart-btn:focus:after,
.theme-btn:active:after,
.view-cart-btn:active:after,
.theme-btn-s3:hover:after,
.theme-btn-s3:focus:after,
.theme-btn-s3:active:after,
.theme-btn-s4:hover:after,
.theme-btn-s4:focus:after,
.theme-btn-s4:active:after {
    border-color: var(--semography-coffee);
}

.theme-btn-s2 {
    background: var(--semography-cream);
    color: var(--semography-brownie);
}

.theme-btn-s2:hover,
.theme-btn-s2:focus,
.theme-btn-s2:active {
    background: var(--semography-coffee);
    color: #fff;
}

/* --- Section titles / eyebrows on light backgrounds --------------------- */
.wpo-section-title span,
.wpo-section-title-s2 span {
    color: var(--semography-caramel);
}

.wpo-section-title h2,
.wpo-section-title-s2 h2 {
    color: var(--semography-brownie);
}

/* --- Primary navigation --------------------------------------------------
   Keep the nav text itself calm (Brownie); reserve Caramel for the
   hover underline and the current-page indicator so the palette reads
   as an accent rather than a wash of color across the header. */
.wpo-site-header #navbar > ul > li > a {
    color: var(--semography-brownie);
}

.wpo-site-header #navbar > ul > li > a:before {
    background: var(--semography-caramel);
}

.wpo-story-section .tab-area .nav-tabs .nav-item .nav-link.active {
    color: var(--semography-caramel);
}

/* --- Mobile navigation drawer --------------------------------------------
   The vendor drawer set black link text (#000) on a dark plum
   background (#6a4e52) — barely readable. Recoloring it onto the
   brand palette also fixes that contrast problem: Cream text on a
   Brownie surface reads clearly, with Caramel marking hover/current. */
@media (max-width: 991px) {
    .wpo-site-header #navbar {
        background: var(--semography-brownie);
    }

    /* Matches the child-combinator chain of the desktop nav-link color
       rule above so specificity is equal and this (later in the file)
       wins at mobile widths, rather than being silently outranked by it. */
    .wpo-site-header #navbar > ul > li > a {
        color: var(--semography-cream);
    }

    .wpo-site-header #navbar ul a:hover,
    .wpo-site-header #navbar ul li.current a {
        color: var(--semography-caramel);
    }
}

/* --- Dark overlay bands (page-title hero, video/CTA sections) -----------
   Re-tint the vendor's cool navy/grey overlays warm so every dark band
   on the site (page titles, Featured Film, the reused CTA bands) feels
   like the same brand rather than a leftover template color. */
.wpo-page-title:before {
    background: var(--semography-brownie);
}

.wpo-video-section:before {
    background: rgba(94, 48, 35, 0.55);
}

/* --- Footer --------------------------------------------------------------
   Brownie background with Cream text for a premium, high-contrast
   footer; Caramel picks out the nav links on hover. */
.wpo-site-footer {
    background: var(--semography-brownie);
}

.wpo-site-footer p,
.wpo-site-footer li,
.wpo-site-footer .widget-title h3 {
    color: var(--semography-cream);
}

.wpo-site-footer .footer-descriptor {
    color: var(--semography-cream);
    opacity: 0.85;
}

.wpo-site-footer .link-widget ul li a {
    color: var(--semography-cream);
}

.wpo-site-footer .link-widget ul li a:hover {
    color: var(--semography-caramel);
}

.wpo-site-footer .wpo-lower-footer {
    background: var(--semography-coffee);
}

.wpo-site-footer .wpo-lower-footer .copyright,
.wpo-site-footer .wpo-lower-footer .copyright a {
    color: var(--semography-cream);
}

/* ==========================================================================
   Sticky header clone (#navbar-sticky)
   ==========================================================================
   assets/js/script.js clones the whole header nav for the sticky-on-scroll
   header, duplicating id="navbar" in the process. custom.js now renames
   the clone's copy to id="navbar-sticky" to keep ids unique. Every vendor
   #navbar rule that actually applies to our header (i.e. excluding dead
   submenu/.close-navbar rules our markup never uses, and other header
   variants/color-switcher skins we don't apply) is mirrored below for
   #navbar-sticky, followed by the equivalent brand-palette overrides from
   earlier in this file. Nothing here should be edited without also
   checking the matching #navbar rule (vendor, above in this file, or in
   style.css) it mirrors. */

/* --- Vendor #navbar rules, mirrored for #navbar-sticky ------------------ */
.wpo-site-header #navbar-sticky {
    transition: all 0.5s;
}

.wpo-site-header #navbar-sticky > ul li a:hover,
.wpo-site-header #navbar-sticky > ul li a:focus {
    text-decoration: none;
    color: #987a7e;
}

.wpo-site-header #navbar-sticky ul {
    list-style: none;
}

@media screen and (min-width: 992px) {
    .wpo-site-header #navbar-sticky {
        justify-content: center;
    }

    .wpo-site-header #navbar-sticky li {
        position: relative;
    }

    .wpo-site-header #navbar-sticky > ul > li > a:before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: #a3888c;
        content: "";
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        border-radius: 3px;
    }

    .wpo-site-header #navbar-sticky > ul > li > a:hover:before,
    .wpo-site-header #navbar-sticky > ul > li.current-menu-item a:before,
    .wpo-site-header #navbar-sticky > ul > li > a.active:before {
        opacity: 1;
        visibility: visible;
    }

    .wpo-site-header #navbar-sticky > ul > li > a {
        font-size: 16px;
        padding: 35px 20px;
        display: block;
        color: #002642;
        font-weight: 500;
        position: relative;
        font-family: "Jost", sans-serif;
        text-transform: uppercase;
    }
}

@media screen and (min-width: 992px) and (max-width: 1870px) {
    .wpo-site-header #navbar-sticky > ul > li > a {
        padding: 35px 18px;
    }
}

@media (max-width: 1500px) {
    .wpo-site-header #navbar-sticky > ul > li > a {
        padding: 30px 15px;
    }
}

@media (max-width: 1400px) {
    .wpo-site-header #navbar-sticky > ul > li > a {
        padding: 30px 10px;
    }
}

@media (max-width: 1200px) {
    .wpo-site-header #navbar-sticky > ul > li > a {
        padding: 30px 6px;
        font-size: 16px;
    }
}

@media (max-width: 991px) and (max-width: 991px) {
    .wpo-site-header #navbar-sticky {
        top: 0;
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .wpo-site-header #navbar-sticky > ul {
        z-index: 101;
    }

    .wpo-site-header #navbar-sticky ul a {
        color: #000;
    }

    .wpo-site-header #navbar-sticky ul a:hover,
    .wpo-site-header #navbar-sticky ul li.current a {
        color: #a3888c;
    }

    .wpo-site-header #navbar-sticky > ul > li a {
        display: block;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
    }

    .wpo-site-header #navbar-sticky > ul > li a:hover,
    .wpo-site-header #navbar-sticky > ul > li a.active {
        color: #fff;
    }

    .wpo-site-header #navbar-sticky {
        background: #6a4e52;
        display: block !important;
        width: 300px;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        position: fixed;
        left: -320px;
        top: 0px;
        z-index: 999999;
        opacity: 0;
        visibility: hidden;
    }

    .wpo-site-header #navbar-sticky .navbar-nav {
        display: block;
        height: 100%;
        overflow: auto;
        padding-bottom: 60px;
    }

    .wpo-site-header #navbar-sticky > ul {
        position: relative;
        z-index: 101;
    }

    .wpo-site-header #navbar-sticky > ul > li > a {
        font-size: 15px;
        padding: 15px 30px;
    }
}

@media (max-width: 767px) {
    .wpo-site-header #navbar-sticky .navbar-nav {
        margin: 0;
    }
}

/* --- Our own brand-palette overrides, mirrored for #navbar-sticky ------- */
.wpo-site-header #navbar-sticky > ul > li.current-page > a {
    color: var(--semography-caramel);
}

@media screen and (min-width: 992px) {
    .wpo-site-header #navbar-sticky > ul > li.current-page > a:before {
        opacity: 1;
        visibility: visible;
    }
}

.wpo-site-header #navbar-sticky > ul > li > a {
    color: var(--semography-brownie);
}

.wpo-site-header #navbar-sticky > ul > li > a:before {
    background: var(--semography-caramel);
}

@media (max-width: 991px) {
    .wpo-site-header #navbar-sticky {
        background: var(--semography-brownie);
    }

    .wpo-site-header #navbar-sticky > ul > li > a {
        color: var(--semography-cream);
    }

    .wpo-site-header #navbar-sticky ul a:hover,
    .wpo-site-header #navbar-sticky ul li.current a {
        color: var(--semography-caramel);
    }
}

/* --- Reduced motion -----------------------------------------------------
   Preserve the template's animations for everyone else, but respect a
   visitor's OS-level request to reduce motion: shrink animation/transition
   durations to effectively nothing and drop JS/CSS smooth-scrolling,
   without disabling the interactions themselves. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}