/**
 * Header - Main / Footer - Main
 *
 * The navigation and the Login control are rendered by the parent theme via
 * the [bca_theme_nav] and [bca_theme_login] shortcodes, so the theme supplies
 * the menu styling, dropdowns and off-canvas panel. What lives here is the
 * header layout, the Login button skin, and the footer.
 *
 * Brand colours come from the theme CSS variables so the header and footer
 * follow the Customizer palette.
 */

/* Name collision with the plugin.
   Header Footer Builder hides the active theme chrome with
   body.turbo-hide-theme-header .site-header{display:none!important} and
   body.tahefobu-hide-theme-footer .site-footer{display:none!important}.
   Those are exactly the BEM block names used here, so the templates hid
   themselves. Re-show them, scoped inside the plugin wrappers so the real
   theme header and footer stay hidden. */
body.turbo-hide-theme-header .turbo-header-template .site-header,
body.tahefobu-hide-theme-footer .turbo-footer-template .site-footer {
    display: flex !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: relative;
    min-height: 100px;
    border-bottom: 1px solid rgba(58, 36, 24, 0.08);
    box-shadow: 0 2px 20px rgba(58, 36, 24, 0.06);
}

.ta-sticky-header .site-header {
    box-shadow: 0 4px 24px rgba(58, 36, 24, 0.10);
}

/* Dropdowns are absolutely positioned and must escape the header box and sit
   above the page, so nothing in the chain may clip or under-stack them. */
.turbo-header-template,
.turbo-header-template .elementor,
.site-header,
.site-header__brand,
.site-header__nav,
.site-header__actions,
.site-header__menu,
.site-header__login,
.site-header__menu .elementor-widget-container,
.site-header__login .elementor-widget-container,
.site-header__menu .elementor-shortcode,
.site-header__login .elementor-shortcode {
    overflow: visible;
}

.turbo-header-template {
    z-index: 99;
}

.site-header__nav,
.site-header__actions {
    z-index: 2;
}

/* Equal side columns put the navigation in the true centre of the header
   without taking it out of the flow. */
/* Equal-width side columns are what actually centres the nav: both take the
   same share of the leftover space, so the menu lands on the page centre
   regardless of how wide the logo or the button is. */
/* Elementor sizes containers with its own --width and flex custom properties
   at the same specificity, so these need to win outright. */
.site-header__brand,
.site-header__actions {
    flex: 1 1 0 !important;
    width: auto !important;
}

.site-header__actions {
    min-width: 0;
}

/* The menu is wider than an equal-thirds column allows, so leaving it in the
   flex row squeezed it and pushed the items (and their hover boxes) out of
   alignment. Taking it out of the flow and centring it on the header gives
   exact centring at any logo or button width. The ancestors must stay static
   so .site-header is the containing block - Elementor makes widgets
   position:relative by default. */
.site-header__nav {
    position: static !important;
    flex: 0 0 auto !important;
    width: 0 !important;
    padding: 0 !important;
}

.site-header__menu,
.site-header__menu .elementor-widget-container,
.site-header__menu .elementor-shortcode {
    position: static !important;
}

/* Auto margins inside the full-width header centre the menu exactly; a
   left:50% + translate pair was landing 35px short because of the margins the
   theme puts on the menu wrapper. */
/* Stretch across the header and centre the list inside it. A max-content
   width would be recalculated when a dropdown opens, which re-centred the bar
   and made the menu jump on hover. */
.bca-header__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: auto;
    margin: 0 !important;
    pointer-events: none;
}

.bca-header__nav nav.it-menu-content > ul {
    justify-content: center;
}

/* Only the items themselves are interactive, so the stretched bar does not
   block the logo or the Login button behind it. */
.bca-header__nav nav.it-menu-content > ul > li {
    pointer-events: auto;
}

/* The side columns stretch across the centred menu and were swallowing its
   hover and click events, so they only take pointer events where they
   actually have content. */
.site-header__brand,
.site-header__actions {
    pointer-events: none;
}

.site-header__brand a,
.site-header__brand img,
.site-header__logo,
.bca-header__actions {
    pointer-events: auto;
}

.site-header__actions {
    justify-content: flex-end;
}

/* The logo is the crest with the name on two lines and the tagline under it
   (Lucida Calligraphy, drawn into the image), so it is narrower than the old
   one-line lockup and can be shown a little larger. */
.site-header__logo img {
    width: 330px !important;
    max-width: none !important;
    height: auto;
}

/* The menu must stay on one line; otherwise the flex row squeezes it and the
   items wrap, which also inflates the header height. */
.bca-header__nav nav.it-menu-content > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.bca-header__nav nav.it-menu-content > ul > li {
    flex: 0 0 auto;
}

/* Submenu items stack normally again inside the dropdown. The panel sizes to
   its longest label instead of wrapping it, which is what broke the layout on
   the longer entries. */
.bca-header__nav nav.it-menu-content > ul .submenu,
.bca-header__login nav.it-menu-content > ul .submenu {
    display: block;
    width: max-content;
    min-width: 230px;
    max-width: 340px;
    white-space: normal;
}

.bca-header__nav nav.it-menu-content > ul .submenu li,
.bca-header__login nav.it-menu-content > ul .submenu li {
    display: block;
    width: 100%;
}

.bca-header__nav nav.it-menu-content > ul .submenu li > a,
.bca-header__login nav.it-menu-content > ul .submenu li > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The theme slides a small dash in from the left on submenu hover and shifts
   the label 25px across. Drop both: hover should only change the colour. */
.bca-header__nav nav.it-menu-content > ul .submenu li > a::before,
.bca-header__login nav.it-menu-content > ul .submenu li > a::before {
    content: none !important;
    display: none !important;
}

.bca-header__nav nav.it-menu-content > ul .submenu li > a,
.bca-header__login nav.it-menu-content > ul .submenu li > a {
    padding: 7px 0 !important;
    transition: color 0.3s;
}

.bca-header__nav nav.it-menu-content > ul .submenu li > a:hover,
.bca-header__login nav.it-menu-content > ul .submenu li > a:hover {
    padding-left: 0 !important;
    color: var(--it-theme-1) !important;
}

/* Parent items get a caret. Inline-block so it sits in the text flow and
   cannot nudge the neighbouring items; it inherits the link colour, so it
   turns saffron with the label on hover. */
.bca-header__nav nav.it-menu-content > ul > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 9px;
    vertical-align: 3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

/* Flips while the dropdown is open, which is the one piece of motion that
   reports state rather than decorating. */
.bca-header__nav nav.it-menu-content > ul > li.menu-item-has-children:hover > a::after {
    transform: rotate(-135deg);
    vertical-align: 1px;
}

/* The theme draws a 0.5px border around the label span on hover. Because the
   border does not exist at rest it changes the box size mid-hover, which is
   what makes the items jump. Remove it in both states. */
.bca-header__nav nav.it-menu-content a span,
.bca-header__login nav.it-menu-content a span,
.bca-header__nav nav.it-menu-content li:hover > a span,
.bca-header__login nav.it-menu-content li:hover > a span,
.bca-header__nav nav.it-menu-content .submenu li:hover a span,
.bca-header__login nav.it-menu-content .submenu li:hover a span {
    border: 0 !important;
    outline: 0 !important;
}

/* Breathing room between the dropdown entries. */
.bca-header__nav nav.it-menu-content > ul .submenu li,
.bca-header__login nav.it-menu-content > ul .submenu li {
    margin-bottom: 6px;
}

.bca-header__nav nav.it-menu-content > ul .submenu li:last-child,
.bca-header__login nav.it-menu-content > ul .submenu li:last-child {
    margin-bottom: 0;
}

/* A dropdown near the right edge flips so it never runs off screen. */
.bca-header__nav nav.it-menu-content > ul > li:last-child > .submenu {
    left: auto;
    right: 0;
}

/* ---- Login button -------------------------------------------------------
   The Login menu is rendered through the theme walker, so its anchor is
   skinned to match the theme .ed-btn-theme button: a 58px pill with a 58px
   circular icon badge pinned to the right. Add the --secondary modifier for
   the maroon pill with the saffron circle. */

.bca-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.bca-header__login nav.it-menu-content > ul > li > a {
    display: inline-block;
    position: relative;
    height: 58px;
    line-height: 58px;
    padding: 0 80px 0 25px;
    border-radius: 200px;
    background-color: var(--it-theme-1);
    color: var(--it-common-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    transition: 0.3s;
}

/* The theme outlines menu links on hover; the button should not inherit it. */
.bca-header__login nav.it-menu-content > ul > li > a span {
    border: 0 !important;
}

.bca-header__login nav.it-menu-content > ul > li:hover > a {
    color: var(--it-common-white);
    filter: brightness(0.94);
}

/* Circular icon badge, matching .ed-btn-theme i. */
.bca-header__login nav.it-menu-content > ul > li > a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--it-theme-2);
    transition: 0.3s;
}

/* Chevron drawn with borders, so no icon font or image is needed. */
.bca-header__login nav.it-menu-content > ul > li > a::before {
    content: "";
    position: absolute;
    top: 25px;
    right: 24px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--it-common-white);
    border-bottom: 2px solid var(--it-common-white);
    transform: rotate(45deg);
    transition: 0.3s;
}

.bca-header__login--secondary nav.it-menu-content > ul > li > a {
    background-color: var(--it-theme-2);
}

.bca-header__login--secondary nav.it-menu-content > ul > li > a::after {
    background-color: var(--it-theme-1);
}

/* The dropdown hangs off the right edge so it never overflows the viewport. */
.bca-header__login nav.it-menu-content > ul > li > .submenu {
    right: 0;
    left: auto;
}

/* The theme hides its hamburger above the desktop breakpoint; match that. */
.bca-header__bar {
    display: none;
}

@media (max-width: 1199px) {
    .site-header {
        min-height: 80px;
    }

    .bca-header__nav {
        display: none;
    }

    .bca-header__bar {
        display: block;
    }

    .bca-header__bar .it-menu-bar {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--it-common-black);
        cursor: pointer;
        line-height: 0;
    }
}

@media (max-width: 575px) {
    .bca-header__login nav.it-menu-content > ul > li > a {
        height: 48px;
        line-height: 48px;
        padding: 0 58px 0 18px;
        font-size: 14px;
    }

    .bca-header__login nav.it-menu-content > ul > li > a::after {
        width: 48px;
        height: 48px;
    }

    .bca-header__login nav.it-menu-content > ul > li > a::before {
        top: 20px;
        right: 20px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    position: relative;
    color: #E8DCCF;
    /* The crest watermark below is deliberately hung past the bottom edge;
       clip it here so it cannot add to the page height. */
    overflow: hidden;
}

/* A hairline rather than a gradient bar: the crest below carries the
   personality, so the edge stays quiet. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(232, 220, 207, 0.14);
}

/* The school crest, set large and very low contrast behind the first column.
   It is the school's own mark, so the footer reads as this school's rather
   than a generic dark panel. Decorative only, hidden from assistive tech. */
.site-footer::after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -80px;
    width: 300px;
    height: 300px;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("/kaustav/bca/wp-content/uploads/2026/09/bca-crest.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.site-footer > * {
    position: relative;
    z-index: 1;
}

/* Room to breathe. */
.site-footer {
    padding-top: 88px !important;
}

.site-footer__cols {
    padding-bottom: 24px !important;
}

.site-footer__title {
    position: relative;
    color: #FFFFFF;
    padding-bottom: 16px;
    margin-bottom: 10px;
}

/* Short saffron underline under each column heading. */
.site-footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background-color: var(--it-theme-1);
}

/* Same rule as the header: hover changes colour only, nothing moves. */
.site-footer__list .elementor-icon-list-item,
.site-footer__list .elementor-icon-list-item a,
.site-footer__list .elementor-icon-list-item i,
.site-footer__list .elementor-icon-list-item svg {
    transition: color 0.3s, fill 0.3s;
}

.site-footer__list .elementor-icon-list-item {
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.7;
}

.site-footer__list .elementor-icon-list-item:last-child {
    margin-bottom: 0;
}

.site-footer__list .elementor-icon-list-item:hover a,
.site-footer__list .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: var(--it-theme-1);
}

/* Drop the tick bullets. They carry no meaning next to navigation links and
   the list reads cleaner without them. */
.site-footer__list .elementor-icon-list-icon {
    display: none !important;
}

.site-footer__list .elementor-icon-list-text {
    padding-left: 0 !important;
}

/* Hover: a saffron rule grows under the label. It sits on the text span, not
   the anchor - Elementor stretches the anchor to the full column width, which
   made the rule run far past the word. Drawn on a pseudo-element so nothing
   in the layout moves. */
.site-footer__list .elementor-icon-list-item a {
    display: inline-flex !important;
    width: auto !important;
}

.site-footer__list .elementor-icon-list-text {
    position: relative;
    display: inline-block;
}

.site-footer__list .elementor-icon-list-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--it-theme-1);
    /* Scaled rather than widened: width animation re-runs layout on every
       frame, transform is composited. The rule still ends at the word's
       own width because the element is inline-block. */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.site-footer__list .elementor-icon-list-item:hover .elementor-icon-list-text::after {
    transform: scaleX(1);
}

/* No border or outline appearing on hover, which would resize the box. */
.site-footer__list .elementor-icon-list-item a,
.site-footer__list .elementor-icon-list-item:hover a {
    border: 0 !important;
    outline: 0 !important;
}

.site-footer__social .elementor-social-icon {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid rgba(232, 220, 207, 0.22);
    color: #FFFFFF;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.site-footer__social .elementor-social-icon:hover {
    background-color: var(--it-theme-1);
    border-color: var(--it-theme-1);
}

/* Placeholder box, sized so a calendar embed can drop straight in. */
.site-footer__calendar-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: 18px;
    border: 1px solid rgba(232, 220, 207, 0.18);
    border-radius: 12px;
    background-color: rgba(232, 220, 207, 0.04);
}

.site-footer__calendar-placeholder {
    color: #C9B9A8;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.site-footer__bottom {
    border-top-color: rgba(232, 220, 207, 0.12) !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.site-footer__copyright {
    color: #C9B9A8;
    font-size: 14px;
}

.site-footer__credit {
    color: #E8DCCF;
    transition: color 0.3s;
}

.site-footer__credit:hover {
    color: var(--it-theme-1);
}

/* Motto and founding year under the crest, from the school's own emblem. */
.site-footer__motto,
.site-footer__motto p {
    color: #C9B9A8 !important;
}

.site-footer__motto {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

.site-footer__motto strong {
    display: block;
    margin-bottom: 2px;
    color: #E8DCCF !important;
    font-weight: 500;
}

.site-footer__motto p {
    margin: 0;
}

/* The brand column carries the logo, so give it room. */
.site-footer__logo img {
    width: 240px !important;
    max-width: 100% !important;
    height: auto;
}

.site-footer__col--brand {
    padding-right: 40px;
}

.site-footer__social {
    margin-top: 6px;
}

/* Logo, motto and social icons all sit flush to the column's left edge.
   The social-icons widget centres its grid by default. */
.site-footer__col--brand {
    align-items: flex-start;
    text-align: left;
}

.site-footer__social .elementor-widget-container,
.site-footer__logo .elementor-widget-container,
.site-footer__motto .elementor-widget-container {
    text-align: left;
}

.site-footer__social .elementor-grid,
.site-footer__social .elementor-social-icons-wrapper {
    justify-content: flex-start !important;
    --grid-justify-content: flex-start;
}

/* Five across on desktop, two on tablet, one stacked on mobile.
   The Elementor Container has no width control for a flex child, so the
   column sizing lives here. Gap is zero and the spacing comes from the
   padding on each column, otherwise the fifth column is pushed onto a
   second row. */
.site-footer__cols {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
}

.site-footer__cols > .site-footer__col {
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 30px;
}

@media (max-width: 1024px) {
    .site-footer__cols > .site-footer__col {
        flex-basis: 50%;
        max-width: 50%;
        margin-bottom: 36px;
    }
}

@media (max-width: 767px) {
    .site-footer__cols > .site-footer__col {
        flex-basis: 100%;
        max-width: 100%;
        padding-right: 0;
    }
}

/* --------------------------------------------------------------------------
   Header on a phone
   At 310px the logo ran 150px underneath the Login button on a 390px screen,
   cutting the school's name. On a phone the Login button becomes a round
   person button - the dropdown still opens from it, and its label stays for
   screen readers - which leaves the logo room to show the whole name.
   It runs up to 767px: between 576px and 640px the full-size pills ran the
   language button over the logo.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .site-header__logo img {
        width: auto !important;
        max-width: calc(100vw - 150px) !important;
        max-height: 58px;
    }

    .bca-header__actions {
        gap: 6px;
    }

    .bca-header__login nav.it-menu-content > ul > li > a {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        line-height: 44px;
        background-color: var(--it-theme-1);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2418' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.5-4 4.3-6 7.5-6s6 2 7.5 6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
    }

    /* The label is still read out; it just is not drawn. */
    .bca-header__login nav.it-menu-content > ul > li > a span {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bca-header__login nav.it-menu-content > ul > li > a::after,
    .bca-header__login nav.it-menu-content > ul > li > a::before {
        display: none !important;
    }

    /* The dropdown opens under the round button, kept on screen. */
    .bca-header__login nav.it-menu-content > ul > li > .submenu {
        right: 0;
        left: auto;
        min-width: 210px;
    }

    /* The menu bars are a 24px glyph; the tap area around them is 44px. */
    .bca-header__bar .it-menu-bar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   Language menu in the header: a small round button showing the current
   language, opening to English / বাংলা / हिंदी.
   -------------------------------------------------------------------------- */
.bca-lang-menu {
    position: relative;
}

.bca-lang-menu__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(58, 36, 24, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--it-common-black, #3A2418);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.bca-lang-menu__button::-webkit-details-marker {
    display: none;
}

.bca-lang-menu[open] .bca-lang-menu__button,
.bca-lang-menu__button:hover {
    border-color: var(--it-theme-1);
}

.bca-lang-menu__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    display: grid;
    min-width: 160px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(58, 36, 24, 0.16);
}

.bca-lang-menu:not([open]) .bca-lang-menu__list {
    display: none;
}

.bca-lang-menu__opt {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--it-common-black, #3A2418);
    font-size: 16px;
    font-weight: 600;
}

.bca-lang-menu__opt:hover {
    background: #fdf4e8;
    color: var(--it-theme-2);
}

.bca-lang-menu__opt.is-active {
    color: var(--it-theme-2);
}

/* Google's own banner bar is not wanted; the menu above is the control. */
body > .skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* On a phone, and on the narrower desktops where the centred menu needs the
   room, only the globe shows; the list still names every language. */
@media (max-width: 767px), (min-width: 1200px) and (max-width: 1499px) {
    .bca-lang-menu__current {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .bca-lang-menu__button {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .site-header__logo img {
        max-width: calc(100vw - 192px) !important;
    }
}

/* The theme pulls its menu wrapper 35px left (and pushes it 35px right at
   1200-1399px) and pads each item 10px. On the Login wrapper that ran the
   button 7px over the language button, so the row's own gap decides the
   spacing instead, and the button ends on the header's edge. */
.bca-header__login {
    margin-left: 0 !important;
}

.bca-header__login nav.it-menu-content > ul,
.bca-header__login nav.it-menu-content > ul > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* 1200-1499px: the menu is centred on the header, and at full size (704px)
   it ran into the logo up to about 1450px, and into the buttons at 1200px.
   A smaller logo and tighter items keep it clear of both. */
@media (min-width: 1200px) and (max-width: 1499px) {
    /* 250px at 1200, growing to about 340px by 1499 as the menu's margin widens. */
    .site-header__logo img {
        width: calc(250px + (100vw - 1200px) * 0.3) !important;
    }

    .bca-header__actions {
        gap: 12px;
    }

    .bca-header__nav nav.it-menu-content > ul > li {
        padding: 0 4px;
    }

    .bca-header__nav nav.it-menu-content > ul > li > a {
        font-size: 15px;
    }

    .bca-header__nav nav.it-menu-content > ul > li > a span {
        padding: 4px 8px;
    }
}

@media (max-width: 767px) {
    /* With its label hidden the round button has no text baseline, so as an
       inline-block it sat on the line's baseline and left descender room
       below: the row grew to 55px and the button rode 6px above the globe
       and the menu button. A block has no baseline to sit on; the theme makes
       the list item inline-block as well, so it gets the same treatment. */
    .bca-header__login nav.it-menu-content > ul > li,
    .bca-header__login nav.it-menu-content > ul > li > a {
        display: block;
    }
}

/* Once the header turns sticky on scroll, the builder plugin sizes it wider
   than the screen (507px on a 390px phone). It slides out of view while
   scrolling down, but its width still let the page shift sideways. */
.turbo-header-template.ta-sticky-active {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Phone menu panel
   The menu is written into the panel on the server (template-parts/header/
   header-side-info.php) and opened by assets/mobile-nav.js. Big targets, the
   current page marked, submenus folded, and the two things families come
   for - applying and signing in - at the foot.
   -------------------------------------------------------------------------- */
.itoffcanvas {
    width: min(360px, 88vw) !important;
    max-width: 100vw;
    padding: 28px 24px 40px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html.bca-nav-open,
html.bca-nav-open body {
    overflow: hidden;
}

.itoffcanvas__close-btn .close-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FBEEDC;
    color: #A32826;
    font-size: 20px;
}

.itoffcanvas__logo {
    margin-bottom: 22px !important;
    padding-right: 44px;
}

.itoffcanvas__logo img {
    max-width: 220px;
    height: auto;
}

.bca-mobile-nav {
    margin: 0 0 30px;
}

.bca-mobile-nav__list,
.bca-mobile-nav__list .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bca-mobile-nav__list > li {
    position: relative;
    border-bottom: 1px solid #F0E2CF;
}

.bca-mobile-nav__list > li > a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 6px 48px 6px 2px;
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #3A2418;
    text-decoration: none;
}

.bca-mobile-nav__list > li.current-menu-item > a,
.bca-mobile-nav__list > li.current-menu-ancestor > a {
    color: #B4661A;
}

.bca-mobile-nav__list > li.current-menu-item > a::before {
    content: "";
    width: 4px;
    height: 22px;
    margin-right: 12px;
    border-radius: 4px;
    background: #E08A2E;
}

.bca-mobile-nav__fold {
    position: absolute;
    top: 5px;
    right: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #8A6A4E;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.2s ease;
}

.bca-mobile-nav__fold:hover,
.bca-mobile-nav__fold:focus-visible {
    background: #FBEEDC;
}

.menu-item-has-children.is-open > .bca-mobile-nav__fold {
    transform: rotate(180deg);
    color: #A32826;
}

.bca-mobile-nav__list .sub-menu {
    display: none;
    margin: 0 0 12px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid #F3E2CB;
}

.menu-item-has-children.is-open > .sub-menu {
    display: block;
}

.bca-mobile-nav__list .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 6px;
    font-size: 16px;
    color: #5A4A3E;
    text-decoration: none;
}

.bca-mobile-nav__list .sub-menu .current-menu-item > a {
    color: #B4661A;
    font-weight: 600;
}

.bca-mobile-nav__actions {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.bca-mobile-nav__cta,
.bca-mobile-nav__login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 200px;
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.bca-mobile-nav__cta {
    background: #E08A2E;
    color: #3A2418 !important;
}

.bca-mobile-nav__login {
    border: 2px solid #A32826;
    color: #A32826 !important;
}

.bca-mobile-nav__login--quiet {
    border-color: #E8D3B6;
    color: #5A4A3E !important;
}

/* The contact block under the menu: the address and email used to run past
   the panel's edge. */
.itoffcanvas__info-address a,
.itoffcanvas__info-address span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.itoffcanvas__info .offcanva-title {
    font-size: 20px;
}