/* ==========================================================================
   BOYD METALS — site header
   --------------------------------------------------------------------------
   Rebuild of the old Divi-Child header, ported to plain markup owned by this
   child theme. Every class is namespaced `boyd-` so nothing can collide with
   Divi, Elementor, ElementsKit or plugin CSS.

   Markup: template-parts/boyd-header.php
   Script: assets/js/header.js

   Values were read out of the original Divi setup rather than guessed:
     - Divi-Child/header.php                              markup + grid
     - Simple Custom CSS & JS, post ID 30                 colours, sizes, breakpoints
     - Customize > Additional CSS, post ID 7157           header offsets
     - Divi/css/dynamic-assets/header.css                 search behaviour
     - Divi/includes/builder/.../gutters1.css             the 6-column grid
     - Divi Theme Options                                 menu #ffffff / hover #cccccc,
                                                          Karla 13px uppercase, logo 90px

   The old Divi-selector rules for all of this have been deleted from post 30
   and from assets/css/legacy-divi.css — this file is now the single source.
   ========================================================================== */

:root {
    --boyd-green: #40b93a;
    --boyd-tel: #d17a4f;
    --boyd-dark: #020305;
    --boyd-header-h: 90px;
    --boyd-container: 1300px;
    --boyd-z: 100000;
}

.boyd-container {
    width: 100%;
    max-width: var(--boyd-container);
    margin: 0 auto;
    box-sizing: border-box;
}
.boyd-menu .sub-menu {
    position: absolute; top: 100%; left: 0;
    width: 240px; padding: 20px 0; z-index: 9999;
    background: #fff;
    border-top: 3px solid #40b93a;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    text-align: left;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}
.boyd-menu > li:hover > .sub-menu,
.boyd-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.boyd-menu .sub-menu li { position: relative; line-height: 2em; padding: 0 20px; margin: 0; }

.boyd-menu .sub-menu a {
    display: block; width: 200px; padding: 6px 20px;
    color: #000; font-family: 'Karla', Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 20px; font-weight: 600;
    text-transform: uppercase; text-decoration: none;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.boyd-menu .sub-menu a:hover { background-color: rgba(0,0,0,.03); opacity: .7; }
.boyd-menu .sub-menu li.current-menu-item > a { color: #40b93a; }

.boyd-menu > li.menu-item-has-children > a { position: relative; padding-right: 20px; }
.boyd-menu > li.menu-item-has-children > a:after {
    content: "\f107"; font-family: FontAwesome; font-size: 16px; font-weight: 800;
    position: absolute; right: -12; top: 50%; transform: translateY(-50%);
}


/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */

.boyd-header-area {
    position: relative;
    z-index: var(--boyd-z);
    width: 100%;
}


/* Overlay mode reproduces Divi: the header floats on top of the hero instead
   of pushing it down. Turn it off with the boyd_header_overlay filter. */

.boyd-header-area--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.boyd-header-area * {
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Button reset — IMPORTANT, do not remove.

   The parent theme's reset.css styles every bare <button> like a form button:

       [type=button],[type=submit],button        { border:1px solid #c36;
                                                    border-radius:3px; color:#c36;
                                                    padding:.5rem 1rem }
       button:focus, button:hover                { background-color:#c36;
                                                    color:#fff }

   #c36 is a pink. Its :hover rule has specificity (0,1,1), which beats a plain
   `.boyd-search-icon` (0,1,0) — so the search icon, hamburger, phone toggle and
   search close button all flashed pink on hover, and picked up a 3px radius.

   Everything below is therefore scoped with `.boyd-header-area ` to reach
   (0,2,0) and win outright, rather than relying on stylesheet order.
   -------------------------------------------------------------------------- */

.boyd-header-area button {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: inherit;
    white-space: normal;
    transition: none;
}

.boyd-header-area button:hover,
.boyd-header-area button:focus {
    background: transparent;
    color: inherit;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Top bar — was #top-header / .cus-top-header

   Divi built this as a six-column row (.et_pb_row_6col.et_pb_gutters1) with
   the first column deliberately left empty. Gutters were off, so each column
   is exactly 16.6667% and they butt up against each other. Five columns are
   used, which leaves the sixth (16.6667%) empty on the right — that is the
   layout, NOT a flush right alignment.
   -------------------------------------------------------------------------- */

.boyd-topbar {
    background: transparent;
    font-size: 12px;
    line-height: 1em;
    position: relative;
    z-index: 2;
    /* keeps the mobile phone dropdown above .boyd-header */
}

.boyd-topbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 20px 0;
}

.boyd-topbar__col {
    width: 16.6667%;
    flex: 0 0 16.6667%;
    margin: 0;
}

.boyd-topbar__blurb {
    display: flex;
}

.boyd-topbar__icon {
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.boyd-topbar__icon i {
    font-size: 30px;
    color: var(--boyd-green);
    line-height: 1;
}

.boyd-topbar__content {
    color: #ffffff;
}

.boyd-topbar__content h4 {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.boyd-topbar__content p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.boyd-topbar__content a {
    color: var(--boyd-tel);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.boyd-topbar__content a:hover,
.boyd-topbar__content a:focus {
    color: var(--boyd-green);
}


/* Mobile trigger — was label.top-label + the #cus-top-menu-toggle checkbox */

.boyd-topbar__mobile {
    display: none;
    text-align: right;
    position: relative;
}

.boyd-header-area .boyd-topbar__toggle {
    background-color: var(--boyd-green);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 30px;
    line-height: 45px;
    padding: 0 8px;
}


/* In normal flow, exactly like Divi's #cus-top-menu — opening it pushes the
   main header down rather than floating over it. */

.boyd-topbar__dropdown {
    display: none;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    background-color: var(--boyd-dark);
    width: 100%;
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;
}

.boyd-topbar__dropdown.is-open {
    display: block;
}

.boyd-topbar__dropdown li {
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid #cccccc;
}

.boyd-topbar__dropdown li:last-child {
    border-bottom: 0;
}

.boyd-topbar__dropdown a {
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: left;
}

.boyd-topbar__dropdown h4 {
    font-size: 15px !important;
    text-align: left !important;
}

.boyd-topbar__dropdown p {
    font-size: 16px !important;
    text-align: left !important;
    color: var(--boyd-tel);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Main header — was header#main-header
   -------------------------------------------------------------------------- */

.boyd-header {
    background: transparent;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

.boyd-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--boyd-header-h);
    position: relative;
    /* anchor for the search overlay */
}

.boyd-header__logo {
    flex: 0 0 auto;
    line-height: 0;
    position: relative;
    top: -10px;
    transition: top 0.3s ease;
}

.boyd-header__logo img {
    display: block;
    max-height: var(--boyd-header-h);
    width: auto;
    height: 60px;
}

.boyd-header__logo img {
    width: auto;
    max-height: none;
    max-width: none;
    transition: height 0.4s ease-in-out;
}

.boyd-header-area.is-stuck .boyd-header__logo img {
    height: var(--boyd-logo-h);
}
/* Was #et-top-navigation { padding-top: 20px } */

.boyd-header__nav-area {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}


/* --------------------------------------------------------------------------
   Primary menu — was #top-menu
   -------------------------------------------------------------------------- */

.boyd-header-area .boyd-menu,
.boyd-header-area .boyd-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.boyd-header-area .boyd-menu {
    display: flex;
    align-items: center;
}

.boyd-header-area .boyd-menu>li {
    position: relative;
    padding-right: 34px;
}

.boyd-header-area .boyd-menu>li>a {
    display: block;
    color: #ffffff;
    font-family: 'Karla', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.boyd-header-area .boyd-menu>li>a:hover,
.boyd-header-area .boyd-menu>li>a:focus,
.boyd-header-area .boyd-menu>li.current-menu-item>a,
.boyd-header-area .boyd-menu>li.current-menu-ancestor>a {
    color: #cccccc;
}
.boyd-menu .sub-menu li a{
    font-weight: 400;
}
ul.sub-menu {
    margin-top: 22px;
}
.boyd-topbar__content {
    font-family: 'Karla';
}



/* Dropdowns */

.boyd-header-area .boyd-menu .sub-menu {
    position: absolute;
    top: 50px;
    left: 0;
    min-width: 240px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.boyd-header-area .boyd-menu>li:hover>.sub-menu,
.boyd-header-area .boyd-menu>li:focus-within>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boyd-header-area .boyd-menu .sub-menu a {
    display: block;
    color: #000000;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 0px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.boyd-header-area .boyd-menu .sub-menu a:hover,
.boyd-header-area .boyd-menu .sub-menu a:focus,
.boyd-header-area .boyd-menu .sub-menu li.current-menu-item>a {
    color: var(--boyd-green);
}

.boyd-header-area .boyd-menu__expander {
    display: none;
}


/* --------------------------------------------------------------------------
Search — was #et_top_search / .et_search_outer / .et-search-form

   Divi's behaviour,
reproduced: the magnifier is a small icon in the nav row.
   Clicking it fades the menu DOWN and out,
and fades a half-width search field
   IN from above,
laid over the same header row,
with a close X on the right.
   It is not a dropdown panel underneath the header.
   -------------------------------------------------------------------------- */

.boyd-header-area .boyd-search-icon {
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    margin: 0 0 0 22px;
    padding: 0;
    width: 18px;
    transition: opacity 0.3s ease;
}

.boyd-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.boyd-header__inner.is-search-open .boyd-search-overlay {
    opacity: 1;
    visibility: visible;
    z-index: 999;
    animation: boydFadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}


/* Menu + icon fade out, the way .et_pb_menu_hidden did */

.boyd-header__inner.is-search-open .boyd-nav,
.boyd-header__inner.is-search-open .boyd-search-icon,
.boyd-header__inner.is-search-open .boyd-header__burger {
    opacity: 0;
    pointer-events: none;
    animation: boydFadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

.boyd-header-area .boyd-search-form {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    width: 50%;
    max-width: 50%;
    background: transparent !important;
}

.boyd-header-area .boyd-search-field {
    width: 90%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-size: 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    margin: auto;
    height: 40px;
    background: transparent;
}

.boyd-header-area .boyd-search-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.boyd-header-area .boyd-search-field:focus {
    outline: none;
    border-bottom-color: var(--boyd-green);
}

.boyd-header-area .boyd-search-close {
    display: block;
    width: 30px;
    height: 30px;
    z-index: 99999;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 0;
}

@keyframes boydFadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-60%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes boydFadeOutBottom {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(60%);
    }
}

@keyframes boydFadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(60%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --------------------------------------------------------------------------
   Hamburger — was .mobile_menu_bar
   -------------------------------------------------------------------------- */

.boyd-header-area .boyd-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    padding: 8px 7px;
    margin-left: 16px;
}

.boyd-header-area .boyd-header__burger span[aria-hidden] {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
}


/* --------------------------------------------------------------------------
   Stuck state — was .et-fixed-header
   Divi hid the top bar on scroll and turned the main header solid green.
   -------------------------------------------------------------------------- */

.boyd-header-area.is-stuck .boyd-topbar {
    display: none;
}

.boyd-header-area.is-stuck .boyd-header {
    background: var(--boyd-green);
}

.boyd-header-area.is-stuck .boyd-header__logo {
    top: 0;
}

.boyd-topbar__inner {
    background: #40b93a;
}

.boyd-header-area.is-stuck .boyd-menu>li.current-menu-item>a,
.boyd-header-area.is-stuck .boyd-menu>li.current-menu-ancestor>a {
    color: #ffffff;
    opacity: 0.8;
}

.boyd-header-area.is-stuck .boyd-menu .sub-menu li.current-menu-item>a {
    color: var(--boyd-green);
    opacity: 1;
}

.boyd-topbar__inner {
    background: #40b93a;
}

.boyd-header__logo {
    flex: 0 0 auto;
    line-height: 0;
}
.boyd-header-area.is-stuck {
    --boyd-header-h: 62px;
    --boyd-logo-h: 48px;
}

.boyd-header__inner {
    min-height: var(--boyd-header-h);
    transition: min-height 0.4s ease-in-out;   /* Divi ka 0.4s ease-in-out */
}

.boyd-header__logo img {
    width: auto;
    max-height: none;
    max-width: none;
    transition: height 0.4s ease-in-out;
}
body.admin-bar .boyd-header-area--overlay { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .boyd-header-area--overlay { top: 46px; }
}

@media screen and (max-width: 600px) {   /* yahan WP ka bar fixed nahi rehta */
    body.admin-bar .boyd-header-area--overlay { top: 0; }
}
/* --------------------------------------------------------------------------
   1024–1365px — spacer column drops, blurbs go 20% each (from post 30)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1365px) {
    .boyd-topbar__col--spacer {
        display: none;
    }
    .boyd-topbar__col {
        width: 20%;
        flex: 0 0 20%;
    }
    .boyd-topbar__content h4 {
        font-size: 11px !important;
    }
    .boyd-topbar__content a {
        font-size: 13px !important;
    }
    .boyd-topbar__icon i {
        font-size: 26px !important;
    }
    .boyd-header__logo img {
        max-height: 60px;
    }
    .boyd-header-area .boyd-menu>li {
        padding-right: 10px;
    }
    .boyd-header-area .boyd-menu>li>a {
        font-size: 12px;
    }
}


/* --------------------------------------------------------------------------
   <= 1023px — the whole desktop row is replaced by the phone icon,
   exactly as post 30 did with div#top-header .container.clearfix
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .boyd-topbar__row {
        display: none;
    }
    .boyd-topbar__mobile {
        display: block;
    }
    .boyd-topbar__inner {
        padding: 10px 20px;
    }
    .boyd-header__logo img {
        max-height: 70px;
    }
    .boyd-header-area .boyd-search-form {
        width: 70%;
        max-width: 70%;
    }
}


/* --------------------------------------------------------------------------
   <= 980px — Divi's mobile-menu breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .boyd-header-area .boyd-header__burger {
        display: flex;
        order: 2;
    }
    .boyd-header-area .boyd-search-icon {
        order: 1;
    }
    .boyd-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background: #ffffff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        max-height: calc(100vh - var(--boyd-header-h));
        overflow-y: auto;
    }
    .boyd-nav.is-open {
        display: block;
    }
    .boyd-header-area .boyd-menu {
        display: block;
        padding: 5%;
    }
    .boyd-header-area .boyd-menu>li {
        padding-right: 0;
    }
    .boyd-header-area .boyd-menu>li>a,
    .boyd-header-area .boyd-menu .sub-menu a {
        color: #030406;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 10px 5%;
    }
    .boyd-header-area .boyd-menu>li>a:hover,
    .boyd-header-area .boyd-menu>li.current-menu-item>a,
    .boyd-header-area .boyd-menu>li.current-menu-ancestor>a {
        color: var(--boyd-green);
    }
    /* Submenus become accordions */
    .boyd-header-area .boyd-menu .sub-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        min-width: 0;
        padding: 0 0 0 5%;
        transition: none;
    }
    .boyd-header-area .boyd-menu>li:hover>.sub-menu,
    .boyd-header-area .boyd-menu>li:focus-within>.sub-menu {
        display: none;
    }
    .boyd-header-area .boyd-menu>li.is-expanded>.sub-menu {
        display: block;
    }
    .boyd-header-area .boyd-menu>li.menu-item-has-children {
        position: relative;
    }
    .boyd-header-area .boyd-menu__expander {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 0;
        color: #030406;
        cursor: pointer;
        font-size: 18px;
        line-height: 44px;
    }
    .boyd-header-area .boyd-menu>li.is-expanded>.boyd-menu__expander {
        transform: rotate(180deg);
    }
}


/* --------------------------------------------------------------------------
   <= 767px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .boyd-header__logo img {
        max-height: 52px;
    }
    .boyd-header__logo {
        top: 0;
    }
    .boyd-container {
        padding: 0 15px;
    }
    .boyd-header-area .boyd-search-form {
        width: 100%;
        max-width: 100%;
    }
    .boyd-header-area .boyd-search-field {
        width: 85%;
    }
}


/* --------------------------------------------------------------------------
   Accessibility helper (parent theme also defines this; harmless duplicate)
   -------------------------------------------------------------------------- */

.boyd-header-area .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   Button hover/focus — colour only.

   Deliberately separate from the rules above: those carry layout (display,
   width, order), and repeating them under :hover/:focus would push them to
   specificity (0,3,0) and override the media queries — which made the
   hamburger disappear the moment it was hovered or focused.

   These selectors are (0,3,0) too, but they set nothing but paint, so they
   cannot affect layout.
   -------------------------------------------------------------------------- */

.boyd-header-area .boyd-topbar__toggle:hover,
.boyd-header-area .boyd-topbar__toggle:focus {
    background-color: var(--boyd-green);
    color: #ffffff;
}

.boyd-header-area .boyd-search-icon:hover,
.boyd-header-area .boyd-search-icon:focus,
.boyd-header-area .boyd-search-close:hover,
.boyd-header-area .boyd-search-close:focus,
.boyd-header-area .boyd-header__burger:hover,
.boyd-header-area .boyd-header__burger:focus,
.boyd-header-area .boyd-menu__expander:hover,
.boyd-header-area .boyd-menu__expander:focus {
    background: transparent;
    color: #ffffff;
}

.boyd-header-area .boyd-menu__expander:hover,
.boyd-header-area .boyd-menu__expander:focus {
    color: #030406;
}