/* ============================================================
   CMP Header Plugin — header.css v1.0.4
   Christian Media Publishing
   ============================================================ */

:root {
    --cmp-gold:          #B8961E;
    --cmp-navy:          #000080;
    --cmp-white:         #FFFFFF;
    --cmp-grey-light:    #eeeeee;
    --cmp-text:          #333333;
    --cmp-header-z:      999;
    --cmp-content-width: 1080px;  /* matches Divi content width — change in Settings */
    --cmp-content-pct:   100%;    /* percentage width — set via Settings */
}

/* ── Reset for ALL plugin elements ── */
.cmp-header *,
.cmp-ham-panel *,
.cmp-subscribe-modal * {
    box-sizing: border-box;
}

/* ── Nuclear bullet removal — override Divi/theme on every list ── */
.cmp-header ul,
.cmp-header ol,
.cmp-ham-panel ul,
.cmp-ham-panel ol {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmp-header li,
.cmp-ham-panel li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background-image: none !important;
}

.cmp-header li::before,
.cmp-header li::after,
.cmp-ham-panel li::before,
.cmp-ham-panel li::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ══════════════════════════════════════════════
   HEADER WRAPPER — fixed to top
   ══════════════════════════════════════════════ */
.cmp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--cmp-header-z);
    background: var(--cmp-header-bg, #ffffff);
    width: 100%;
}

/* Push page content below the fixed header */
body {
    padding-top: 110px !important;
}

/* Remove Divi 5 default 54px section padding from header */
@media only screen and (min-width: 1350px) {
    header.et_pb_section,
    .et_pb_section:has(.cmp-header) {
        padding: 0 !important;
    }
}

/* ══════════════════════════════════════════════
   ROW 1 — Logo + Subscribe
   ══════════════════════════════════════════════ */
.cmp-header__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cmp-row1-pad-y, 14px) 40px;
    border-bottom: var(--cmp-divider-thick, 1px) solid var(--cmp-divider-colour, #eee);
    width: var(--cmp-content-pct, 100%);
    max-width: var(--cmp-content-width, 1080px);
    margin: 0 auto;
}

.cmp-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.cmp-header__logo {
    height: 52px;
    width: auto;
    display: block;
}

.cmp-header__subscribe-btn {
    background: var(--cmp-sub-bg, #B8961E);
    color: var(--cmp-sub-colour, #ffffff);
    border: none;
    border-radius: var(--cmp-sub-radius, 5px);
    padding: var(--cmp-sub-pad-y, 10px) var(--cmp-sub-pad-x, 24px);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.cmp-header__subscribe-btn:hover,
.cmp-header__subscribe-btn:focus-visible {
    background: #8a6e12;
    outline: none;
}

/* ══════════════════════════════════════════════
   ROW 2 — Hamburger + Nav
   ══════════════════════════════════════════════ */
.cmp-header__row2 {
    display: flex;
    align-items: center;
    padding: var(--cmp-row2-pad-y, 8px) 40px;
    gap: 20px;
    position: relative;
    width: var(--cmp-content-pct, 100%);
    max-width: var(--cmp-content-width, 1080px);
    margin: 0 auto;
}

/* ── Hamburger button ── */
.cmp-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0.5px solid transparent; /* reserved so opening the panel doesn't change the button's size */
    cursor: pointer;
    padding: 10px 8px;
    flex-shrink: 0;
    position: relative;   /* anchor for dropdown */
}

.cmp-header__ham-bar {
    display: block;
    width: var(--cmp-ham-size, 22px);
    height: 2px;
    background: var(--cmp-ham-colour, #000080);
    border-radius: 2px;
    transition: background 0.2s;
}

.cmp-header__hamburger:hover .cmp-header__ham-bar {
    background: var(--cmp-gold);
}

/* ══════════════════════════════════════════════
   HAMBURGER DROPDOWN PANEL
   Floats below the hamburger icon
   ══════════════════════════════════════════════ */
.cmp-ham-overlay { display: none; }

.cmp-header__ham-wrap {
    position: relative;   /* anchor for the dropdown panel */
    flex-shrink: 0;
}

.cmp-ham-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;               /* aligns to left edge of hamburger button */
    width: 260px;
    background: var(--cmp-white);
    z-index: calc(var(--cmp-header-z) + 11);
    border: 0.5px solid var(--cmp-grey-light);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    overflow-y: auto;
    max-height: 70vh;
}

.cmp-ham-panel.is-open {
    display: block;
}

.cmp-ham-panel__inner {
    padding: 8px 0;
}

/* Hide the close button — user clicks outside to dismiss */
.cmp-ham-panel__close {
    display: none;
}

.cmp-ham-panel__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmp-ham-panel__item {
    border-bottom: 0.5px solid var(--cmp-grey-light);
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cmp-ham-panel__item--active {
    border-left: 3px solid var(--cmp-panel-active, #B8961E);
}

.cmp-ham-panel__link {
    display: block;
    padding: var(--cmp-panel-pad-y, 12px) 20px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--cmp-panel-size, 13px);
    font-weight: 400;
    color: var(--cmp-panel-colour, #000080);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.cmp-ham-panel__item--active .cmp-ham-panel__link {
    font-weight: 600;
    padding-left: 17px;
}

.cmp-ham-panel__link:hover {
    color: var(--cmp-panel-hover, #B8961E);
    background: #fafafa;
}

/* ══════════════════════════════════════════════
   MAIN NAV
   ══════════════════════════════════════════════ */
.cmp-header__nav {
    flex: 1;
    width: 100%;
}

.cmp-header__nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.cmp-header__nav-item {
    position: relative;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cmp-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* No hardcoded padding — let builder spacing flow naturally */
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--cmp-nav-size, 14px);
    font-weight: var(--cmp-nav-weight, 400);
    color: var(--cmp-nav-colour, #000080);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
    border-bottom: var(--cmp-active-thick, 2px) solid transparent;
    padding-top: var(--cmp-nav-pad-y, 0px);
    padding-bottom: var(--cmp-nav-pad-y, 0px);
    text-underline-offset: var(--cmp-active-offset, 0px);
    line-height: 1;
}

.cmp-header__nav-link:hover {
    color: var(--cmp-nav-hover, #B8961E);
}

.cmp-header__nav-link--active {
    font-weight: 500;
    border-bottom: var(--cmp-active-thick, 2px) solid var(--cmp-active-colour, #B8961E);
    text-underline-offset: var(--cmp-active-offset, 0px);
}

.cmp-header__nav-chevron {
    font-size: 12px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.cmp-header__nav-item--has-children:hover .cmp-header__nav-chevron {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════
   PUBLICATIONS DROPDOWN
   ══════════════════════════════════════════════ */
.cmp-header__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cmp-dd-bg, #ffffff);
    border: 0.5px solid var(--cmp-grey-light);
    border-radius: var(--cmp-dd-radius, 8px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    list-style: none !important;
    min-width: 220px;
    z-index: calc(var(--cmp-header-z) + 1);
    padding: 6px 0 !important;
    margin: 0 !important;
}

.cmp-header__nav-item--has-children:hover .cmp-header__dropdown,
.cmp-header__nav-item--has-children:focus-within .cmp-header__dropdown,
.cmp-header__nav-item--has-children.is-open .cmp-header__dropdown {
    display: block;
}

/* Bridge gap between nav item and dropdown — 
   invisible area that keeps hover active */
.cmp-header__nav-item--has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px; /* bridges the gap */
    background: transparent;
}

.cmp-header__dropdown-item {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cmp-header__dropdown-link {
    display: block;
    padding: var(--cmp-dd-pad-y, 10px) var(--cmp-dd-pad-x, 20px);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--cmp-dd-size, 13px);
    font-weight: 400;
    color: var(--cmp-dd-colour, #000080);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.cmp-header__dropdown-link:hover,
.cmp-header__dropdown-link--active {
    background: #f5f5f5;
    color: var(--cmp-dd-hover, #B8961E);
}

/* ══════════════════════════════════════════════
   SUBSCRIBE MODAL
   ══════════════════════════════════════════════ */
.cmp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: calc(var(--cmp-header-z) + 20);
}

.cmp-modal-overlay.is-open {
    display: block;
}

.cmp-subscribe-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: #f5f0eb;
    border-radius: 12px;
    z-index: calc(var(--cmp-header-z) + 21);
    padding: 40px 36px;
}

.cmp-subscribe-modal.is-open {
    display: block;
}

.cmp-subscribe-modal__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--cmp-navy);
    cursor: pointer;
    line-height: 1;
}

.cmp-subscribe-modal__close:hover { color: var(--cmp-gold); }

.cmp-subscribe-modal__logo {
    display: block;
    margin: 0 auto 20px;
    height: 60px;
    width: auto;
}

.cmp-subscribe-modal__title {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--cmp-navy);
    text-align: center;
    margin-bottom: 12px;
}

.cmp-subscribe-modal__desc {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: var(--cmp-text);
    text-align: center;
    line-height: 1.7;
    margin-bottom: 24px;
}

.cmp-subscribe-modal__form label {
    display: block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--cmp-navy);
    margin-bottom: 5px;
    margin-top: 14px;
}

.cmp-subscribe-modal__form input[type="email"],
.cmp-subscribe-modal__form input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    background: var(--cmp-white);
    color: var(--cmp-text);
    transition: border-color 0.2s;
}

.cmp-subscribe-modal__form input:focus {
    outline: none;
    border-color: var(--cmp-gold);
}

.cmp-subscribe-modal__form fieldset {
    border: none;
    margin-top: 16px;
}

.cmp-subscribe-modal__form legend {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--cmp-navy);
    margin-bottom: 10px;
}

.cmp-subscribe-modal__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    color: var(--cmp-text);
    margin-bottom: 8px;
    cursor: pointer;
}

.cmp-subscribe-modal__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cmp-navy);
    flex-shrink: 0;
}

.cmp-subscribe-modal__wip {
    font-size: 11px;
    color: #8a6e12;
    background: #fff8e5;
    border: 1px solid #f5c070;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 16px;
}

.cmp-subscribe-modal__submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 13px;
    background: var(--cmp-navy);
    color: var(--cmp-white);
    border: none;
    border-radius: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.cmp-subscribe-modal__submit:hover { background: #000060; }

.cmp-subscribe-modal__powered {
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    color: #888;
    margin-top: 16px;
}

/* ══════════════════════════════════════════════
   MOBILE — below 768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { padding-top: 80px !important; }
    .cmp-header__row1 { padding: 12px 20px; }
    .cmp-header__row2 { padding: 8px 20px; }
    .cmp-header__nav  { display: none; }
    .cmp-ham-panel    { left: 20px; }
}

/* ══════════════════════════════════════════════
   HAMBURGER EAR / LIP
   Hidden when closed. Becomes the top-left tab
   of the dropdown box when open.
   ══════════════════════════════════════════════ */

/* Ham wrap — invisible when closed, becomes ear tab when open */
.cmp-header__ham-wrap {
    position: relative;
    flex-shrink: 0;
    /* No border, no background when closed */
    border: none;
    background: transparent;
    padding: 0;
}

/* When open — render the ear as a top-left tab of the unified box.
   Only colour/shape properties change here — border WIDTH and padding
   stay identical to the closed state (see base rule above) so the
   button never resizes and the rest of the nav never shifts. */
.cmp-header__ham-wrap.panel-open .cmp-header__hamburger {
    background: var(--cmp-white);
    border-color: var(--cmp-grey-light);
    border-bottom-color: transparent; /* merges seamlessly with the panel below */
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: calc(var(--cmp-header-z) + 13);
    margin-bottom: -1px;    /* overlap panel top border */
}

/* Panel — inherits border, top-left corner square to merge with ear */
.cmp-ham-panel {
    border: 0.5px solid var(--cmp-grey-light) !important;
    border-top: 0.5px solid var(--cmp-grey-light) !important;
    border-radius: 0 6px 6px 6px !important;
    top: 100% !important;
    left: 0 !important;
    width: 240px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — prevent logo/button cutoff
   on smaller desktop and tablet viewports
   ══════════════════════════════════════════════ */

/* Medium screens — shrink padding and logo */
@media (max-width: 1100px) {
    .cmp-header__row1 {
        padding: 12px 24px;
    }
    .cmp-header__row2 {
        padding: 0 24px;
    }
    .cmp-header__logo {
        height: 42px;
    }
    .cmp-header__nav-link {
        font-size: 13px;
    }
}

/* Smaller screens — tighten further */
@media (max-width: 900px) {
    .cmp-header__row1 {
        padding: 10px 16px;
    }
    .cmp-header__row2 {
        padding: 0 16px;
        gap: 12px;
    }
    .cmp-header__logo {
        height: 36px;
    }
    .cmp-header__subscribe-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
    .cmp-header__nav-link {
        font-size: 12px;
    }
}

/* Tablet — hide nav, keep logo + subscribe + hamburger */
@media (max-width: 768px) {
    body {
        padding-top: 80px !important;
    }
    .cmp-header__row1 {
        padding: 12px 20px;
    }
    .cmp-header__row2 {
        padding: 8px 20px;
        gap: 10px;
    }
    .cmp-header__nav {
        display: none;
    }
    .cmp-header__logo {
        height: 40px;
    }
    .cmp-ham-panel {
        left: 20px;
    }
}

/* Ensure row 1 never wraps or overflows */
.cmp-header__row1 {
    flex-wrap: nowrap;
    min-width: 0;
}

.cmp-header__logo-link {
    flex-shrink: 0;
}

.cmp-header__subscribe-btn {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   MOBILE NAV — horizontal scroll
   Instead of hiding the nav on mobile, make it
   horizontally scrollable left-to-right
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Override the display:none we set earlier */
    .cmp-header__nav {
        display: block !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
        scrollbar-width: none;             /* hide scrollbar Firefox */
        -ms-overflow-style: none;          /* hide scrollbar IE/Edge */
    }

    /* Hide scrollbar Chrome/Safari */
    .cmp-header__nav::-webkit-scrollbar {
        display: none;
    }

    /* Keep items in a single horizontal row */
    .cmp-header__nav-list {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: max-content !important; /* allow list to be wider than screen */
        min-width: 100%;
    }

    .cmp-header__nav-item {
        flex-shrink: 0; /* prevent items from squishing */
    }

    .cmp-header__nav-link {
        font-size: 13px;
        padding: 12px 16px 12px 0;
        white-space: nowrap;
    }

    /* Hide Publications dropdown on mobile — 
       hamburger panel handles all navigation */
    .cmp-header__dropdown {
        display: none !important;
    }

    /* Row 2 becomes a scroll container */
    .cmp-header__row2 {
        overflow: hidden;
        padding: 0 16px;
        gap: 12px;
    }

    /* Fade edge to hint at scrollability */
    .cmp-header__nav {
        -webkit-mask-image: linear-gradient(
            to right,
            black calc(100% - 32px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            black calc(100% - 32px),
            transparent 100%
        );
    }
}

/* ══════════════════════════════════════════════
   Z-INDEX FIX — hamburger panel on mobile
   Must sit above all page content and Divi
   section layers
   ══════════════════════════════════════════════ */
.cmp-ham-panel {
    z-index: 99999 !important;
}

.cmp-header__ham-wrap {
    z-index: 99999 !important;
}

.cmp-header {
    z-index: 99998 !important;
}

/* ══════════════════════════════════════════════
   Z-INDEX NUCLEAR FIX
   Divi uses z-index values up to 9999 on some
   elements. Going to 999999 to beat everything.
   ══════════════════════════════════════════════ */
.cmp-header {
    z-index: 999999 !important;
    position: fixed !important;
}

.cmp-header__ham-wrap,
.cmp-ham-panel {
    z-index: 9999999 !important;
}

/* Also ensure the header row2 doesn't clip the dropdown */
.cmp-header__row2 {
    overflow: visible !important;
    position: relative;
    z-index: 9999999 !important;
}

/* ══════════════════════════════════════════════
   OVERFLOW FIX — prevent header clipping panel
   overflow:hidden on any parent clips absolutely
   positioned children regardless of z-index
   ══════════════════════════════════════════════ */
.cmp-header,
.cmp-header__row1,
.cmp-header__row2 {
    overflow: visible !important;
}

/* Exception — only the nav itself scrolls on mobile */
@media (max-width: 768px) {
    .cmp-header__nav {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* ══════════════════════════════════════════════
   HAMBURGER PANEL — solid white background
   ══════════════════════════════════════════════ */
.cmp-ham-panel {
    background: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cmp-ham-panel__inner {
    background: #ffffff !important;
}

.cmp-ham-panel__link {
    background: transparent !important;
    color: #000080 !important;
}

/* ══════════════════════════════════════════════
   HAMBURGER PANEL — height and scroll fix
   Panel must not grow taller than viewport
   and must fully cover content behind it
   ══════════════════════════════════════════════ */
.cmp-ham-panel {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Solid white — no bleed-through */
    background-color: #ffffff !important;
    background: #ffffff !important;
    isolation: isolate !important;
}

.cmp-ham-panel__inner {
    background-color: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* Ensure each list item is fully opaque */
.cmp-ham-panel__item {
    background-color: #ffffff !important;
}

.cmp-ham-panel__link {
    background-color: #ffffff !important;
}

.cmp-ham-panel__link:hover {
    background-color: #fafafa !important;
    color: #B8961E !important;
}

/* ══════════════════════════════════════════════
   MOBILE — panel fixed to viewport
   position:absolute bleeds through page layers
   position:fixed sits above everything
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cmp-ham-panel {
        position: fixed !important;
        top: 110px !important;
        left: 16px !important;
        width: 260px !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        z-index: 9999999 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.20) !important;
        border-radius: 0 8px 8px 8px !important;
    }

    /* Force white on every child — belt and braces */
    .cmp-ham-panel *,
    .cmp-ham-panel__inner,
    .cmp-ham-panel__list,
    .cmp-ham-panel__item,
    .cmp-ham-panel__link {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    .cmp-ham-panel__link {
        color: #000080 !important;
    }

    .cmp-ham-panel__item--active {
        border-left: 3px solid #B8961E !important;
        background-color: #ffffff !important;
    }

    .cmp-ham-panel__item--active .cmp-ham-panel__link {
        color: #000080 !important;
        font-weight: 600 !important;
    }

    .cmp-ham-panel__link:hover {
        background-color: #f5f5f5 !important;
        color: #B8961E !important;
    }
}

/* ══════════════════════════════════════════════
   HAMBURGER PANEL — child items indented
   Sub-pages (e.g. Bibles under Publications)
   shown indented to indicate hierarchy
   ══════════════════════════════════════════════ */
.cmp-ham-panel__item--child .cmp-ham-panel__link {
    padding-left: var(--cmp-panel-indent, 32px) !important;
    font-size: 12px !important;
    color: #4a5568 !important;
    border-left: none !important;
}

.cmp-ham-panel__item--child {
    border-bottom: 0.5px solid #f0f0f0 !important;
}

.cmp-ham-panel__item--child .cmp-ham-panel__link:hover {
    color: #B8961E !important;
    background-color: #fafafa !important;
}

/* ══════════════════════════════════════════════
   SUBSCRIBE MODAL — responsive fix v2.1.0
   ══════════════════════════════════════════════ */

/* Modal overlay — full viewport */
.cmp-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 9999998 !important;
    display: none;
}

.cmp-modal-overlay.is-open {
    display: block !important;
}

/* Modal box — centred, responsive */
.cmp-subscribe-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999999 !important;
    width: calc(100vw - 40px) !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: #f5f0eb !important;
    border-radius: 12px !important;
    padding: 36px 32px !important;
    box-sizing: border-box !important;
}

/* Logo — constrained */
.cmp-subscribe-modal__logo {
    display: block !important;
    margin: 0 auto 20px !important;
    max-width: 180px !important;
    width: 100% !important;
    height: auto !important;
}

/* Title */
.cmp-subscribe-modal__title {
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--cmp-navy) !important;
    text-align: center !important;
    margin: 0 0 10px !important;
}

/* Description */
.cmp-subscribe-modal__desc {
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 13px !important;
    color: #444 !important;
    text-align: center !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
}

/* Form labels */
.cmp-subscribe-modal__form label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cmp-navy) !important;
    margin: 14px 0 4px !important;
}

/* Inputs — full width */
.cmp-subscribe-modal__form input[type="email"],
.cmp-subscribe-modal__form input[type="text"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.cmp-subscribe-modal__form input:focus {
    border-color: var(--cmp-gold) !important;
    outline: none !important;
}

/* Fieldset */
.cmp-subscribe-modal__form fieldset {
    border: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

.cmp-subscribe-modal__form legend {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cmp-navy) !important;
    margin-bottom: 10px !important;
}

/* Checkboxes */
.cmp-subscribe-modal__check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
}

.cmp-subscribe-modal__check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--cmp-navy) !important;
}

/* WIP notice */
.cmp-subscribe-modal__wip {
    font-size: 11px !important;
    color: #8a6e12 !important;
    background: #fff8e5 !important;
    border: 1px solid #f5c070 !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    margin-top: 14px !important;
}

/* Submit button */
.cmp-subscribe-modal__submit {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 12px !important;
    background: var(--cmp-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.cmp-subscribe-modal__submit:hover {
    background: #000060 !important;
}

/* Powered by */
.cmp-subscribe-modal__powered {
    text-align: center !important;
    font-size: 11px !important;
    color: #888 !important;
    margin-top: 12px !important;
}

/* Close button */
.cmp-subscribe-modal__close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    font-size: 26px !important;
    color: var(--cmp-navy) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px !important;
}

.cmp-subscribe-modal__close:hover {
    color: var(--cmp-gold) !important;
}

/* Small mobile */
@media (max-width: 480px) {
    .cmp-subscribe-modal {
        padding: 28px 20px !important;
        width: calc(100vw - 24px) !important;
    }

    .cmp-subscribe-modal__title {
        font-size: 18px !important;
    }
}

/* ══════════════════════════════════════════════
   SUBSCRIBE MODAL — tighter spacing fix v2.1.2
   ══════════════════════════════════════════════ */
.cmp-subscribe-modal {
    padding: 28px 28px 24px !important;
    max-height: 92vh !important;
}

.cmp-subscribe-modal__logo {
    max-width: 140px !important;
    margin: 0 auto 12px !important;
}

.cmp-subscribe-modal__title {
    font-size: 18px !important;
    margin: 0 0 8px !important;
}

.cmp-subscribe-modal__desc {
    font-size: 12px !important;
    margin: 0 0 14px !important;
    line-height: 1.5 !important;
}

.cmp-subscribe-modal__form label {
    margin: 10px 0 3px !important;
    font-size: 12px !important;
}

.cmp-subscribe-modal__form input[type="email"],
.cmp-subscribe-modal__form input[type="text"] {
    padding: 8px 10px !important;
    font-size: 13px !important;
}

.cmp-subscribe-modal__form fieldset {
    margin: 12px 0 0 !important;
}

.cmp-subscribe-modal__form legend {
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

.cmp-subscribe-modal__check {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

.cmp-subscribe-modal__wip {
    margin-top: 10px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
}

.cmp-subscribe-modal__submit {
    margin-top: 12px !important;
    padding: 11px !important;
    font-size: 14px !important;
}

.cmp-subscribe-modal__powered {
    margin-top: 8px !important;
    font-size: 11px !important;
}

/* removed conflicting nav padding block */

/* ══════════════════════════════════════════════
   NAV ITEM GAP — desktop and mobile
   Controlled via Settings → Row 2
   ══════════════════════════════════════════════ */

/* Desktop — gap between nav items */
.cmp-header__nav-item {
    padding-left: calc( var(--cmp-nav-gap, 0px) / 2 ) !important;
    padding-right: calc( var(--cmp-nav-gap, 0px) / 2 ) !important;
}

/* First and last items — no outer padding */
.cmp-header__nav-item:first-child {
    padding-left: 0 !important;
}
.cmp-header__nav-item:last-child {
    padding-right: 0 !important;
}

/* Mobile — gap between scrollable nav items */
@media (max-width: 768px) {
    .cmp-header__nav-item {
        padding-left: calc( var(--cmp-nav-gap-mobile, 16px) / 2 ) !important;
        padding-right: calc( var(--cmp-nav-gap-mobile, 16px) / 2 ) !important;
        flex-shrink: 0 !important;
    }

    .cmp-header__nav-item:first-child {
        padding-left: 0 !important;
    }

    /* Last item gets right padding so it doesn't
       sit flush against the scroll edge */
    .cmp-header__nav-item:last-child {
        padding-right: var(--cmp-nav-gap-mobile, 16px) !important;
    }
}

/* ══════════════════════════════════════════════
   MOBILE NAV — consistent gaps fix v2.3.4
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Force ALL items to same consistent gap */
    .cmp-header__nav-list {
        gap: var(--cmp-nav-gap-mobile, 16px) !important;
        justify-content: flex-start !important;
    }

    /* Remove individual item padding — use gap instead */
    .cmp-header__nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Keep last item with right padding for scroll breathing room */
    .cmp-header__nav-item:last-child {
        padding-right: 20px !important;
    }

    /* Ensure nav link text never wraps */
    .cmp-header__nav-link {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ══════════════════════════════════════════════
   DROPDOWN — Figma-accurate styling v2.3.5
   ══════════════════════════════════════════════ */

/* Chevron SVG — smooth rotation */
.cmp-header__nav-chevron {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
    color: currentColor !important;
}

.cmp-header__nav-item--has-children.is-open .cmp-header__nav-chevron {
    transform: rotate(180deg) !important;
}

/* Dropdown box — matches Figma */
.cmp-header__dropdown {
    min-width: 240px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* Position below the nav link */
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Divider line — sits directly under "Publications" in the nav bar,
   since the panel no longer repeats that label itself */
.cmp-header__dropdown-divider {
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Dropdown items */
.cmp-header__dropdown-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmp-header__dropdown-link {
    display: block !important;
    padding: var(--cmp-dd-pad-y, 10px) var(--cmp-dd-pad-x, 20px) !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: var(--cmp-dd-size, 13px) !important;
    font-weight: 400 !important;
    color: var(--cmp-dd-colour, #000080) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
    border-left: 3px solid transparent !important;
}

.cmp-header__dropdown-link:hover {
    background: #f8f9fa !important;
    color: var(--cmp-dd-hover, #B8961E) !important;
    border-left-color: var(--cmp-dd-hover, #B8961E) !important;
}

.cmp-header__dropdown-link--active {
    color: var(--cmp-dd-hover, #B8961E) !important;
    border-left-color: var(--cmp-dd-hover, #B8961E) !important;
    font-weight: 500 !important;
}

/* Last item gets rounded bottom corners */
.cmp-header__dropdown-item:last-child .cmp-header__dropdown-link {
    border-radius: 0 0 8px 8px !important;
}

/* ══════════════════════════════════════════════
   DROPDOWN — alignment, chevron, hug-border & animation v2.4.2
   The dropdown no longer repeats the "Publications" label —
   the nav-bar link is the only header, and the panel sits
   flush against it with a matching border (see "hug" rules
   below). Everything here is driven by the settings page
   (Dropdown menu) via CSS custom properties + classes on
   .cmp-header.
   ══════════════════════════════════════════════ */

/* Hug — panel sits flush against the nav item, no gap, with a
   configurable border wrapping the whole box. */
.cmp-header__dropdown {
    top: 100% !important;
    border: var(--cmp-dd-border-width, 1px) solid var(--cmp-dd-border-colour, #e5e7eb) !important;
    border-radius: var(--cmp-dd-radius, 8px) !important;
    z-index: 1 !important;
}

/* Hug backdrop — a borderless-bottom twin of the dropdown box that
   sits directly behind "Publications" itself, so the border appears
   to wrap up and around the menu item rather than starting below it.
   No text of its own — the real nav-link (still in normal flow,
   unchanged, single source of truth) renders on top of it. */
.cmp-header__dropdown-hug {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 240px; /* fallback before JS measures the real dropdown width */
    min-width: 240px; /* keep in sync with .cmp-header__dropdown min-width */
    height: 100%;
    background: var(--cmp-dd-bg, #ffffff);
    border: var(--cmp-dd-border-width, 1px) solid var(--cmp-dd-border-colour, #e5e7eb);
    border-bottom: none;
    border-radius: var(--cmp-dd-radius, 8px) var(--cmp-dd-radius, 8px) 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-dd-anim-duration, 200ms) !important;
}

.cmp-header__nav-item--has-children:hover .cmp-header__dropdown-hug,
.cmp-header__nav-item--has-children:focus-within .cmp-header__dropdown-hug,
.cmp-header__nav-item--has-children.is-open .cmp-header__dropdown-hug {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s 0s !important;
}

/* The real "Publications" link sits above the hug backdrop and
   switches to the dropdown's text colour so it reads as part of
   the same card once it's open. */
.cmp-header__nav-item--has-children {
    position: relative;
    z-index: 1;
}

.cmp-header__nav-link {
    position: relative;
    z-index: 2;
}

.cmp-header__nav-item--has-children:hover > .cmp-header__nav-link,
.cmp-header__nav-item--has-children:focus-within > .cmp-header__nav-link,
.cmp-header__nav-item--has-children.is-open > .cmp-header__nav-link {
    color: var(--cmp-dd-colour, #000080) !important;
}

/* Hide on mobile along with the dropdown itself — hamburger panel
   handles navigation there. */
@media (max-width: 768px) {
    .cmp-header__dropdown-hug {
        display: none !important;
    }
}

.cmp-header__dropdown-divider {
    width: var(--cmp-dd-divider-width, 60%) !important;
    margin: var(--cmp-dd-divider-margin, 0 auto) !important;
    background: var(--cmp-dd-divider-colour, #e5e7eb) !important;
}

.cmp-header__dropdown-link {
    text-align: var(--cmp-dd-align, center) !important;
    white-space: normal !important; /* allow "Methodist Publishing House" to wrap to 2 lines */
    line-height: 1.35 !important;
}

/* Chevron — lives next to "Publications" in the nav bar now
   (the panel no longer has its own copy). Static by default;
   opt into rotation via the settings page. */
.cmp-header__nav-chevron {
    transform: none !important;
}

.cmp-dd-chevron--static .cmp-header__nav-item--has-children:hover .cmp-header__nav-chevron,
.cmp-dd-chevron--static .cmp-header__nav-item--has-children:focus-within .cmp-header__nav-chevron,
.cmp-dd-chevron--static .cmp-header__nav-item--has-children.is-open .cmp-header__nav-chevron {
    transform: none !important;
}

.cmp-dd-chevron--rotate .cmp-header__nav-item--has-children:hover .cmp-header__nav-chevron,
.cmp-dd-chevron--rotate .cmp-header__nav-item--has-children:focus-within .cmp-header__nav-chevron,
.cmp-dd-chevron--rotate .cmp-header__nav-item--has-children.is-open .cmp-header__nav-chevron {
    transform: rotate(180deg) !important;
}

/* Animation base — swap the hard display:none/block toggle for an
   opacity/visibility transition so all animation types can use it.
   visibility is delayed on close (so it stays interactive/focusable
   until the fade finishes) and instant on open. */
.cmp-header__dropdown {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-dd-anim-duration, 200ms),
        transform var(--cmp-dd-anim-duration, 200ms) ease !important;
}

.cmp-header__nav-item--has-children:hover .cmp-header__dropdown,
.cmp-header__nav-item--has-children:focus-within .cmp-header__dropdown,
.cmp-header__nav-item--has-children.is-open .cmp-header__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s 0s,
        transform var(--cmp-dd-anim-duration, 200ms) ease !important;
}

/* Slide down — true "unfold" reveal, not just a nudge.
   Height is measured in JS (header.js) and stored per-dropdown in
   --cmp-dd-content-height, so this animates from 0 to the exact
   content height regardless of item count or text wrapping. */
.cmp-dd-anim--slide .cmp-header__dropdown {
    max-height: 0 !important;
    overflow: hidden !important;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-dd-anim-duration, 200ms),
        max-height var(--cmp-dd-anim-duration, 200ms) ease !important;
}
.cmp-dd-anim--slide .cmp-header__nav-item--has-children:hover .cmp-header__dropdown,
.cmp-dd-anim--slide .cmp-header__nav-item--has-children:focus-within .cmp-header__dropdown,
.cmp-dd-anim--slide .cmp-header__nav-item--has-children.is-open .cmp-header__dropdown {
    max-height: var(--cmp-dd-content-height, 500px) !important;
    transition:
        opacity var(--cmp-dd-anim-duration, 200ms) ease,
        visibility 0s 0s,
        max-height var(--cmp-dd-anim-duration, 200ms) ease !important;
}

/* Scale in */
.cmp-dd-anim--scale .cmp-header__dropdown {
    transform: translateX(-50%) scale(0.95) !important;
    transform-origin: top center !important;
}
.cmp-dd-anim--scale .cmp-header__nav-item--has-children:hover .cmp-header__dropdown,
.cmp-dd-anim--scale .cmp-header__nav-item--has-children:focus-within .cmp-header__dropdown,
.cmp-dd-anim--scale .cmp-header__nav-item--has-children.is-open .cmp-header__dropdown {
    transform: translateX(-50%) scale(1) !important;
}

/* None — instant, no transition */
.cmp-dd-anim--none .cmp-header__dropdown {
    transition: none !important;
}

/* ══════════════════════════════════════════════
   HAMBURGER PANEL — open animation v2.5.0
   Mirrors the dropdown's animation system: driven
   by settings (Hamburger panel → Open animation)
   via CSS custom properties + classes on .cmp-header.
   Supersedes the earlier hard display:none/block
   toggle and the "opacity:1 !important" rule added
   for the transparency-bleed fix — this still keeps
   the panel fully opaque once open, it just allows
   it to transition there instead of snapping.
   ══════════════════════════════════════════════ */
.cmp-ham-panel {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-ham-anim-duration, 200ms) !important;
}

.cmp-ham-panel.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s 0s !important;
}

/* Slide down */
.cmp-ham-anim--slide .cmp-ham-panel {
    transform: translateY(-8px) !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-ham-anim-duration, 200ms),
        transform var(--cmp-ham-anim-duration, 200ms) ease !important;
}
.cmp-ham-anim--slide .cmp-ham-panel.is-open {
    transform: translateY(0) !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s 0s,
        transform var(--cmp-ham-anim-duration, 200ms) ease !important;
}

/* Scale in */
.cmp-ham-anim--scale .cmp-ham-panel {
    transform: scale(0.95) !important;
    transform-origin: top left !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s var(--cmp-ham-anim-duration, 200ms),
        transform var(--cmp-ham-anim-duration, 200ms) ease !important;
}
.cmp-ham-anim--scale .cmp-ham-panel.is-open {
    transform: scale(1) !important;
    transition:
        opacity var(--cmp-ham-anim-duration, 200ms) ease,
        visibility 0s 0s,
        transform var(--cmp-ham-anim-duration, 200ms) ease !important;
}

/* None — instant */
.cmp-ham-anim--none .cmp-ham-panel {
    transition: none !important;
}

/* Mobile — position:fixed is set elsewhere with !important;
   opacity/visibility/transform above still apply on top of it,
   so the animation works the same on mobile as desktop. */