/* ============================================================
   PlusHeat header and mobile menu (Figma "Desktop-11").
   Uses theme CSS variables from root.css + Rubik.
   .site-logo is also used by the footer; footer.css loads after this.
   ============================================================ */

.site-header,
.site-mobile-menu{
    font-family:var(--font-primary);
}
.site-header .container-lg{
    max-width: 100%;
}
.site-header *,.site-mobile-menu *{box-sizing:border-box}
.site-header a,.site-mobile-menu a{text-decoration:none}

/* Header, mobile menu and footer always use the PlusHeat palette, so brand pages
   (e.g. Heatable, whose heatable-root.css makes --color-primary green) don't recolour
   their links, hovers or icons. Values match root.css. */
.site-header,
.site-mobile-menu,
.site-footer {
    --color-primary: #F27B05;
    --color-primary-rgb: 242, 123, 5;
    --color-primary-dark: #ED5E05;
    --color-primary-light: #F59436;
    --color-secondary: #FEF2EB;
    --color-heading: #161616;
    --color-text: #777670;
    --color-highlight: #00DAAA;
}

/* ---------------- HEADER ---------------- */
.site-header{position:relative;z-index:40;background:var(--color-white);}
.site-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.site-logo{display:inline-flex;align-items:center}
.site-logo img{display:block;width:auto;height:auto;max-width:150px}

.site-nav{flex:1;display:flex;justify-content:center}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px}
.site-nav ul li{margin:0}
.site-nav ul li a{font-size:16px;font-weight:var(--font-regular);line-height:1;color:var(--color-heading);transition:color .15s}
.site-nav ul li a:hover,.site-nav ul li.current-menu-item a{color:var(--color-primary)}

/* Desktop nav. Scoped to #header so it outranks the theme-wide list and link styles. */
#header .site-nav .site-nav-menu{background:transparent !important;border-radius:0 !important;padding:0 !important;box-shadow:none !important;margin:0;display:flex;align-items:center;gap:22px}
#header .site-nav .site-nav-menu > li{position:relative;background:transparent !important;margin:0;padding:0}
#header .site-nav .site-nav-menu > li + li::before{content:"|";color:var(--color-subdued-white);padding:0 5px}
#header .site-nav .site-nav-menu > li > a{color:var(--color-heading)!important;background:transparent !important;padding:0 !important;font-size:16px;font-weight:var(--font-regular);white-space:nowrap;transition:opacity .2s ease}
#header .site-nav .site-nav-menu > li > a:hover{opacity:.8}
#header .site-nav .site-nav-menu > li > a:hover,#header .site-nav .site-nav-menu > li.current-menu-item > a{color:var(--color-primary) !important}

.site-cta{display:flex;gap:12px;flex:0 0 auto}
.site-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-size:16px;font-weight:var(--font-regular);line-height:1;padding:12px 24px;border:2px solid var(--color-heading);color:var(--color-heading);background:var(--color-white);white-space:nowrap;transition:background .15s,color .15s}
.site-btn:hover{background:var(--color-heading);color:var(--color-white)}
/* Simplified header phone button: small icon + gap. */
.site-btn--phone{gap:8px}
.site-btn--phone .site-phone-icon{width:16px;height:16px;flex:0 0 auto}

.site-burger{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.site-burger span{display:block;width:26px;height:2.5px;background:var(--color-heading);border-radius:2px;margin:5px 0}


/* ---------------- MOBILE MENU ---------------- */
.site-mobile-menu{position:fixed;inset:0;background:var(--color-white);z-index:60;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;padding:22px 24px 34px;overflow-y:auto}
.site-mobile-menu.open{transform:translateX(0)}
.site-mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.site-mm-top .site-logo img{max-width:140px}
.site-mm-close{background:none;border:0;font-size:32px;line-height:1;color:var(--color-text);cursor:pointer}
.site-mm-nav ul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:20px}
.site-mm-nav ul li a{font-size:16px;font-weight:var(--font-semibold);color:var(--color-heading)}
.site-mm-contact{font-size:16px;font-weight:var(--font-regular);line-height:2.25;color:var(--color-text)}
.site-mm-contact h4{font-weight: var(--font-semibold);margin-bottom:0;}
.site-mm-contact h4 a{color:var(--color-heading)}
.site-mm-contact p{margin:0;}
.site-mm-contact strong{color:var(--color-heading);font-weight:var(--font-semibold);}
.site-mm-cta{display:flex;gap:14px;margin-top:auto;padding-top:34px}
.site-mm-cta .site-btn{flex:1;padding:16px;background:var(--color-heading);color:var(--color-white);border-color:var(--color-heading)}
.site-mm-cta .site-btn:hover{background:var(--color-heading);border-color:var(--color-heading)}
.site-mm-contact .site-cicon{width:18px;height:18px;display:inline-block;vertical-align:-4px;margin-right:8px}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
    .site-nav,.site-cta{display:none}
    .site-burger{display:block}
    .site-header-row{min-height:66px}
}

/* Desktop dropdown (e.g. Cover > Boiler Cover / Landlord Cover): vertical list in a
   white card, centred under its parent, hidden until the parent is hovered or focused.
   Overrides the flex row from .site-nav ul. */
#header .site-nav .menu-item-has-children{position:relative}
#header .site-nav .sub-menu{position:absolute;z-index:100;visibility:hidden;opacity:0;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;display:flex;flex-direction:column;align-items:stretch;gap:2px;top:calc(100% + 14px);left:50%;transform:translate(-50%,-8px);min-width:220px;padding:8px;border:1px solid #efefef;border-radius:16px;background:var(--color-white);box-shadow:0 16px 40px -12px rgba(0,0,0,.18);text-align:left}
#header .site-nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
#header .site-nav .menu-item-has-children:hover > .sub-menu,#header .site-nav .menu-item-has-children:focus-within > .sub-menu{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity .22s ease,transform .22s ease,visibility 0s}
#header .site-nav .sub-menu .menu-item{width:100%;border:0 !important}
#header .site-nav .sub-menu .menu-item a{display:block;padding:12px 14px;border-radius:10px;font-size:15px;font-weight:var(--font-regular);line-height:1.2;color:var(--color-heading);white-space:nowrap;transition:background-color .15s ease,color .15s ease}
#header .site-nav .sub-menu .menu-item a:hover,#header .site-nav .sub-menu .menu-item a:focus-visible,#header .site-nav .sub-menu .current-menu-item > a{font-weight:var(--font-regular);background:#fff3e8;color:var(--color-primary)}

/* Mobile menu: parent items (e.g. Cover) open and close their sub-items; the nested
   list no longer inherits the main list's spacing. */
.site-mm-nav .menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between}
.site-mm-nav .menu-item-has-children > a::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.site-mm-nav .menu-item-has-children.sub-open > a::after{transform:translateY(2px) rotate(-135deg)}
.site-mm-nav ul.sub-menu{display:none;gap:0;margin:12px 0 0;padding:0 0 0 14px}
.site-mm-nav .sub-open > ul.sub-menu{display:flex}
.site-mm-nav ul.sub-menu li a{display:block;padding:9px 0;font-size:15px;font-weight:var(--font-regular);color:var(--color-text)}
.site-mm-nav ul li.current-menu-item > a{color:var(--color-primary)}

@media(max-width:1399px){
    #header .site-nav .site-nav-menu > li + li::before{padding:0 2px}
    /* Smaller desktops: tighter menu so it doesn't crowd the logo and buttons. */
    #header .site-nav .site-nav-menu{gap:14px}
}
@media(max-width:1199px){
    #header .site-nav .site-nav-menu{gap:8px}
}
@media(max-width:1000px){
    /* The simplified header keeps its phone button on mobile. */
    body[data-simplified-header="1"] .site-cta{display:flex !important}
}

/* ---------------- HEATABLE HEADER ----------------
   Logo-only header on pages with "Show simplified Heatable header" ticked. */
#header_logo{display:block;background:var(--color-white);padding:10px 0;margin-bottom:0}
#heatable_logo{display:block}
#heatable_logo img{width:150px;max-width:calc(100vw - 48px);height:auto}

/* Partner co-brand header ("PlusHeat in partnership with <BRAND>"): partner landers,
   comparison checkouts and their thank-you page. Mobile: logo left,
   phone right. Desktop: the two logos centred as a group, click-to-call icon pinned right. */
.site-header .site-header-row:has(.site-partner) { gap: 16px; flex-wrap: nowrap; }
.site-header .site-header-row:has(.site-partner) > .site-cta { display: none !important; } /* empty slot; would add a gap after the phone */
.site-header .site-partner { display: inline-flex; align-items: center; gap: 16px; margin-right: auto; min-width: 0; }
.site-header .site-partner-text { color: var(--color-text); font-size: var(--font-xxs); font-weight: var(--font-medium); white-space: nowrap; }
.site-header .site-partner-logo { height: 30px; width: auto; max-width: 150px; display: block; flex-shrink: 0; object-fit: contain; }

/* Click-to-call icon (right side). */
.site-header .site-partner-call { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-circle); color: var(--color-primary); background: var(--color-secondary); flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.site-header .site-partner-call svg { width: 20px; height: 20px; }
.site-header .site-partner-call:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-1px); }

/* Desktop only: centre the logo group, pin the call icon to the right. */
@media (min-width: 768px) {
    .site-header .site-header-row:has(.site-partner) { justify-content: center; position: relative; }
    .site-header .site-partner { margin-right: 0; }
    .site-header .site-partner-call { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    .site-header .site-partner-call:hover { transform: translateY(calc(-50% - 1px)); }
}

/* Mobile/tablet (logo left, phone right): logos scale with the viewport and may shrink,
   so a wide partner wordmark can never run under the call icon. */
@media (max-width: 767px) {
    .site-header .site-header-row:has(.site-partner) .site-logo { flex: 0 1 auto; min-width: 0; }
    .site-header .site-header-row:has(.site-partner) .site-logo img { max-width: clamp(84px, 24vw, 130px); }
    .site-header .site-partner { flex: 0 1 auto; }
    .site-header .site-partner-logo { flex-shrink: 1; min-width: 0; max-width: clamp(70px, 22vw, 130px); }
}
@media (max-width: 560px) {
    .site-header .site-partner-text { display: none; }
    /* Text hidden: keep a "×" between the two logos so the co-brand still reads as a partnership. */
    .site-header .site-partner::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin: 0 4px; color: #A3A3A3; background: linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)), linear-gradient(-45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
}
@media (max-width: 600px) {
    .site-header .site-header-row:has(.site-partner) { gap: 10px; }
    .site-header .site-partner { gap: 8px; }
    .site-header .site-partner-logo { height: 24px; }
    .site-header .site-partner-call { width: 34px; height: 34px; }
    .site-header .site-partner-call svg { width: 17px; height: 17px; }
}
@media (max-width: 430px) {
    /* Not enough room for the phrase: show the two logos + call icon only. */
    .site-header .site-partner-text { display: none; }
}