/**
 * Sidhan Group Header Stylesheet
 * File: assets/css/sg-header.css
 *
 * Enqueue in functions.php:
 * wp_enqueue_style('sg-header', get_stylesheet_directory_uri() . '/assets/css/sg-header.css', [], '1.0.0');
 */
/* 
   0. DESIGN TOKENS
    */
:root {
    /* Brand colors */
    --sg-primary: #0C457D;
    --sg-secondary: #222222;
    --sg-text: #888888;
    --sg-accent: #00F063;
    --sg-blue-light: #0093E2;
    --sg-cream: #F6F4F0;
    --sg-white: #FFFFFF;
    /* Header */
    --sg-header-height: 120px;
    /* initial tall height */
    --sg-header-height-sticky: 80px;
    /* reduced height when sticky */
    --sg-header-bg: #FFFFFF;
    --sg-header-border: rgba(12, 69, 125, 0.10);
    --sg-header-shadow: 0 2px 24px rgba(12, 69, 125, 0.06);
    /* Full menu */
    --sg-fullmenu-bg: #0C457D;
    /* rich navy as seen in design */
    /* Panels */
    --sg-panel-dark-bg: #0C457D;
    --sg-panel-light-bg: #FFFFFF;
    --sg-panel-width: 480px;
    /* Typography */
    --sg-font-display: "Playfair Display", Georgia, serif;
    --sg-font-body: "Inter", -apple-system, sans-serif;
    /* Easing */
    --sg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sg-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
}

/* 
   1. RESET / BASE
    */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 
   2. HEADER BAR
    */
.sg-header {
    /* Starts as a normal in-flow element no fixed/sticky yet.
     JS adds .is-sticky on reverse-scroll, which switches to fixed. */
    position: relative;
    z-index: 1000;
    background: var(--sg-header-bg);
    /* NOTE: no transform transition here GSAP owns translateY during
     sticky slide-in/out. Adding a CSS transition would conflict. */
    transition: background 0.3s var(--sg-ease-out), box-shadow 0.3s var(--sg-ease-out);
}

/* Sticky state activated only on reverse scroll (JS adds class) */
.sg-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	box-shadow: 0px 20px 32px rgba(0, 0, 0, .15);
    /* Height collapses to 80px when sticky bar height transition handles this */
}

/* Dark header variant only logo differs, everything else unchanged */
/*
   Solid primary-blue background (matches the design exactly).
   Only the logo src and these colour overrides differ from light.
   Menu structure, layout, CTA, functionality all unchanged.
 */
.sg-header--dark {
    background: var(--sg-primary);
    /* solid #0C457D */
    border-bottom-color: rgba(255,255,255,0.10);
}

.sg-header--dark .sg-header__divider {
    background: rgba(255,255,255,0.22);
}

/* Nav links white on dark background */
.sg-header--dark .sg-nav__link {
    color: rgba(255,255,255,0.90);
}

.sg-header--dark .sg-nav__link:hover {
    color: var(--sg-accent);
}

.sg-header--dark .sg-nav__trigger[aria-expanded="true"] {
    color: var(--sg-accent);
}

/* Dot-grid trigger white dots on dark */
.sg-header--dark .sg-menu-trigger {
    color: rgba(255,255,255,0.90);
}

/* CTA button unchanged (green on both variants, per designs) */
.sg-header--dark .sg-btn-cta {
    background: var(--sg-accent) !important;
    color: var(--sg-primary) !important;
}

/* Dark header nav link colours */
.sg-header__bar {
    display: flex;
    align-items: center;
    height: var(--sg-header-height);
    /* 120px initially */
    padding: 0;
    gap: 0;
    max-width: 1200px;
    /* desktop max-width */
    margin: 0 auto;
    width: 100%;
    transition: height 0.35s var(--sg-ease-out);
}

/* When sticky, shrink to 80px */
.sg-header.is-sticky .sg-header__bar {
    height: var(--sg-header-height-sticky);
}

/* */
.sg-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: 28px;
}

.sg-header__logo img, .sg-header__logo .custom-logo, .sg-logo-svg {
    height: 40px;
    /* matches designs logo sits comfortably in both 120px and 80px bar */
    width: auto;
    display: block;
    transition: height 0.35s var(--sg-ease-out);
}

/* Shrink logo slightly when sticky */
.sg-header.is-sticky .sg-header__logo img, .sg-header.is-sticky .sg-header__logo .custom-logo {
    height: 40px;
}

/* Fallback text logo when no custom logo is set in Customizer */
.sg-header__logo-text {
    font-family: var(--sg-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--sg-primary);
    letter-spacing: 0.04em;
}

/* Admin-only "no menu assigned" notice */
.sg-nav__empty-notice {
    font-family: var(--sg-font-body);
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 8px 14px;
    border-radius: 4px;
    margin: 0;
}

.sg-nav__empty-notice a {
    color: var(--sg-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* */
.sg-header__divider {
    display: block;
    width: 1px;
    height: 28px;
    background: rgba(12, 69, 125, 0.18);
    flex-shrink: 0;
    margin-right: 20px;
}

/* */
.sg-header__nav {
    flex: 1;
    height: 100%;
}

.sg-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.sg-nav__item {
    position: relative;
    height: 100%;
    display: inline-flex;
}

.sg-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px;
    font-family: var(--sg-font-body) !important;
    font-size: 16px !important;
    font-weight: 400;
    color: var(--sg-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0;
    transition: color 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0;
}

.sg-nav__link:hover, .sg-nav__item.is-active > .sg-nav__link {
    color: var(--sg-accent);
}

.sg-nav__chevron {
    display: block;
    flex-shrink: 0;
    transition: transform 0.3s var(--sg-ease-out);
}

.sg-nav__trigger[aria-expanded="true"] .sg-nav__chevron {
    transform: rotate(180deg);
}

.sg-nav__trigger[aria-expanded="true"] {
    color: var(--sg-accent);
}

/* */
.sg-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
	margin-right: -10px;
}

/* */
.sg-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px !important;
    background: var(--sg-accent) !important;
    color: var(--sg-primary) !important;
    font-family: var(--sg-font-body) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-decoration: none;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
    white-space: nowrap !important;
    letter-spacing: .75px;
}

.sg-btn-cta:hover {
    background: #00d455 !important;
    transform: translateY(-1px);
}

.sg-btn-cta svg {
    transition: transform 0.2s ease;
}

.sg-btn-cta:hover svg {
    transform: translateX(3px);
}

.sg-btn-cta-blue{
	 background: var(--sg-blue-light) !important;
    color: var(--sg-white) !important;
}

.sg-btn-cta-blue:hover {
    background: #0588cf !important;
}

/* */
.sg-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 0px;
    color: var(--sg-primary);
    position: relative;
    transition: color 0.2s ease;
}

.sg-menu-trigger:hover {
    color: var(--sg-accent);
    background: none;
}

.sg-menu-trigger:focus {
    background: none;
	color: var(--sg-primary);
}
.sg-header--dark .sg-menu-trigger:focus{
	color: rgba(255,255,255,0.90);
}

.sg-dots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 20px;
    height: 20px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sg-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.sg-dots-close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: rotate(-45deg) scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s var(--sg-ease-out);
    pointer-events: none;
}

/* When full menu is open, swap grid */
.sg-menu-trigger.is-open .sg-dots-grid {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
}

.sg-menu-trigger.is-open .sg-dots-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    pointer-events: auto;
}

/* 
   3. INLINE MEGA DROPDOWN
   Fix 6: The mega panel uses padding-top to extend its hit area
   flush against the header bar no visible gap, cursor never
   leaves a hoverable element when moving from nav link to mega.
   The border-top acts as the visual separator; the padding above
   it is transparent but captures mouse events.
    */
.sg-inline-mega {
    position: fixed;
    top: var(--sg-header-height);
    left: 0;
    right: 0;
    width: 100%;
    /* Extend hit-area upward by 12px invisible bridge fills any
     gap between the nav trigger and the visible panel content.
     The visible panel starts at the border-top line. */
    padding-top: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
}

.sg-inline-mega[hidden] {
    display: block !important;
}

/* Light theme (default no .sg-header--dark) */
.sg-inline-mega__panel {
    background: var(--sg-white);
    box-shadow: 0 8px 8px rgba(12, 69, 125, 0.10);
}

.sg-inline-mega__inner {
    padding: 16px 0px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.sg-inline-mega__label {
    display: block;
    font-family: var(--sg-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: var(--sg-accent);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sg-inline-mega__divider {
    height: 1px;
    background: var(--sg-accent);
    margin-bottom: 24px;
    width: 100%;
}

.sg-inline-mega__items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Light: dark text on white */
.sg-inline-mega__items a {
    font-family: var(--sg-font-body);
    font-size: 14px;
    color: var(--sg-text);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.sg-inline-mega__items a:hover {
    color: var(--sg-primary);
}

/* applied when header carries .sg-header--dark
   Selector targets .sg-inline-mega that follows (sibling of) the
   dark header via the JS-added data attribute, since the mega is
   a sibling of <header> in the DOM, not a descendant. JS adds
   data-theme="dark" on the mega panels when the header is dark. */
.sg-inline-mega[data-theme="dark"] .sg-inline-mega__panel {
    background: var(--sg-primary);
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}

.sg-inline-mega[data-theme="dark"] .sg-inline-mega__divider {
    background: var(--sg-accent);
}

.sg-inline-mega[data-theme="dark"] .sg-inline-mega__items a {
    color: rgba(255,255,255,0.85);
}

.sg-inline-mega[data-theme="dark"] .sg-inline-mega__items a:hover {
    color: var(--sg-accent);
}

/* Remove the old sibling selector that relied on DOM adjacency */
/* 
   4. FULL MENU OVERLAY
    */
.sg-fullmenu {
    position: fixed;
    inset: 0;
    /*background: var(--sg-white);*/
    /* colour lives on individual columns */
    z-index: 1100;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.sg-fullmenu:not([hidden]) {
    pointer-events: auto;
}

.sg-fullmenu__close {
    position: fixed;
    /* above columns, always visible */
    top: 28px;
    right: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sg-white);
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 1110;
    padding: 0;
}

.sg-fullmenu__close:hover,.sg-fullmenu__close:focus {
    color: var(--sg-accent) !important;
    background: none;
}

.sg-fullmenu__inner {
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: stretch;
    /* columns fill the full viewport height */
    padding: 0;
}

.sg-fullmenu__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    width: 100%;
    flex: 1;
}

/* The first (widest) mega column gets slightly more room when present */
.sg-fullmenu__grid > .sg-fullmenu__col:first-child {
    grid-column: span 1;
    flex-basis: 1fr;
}

/* Column each carries its own background at a stepped opacity */
.sg-fullmenu__col {
    display: flex;
    flex-direction: column;
    padding: 120px 40px 60px;
    /* top padding clears the fixed close button */
}

.sg-fullmenu__col[data-col="0"] {
    background: #46719C;
}

.sg-fullmenu__col[data-col="1"] {
    background: #336392;
}

.sg-fullmenu__col[data-col="2"] {
    background: #1F5487;
}

.sg-fullmenu__col[data-col="3"] {
    background: #0C457D;
}

.sg-fullmenu__col-title {
    display: block;
    /* span needs display:block to behave like block heading */
    font-family: var(--sg-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: var(--sg-accent);
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1;
}

.sg-fullmenu__col-title--mt {
    margin-top: 74px;
}

.sg-fullmenu__col-rule,.sg-fullmenu__social-rule {
    margin-bottom: 34px;
    width: 100%;
    max-width: 150px;
    border-bottom: 1px solid var(--sg-accent);
}

.sg-fullmenu__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sg-fullmenu__links li + li {
    margin-top: 4px;
}

.sg-fullmenu__links a {
    display: block;
    font-family: var(--sg-font-body) !important;
    font-size: 16px !important;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, transform 0.35s ease;
    line-height: 1.5;
}

.sg-fullmenu__links a:hover {
    color: var(--sg-white);
    transform: translatex(4px) !important;
}

.sg-fullmenu__links--sub {
    margin-top: 6px;
}

.sg-fullmenu__links--sub a {
    font-size: 14px !important;
    padding-left: 14px;
    position: relative;
    color: rgba(255,255,255,0.6);
}

.sg-fullmenu__links--sub a::before {
    content: '-';
    position: absolute;
    left: 4px;
    color: var(--sg-accent);
    font-size: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.sg-fullmenu__links--sub a:hover {
    color: rgba(255,255,255,0.9);
}

.sg-fullmenu__sub-heading {
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    margin: 20px 0 8px;
}

/* Utility Column */
.sg-fullmenu__col--utility {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Search */
.sg-fullmenu__search-wrapper{
	display:flex;
	flex-direction:column;
	gap:40px;
}
.sg-fullmenu__search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0;
    padding: 2px 16px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sg-fullmenu__search-wrap:focus-within {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.10);
}

.sg-fullmenu__search-wrap input {
    flex: 1;
    background: none;
    border: none !important;
    outline: none;
    font-family: var(--sg-font-body);
    font-size: 16px;
    color: var(--sg-white);
    min-width: 0;
}

.sg-fullmenu__search-wrap input::placeholder {
    color: rgba(255,255,255,0.4);
}

/* Contact / Enquiry links in full menu */
.sg-fullmenu__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sg-font-body);
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.sg-fullmenu__contact-link:hover {
    color: var(--sg-accent);
}

.sg-fullmenu__contact-link svg {
    transition: transform 0.2s ease;
}

.sg-fullmenu__contact-link:hover svg {
    transform: translateX(4px);
}

/* Social block */
.sg-fullmenu__social-block {
    margin-top: 0px;
}

.sg-fullmenu__social-label {
    font-family: var(--sg-font-body);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--sg-accent);
    text-transform: uppercase;
    margin: 0 0 16px;
    display: block;
}

.sg-fullmenu__social-icons {
    display: flex;
    gap: 4px;
    margin-top: 0;
}

.sg-fullmenu__social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: auto;
    border-radius: 0;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sg-fullmenu__social-icons a:hover {
    color: var(--sg-accent);
}

/* 5. SIDE PANELS */
.sg-side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sg-panel-width);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* GSAP animates translateX */
    transform: translateX(100%);
    pointer-events: none;
}

.sg-side-panel:not([hidden]) {
    pointer-events: auto;
}

.sg-side-panel--dark {
    background: var(--sg-panel-dark-bg);
    color: var(--sg-white);
}

.sg-side-panel--light {
    background: var(--sg-panel-light-bg);
    color: var(--sg-secondary);
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.12);
}

.sg-side-panel__close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 10;
	color:var(--sg-secondary);
}

.sg-side-panel--dark .sg-side-panel__close {
    color: rgba(255,255,255,0.7);
}

.sg-side-panel--dark .sg-side-panel__close:focus,
.sg-side-panel--light .sg-side-panel__close:focus{
    background: none;
}

.sg-side-panel--light .sg-side-panel__close:focus{
	color:var(--sg-secondary);
}

.sg-side-panel--dark .sg-side-panel__close:hover,
.sg-side-panel--light .sg-side-panel__close:hover{
    background: none;
    color: var(--sg-accent);
}

.sg-side-panel__content {
    padding: 80px 40px 80px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

/* Contact Panel Groups */
.sg-side-panel__group {
    margin-bottom: 40px;
}

.sg-side-panel__group-title {
    font-family: var(--sg-font-body);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: var(--sg-accent);
    text-transform: uppercase;
    margin: 0 0 16px;
    display: block;
}

.sg-side-panel__rule {
    margin-bottom: 24px;
    width: 100%;
    max-width: 150px;
    border-bottom: 1px solid var(--sg-accent);
}

.sg-side-panel--dark .sg-side-panel__group p {
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.5;
}

.sg-side-panel--dark .sg-side-panel__group a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sg-side-panel--dark .sg-side-panel__group a:hover {
    color: var(--sg-accent);
}

.sg-side-panel__social {
    display: flex;
    gap: 4px;
    margin-top: 0;
}

.sg-side-panel__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: auto;
    border-radius: 0;
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.sg-side-panel__social a:hover {
    color: var(--sg-accent) !important;
}

.sg-side-panel__cta {
    margin-top: 40px;
    align-self: flex-start;
}

/* */
.sg-enquiry__title {
    display: block;
    font-family: var(--sg-font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--sg-primary);
    margin: 0 0 16px;
    line-height: 1.35;
}

.sg-enquiry__subtitle {
    font-family: var(--sg-font-body);
    font-size: 16px;
    color: var(--sg-text);
    margin: 0 0 80px;
}

.sg-enquiry__form {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.sg-form__group {
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
}

.sg-form__group label {
    font-family: var(--sg-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--sg-text);
    margin-bottom: 8px;
}

.sg-form__group input, .sg-form__group textarea {
    font-family: var(--sg-font-body);
    font-size: 16px;
    color: var(--sg-secondary);
    border: none !important;
    border-bottom: 1px solid rgba(136,136,136,0.4) !important;
    padding: 12px 0 !important;
    background: transparent;
    outline: none;
    transition: border-color 0.25s ease !important;
    resize: none;
    border-radius: 0 !important;
    font-weight: 400;
}

.sg-form__group input::placeholder, .sg-form__group textarea::placeholder {
    color: rgba(34,34,34,0.35);
}

.sg-form__group input:focus, .sg-form__group textarea:focus {
    border-bottom-color: var(--sg-primary) !important;
}

.sg-form__group textarea {
    min-height: 80px;
}

.sg-form__status {
    padding: 10px 0;
    font-family: var(--sg-font-body);
    font-size: 13px;
    font-weight: 500;
}

.sg-form__status.is-success {
    color: #0a7a3d;
}

.sg-form__status.is-error {
    color: #b91c1c;
}

.sg-enquiry__submit {
    align-self: flex-start;
    display: flex !important;
}

/*
   6. OVERLAY BACKDROP
    */
.sg-header-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sg-header-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

body:not(.elementor-editor-active) .sg-header__logo,
body:not(.elementor-editor-active) .sg-header__nav .sg-nav__item,
body:not(.elementor-editor-active) .sg-header__actions,
body:not(.elementor-editor-active) .sg-header__divider{
	opacity: 0;
}

/* 
   7. RESPONSIVE HEADER + FULL MENU
    */
/* Below 1280px: hide primary nav only; CTA remains visible */
@media (max-width: 1280px) {
    #sg-primary-nav {
        display: none;
    }

    .sg-header__divider {
        display: none;
    }

    .sg-header__bar {
        max-width: 90%;
    }
}

/* Below 576px: hide CTA too; only logo + menu trigger remain */
@media (max-width: 576px) {
    #sg-cta-apply {
        display: none;
    }
}

/* Full-screen menu responsive grid 
   Desktop  (> 1280px)  : 4 columns 1 row
   Tablet 1280px)  : 2 columns 2 rows
   Mobile 767px)   : 1 column 4 rows
*/
@media (max-width: 1280px) {
    .sg-fullmenu__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sg-fullmenu__grid > .sg-fullmenu__col:first-child {
        flex-basis: auto;
    }

    .sg-fullmenu__col {
        padding: 80px 60px 80px;
    }
}

@media (max-width: 1024px) {
    .sg-fullmenu__col {
        padding: 60px 40px 60px;
    }
}

@media (max-width: 767px) {
    .sg-fullmenu__grid {
        grid-template-columns: 1fr;
    }
	.sg-header__bar {
        max-width: 88%;
    }
}

/* Side panels full width on small screens */
@media (max-width: 576px) {
    .sg-side-panel {
        width: 100%;
    }
	
	.sg-fullmenu__col {
        padding: 60px 24px 60px;
    }

    .sg-side-panel__content {
        padding: 60px 24px 60px;
    }
}

/* 
   8. BODY OFFSET
   The header is now relative (in document flow) so no padding-top
   is needed in normal state. When .is-sticky is added by JS the
   header becomes fixed; JS simultaneously adds padding-top to
   <body> equal to the sticky height to prevent layout jump.
    */
body.sg-has-sticky-header {
    padding-top: var(--sg-header-height-sticky);
}

/* 
   9. FOCUS STYLES (accessibility)
    */
.sg-nav__link:focus-visible, .sg-btn-cta:focus-visible, .sg-menu-trigger:focus-visible, .sg-fullmenu__close:focus-visible, .sg-side-panel__close:focus-visible, .sg-fullmenu__links a:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}
.sg-enquiry__form input:focus-visible, .sg-enquiry__form textarea:focus-visible{
	border-color:var(--sg-primary);
}
/* 
   10. REDUCED MOTION
    */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* 
   11. PRINT
    */
@media print {
    .sg-header, .sg-fullmenu, .sg-side-panel, .sg-header-overlay {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }
}