/*
 * Adwords Landing Page – Header Styles
 *
 * Scoped exclusively to the adwords landing page template.
 * Covers the stripped-back main header bar, phone number treatment,
 * "Book a Consultation" button, hamburger toggle, and the off-canvas
 * navigation panel that replaces the full site menu.
 *
 * The orange top bar and all page body styles are inherited from the
 * existing theme stylesheet (style.css) and kitchen-design-canterbury.css.
 *
 * @package K4_Kitchens_New
 * @author  Steve Austen
 * @company The PCGP
 * @version 1.5.2
 */

/* ═══════════════════════════════════════════
   1. Adwords main header inner layout
   Logo left | controls right.
   Uses the existing .main-header shell (white bg + box-shadow).
   ═══════════════════════════════════════════ */

.adw-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 0;
}

/* ── Right-hand control group ── */
.adw-header-controls {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* ═══════════════════════════════════════════
   2. Phone number
   Gold icon with dark text; subtle hover lift.
   ═══════════════════════════════════════════ */

.adw-phone {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #231f20;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.adw-phone:hover {
    color: #f3af2e;
    text-decoration: none;
}

/* Gold icon — matches the site's accent colour */
.adw-phone__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3af2e;
    color: #231f20;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.adw-phone:hover .adw-phone__icon {
    background: #e2a027;
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════
   3. Vertical rule
   Subtle separator between phone and button.
   ═══════════════════════════════════════════ */

.adw-header-rule {
    display: block;
    width: 1px;
    height: 30px;
    background: #ddd;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   4. Book a Consultation button
   Gold fill on dark text — primary CTA treatment,
   distinct from the standard dark contact-btn.
   ═══════════════════════════════════════════ */

.adw-book-btn {
    display: inline-block;
    padding: 12px 26px;
    background: #f3af2e;
    color: #231f20;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(243, 175, 46, 0.35);
}

.adw-book-btn:hover {
    background: #e2a027;
    color: #231f20;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(243, 175, 46, 0.45);
}

.adw-book-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(243, 175, 46, 0.3);
}

/* ═══════════════════════════════════════════
   5. Hamburger toggle
   Three horizontal bars that animate to an × when the menu is open.
   ═══════════════════════════════════════════ */

.adw-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.adw-hamburger:hover {
    border-color: #f3af2e;
    background: #fffbf0;
}

/* Each bar */
.adw-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #231f20;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
}

/* Animate to × when panel is open */
.adwords-menu-is-open .adw-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.adwords-menu-is-open .adw-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.adwords-menu-is-open .adw-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════
   6. Off-canvas overlay (backdrop)
   ═══════════════════════════════════════════ */

.adw-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 32, 0.55);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Backdrop blur adds polish on supporting browsers */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.adw-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════
   7. Off-canvas navigation panel
   Slides in from the right.
   ═══════════════════════════════════════════ */

.adw-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 90vw;
    height: 100dvh; /* dvh for iOS Safari address-bar-aware height */
    height: 100vh;  /* fallback */
    background: #231f20;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.3);
}

.adw-nav-panel.is-open {
    transform: translateX(0);
}

/* Prevent body scroll while panel is open */
.adwords-menu-is-open {
    overflow: hidden;
}

/* ── Close button ── */
.adw-nav-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px 24px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s ease;
    align-self: flex-end;
}

.adw-nav-close:hover {
    color: #f3af2e;
}

.adw-nav-close i {
    font-size: 18px;
}

/* Divider below close button */
.adw-nav-close::after {
    content: none; /* no pseudo — separator is handled via border on menu */
}

/* ── Navigation menu items ── */
.adw-nav-menu {
    list-style: none;
    margin: 0;
    padding: 8px 24px 32px;
    flex: 1;
}

.adw-nav-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adw-nav-menu li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.adw-nav-menu a {
    display: block;
    padding: 15px 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.adw-nav-menu a:hover {
    color: #f3af2e;
    padding-left: 8px;
    text-decoration: none;
}

/* Sub-menu items (depth 1) */
.adw-nav-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 12px;
}

.adw-nav-menu .sub-menu a {
    font-size: 13px;
    padding: 9px 4px;
    color: rgba(255, 255, 255, 0.6);
}

.adw-nav-menu .sub-menu a:hover {
    color: #f3af2e;
}

/* ── Panel footer: phone + CTA repeated inside the panel for convenience ── */
.adw-nav-footer {
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adw-nav-footer-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.adw-nav-footer-phone i {
    color: #f3af2e;
}

.adw-nav-footer-phone:hover {
    color: #f3af2e;
    text-decoration: none;
}

.adw-nav-footer-btn {
    display: block;
    padding: 13px 20px;
    background: #f3af2e;
    color: #231f20;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.adw-nav-footer-btn:hover {
    background: #e2a027;
    color: #231f20;
    text-decoration: none;
}

/* ═══════════════════════════════════════════
   8. Responsive adjustments
   ═══════════════════════════════════════════ */

/* Tablet: hide phone number text, keep icon */
@media (max-width: 768px) {
    .adw-phone__number {
        display: none;
    }

    .adw-header-rule {
        display: none;
    }

    /*
     * The longer "Book Free Consultation" label needs a bit more
     * horizontal room.  Tighten letter-spacing and shave the padding
     * so the button stays compact alongside the phone icon and
     * hamburger without overflowing on narrow tablets.
     */
    .adw-book-btn {
        padding: 10px 16px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }
}

/*
 * Small phones still showing the button (481–600 px range).
 * Step down once more so the label fits next to the hamburger
 * before the button is hidden entirely at 480 px.
 */
@media (max-width: 600px) {
    .adw-book-btn {
        padding: 9px 13px;
        font-size: 11px;
        letter-spacing: 0.2px;
    }
}

/* Mobile: hide the button too — it's repeated inside the panel */
@media (max-width: 480px) {
    .adw-book-btn {
        display: none;
    }

    .adw-header-controls {
        gap: 14px;
    }
}

/* ═══════════════════════════════════════════
   9. Minimal header variant (.site-header--minimal)
   Applied via header-minimal.php.
   Increases the phone number and icon to 26 px;
   no other layout changes are needed since the
   hamburger is simply not present in the markup.
   ═══════════════════════════════════════════ */

.site-header--minimal .adw-phone {
    font-size: 26px;
    letter-spacing: 0.3px;
    gap: 12px;
}

/* Scale the icon circle to match the larger text */
.site-header--minimal .adw-phone__icon {
    width: 46px;
    height: 46px;
    font-size: 19px;
}

/* Taller vertical rule to match the larger phone height */
.site-header--minimal .adw-header-rule {
    height: 38px;
}

/* On tablet, keep the number visible (it's a key CTA element here) */
@media (max-width: 768px) {
    .site-header--minimal .adw-phone {
        font-size: 20px;
    }

    .site-header--minimal .adw-phone__icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    /* Show the number even at tablet width on minimal header */
    .site-header--minimal .adw-phone__number {
        display: inline;
    }
}

/* ═══════════════════════════════════════════
   10. Checkatrade trust badge (.adw-checkatrade)
   The badge is given flex:1 so it absorbs all the space
   between the logo and the controls. Its content is then
   centred within that gap, placing it exactly halfway
   between the logo right edge and the phone icon regardless
   of how wide either side is.
   Only present in header-minimal.php markup.
   ═══════════════════════════════════════════ */

/* Logo and controls keep their natural content width.
   Same rule applies to the clean variant which also shows the
   Checkatrade badge centred between logo and controls. */
.site-header--minimal .site-logo,
.site-header--clean .site-logo {
    flex: 0 0 auto;
}

.site-header--minimal .adw-header-controls,
.site-header--clean .adw-header-controls {
    flex: 0 0 auto;
}

/* Badge absorbs all remaining space and centres its image within it */
.adw-checkatrade {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0; /* Removes phantom whitespace below the img */
}

.adw-checkatrade img {
    height: 62px;
    width: auto;
    display: block;
}

/* Hide the badge on tablet — too little space between logo and controls */
@media (max-width: 900px) {
    .adw-checkatrade {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   11. Clean header variant (.site-header--clean)
   No top bar; the white header bar stands alone.  Phone number
   displays with opening hours stacked directly underneath beside
   a gold circular icon — a more inviting, conversion-focused
   treatment than the simpler inline phone used elsewhere.
   ═══════════════════════════════════════════ */

/*
 * Soft drop shadow + hairline border bridge what the orange top bar
 * normally provides — without it the header can feel like it's
 * floating, so we anchor it visually.
 */
.site-header--clean .main-header {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/*
 * A touch taller than the standard adwords header — the stacked
 * phone block needs vertical room to breathe and stay aligned
 * with the logo.
 */
.site-header--clean .adw-header-inner {
    min-height: 86px;
}

/*
 * Stacked phone treatment.
 * Layout: [gold circle icon]  [number on top / hours below]
 * The whole element is a single tap-target so the call-to-action
 * is unmistakable on mobile.
 */
.adw-phone--stacked {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #231f20;
    text-decoration: none;
}

.adw-phone--stacked:hover {
    text-decoration: none;
    color: #231f20;
}

/*
 * Gold-filled icon circle.
 * A solid colour fill makes the phone link feel tappable rather
 * than purely decorative.  Subtle scale on hover adds delight
 * without being distracting.
 */
.adw-phone--stacked .adw-phone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f3af2e;
    color: #ffffff;
    font-size: 19px;
    flex-shrink: 0;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 3px 10px rgba(243, 175, 46, 0.30);
}

.adw-phone--stacked:hover .adw-phone__icon {
    background: #e2a027;
    transform: scale(1.06);
    box-shadow: 0 5px 14px rgba(243, 175, 46, 0.40);
}

/* Two-line text stack — number prominent, hours supporting */
.adw-phone__stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.adw-phone--stacked .adw-phone__number {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #231f20;
    letter-spacing: 0.2px;
}

.adw-phone__hours {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #777;
    letter-spacing: 0.25px;
    margin-top: 4px;
}

/* Tall vertical rule to match the height of the phone stack */
.site-header--clean .adw-header-rule {
    height: 48px;
}

/* ── Responsive scaling for the stacked phone ── */

/* Tablet: scale the stack down a touch but keep both lines visible */
@media (max-width: 991px) {
    .site-header--clean .adw-header-inner {
        min-height: 80px;
    }

    .adw-phone--stacked .adw-phone__icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .adw-phone--stacked .adw-phone__number {
        font-size: 18px;
    }

    .adw-phone__hours {
        font-size: 11px;
    }

    .site-header--clean .adw-header-rule {
        height: 42px;
    }
}

/*
 * Smaller tablet / large phone: keep the number readable but
 * drop the hours line — it would compete with the button for room.
 * Override the parent .adw-phone__number {display:none;} rule that
 * applies on the standard adwords header at this width.
 */
@media (max-width: 768px) {
    .site-header--clean .adw-phone__number {
        display: inline;
        font-size: 16px;
    }

    .site-header--clean .adw-phone__hours {
        display: none;
    }

    .site-header--clean .adw-phone--stacked {
        gap: 10px;
    }
}

/* Mobile: just the icon and the button — same pattern as other variants */
@media (max-width: 480px) {
    .site-header--clean .adw-phone__number {
        display: none;
    }

    .site-header--clean .adw-header-rule {
        display: none;
    }

    .site-header--clean .adw-phone--stacked .adw-phone__icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}