/* =====================================================================
   AL QAMARA — custom.css
   Base theme stylesheet  |  v1.0.0
   =====================================================================

   TABLE OF CONTENTS
   -----------------
   01 · ROOT — COLOR SYSTEM
   02 · GLOBAL / BASE
   03 · HEADER / NAVBAR
   04 · SECTION HEADER  (shared utility)
   05 · HOMEPAGE SECTIONS
   06 · ARCHIVE / BLOG LIST
   07 · SINGLE POST
   08 · PAGE  (static page — page.php)
   09 · SEARCH
   10 · COMMENTS
   11 · FOOTER
   12 · PAGE TEMPLATES
   13 · BOOTSTRAP & BRAND OVERRIDES

   ===================================================================== */


/* =====================================================================
   01 · ROOT — COLOR SYSTEM
   Change any value here to re-skin the entire theme from one place.
   ===================================================================== */

:root {
    /* Brand — primary (deep navy) */
    --alq-primary:          #0f172a;
    --alq-primary-dark:     #060b12;

    /* Brand — accent (antique gold) */
    --alq-accent:           #b8912a;
    --alq-accent-dark:      #9a7820;

    /* Backgrounds & surfaces */
    --alq-bg:               #ffffff;
    --alq-surface:          #f7f4ec;
    --alq-tint:             #f3efe3;
    --alq-white:            #ffffff;

    /* Homepage section alternating backgrounds
       --alq-section-light → pure white  (even sections)
       --alq-section-warm  → warm cream  (odd sections, harmonises with gold accent)
       Change these two values to re-skin all section backgrounds at once. */
    --alq-section-light:    #ffffff;
    --alq-section-warm:     #fdf9f0;

    /* Borders */
    --alq-border:           #e5e2d6;

    /* Text */
    --alq-heading:          #0f172a;
    --alq-text:             #333333;
    --alq-muted:            #6c757d;
    --alq-faint:            #9aa3b2;
    --alq-ink:              #14182a;

    /* On-dark  (text over navy backgrounds) */
    --alq-on-dark:          #ffffff;
    --alq-on-dark-muted:    #c3c9d6;

    /* Third-party brand */
    --alq-whatsapp:         #25d366;
    --alq-whatsapp-dark:    #1ebe5d;
    --alq-messenger:        #0084ff;
    --alq-messenger-end:    #7b00ff;

    /* Bootstrap theme-colour overrides — keeps BS components on-brand */
    --bs-primary:           #0f172a;
    --bs-primary-rgb:       20,33,61;
    --bs-secondary:         #b8912a;
    --bs-secondary-rgb:     184,145,42;
    --bs-link-color:        #0f172a;
    --bs-link-color-rgb:    20,33,61;
    --bs-link-hover-color:  #060b12;
}


/* =====================================================================
   02 · GLOBAL / BASE
   ===================================================================== */

/* Page-wide safety net against any single element (e.g. a wide comparison
   table) pushing the whole document past the viewport width — deliberately
   on `html` ONLY, not `body` (2026-08-18, corrected after a live-caught
   regression). Two things had to be learned the hard way here:

   1. Per the CSS Overflow spec, whenever overflow-x is set to a non-visible
      value, the browser is REQUIRED to compute overflow-y as `auto`
      instead of `visible` — writing `overflow-y: visible` explicitly does
      NOT prevent this, the spec overrides it regardless. So overflow-x:
      hidden always drags overflow-y along with it to `auto` on whichever
      element(s) it's set on; there's no way around that part.

   2. The actual bug was applying overflow-x:hidden to BOTH html and body.
      That gave `<body>` its own non-visible overflow (auto, per #1), which
      makes body a scroll-container candidate — and any `position:sticky`
      descendant (the header navbar) then sticks relative to BODY's box
      instead of the true viewport. Since body itself never actually
      scrolls (html does, confirmed via document.scrollingElement), the
      sticky navbar just scrolled away with the page instead of sticking —
      confirmed live via getBoundingClientRect().top going thousands of
      pixels negative instead of clamping at 0.

   Fix: overflow-x:hidden on `html` alone is already enough to clip
   horizontal overflow for the whole viewport (html is what governs the
   viewport's scrollbox here — confirmed via document.scrollingElement).
   Leaving `body` completely untouched (both axes stay their true default
   `visible`) means body is never a scroll-container candidate, so
   position:sticky correctly resolves against the viewport again —
   confirmed live: scrollY 2001, sticky header rectTop back to 0. */
html {
    overflow-x: hidden;
}

body {
    background: var(--alq-content-bg, #fbfbfb);
    color: var(--alq-text);
}

a {
    text-decoration: none;
    color: var(--alq-ink);
}

/*
 * ── Content-area anchor hover ─────────────────────────────────────────────────
 * Scope: post/page body text, sidebar widget lists, and card excerpts only.
 * Excluded: header, footer, navbar, breadcrumb, headings, buttons, badges.
 * Rule: ink-colored links → accent on hover.
 */
/* Content links (2026-09-25): text links inside page, post, service, project and team
   content take their own colours, set under Customizer > Global Settings > Theme Colors
   (Content Link Color, default blue; Content Link Hover Color, default gold). They used to
   reuse Primary (navy), which looks the same as the body text, so nobody could tell a link
   from a word. Buttons, badges, menus, cards and widgets are not touched. */
.entry-content a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link),
.alq-content-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link),
.page-entry-content a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link),
.alq-single-service-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link),
.alq-single-project-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link),
.alq-single-team-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link) {
    color           : var(--alq-link, #0b5cd5);
    text-decoration : none;
    transition      : color .2s;
}
.entry-content a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover,
.alq-content-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover,
.page-entry-content a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover,
.alq-single-service-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover,
.alq-single-project-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover,
.alq-single-team-body a:not(.btn):not([class*="badge"]):not(.button):not(.wp-block-button__link):not(.alq-btn):not(.alq-svc-btn):not(.alq-toc-link):hover {
    color           : var(--alq-link-hover, #b8912a);
    text-decoration : none;
}

/* body padding-top: removed — navbar uses position:sticky, no padding needed */

/* ---- Spacing utilities ---- */
.my-6 { margin-top: 6rem;    margin-bottom: 6rem; }
.py-6 { padding-top: 6rem;   padding-bottom: 6rem; }

/* ---- Button ---- */
.btn-custom {
    background: var(--alq-primary);
    color: var(--alq-white);
    padding: 10px 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-custom:hover {
    background: var(--alq-primary-dark);
    color: var(--alq-white);
    transform: translateX(3px);
}

.btn-custom i { font-size: 12px; }

.btn-outline-custom {
    background: transparent;
    color: var(--alq-accent);
    border: 1.5px solid var(--alq-accent);
    padding: 10px 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-outline-custom:hover {
    background: var(--alq-accent);
    color: #fff;
    transform: translateX(3px);
}

.btn-outline-custom i { font-size: 12px; }

.alq-project-meta strong { color: var(--alq-accent); }

/* Accent color utility — used on icons in project sidebar */
.text-accent { color: var(--alq-accent) !important; }

/* Project prev/next navigation links */
.alq-nav-link {
    color: var(--alq-primary);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: color .2s ease;
}
.alq-nav-link:hover { color: var(--alq-accent); }

/* ---- Spinner ---- */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* ---- Back to top (+ scroll progress ring) ----
   `.alq-btt-wrap` now owns the fixed positioning (was on #back-to-top
   directly) — it's a 56x56 box. The button itself is absolutely centered
   inside, shrunk to 44x44 (was 48x48) specifically so there's a visible
   ~2px gap between the button's own edge and the ring's inner edge —
   without this gap the ring's stroke touched the button directly and
   read as one blurry shape rather than a distinct ring around it. */
.alq-btt-wrap {
    display: none; /* jQuery fadeIn/fadeOut controls visibility, same as before */
    position: fixed;
    right: 17px;   /* 20px - 3px, so the ring's outer edge still lines up
                      with where the plain button used to sit */
    bottom: 17px;
    width: 56px;
    height: 56px;
    z-index: 999;
}

.alq-btt-ring {
    position: absolute;
    inset: 0;
    pointer-events: none; /* never blocks clicks on the button underneath */
    transform: rotate(-90deg); /* so progress starts at 12 o'clock, not 3 o'clock */
}
.alq-btt-ring-track,
.alq-btt-ring-progress {
    fill: none;
    stroke-width: 3;
}
.alq-btt-ring-track {
    stroke: rgba(15, 23, 42, .1); /* faint --alq-primary tint — visible "empty" track */
}
.alq-btt-ring-progress {
    stroke: var(--alq-accent, #b8912a);
    stroke-linecap: round;
    /* stroke-dasharray / stroke-dashoffset are set inline by JS (js/main.js,
       section 8) based on the circle's own real circumference (2*PI*r) and
       the current page scroll percentage — not hard-coded here. */
    transition: stroke-dashoffset .1s linear;
}

#back-to-top {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 44px;   /* vertically centers the icon via text-align */
    text-align: center;
    background: var(--alq-primary) !important;
    border-color: var(--alq-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

#back-to-top:hover {
    background: var(--alq-accent) !important;
    border-color: var(--alq-accent) !important;
    color: var(--alq-primary) !important;
}

/* WhatsApp floating button */
#whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    background: var(--alq-whatsapp);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    z-index: 999;
    transition: background .2s, transform .2s;
    text-decoration: none;
}
#whatsapp-float:hover {
    background: var(--alq-whatsapp-dark);
    transform: scale(1.08);
    color: #fff;
}

/* Lift floating buttons above mobile bottom bar */
@media (max-width: 991.98px) {
    body.alq-shop-header .alq-btt-wrap  { bottom: calc(58px + 9px); } /* 12px - 3px, see .alq-btt-wrap's own offset above */
    body.alq-shop-header #whatsapp-float { bottom: calc(58px + 12px); }
}



/* =====================================================================
   03 · HEADER / NAVBAR
   ===================================================================== */

/* ---- Logo ----
   !important is required here: WooCommerce's own bundled CSS ships
   ".woocommerce img, .woocommerce-page img { height:auto; max-width:100% }"
   (see woocommerce-layout.css), which has HIGHER specificity than a single
   class selector and silently wins on every WooCommerce-templated page
   (shop, single product, cart, checkout, my-account) — stretching the logo
   to an oversized, aspect-scaled height instead of the intended fixed size.
   Non-WooCommerce pages (home, blog, static pages) were never affected,
   which is why this only surfaced now that a real logo image exists to
   render. Same !important pattern already used for this exact WC-override
   problem elsewhere in woocommerce.css (search "unless we use !important"). */
.custom-logo {
    width: 100% !important;
    max-width: 190px !important; /* was rendering ~282px wide with no cap at all —
                                     ate into the space the nav menu needed for more
                                     items; capped per user request (2026-07-29) */
    height: 65px !important;
    object-fit: contain !important; /* prevents distortion when max-width clamps
                                        below the logo's natural aspect-ratio width —
                                        without this the image would squish
                                        horizontally instead of scaling down cleanly */
}

/* Mobile: shorter logo so the navbar row stays compact (matches the
   pre-logo text-fallback height instead of stretching to ~91px). Desktop
   65px is untouched — same "width:100%; height:Xpx" pattern, only the
   height value changes, so the aspect-ratio-preserving behavior stays
   identical to the desktop rule. */
@media (max-width: 991.98px) {
    .custom-logo {
        height: 36px !important;
    }
}

/* ---- Transparent-header logo swap (Single Row layout, home page hero) ----
   alqamara_get_dual_logo() (inc/helpers.php) outputs BOTH images as
   siblings only in that one case; every other page/layout still outputs a
   single .custom-logo with neither of these two classes, so this block
   simply never matches there. Toggled purely by the existing `.scrolled`
   class (js/main.js already adds/removes it on scroll on every viewport
   width, desktop and mobile alike) — no extra JS, no viewport-specific
   override needed. */
.alq-logo-solid        { display: none; }
.alq-logo-transparent  { display: inline-block; }
.navbar-transparent.scrolled .alq-logo-solid       { display: inline-block; }
.navbar-transparent.scrolled .alq-logo-transparent { display: none; }

/* ---- Navbar base ---- */
.alq-navbar-wrap {
    position: relative;
    z-index: 1030;
    transition: transform 0.3s ease, background 0.5s ease;
}

/* ---- Mobile navbar row: force logo + search/hamburger icons to stay on
   one line ----
   Bootstrap's `.navbar` is `flex-wrap: wrap` by default, and this theme's
   mobile header doesn't use Bootstrap's own collapse pattern (custom
   toggler + off-canvas menu instead — no `.navbar-collapse` in the
   markup), so nothing below the lg breakpoint was overriding that default.
   At very narrow widths (~320px — smaller than virtually any real phone
   today, but exactly what the WP Customizer's own "mobile" device-preview
   toggle simulates) the row had just enough combined content width to
   trigger a wrap, dropping the logo onto its own line above the search/
   hamburger icons instead of sharing the row with them (found via the
   Customizer's mobile preview, 2026-08-15 — user's real phone, being wider
   than 320px, never showed this). `nowrap` here removes the ambiguity
   outright rather than trying to reason about the exact flex-basis math
   that triggered it. */
@media (max-width: 991.98px) {
    .alq-navbar-wrap .navbar {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 991px) {
    .alq-navbar-wrap.navbar-hidden {
        transform: translateY(-100%);
    }
}

.alq-is-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}




.navbar-transparent {
    background: transparent !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — solid background (custom color or primary fallback) */
.navbar-transparent.scrolled {
    background: var(--alq-header-bg, var(--alq-primary)) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.18);
}

/* Non-home pages always show solid background */
body:not(.home):not(.front-page) .navbar-transparent {
    background: var(--alq-header-bg, var(--alq-primary)) !important;
}

/* Nav links */
.navbar .navbar-nav .nav-link {
    padding: 28px 14px; /* horizontal reduced 18px → 14px per user request
                            (2026-07-29) to fit more menu items; vertical
                            28px left untouched — that sets the header height */
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

/* WCAG — restores a visible keyboard-focus indicator on nav links (the
   outline:none above removed the mouse-click focus ring, which also
   silently removed it for keyboard/Tab users — a real 2.4.7 Focus Visible
   failure). :focus-visible keeps the mouse-click experience unchanged
   (no ring on click) while giving keyboard users a clear, visible ring. */
.navbar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--alq-accent, #c9a15a);
    outline-offset: -2px;
}

/* Over light hero (transparent state) — --alq-hero-header-ink is only
   defined (functions.php) when the "Hero Header Text Color" Customizer
   control is explicitly set; otherwise this falls back to the existing
   fixed --alq-ink default, unchanged. */
.navbar-transparent .navbar-nav .nav-link {
    color: var(--alq-hero-header-ink, var(--alq-ink));
}

/* Solid bar — ink auto-adapts to whatever Header Background Color is set
   (--alq-header-ink, computed in functions.php; falls back to white for
   safety if the var is somehow missing). Was hardcoded to always-white
   here — real bug, user set Header Background Color to white and this
   never budged (2026-08-16). */
.navbar-transparent.scrolled .navbar-nav .nav-link,
body:not(.home):not(.front-page) .navbar-transparent .navbar-nav .nav-link {
    color: var(--alq-header-ink, var(--alq-on-dark));
}

/* Menu hover on inner pages (fixed 2026-09-25): the "ink adapts to the header colour" rules above
   (body:not(.home) ... and .scrolled) are more specific than the general hover/active rule, so on every
   page except the top of the homepage the hovered and the current menu item stayed the normal colour.
   Same accent colour as the homepage state, restated at the same specificity. */
.navbar-transparent.scrolled .navbar-nav .nav-link:hover,
.navbar-transparent.scrolled .navbar-nav .nav-link.active,
body:not(.home):not(.front-page) .navbar-transparent .navbar-nav .nav-link:hover,
body:not(.home):not(.front-page) .navbar-transparent .navbar-nav .nav-link.active,
.alq-header-solid .navbar-transparent .navbar-nav .nav-link:hover,
.alq-header-solid .navbar-transparent .navbar-nav .nav-link.active {
    color: var(--alq-accent);
}

/* Right-side icons (search/wishlist/compare/account/cart) — same
   transparent/scrolled logic as the menu links above, but these buttons
   carry Bootstrap's `text-white` utility class directly in the markup
   (header.php), which is `!important` and otherwise wins outright over
   any un-important color rule — hence `!important` here too, matching
   the pattern already used for the solid/stacked states below (search
   "unless we use !important"). Without this, the icons stayed hardcoded
   white even over the light transparent hero (real bug, found by the
   user 2026-08-16: menu text correctly went dark there, icons didn't). */
.navbar-transparent .alq-nav-icon {
    color: var(--alq-hero-header-ink, var(--alq-ink)) !important;
}
.navbar-transparent.scrolled .alq-nav-icon,
body:not(.home):not(.front-page) .navbar-transparent .alq-nav-icon {
    color: var(--alq-header-ink, var(--alq-on-dark)) !important;
}

/* Hover & active — gold */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--alq-accent);
}

/* Brand / logo colour (text-fallback only — image logos ignore `color`) */
.navbar-transparent.scrolled .navbar-brand,
body:not(.home):not(.front-page) .navbar-transparent .navbar-brand {
    color: var(--alq-header-ink, #fff);
}

/* ---- Mobile toggler ---- */
/* Border/box look removed per user request (2026-07-29) — plain icon
   reads cleaner/more modern, matching how most mobile e-commerce
   headers treat these icons (no visible button boundary). */
.mobile-toggler {
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
}

.mobile-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280%2C0%2C0%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Invert icon to white on a dark bar, leave it dark on a light one —
   --alq-header-toggler-filter is computed alongside --alq-header-ink in
   functions.php (same source-of-truth, always in sync). */
.navbar-transparent.scrolled .mobile-toggler .navbar-toggler-icon,
body:not(.home):not(.front-page) .mobile-toggler .navbar-toggler-icon {
    filter: var(--alq-header-toggler-filter, brightness(0) invert(1));
}

/* ---- Navbar CTA button (outline gold) ----
   Transparent state split out from scrolled/non-home so it can respect
   --alq-hero-header-ink (falls back to the original --alq-accent when the
   override isn't set). */
.navbar-transparent .btn-custom {
    background: transparent;
    color: var(--alq-hero-header-ink, var(--alq-accent));
    border: 1.5px solid var(--alq-hero-header-ink, var(--alq-accent));
}
.navbar-transparent.scrolled .btn-custom,
body:not(.home):not(.front-page) .navbar .btn-custom {
    background: transparent;
    color: var(--alq-accent);
    border: 1.5px solid var(--alq-accent);
}

.navbar-transparent .btn-custom:hover,
.navbar-transparent.scrolled .btn-custom:hover,
body:not(.home):not(.front-page) .navbar .btn-custom:hover {
    background: var(--alq-accent);
    color: var(--alq-primary-dark);
    transform: none;
}

/* ---- Dropdown arrow ---- */
/* Hide Bootstrap's default caret; we use a custom FA icon */
.navbar .nav-link.dropdown-toggle::after,
.navbar .dropdown-toggle::after {
    display: none !important;
}

.dropdown-arrow {
    font-size: 11px;
    display: inline-block;
    transition: transform 0.3s ease;
}

@media (min-width: 992px) {
    /* Hover-open simple dropdown — also opens on keyboard focus anywhere
       inside it (:focus-within), so it's reachable without a mouse. */
    .dropdown:hover > .dropdown-menu,
    .dropdown:focus-within > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }

    /* Rotate arrow on hover or keyboard focus */
    .dropdown:hover > .nav-link .dropdown-arrow,
    .dropdown:focus-within > .nav-link .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Keep arrow rotated when dropdown is programmatically open */
    .dropdown.show > .nav-link .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* ---- Dropdown panel ---- */
.dropdown-menu {
    border: none;
    border-top: 3px solid var(--alq-primary);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 8px 0;
    min-width: 220px;
    margin-top: 0 !important;
}

.dropdown-item {
    font-size: 14px;
    color: var(--alq-text);
    padding: 9px 20px;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--alq-tint);
    color: var(--alq-primary);
    padding-left: 26px;
}

/* ---- Submenu (nested dropdown — rendered by class-walkers.php) ---- */
.dropdown-submenu-item {
    position: relative;
}

.dropdown-submenu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -8px !important;
    display: none;
}

.dropdown-submenu-item:hover > .dropdown-submenu {
    display: block;
}

/* ---- Mega menu ---- */
.mega-dropdown { position: static !important; }

.mega-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mega-arrow {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.mega-dropdown:hover .mega-arrow,
.mega-dropdown:focus-within .mega-arrow { transform: rotate(180deg); }

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--alq-white);
    border-top: 3px solid var(--alq-primary);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-radius: 0 0 12px 12px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Opens on mouse hover AND on keyboard focus anywhere inside the panel —
   a keyboard-only user tabbing onto the top-level link (or any link inside)
   can see and reach every item, not just mouse users. */
.mega-dropdown:hover .mega-menu,
.mega-dropdown:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Columns — width divides evenly by however many columns this specific
   mega menu has (2, 3, 4…), set inline per-instance via --mega-cols
   (see inc/class-walkers.php). No more fixed 3-column assumption. */
.mega-menu-row {
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 3), 1fr);
}

.mega-col { padding: 28px 24px; }
.mega-col:not(:last-child) { border-right: 1px solid var(--alq-surface); }

/* Whole-column promo banner (Card type = Promo set on the column itself) —
   the banner stretches to fill the column's full height, matching the
   height of normal columns beside it (grid items stretch by default). */
.mega-col-banner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mega-col-banner .mega-promo {
    flex: 1;
    min-height: 220px;
    margin-bottom: 0;
}

.mega-col-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--alq-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--alq-tint);
    display: flex;
    align-items: center;
}

.mega-col-icon-img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0;
}

.mega-group       { margin-bottom: 14px; }

.mega-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--alq-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    padding-left: 4px;
}

/* Links — shared styles for grouped and single */
.mega-link,
.mega-link-single {
    display: block;
    font-size: 13px;
    color: var(--alq-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mega-link        { padding: 4px 4px 4px 8px; }
.mega-link-single { padding: 5px 4px 5px 8px; }

.mega-link:hover,
.mega-link-single:hover,
.mega-link:focus,
.mega-link-single:focus {
    color: var(--alq-primary);
    background: var(--alq-tint);
    padding-left: 14px;
}

.mega-link i,
.mega-link-single i {
    font-size: 11px;
    color: var(--alq-primary);
    opacity: 0.5;
}

/* A user-supplied icon/image (set via Appearance → Menus) reads as content,
   not a decorative bullet — show it at full size/opacity, unlike the
   default chevron above. */
.mega-link .alq-custom-icon,
.mega-link-single .alq-custom-icon {
    font-size: 13px;
    opacity: 1;
    margin-right: 6px;
}

/* ---- Promo banner card (mega panel: a column itself, or a link one level
   inside a column, with Card type = "Promo") ----

   Deliberately just an image + a link — no text/button/overlay rendered
   on top of it in CSS. Any text or button the site owner wants belongs
   baked into the banner image itself (designed in any image editor), so
   there's nothing here to keep in sync with content state. */
.mega-promo {
    position: relative;
    display: block;
    min-height: 150px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: var(--alq-surface);
    transition: transform 0.25s ease;
}

.mega-promo:hover,
.mega-promo:focus { transform: translateY(-2px); }

.mega-promo-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* ---- Mobile overlay & menu ---- */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active { display: block; opacity: 1; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 88vw; /* safety margin on very narrow screens (e.g. the
       Customizer's 320px device preview) so the drawer never sits flush
       against the edge with no overlay visible; irrelevant on real phones
       (375px+), where 300px is already well under 88vw. */
    height: 100vh;
    height: 100dvh; /* accounts for mobile browser address bar */
    background: var(--alq-white);
    z-index: 1050;
    transition: right 0.35s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 20px rgba(0,0,0,0.15);
}

.mobile-menu.open { right: 0; }

@media (min-width: 992px) {
    .mobile-menu,
    .mobile-overlay { display: none !important; }
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--alq-surface);
}

/* Header strip (logo + close button) uses the same Header Background Color
   as the main site header (--alq-header-bg, falls back to Global Primary
   Color) instead of staying hardcoded white — matching the main header's
   own logo area which already sits on this same background. Scoped to
   `#mobileMenu` specifically (2026-08-18 follow-up fix) — `.mobile-menu-
   header` is ALSO reused by the Cart drawer (`.alq-cart-drawer`) for its
   "Your Cart" title bar, whose text is hardcoded dark navy
   (.alq-cart-drawer .mobile-menu-header span below); applying the header
   background there too would risk dark-navy-on-dark-navy if the header
   color is ever set dark. The Cart drawer strip intentionally stays plain
   white regardless of Header Background Color.
   Note: when Header Background Color is set to white (as it currently is
   on this site), this strip will correctly render white too, blending
   into the rest of the drawer — that's the color matching the main header
   exactly as requested, not a bug; the `border-bottom` above still gives
   a visible seam either way. */
#mobileMenu .mobile-menu-header {
    background: var(--alq-header-bg, var(--alq-primary));
}
/* Site-title text fallback (used when no custom logo image is set — see
   alqamara_get_logo() in inc/helpers.php) inside the mobile slide-in
   menu's header strip. Without this rule, `.site-title` only inherited
   the theme's generic dark link color (--alq-ink, #14182a), which is
   nearly identical to this strip's dark navy background (--alq-header-bg
   / --alq-primary, #0f172a by default) — the two colors differ by only a
   few RGB points, so the site name became effectively invisible (found
   by the user on a real phone, 2026-08-29). Reuses the same auto-contrast
   pattern already used for the main header's `.navbar-brand`
   (--alq-header-ink, computed in functions.php from whichever background
   actually applies), so this stays correct automatically if Header
   Background Color is ever changed to something light instead of
   hardcoding white. Scoped to `#mobileMenu` only — the Cart drawer's
   `.mobile-menu-header span` right below intentionally keeps its own
   separate hardcoded dark color, since that strip always stays plain
   white regardless of Header Background Color. */
#mobileMenu .mobile-menu-header .site-title {
    color: var(--alq-header-ink, #fff);
}
.alq-cart-drawer .mobile-menu-header span {
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    letter-spacing: -.01em;
}
/* The <a> wrapping the logo is a flex child of .mobile-menu-header; give it
   room to shrink instead of the default flex min-width:auto (which, for a
   replaced element like <img>, refuses to shrink below the image's
   aspect-ratio-computed width). Without this, a wide logo file with a
   height:40px-but-no-max-width constraint doesn't shrink at all and can
   overlap the close button next to it (user report on a real phone,
   2026-08-15 — the fixed-width test drawer earlier never hit this because
   the placeholder logo used during testing happened to be narrow). */
.mobile-menu-header a { min-width: 0; }

.mobile-logo {
    /* !important on every sizing property — same fix `.custom-logo` already
       needed (see PROGRESS.md). WooCommerce core's own bundled stylesheet
       (woocommerce-layout.css, not a theme file) ships
       `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }`
       — specificity (0,1,1), beats a plain `.mobile-logo` (0,1,0). WordPress
       adds the `woocommerce`/`woocommerce-page` body classes on Shop/Cart/
       Account pages, so on those pages only, this logo was silently losing
       its fixed size and scaling up by its own aspect ratio (2026-08-18,
       user report: the logo grew slightly on any WooCommerce page). */
    height: 40px !important;
    max-width: 150px !important;  /* hard cap so an unusually wide logo file
                           scales down by width too, instead of only being
                           height-capped and overflowing into the close
                           button. */
    width: auto !important;
    object-fit: contain !important;
}

.mobile-close-btn {
    background: var(--alq-surface);
    border: none;
    border-radius: 50%;
    /* Circle trimmed 36px → 30px and the glyph 16px → 14px (2026-08-18,
       user feedback: the white circle behind the × read as too large next
       to the 40px-tall logo). Still comfortably above the ~24px minimum
       for a reliable touch target, just less visually heavy. */
    width: 30px;
    height: 30px;
    flex-shrink: 0;   /* never let the close button itself get squeezed */
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--alq-text);
    transition: background 0.2s;
}

.mobile-close-btn:hover { background: var(--alq-border); }

.mobile-nav-links {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.mobile-nav-link {
    display: block;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--alq-text);
    text-decoration: none;
    border-bottom: 1px solid var(--alq-surface);
    transition: color 0.2s, background 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--alq-primary) !important;
    background: var(--alq-tint) !important;
    font-weight: 600;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* Groups the leading icon + title into a single flex item so
   .mobile-dropdown-toggle's space-between only ever splits the row into
   [label | arrow] — not [icon | title | arrow], which used to spread the
   title toward the middle whenever an icon was present. */
.mobile-dropdown-label {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mobile-dropdown-menu      { display: none; background: var(--alq-surface); }
.mobile-dropdown-menu.open { display: block; }

.mobile-dropdown-section {
    display: flex;
    align-items: center;
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--alq-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--alq-tint);
}

.mobile-dropdown-sub {
    padding: 6px 24px 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--alq-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mobile-dropdown-item {
    display: block;
    padding: 9px 32px;
    font-size: 13px;
    color: var(--alq-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--alq-surface);
    transition: color 0.2s, background 0.2s;
}

.mobile-dropdown-item:hover,
.mobile-dropdown-item.active {
    color: var(--alq-primary) !important;
    background: var(--alq-tint) !important;
    font-weight: 600;
}

/* Promo banner reused inside the mobile slide-in menu (same .mega-promo /
   .mega-promo-img markup as desktop, via alqamara_mm_render_promo_banner())
   — just needs side margins to match the menu's other padded rows instead
   of touching the edges. ".mobile-dropdown-promo" itself is no longer
   output (mobile used to render a simplified link instead of the real
   banner image); kept out on purpose, nothing else depended on it. */
.mobile-dropdown-menu .mega-promo {
    margin: 6px 20px 10px;
}

.mobile-menu-footer {
    padding: 20px;
    border-top: 1px solid var(--alq-surface);
}

/* ---- WordPress admin bar offset ----
   >=783px   : admin bar fixed  32px  → header top: 32px
   601-782px : admin bar fixed  46px  → header top: 46px
   <=600px   : admin bar position:absolute — scrolls away with page,
               header stays at top:0 (admin bar briefly overlaps, then scrolls away) */
.admin-bar .alq-is-sticky { top: 32px; }
.admin-bar .mobile-menu     { top: 32px; height: calc(100dvh - 32px); }

@media screen and (max-width: 782px) {
    .admin-bar .alq-is-sticky { top: 46px; }
    .admin-bar .mobile-menu     { top: 46px; height: calc(100dvh - 46px); }
}

@media screen and (max-width: 600px) {
    /* Header starts below admin bar on page load; JS moves it to top:0 after scroll */
    .admin-bar .alq-is-sticky { top: 46px; transition: top 0.2s ease; }
    .admin-bar .mobile-menu     { top: 46px; height: calc(100dvh - 46px); }

    /* JS adds this class once admin bar has scrolled away */
    .admin-bar-gone .alq-is-sticky { top: 0; }
    .admin-bar-gone .mobile-menu     { top: 0; height: 100dvh; }
}


/* ---- Nav icon visibility (text-shadow on any bg) ---- */
.alq-nav-icon { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* Trial: slightly tighter desktop header icon group (Search/Wishlist/
   Account/Cart) — user asked to see a small reduction (2026-07-29).
   Bootstrap defaults were gap-1 (4px) + p-2 (8px each side), ~20px
   visually between two icon glyphs; this trims it to ~14px. Scoped to
   `.alq-header-icons` only, so the mobile top-bar search icon (which
   also carries `.alq-nav-icon` but sits outside this group) is
   untouched. Easy one-block revert if the user prefers the original. */
/* !important required — Bootstrap's spacing utilities (`gap-1`, `p-2`)
   are themselves declared with !important in bootstrap.min.css, so a
   plain override here would silently lose regardless of selector
   specificity or source order.
   First attempt tightened both gap AND icon padding (~14px between
   glyphs) — user felt that was too cramped and asked to go back close
   to the original ~20px, just trimmed slightly to 18px. Icon padding
   reverted to Bootstrap's original 8px (p-2, untouched); only the gap
   is now overridden, 4px → 2px, which alone accounts for the full 2px
   reduction (8 + 2 + 8 = 18px). */
.alq-header-icons { gap: 0.125rem !important; }
.alq-no-caret::after { display: none !important; }

/* ---- Solid header on non-front-page (class set in header.php) ---- */
/* --alq-header-bg is set only when a custom color is saved in Customizer;
   falls back to --alq-primary (Global Primary Color) when not defined. */
.alq-header-solid { background: var(--alq-header-bg, var(--alq-primary)) !important; }

/* ---- Text colours inside alq-header-solid (non-sticky front page or any solid-bg state) ---- */
/* Ink auto-adapts to Header Background Color via --alq-header-ink — was
   hardcoded white here too (same bug as the .navbar-transparent.scrolled
   rules above; this block duplicates them for the .alq-header-solid case,
   which can be present without .scrolled — e.g. "Solid Background Header
   on Homepage" toggle on). Fixed in the same pass, 2026-08-16. */
.alq-header-solid .navbar-transparent .navbar-nav .nav-link   { color: var(--alq-header-ink, var(--alq-on-dark)); }
.alq-header-solid .navbar-transparent .navbar-brand            { color: var(--alq-header-ink, #fff); }
.alq-header-solid .mobile-toggler .navbar-toggler-icon         { filter: var(--alq-header-toggler-filter, brightness(0) invert(1)); }
.alq-header-solid .navbar .btn-custom {
    background: transparent;
    color: var(--alq-accent);
    border: 1.5px solid var(--alq-accent);
}
.alq-header-solid .navbar .btn-custom:hover {
    background: var(--alq-accent);
    color: var(--alq-primary-dark);
}
.alq-header-solid .alq-nav-icon { color: var(--alq-header-ink, #fff) !important; }

/* ---- Search inline dropdown (positioning only — styles via unified search rules below) ---- */
.alq-search-dd { border-radius: 8px; right: 0; left: auto; }
@media (min-width: 992px) { .alq-search-dd { min-width: 300px; } }
/* Below 992px this dropdown is also used by the mobile search icon (see
   header.php) — give it a sensible width instead of Bootstrap's default
   content-hugging size, capped so it can't overflow narrow screens.
   (Tried near-full viewport width here first; on a real phone it pushed
   past the LEFT edge of the screen, since the dropdown is right-anchored
   to the icon and a real device's available width differs from what the
   desktop-simulated test predicted. Reverted to this capped size, which
   the user confirmed looks correct on a real device.) */
@media (max-width: 991.98px) { .alq-search-dd { min-width: 260px; max-width: calc(100vw - 2rem); } }
/* Narrower phones (~320-340px — matches the WP Customizer's own mobile
   preview width) — 260px doesn't leave enough room between the
   right-anchored dropdown (dropdown-menu-end: right edge pinned to the
   search icon, extending leftward) and the screen's left edge once the
   icon itself sits close to the right edge. Found via the Customizer's
   mobile preview and confirmed by computed position — the dropdown's
   left edge was at -23px, genuinely off-screen (user feedback,
   2026-08-15). Scoped tightly so ordinary phones (~375px+) keep the
   original 260px width, already confirmed correct on a real device per
   the comment above. */
@media (max-width: 340px) { .alq-search-dd { min-width: 220px; } }
.alq-search-dd .search-form-inner { flex: 1; }

/* ---- Mobile search icon ----
   Border/box look removed per user request (2026-07-29), same as
   .mobile-toggler next to it — see that rule's comment. Fixed height +
   flex-centering kept as-is (unrelated to the border, still needed):
   the icon (Bootstrap Icons font, fs-5) inherits the site's unitless
   line-height ratio and computes its OWN line box (~30px) independently
   of the button's, unlike .mobile-toggler's icon (a fixed-size 24px
   background-image span) — so matching padding/line-height alone left
   this button a few pixels taller. */
.alq-mobile-search-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    height          : 38px;
    padding         : 6px 10px !important;
    border          : none;
}

/* Color — was hardcoded rgba(0,0,0,.8)/#fff (plain black/white toggle by
   scroll-state only), which ignored a custom Header Background Color: the
   hamburger next to it auto-contrasts via --alq-header-toggler-filter
   (computed from the actual configured color's lightness in functions.php),
   but this button stayed stuck at pure black/white regardless — so on a
   mid-tone custom header color the two icons could visibly mismatch, and on
   some colors the search icon effectively disappeared (real bug, user
   report 2026-08-18: "background changes but color doesn't follow").
   Fixed to use the same --alq-header-ink auto-contrast variable every other
   header icon uses (.alq-nav-icon, .navbar-brand, nav links) so it always
   matches them exactly, on any header color, not just the theme default. */
.alq-mobile-search-btn { color: var(--alq-ink) !important; }

.navbar-transparent.scrolled .alq-mobile-search-btn,
body:not(.home):not(.front-page) .alq-mobile-search-btn,
.alq-header-solid .alq-mobile-search-btn {
    color: var(--alq-header-ink, var(--alq-on-dark)) !important;
}

/* ---- Account dropdown ---- */
.alq-account-dropdown { min-width: 190px; border-radius: 8px; }
.alq-account-dropdown .dropdown-item { font-size: .875rem; border-radius: 6px; }
.alq-account-dropdown .dropdown-item:hover { background: var(--alq-tint); }

/* ---- CSS hover for account + cart (no data-bs-toggle → no Popper conflict) ---- */
/* Position manually: right edge of menu = right edge of .dropdown parent              */
.alq-account-dd .dropdown-menu,
.alq-cart-dd    .dropdown-menu {
    right: 0;
    left: auto;
    top: 100%;
}
@media (min-width: 992px) {
    .alq-account-dd:hover > .dropdown-menu,
    .alq-cart-dd:hover    > .dropdown-menu { display: block; }
}

/* ---- Cart hover preview ---- */
.alq-cart-preview { border-radius: 8px; min-width: 240px; }

/* ── Mini cart — sticky footer layout ────────────────────────────────────── */
.alq-cart-drawer {
    display       : flex !important;
    flex-direction: column !important;
}
.alq-cart-drawer-body {
    flex    : 1 !important;
    overflow: hidden !important;
    padding : 0 !important;          /* remove Bootstrap p-3; padded per-section */
    display : flex !important;
    flex-direction: column !important;
}
.alq-cart-drawer-body .woocommerce,
.alq-cart-drawer-body .widget_shopping_cart_content {
    flex          : 1;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
}

/* ── Mini cart — product list (alq-mc-*) ─────────────────────────────────── */
.alq-mc-list {
    list-style : none;
    margin     : 0;
    padding    : 0 1rem;      /* horizontal padding here, not on body */
    overflow-y : auto;
    flex       : 1;           /* fill available space */
    max-height : none;        /* let flex handle height */
}
.alq-mc-item {
    display       : flex;
    align-items   : flex-start;
    gap           : .75rem;
    padding       : 1.1rem 0 !important;   /* !important beats WC ul.cart_list li */
    border-bottom : 1px solid var(--alq-wc-border, #e5e7eb) !important;
}
.alq-mc-item:last-child { border-bottom: none !important; }

/* Image */
.alq-mc-item__img {
    flex-shrink: 0;
    width      : 72px;
    height     : 72px;
    border-radius: 6px;
    overflow   : hidden;
    border     : 1px solid var(--alq-wc-border, #e5e7eb);
    background : var(--alq-wc-light, #f8f9fa);
    display    : flex;        /* centre the img in case it has max-width set */
    align-items: center;
    justify-content: center;
}
.alq-mc-item__img img,
.alq-mc-item__img a img {
    width     : 100% !important;
    height    : 100% !important;
    max-width : none !important;
    object-fit: cover !important;
    display   : block !important;
}

/* Details */
.alq-mc-item__details {
    flex       : 1;
    min-width  : 0;
    display    : flex;
    flex-direction: column;
    gap        : .2rem;
}
.alq-mc-item__name {
    font-size     : .9rem;
    font-weight   : 600;
    color         : var(--alq-primary, #0f172a);
    text-decoration: none;
    line-height   : 1.35;
    display       : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow      : hidden;
}
.alq-mc-item__name:hover { color: var(--alq-accent, #b8912a); }
.alq-mc-item__qty-price .quantity {
    font-size : .8rem;
    color     : var(--alq-accent, #b8912a);
    font-weight: 600;
}

/* Remove button */
.alq-mc-item__remove {
    flex-shrink    : 0;
    width          : 22px;
    height         : 22px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    background     : #f1f3f5;
    color          : #6c757d;
    font-size      : .95rem;
    line-height    : 1;
    text-decoration: none;
    transition     : background .18s, color .18s;
    border         : none;
}
.alq-mc-item__remove:hover {
    background: #e03131;
    color     : #fff;
}

/* ③ Hide WC's extra quantity input that appears beside +/- */
.alq-mc-item input.qty,
.alq-mc-item input[type="number"],
.alq-mc-item .quantity > input {
    display: none !important;
}

/* ④ Subtotal bar — sticky footer section */
.alq-mc-subtotal {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : .75rem 1rem .5rem;
    border-top     : 2px solid var(--alq-wc-border, #e5e7eb);
    flex-shrink    : 0;
    font-weight    : 700;
    font-size      : .92rem;
    color          : var(--alq-primary, #0f172a);
    background     : #fff;
}
.alq-mc-subtotal__value { color: var(--alq-accent, #b8912a); }

/* Buttons row — sticky footer */
.alq-mc-buttons {
    display    : flex;
    gap        : .5rem;
    flex-shrink: 0;
    padding    : .5rem 1rem .85rem;
    background : #fff;
}
.alq-mc-btn {
    flex         : 1;
    text-align   : center;
    padding      : .45rem .5rem;
    font-size    : .82rem;
    font-weight  : 600;
    border-radius: 5px;
    text-decoration: none;
}

/* ── Mini cart — empty state ──────────────────────────────────────────────── */
.alq-mini-cart-empty {
    flex           : 1;               /* fill the drawer body's full height so
                                          justify-content:center below actually
                                          centers the icon/text/button between
                                          the drawer's top and bottom, instead
                                          of just sitting at its own natural
                                          (short) height right under the
                                          header — see .alq-cart-drawer-body's
                                          nested flex:1 chain above. */
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    padding        : 2rem 1rem;
    text-align     : center;
    gap            : .75rem;
}
.alq-mini-cart-empty__icon {
    width     : 4rem;
    height    : 4rem;
    color     : var(--alq-accent, #b8912a);
    opacity   : .8;
    margin-bottom: .25rem;
}
.alq-mini-cart-empty__icon svg {
    width : 100%;
    height: 100%;
}
.alq-mini-cart-empty__msg {
    font-size  : .9rem;
    color      : #6c757d;
    margin     : 0;
    line-height: 1.5;
}
.alq-mini-cart-empty__btn {
    display        : inline-block;
    margin-top     : .25rem;
    padding        : .45rem 1.4rem;
    background     : var(--alq-accent, #b8912a);
    color          : #fff;
    border-radius  : 5px;
    font-size      : .85rem;
    font-weight    : 600;
    text-decoration: none;
    transition     : background .2s;
}
.alq-mini-cart-empty__btn:hover {
    background: var(--alq-accent-dark, #9a7821);
    color     : #fff;
}

/* Mini cart buttons — theme colors (both dropdown preview & drawer) */
.alq-cart-preview .btn-outline-secondary,
.alq-cart-drawer  .btn-outline-secondary {
    color       : var(--alq-accent, #b8912a);
    border-color: var(--alq-accent, #b8912a);
    background  : transparent;
    transition  : background .2s, color .2s;
}
.alq-cart-preview .btn-outline-secondary:hover,
.alq-cart-preview .btn-outline-secondary:focus,
.alq-cart-drawer  .btn-outline-secondary:hover,
.alq-cart-drawer  .btn-outline-secondary:focus {
    background  : var(--alq-accent, #b8912a);
    border-color: var(--alq-accent, #b8912a);
    color       : #fff;
}
.alq-cart-preview .btn-primary,
.alq-cart-drawer  .btn-primary {
    background  : var(--alq-accent, #b8912a);
    border-color: var(--alq-accent, #b8912a);
    color       : #fff;
    transition  : background .2s, border-color .2s;
}
.alq-cart-preview .btn-primary:hover,
.alq-cart-preview .btn-primary:focus,
.alq-cart-drawer  .btn-primary:hover,
.alq-cart-drawer  .btn-primary:focus {
    background  : var(--alq-accent-dark, #9a7821);
    border-color: var(--alq-accent-dark, #9a7821);
    color       : #fff;
}

/* Popup preview (hover dropdown) — override navbar btn-custom so Checkout is solid gold */
.alq-cart-preview-inner .btn-custom,
.alq-cart-preview-inner .btn-outline-custom {
    display      : flex !important;
    align-items  : center !important;
    justify-content: center !important;
    text-align   : center !important;
    transform    : none !important;
    padding      : .35rem .6rem;
    font-size    : .8rem;
    border-radius: 4px;
}
.alq-cart-preview-inner .btn-custom {
    background   : var(--alq-accent, #b8912a) !important;
    border-color : var(--alq-accent, #b8912a) !important;
    color        : #fff !important;
}
.alq-cart-preview-inner .btn-custom:hover {
    background   : var(--alq-accent-dark, #9a7821) !important;
    border-color : var(--alq-accent-dark, #9a7821) !important;
}
.alq-cart-preview-inner .btn-outline-custom {
    color        : var(--alq-accent, #b8912a) !important;
    border-color : var(--alq-accent, #b8912a) !important;
    background   : transparent !important;
}
.alq-cart-preview-inner .btn-outline-custom:hover {
    background   : var(--alq-accent, #b8912a) !important;
    color        : #fff !important;
}

/* Quantity +/- controls in mini cart */
.alq-mc-qty {
    display    : inline-flex;
    align-items: center;
    align-self : flex-start;   /* don't stretch to full parent width */
    gap        : 0;
    border     : 1.5px solid var(--alq-wc-border, #e5e7eb);
    border-radius: 5px;
    overflow   : hidden;
    margin-top : .3rem;
}
.alq-mc-qty__btn {
    width     : 26px;
    height    : 26px;
    background: var(--alq-wc-light, #f8f9fa);
    border    : none;
    cursor    : pointer;
    font-size : 1rem;
    line-height: 1;
    color     : var(--alq-primary, #0f172a);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.alq-mc-qty__btn:hover {
    background: var(--alq-accent, #b8912a);
    color     : #fff;
}
.alq-mc-qty__val {
    width     : 30px;
    text-align: center;
    font-size : .82rem;
    font-weight: 600;
    border-left : 1.5px solid var(--alq-wc-border, #e5e7eb);
    border-right: 1.5px solid var(--alq-wc-border, #e5e7eb);
    line-height : 26px;
    display    : inline-block;
}
.alq-mc-item__price {
    font-size  : .8rem;
    color      : var(--alq-accent, #b8912a);
    font-weight: 600;
    margin-top : .15rem;
    display    : block;
}

/* ---- Cart drawer — matches mobile menu width ---- */
.alq-cart-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    height: 100dvh;
    background: var(--alq-white);
    z-index: 1060;
    box-shadow: -5px 0 20px rgba(0,0,0,.15);
    transition: right .35s ease;
    display: flex;
    flex-direction: column;
}
.alq-cart-drawer.is-open { right: 0; }

.alq-cart-drawer-body { flex: 1; overflow-y: auto; padding-bottom: 0; }

/* Sticky footer buttons inside mini cart */
.alq-cart-drawer .woocommerce-mini-cart__buttons {
    position: sticky;
    bottom: 0;
    background: var(--alq-white);
    padding: .75rem 1rem 1rem;
    margin: 0 -1rem -1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.alq-cart-drawer .woocommerce-mini-cart__buttons a,
.alq-cart-drawer .woocommerce-mini-cart__buttons .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: .55rem 1rem;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
/* View Cart — gold outline */
.alq-cart-drawer .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    background: transparent !important;
    border: 1.5px solid var(--alq-accent, #b8912a);
    color: var(--alq-accent, #b8912a) !important;
}
.alq-cart-drawer .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
    background: var(--alq-accent, #b8912a);
    color: #fff !important;
}
/* Checkout — gold solid */
.alq-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--alq-accent, #b8912a);
    color: #fff !important;
    border: none;
}
.alq-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: var(--alq-primary, #0f172a) !important;
    color: #fff !important;
}

.alq-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1059;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}
.alq-drawer-overlay.is-active { opacity: 1; visibility: visible; }

/* Search dropdown overlay — same plain-black treatment as the two other
   overlays on this site (.mobile-overlay, .alq-drawer-overlay above), for
   visual consistency: a neutral black dims content evenly regardless of
   what's underneath, whereas a tinted (e.g. navy) overlay would cast that
   tint onto whatever product photos/colours are still visible through it.
   z-index 1020 is deliberately BELOW the header's own stacking context
   (.alq-navbar-wrap / .alq-is-sticky, both 1030) so the header — including
   the open search box and its dropdown — stays fully undimmed above the
   overlay, while ordinary page content below dims. This differs on purpose
   from .mobile-overlay (1040, dims the header too) since that one is a
   full-screen menu takeover; this is a small in-header search widget. */
.alq-search-overlay {
    position  : fixed;
    inset     : 0;
    background: rgba(0,0,0,.5);
    z-index   : 1020;
    opacity   : 0;
    visibility: hidden;
    transition: opacity .25s ease;
}
.alq-search-overlay.is-active { opacity: 1; visibility: visible; }

/* ---- Mobile bottom bar ---- */
.alq-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #fff;
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1040;
    box-shadow: 0 -2px 12px rgba(0,0,0,.07);
}

/* Resting color deliberately darker than the theme's usual "muted" gray
   (--alq-muted, #6c757d) — on a white bar background that lighter shade
   didn't have enough contrast to be noticed at a glance. This is a
   dedicated, slightly-darker shade just for this bar — darkened again
   2026-08-18 (#495363 → #2d3348) per user feedback, for a bit more
   contrast at rest across all 5 icons now that Cart no longer gets its
   own permanent accent tint (see .alq-mobile-bar-cart note below) — all
   five icons need to read clearly on their own. */
.alq-mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #2d3348;
    text-decoration: none;
    font-size: .65rem;
    padding: .35rem .75rem;
    cursor: pointer;
    transition: color .2s;
    min-width: 0;   /* let flex shrink these below their content width
                       instead of forcing the bar wider than the screen */
}

/* Very narrow phones (320px class devices): 5 items × (40px icon glyph +
   2 × .75rem padding) just barely exceeds the available width, clipping a
   few px off the last icon. Tighten the horizontal padding only at this
   size — the icons themselves stay the same, they just sit closer. */
@media (max-width: 360px) {
    .alq-mobile-bar-item { padding-left: .35rem; padding-right: .35rem; }
}
/* Box is a few px larger than the glyph itself on every side (icon glyph
   is ~20px at this font-size) — gives the active-state pill background
   below some visible breathing room instead of hugging the icon outline
   tightly. */
.alq-mobile-bar-item i {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border-radius: 999px;
    transition: background-color .2s, color .2s;
}
.alq-mob-cart-wrap,
.alq-mob-wishlist-wrap { position: relative; }
.alq-mob-cart-wrap .alq-badge { z-index: 2; }
/* `.alq-mob-cart-badge` positioning rule now lives further down, merged
   with `.alq-mobile-bar-badge` since both icons share the same wrapper
   structure — see that combined rule for the explanation. */

/* Active-tab pill: a soft accent-tinted rounded background behind the
   icon only (not the whole item), so the current tab is immediately
   visible instead of relying on a color change alone. `.active` is set
   server-side in header.php based on the current page (Shop/Cart/
   Account) — previously this class existed in CSS but was never actually
   applied anywhere, so the bar had no working current-page indicator. */
.alq-mobile-bar-item:hover,
.alq-mobile-bar-item.active { color: var(--alq-primary); }
.alq-mobile-bar-item.active i {
    background: rgba(184, 145, 42, .16); /* --alq-accent at low opacity */
    color: var(--alq-accent);
}

/* Cart no longer gets a permanent accent tint at rest (2026-08-18 — user
   feedback: with 5 icons in the bar now, it read as though Cart was
   permanently "active", inconsistent with the other four). All five
   icons now share the same resting color (.alq-mobile-bar-item above)
   and the same active-state pill treatment (.alq-mobile-bar-item.active i
   above) — Cart is no longer visually different from Shop/Wishlist/
   Compare/Account except when it's genuinely the active tab. */

/* Push page content above mobile bar when active */
body.alq-shop-header { padding-bottom: 58px; }

@media (min-width: 992px) {
    body.alq-shop-header { padding-bottom: 0; }
}

/* ---- Top Bar ---- */
.alq-topbar {
    position: relative;
    z-index: 1032;
    background: var(--alq-topbar-bg, var(--alq-primary));
    color: var(--alq-topbar-ink, rgba(255,255,255,.75));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.alq-topbar-link {
    color: var(--alq-topbar-ink, rgba(255,255,255,.7));
    transition: color .2s;
}
.alq-topbar-link:hover { color: var(--alq-topbar-ink, #fff); }

/* ---- Cart / Wishlist badges — golden accent color, consistent across
   desktop + mobile. `.alq-wishlist-badge` reuses this instead of Bootstrap's
   plain `text-bg-warning` (which was a duller, mismatched yellow with no
   real "filled chip" presence next to the cart badge) — per feedback,
   should look like the cart count, not a generic Bootstrap badge. ---- */
.alq-badge,
.alq-cart-badge,
.alq-wishlist-badge,
/* Compare's badge (.alq-compare-badge) is intentionally NOT included as a
   bare class here — it's reused in three places with three different
   intended looks: this desktop header icon and the mobile bottom bar icon
   both want the same golden accent chip as Wishlist/Cart (hence the two
   compound selectors below, scoped to their own position-pattern class),
   but the Account dropdown's Compare row (header.php, inside
   .alq-account-dropdown) deliberately uses a plain light/dark pill instead
   — matching that in a bordered dropdown as a floating golden chip would
   look out of place. A bare `.alq-compare-badge` selector here would have
   caught all three and broken that one. Found 2026-08-15: both the new
   desktop icon and the pre-existing mobile bottom bar icon were showing no
   background at all (text-bg-warning alone wasn't providing one in this
   Bootstrap build), while Wishlist/Cart right next to them looked correct
   — because only Wishlist/Cart were ever in this rule's selector list. */
.alq-header-badge.alq-compare-badge,
.alq-mobile-bar-badge.alq-compare-badge {
    font-size      : .6rem !important;
    background-color: var(--alq-accent) !important;
    color          : #fff !important;
    border         : none !important;
}

/* Compare's THIRD badge instance — inside the Account dropdown (Single Row
   layout, Shop mode; header.php's .alq-account-dropdown). Bootstrap's
   `text-bg-light` on this badge is a very pale gray, effectively invisible
   against the dropdown row's own white background — user feedback,
   2026-08-15: no visible chip behind the number. Given its own small,
   distinct treatment (not the golden accent above) since it sits inline
   next to plain dropdown text rather than floating over a solid header —
   the same muted tint already used for this dropdown's hover state. */
.alq-account-dropdown .alq-compare-badge {
    background-color: var(--alq-tint) !important;
    color           : var(--alq-primary) !important;
}

/* ---- Desktop header icon badges (Wishlist heart / Cart bag). Replaces
   Bootstrap's `top-0 start-100 translate-middle` pattern, which measured
   the badge's position from the nav button's full PADDED box (`.alq-nav-icon`
   has `p-2` = 8px padding on every side) rather than the icon glyph
   itself — combined with the icon font's own internal line-height
   whitespace, the badge ended up floating a visible gap above and right
   of the actual heart/bag shape instead of tucking into its corner like
   a normal notification badge (per user's reference screenshot). Fixed
   values here instead, tuned to sit right on the glyph's top-right
   corner — `.alq-nav-icon` already carries Bootstrap's `position-relative`
   class in the markup, so this only needs to size/place the badge itself.
   `!important` on `position` specifically — Bootstrap's own stylesheet
   has a SECOND, separate `.badge{position:relative;top:-1px}` rule (found
   in bootstrap.min.css, distinct from its main `.badge{display:...}`
   block) at the exact same specificity as this one-class selector; our
   version normally wins purely on stylesheet load order (custom.css is
   enqueued with style.css → bootstrap.min.css as dependencies, so it
   always loads last), but that makes correctness depend on load order
   never changing rather than being guaranteed by the rule itself —
   `!important` removes that fragility entirely. ---- */
.alq-header-badge {
    position: absolute !important;
    top     : 5px !important; /* nudged 1px up per user request (2026-07-29), was 6px */
    right   : 3px !important; /* nudged 1px right per user request (2026-07-29), was 4px */
    left    : auto !important;
    bottom  : auto !important;
    transform: none !important;
}

/* ---- Mobile bottom bar badges (Wishlist + Cart count) — both icons are
   now wrapped in their own small `position-relative d-inline-block` span
   (`.alq-mob-wishlist-wrap` / `.alq-mob-cart-wrap`) instead of the badge
   being positioned relative to the whole `.alq-mobile-bar-item` (icon +
   text label stacked, ~58px tall). Wishlist's badge used to be positioned
   that second way, which is why it sat with visibly more padding and
   further from the icon than Cart's — `top/right` were measured from the
   tall item box, not the ~40px icon glyph. Same rule, same values, for
   both now that the markup is structurally identical — no more font-size/
   padding overrides either, so both inherit the exact same pill size from
   the shared `.alq-badge` rule above. ---- */
.alq-mobile-bar-badge,
.alq-mob-cart-badge {
    position: absolute !important;
    top     : 2px !important;
    right   : 4px !important;
    left    : auto !important;
    bottom  : auto !important;
    transform: none !important;
}

/* ---- Search overlay (legacy — removed; replaced by .alq-search-dd dropdown) ---- */


/* =====================================================================
   04 · SECTION HEADER  (shared decorative heading — used across pages)
   ===================================================================== */

.section-header {
    position: relative;
    padding-top: 25px;
}

/* Double-line decoration: navy line + gold line */
.section-header::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--alq-primary);
}

.section-header::after {
    position: absolute;
    content: "";
    width: 90px;
    height: 2px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--alq-accent);
}

.section-header.text-start::before,
.section-header.text-start::after {
    left: 0;
    transform: translateX(0);
}


/* =====================================================================
   05 · HOMEPAGE SECTIONS
   ===================================================================== */

/* ------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------ */
.hero-section {
    position        : relative;
    width           : 100%;
    min-height      : 100vh;
    min-height      : 100dvh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    overflow        : hidden;
    /* Pull hero up so background extends behind topbar + navbar */
    margin-top      : calc(-1 * var(--alq-header-total-h, 0px));
    /* Section-level padding — clears header at top, gives breathing room below.
       Any content inside (title, widget, video, image) benefits automatically. */
    padding-top     : calc(var(--alq-header-total-h, 80px) + 2.5rem);
    padding-bottom  : 4rem;
    box-sizing      : border-box;
}

@media (max-width: 768px) {
    .hero-section {
        min-height    : 85vh;
        min-height    : 85dvh;
        padding-top   : calc(var(--alq-header-total-h, 80px) + 1.5rem);
        padding-bottom: 3.5rem; /* extra room above mobile bottom bar */
    }
}

@media (max-width: 576px) {
    .hero-section {
        min-height    : auto;
        padding-bottom: 4rem; /* mobile bar is ~56px, add buffer */
    }
}

/* ---- Solid Background Header on Homepage (body class set in functions.php) ----
   The negative margin-top above pulls Hero's background up behind the header —
   correct when the header is transparent (you can still see the background
   through it), wrong when the header is solid (that same slice of Hero would
   be hidden behind an opaque bar instead). Cancel the overlap here so Hero
   starts right below the header with nothing cropped. Only applies when Hero
   itself is on (functions.php only adds this class in that case). */
body.alq-header-solid-home .hero-section {
    margin-top  : 0;
    padding-top : 2.5rem;
}

@media (max-width: 768px) {
    body.alq-header-solid-home .hero-section {
        padding-top: 1.5rem;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
}

.hero-content {
    position: relative;
    z-index: 1;
    /* No padding here — .hero-section handles top/bottom spacing for ALL content.
       This means widgets, videos, images placed directly in the hero also get
       proper spacing without needing .hero-content wrapper. */
    width: 100%;
}

.hero-title {
    color: var(--alq-text);
    max-width: 95%;
    line-height: 1.3;
    font-size: 2.0rem;
}

.hero-subtitle {
    color: var(--alq-text);
    max-width: 95%;
    line-height: 1.3;
    font-size: 1.2rem;
}

/* ── Decorative hero circles ─────────────────────────────────────────────────
   Reverted back to small/subtle flat circles (2026-07-29 follow-up) — the
   large soft-blob treatment (780px/620px, visible circular body) was tried
   per a reference screenshot, but the user decided against it: too heavy/
   dark-feeling on mobile, where a circle that size dwarfs the viewport.
   Back to the original small, low-opacity, hard-edge-but-barely-visible
   circles, keeping only the color SWAP that was explicitly requested and
   confirmed earlier: top-right = primary/navy tint, bottom-left = accent/
   gold tint (opposite of the theme's original assignment). Sizes now also
   shrink on mobile so they stay a quiet corner accent instead of dominating
   a small viewport. */
.hero-circle {
    position       : absolute;
    border-radius  : 50%;
    pointer-events : none;
}
.hero-circle-tr {
    width      : 680px;
    height     : 680px;
    background : color-mix(in srgb, var(--alq-primary) 7%, transparent);
    top        : -180px;
    right      : -140px;
}
.hero-circle-bl {
    width      : 480px;
    height     : 480px;
    background : color-mix(in srgb, var(--alq-accent) 6%, transparent);
    bottom     : -140px;
    left       : -100px;
}

@media (max-width: 768px) {
    .hero-circle-tr { width: 380px; height: 380px; top: -100px; right: -80px; }
    .hero-circle-bl { width: 280px; height: 280px; bottom: -80px; left: -60px; }
}

/* ── Hero title / subtitle overrides (better sizing & color) ──────────────── */
.hero-title {
    font-size   : clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight : 700;
    color       : var(--alq-primary, #0f172a);
    line-height : 1.3;
    max-width   : 820px;
    margin      : 0 auto 1.25rem;
}

.hero-subtitle {
    font-size   : 1.05rem;
    /* Scoped override, NOT a change to --alq-muted itself — that variable
       is shared by 30+ other places site-wide (meta text, breadcrumbs,
       etc.) and changing it globally would move all of them, not just
       this. User felt the hero subtitle specifically read too light
       against the new near-white hero background (2026-07-29 follow-up):
       darker than --alq-muted (#6c757d) but not as dark as full body text. */
    color       : #4b5563;
    max-width   : 680px;
    margin      : 0 auto 2.25rem;
    line-height : 1.75;
}

/* Hero alignment — left/right override auto-centering margin */
.hero-content.text-start .hero-title,
.hero-content.text-start .hero-subtitle {
    margin-left : 0 !important;
    margin-right: auto !important;
}
.hero-content.text-end .hero-title,
.hero-content.text-end .hero-subtitle {
    margin-left : auto !important;
    margin-right: 0 !important;
}

/* Hero buttons — dark navy fill + outline */
.btn-hero-primary {
    background    : var(--alq-primary, #0f172a);
    border        : 2px solid var(--alq-primary, #0f172a);
    color         : #fff;
    padding       : 11px 30px;
    font-size     : 1rem;
    font-weight   : 600;
    border-radius : 5px;
    transition    : all .25s ease;
    text-decoration: none;
    display       : inline-flex;
    align-items   : center;
}
.btn-hero-primary:hover {
    background   : transparent;
    color        : var(--alq-primary, #0f172a);
}

.btn-hero-secondary {
    /* Solid accent (gold) fill — not an outline. First tried an outline
       button here (2026-08-18), but the user pointed out an outline sits on
       top of an arbitrary uploaded photo, so depending on the photo's own
       colors it can lose contrast and stop reading as a button at all. A
       solid fill has no such risk, and matches the site's real WooCommerce
       "Add to Cart" button treatment exactly (css/woocommerce.css — solid
       var(--alq-accent), white text, no border) rather than the unrelated,
       unused .btn-gold utility class, so the hero row now uses the same
       visual language as every other primary action on the site. */
    background    : var(--alq-accent, #b8912a);
    border        : none;
    color         : #fff;
    padding       : 11px 30px;
    font-size     : 1rem;
    font-weight   : 600;
    border-radius : 5px;
    transition    : all .25s ease;
    text-decoration: none;
    display       : inline-flex;
    align-items   : center;
}
.btn-hero-secondary:hover {
    background   : var(--alq-accent-dark, #9a7821);
    color        : #fff;
}

@media (max-width: 768px) {
    /* Extra top gap on mobile only, per user request (2026-07-29) — the
       heading sat a bit too close to the header/circle area on small
       screens; pushes it down ~18px without touching desktop spacing. */
    .hero-title { font-size: 2rem; margin-top: 18px; }
    /* Padding now lives on .hero-section — no override needed here */
}
@media (max-width: 576px) {
    .hero-title         { font-size: 1.7rem; }
    .btn-hero-primary,
    .btn-hero-secondary { font-size: 14px; padding: 9px 20px; }
}
@media (max-width: 380px) {
    .hero-title         { font-size: 1.4rem; }
    .btn-hero-primary,
    .btn-hero-secondary { font-size: 13px; padding: 8px 16px; }
}




/* ------------------------------------------------------------------
   CUSTOMER FEEDBACK / TESTIMONIALS
   ------------------------------------------------------------------ */
.feedback-title   { font-size: 1.7rem; color: var(--alq-heading); }

.feedback-card {
    background: var(--alq-white);
    border: 1.5px solid var(--alq-border);
    border-radius: .25rem;
    padding: 28px 26px 24px;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feedback-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Speech bubble tail — right side */
.feedback-card::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 30px;
    left: auto;
    width: 20px;
    height: 12px;
    background: var(--alq-white);
    border-right: 1.5px solid var(--alq-border);
    border-bottom: 1.5px solid var(--alq-border);
    border-radius: 0 0 4px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.feedback-quote-icon { font-size: 20px; color: var(--alq-primary); opacity: 0.3; margin-bottom: 10px; }

.feedback-text {
    font-size: 14px;
    font-style: italic;
    color: var(--alq-text);
    line-height: 1.7;
    margin-bottom: 18px;
}

.feedback-author { display: flex; align-items: flex-start; gap: 8px; }
.feedback-dash   { font-size: 16px; color: var(--alq-primary); font-weight: 700; line-height: 1.4; }
.feedback-name   { display: block; font-size: 13px; font-weight: 700; color: var(--alq-heading); }
.feedback-org    { display: block; font-size: 12px; color: var(--alq-muted); }

@media (max-width: 768px) {
    .feedback-title { font-size: 1.4rem; }
    .alq-testimonials-section .col-md-6:nth-child(3) { display: none; }
}

@media (max-width: 576px) {
    .feedback-title        { font-size: 1.2rem; }
    .alq-testimonials-section .col-md-6:nth-child(3) { display: block; }
    .feedback-card         { padding: 22px 18px; }
}


/* ------------------------------------------------------------------
   BRAND SECTIONS  (navy background — alq-brand-section, alq-soft)
   ------------------------------------------------------------------ */
.alq-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--alq-accent);
    margin-bottom: 10px;
}


/* Section heading — golden underline */
.alq-section-heading {
    position: relative;
    display: block;
    padding-bottom: 16px;
    margin-bottom: 10px;
}

.alq-section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--alq-accent);
    border-radius: 2px;
}

/* Center underline when parent or self has text-center */
.text-center .alq-section-heading::after,
.alq-section-heading.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.alq-brand-section {
    background: var(--alq-primary);
    color: var(--alq-on-dark);
    padding: 84px 0;
    position: relative;
    overflow: hidden;
}

.alq-brand-section h2,
.alq-brand-section h3 { color: var(--alq-on-dark); }

.alq-brand-section p  { color: var(--alq-on-dark-muted); }

.alq-promise-card {
    background: var(--alq-white);
    border: 1px solid var(--alq-border);
    border-radius: 14px;
    padding: 30px 24px;
    height: 100%;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.alq-promise-card:hover {
    transform: translateY(-4px);
    border-color: var(--alq-accent);
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

.alq-promise-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--alq-accent) 14%, transparent);
    color: var(--alq-accent);
    font-size: 22px;
    margin-bottom: 18px;
}

.alq-promise-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.alq-promise-card p  { font-size: .95rem; margin: 0; }

.alq-soft { background: var(--alq-surface); }



.btn-gold {
    background: var(--alq-accent);
    color: var(--alq-primary);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    transition: background .2s ease;
}

.btn-gold:hover {
    background: var(--alq-accent-dark);
    color: var(--alq-primary);
}


/* =====================================================================
   06 · ARCHIVE / BLOG LIST
   ===================================================================== */

/* Page wrapper */
.blog-page-wrapper   { background: var(--alq-content-bg, #fbfbfb); min-height: 100vh; }
/* CPT content sections — synced with content body background */
.alq-content-section { background: var(--alq-content-bg, #fbfbfb); }

/* Banner
   Gradient's 2nd stop was the site-wide --alq-primary-dark (#060b12, used
   in many other places — footer bg, button hovers — so not safe to lighten
   globally). That made the banner look much darker overall than just
   lightening the default alqamara_banner_bg default alone would suggest
   (2026-07-29 follow-up: user asked for the DEFAULT banner color to be a
   touch lighter). Fixed by deriving the 2nd stop from --alq-banner-bg
   itself (darkened slightly for depth) instead of jumping to the site's
   darkest shade — so lightening the Customizer default actually lightens
   the whole banner, not just the first half of the gradient. */
.blog-page-banner {
    background: linear-gradient(135deg, var(--alq-banner-bg, var(--alq-primary)) 0%, color-mix(in srgb, var(--alq-banner-bg, var(--alq-primary)) 100%, black 22%) 100%);
    padding: 60px 0 50px;
    position: relative;
    overflow: hidden;
}

.blog-page-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    pointer-events: none;
}

.blog-page-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 5%;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    pointer-events: none;
}

.blog-banner-inner { position: relative; z-index: 1; }

.blog-banner-label {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    color: var(--alq-banner-text-color, rgba(255,255,255,0.9));
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.blog-banner-title {
    color: var(--alq-banner-title-color, var(--alq-white));
    font-family: var(--bs-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}

.blog-banner-subtitle {
    color: var(--alq-banner-text-color, rgba(255,255,255,0.75));
    font-size: 1rem;
    max-width: 600px;
    margin-bottom: 0;
    line-height: 1.7;
}
.blog-banner-inner.text-center .blog-banner-subtitle { margin-left: auto; margin-right: auto; }
.blog-banner-inner.text-center .page-breadcrumb      { justify-content: center; }
.blog-banner-inner.text-center .single-banner-meta   { justify-content: center; }

/* Container */
.blog-container             { padding-top: 50px; padding-bottom: 60px; }
.blog-container--no-banner  { padding-top: 24px; }

/* Post card */
.blog-post-card {
    background: var(--alq-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(26,95,168,0.07);
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(26,95,168,0.07);
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26,95,168,0.14);
}

/* Thumbnail */
.blog-post-thumb {
    position: relative;
    overflow: hidden;
    height: 260px;
}

.blog-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post-card:hover .blog-thumb-img { transform: scale(1.05); }

.blog-post-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--alq-primary);
    color: var(--alq-white);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
}

/* Post body */
.blog-post-body { padding: 24px 28px 28px; }

/* Meta */
.blog-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--alq-muted);
}

.blog-meta-item i  { color: var(--alq-primary); font-size: 0.7rem; }
.blog-meta-divider { color: var(--alq-border); font-size: 0.85rem; }

/* Title */
.blog-post-title {
    font-family: var(--bs-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.blog-post-title a { color: var(--alq-primary); text-decoration: none; transition: color 0.2s ease; }
.blog-post-title a:hover { color: var(--alq-accent); }

/* Excerpt */
.blog-post-excerpt {
    color: var(--alq-muted);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Read more */
.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--alq-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-read-more:hover   { color: var(--alq-primary-dark); }
.blog-read-more i       { transition: transform 0.2s ease; }
.blog-read-more:hover i { transform: translateX(4px); }

/* No posts */
.blog-no-posts {
    background: var(--alq-white);
    border-radius: 14px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(26,95,168,0.07);
}

.blog-no-posts-icon {
    width: 80px;
    height: 80px;
    background: var(--alq-tint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.blog-no-posts-icon i { font-size: 1.8rem; color: var(--alq-primary); }
.blog-no-posts h3     { font-family: var(--bs-font-heading); font-size: 1.4rem; font-weight: 700; color: var(--alq-ink); margin-bottom: 10px; }
.blog-no-posts p      { color: var(--alq-muted); font-size: 0.95rem; margin-bottom: 0; }

/* Pagination */
.blog-pagination-wrap { margin-top: 10px; }

.blog-pagination-wrap .alqamara-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.blog-pagination-wrap .alqamara-pagination li a,
.blog-pagination-wrap .alqamara-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--alq-white);
    color: var(--alq-primary);
    border: 1px solid rgba(26,95,168,0.2);
    transition: all 0.2s ease;
}

.blog-pagination-wrap .alqamara-pagination li span.current,
.blog-pagination-wrap .alqamara-pagination li a:hover {
    background: var(--alq-primary);
    color: var(--alq-white);
    border-color: var(--alq-primary);
}

/* Sidebar */

/* Sticky Sidebar (Customizer: Global Settings → Sidebar → "Sticky Sidebar",
   theme_mod `alqamara_blog_sidebar_sticky`, default ON). Applies to the
   blog/single-post sidebar ONLY (`.blog-sidebar`) — the WooCommerce Shop
   Sidebar (`.alq-shop-sidebar`) has its own INDEPENDENT toggle instead
   (`alqamara_shop_sidebar_sticky`, WooCommerce → Shop / Archive — see
   css/woocommerce.css), deliberately kept separate since this theme serves
   both content/blog sites and WooCommerce stores and a buyer using it for
   one purpose shouldn't have this choice forced onto the other area. Only
   applies at the Bootstrap `lg` breakpoint (992px) and up, matching the
   exact width where `.blog-sidebar` (single.php, `col-lg-4`) actually sits
   beside the content instead of stacking below it. `top` reuses the same
   sticky-header-offset variable the TOC feature's scroll-margin-top
   already uses. Deliberately NO max-height/overflow-y capping here — see
   the detailed reasoning already written up next to `.alq-shop-sidebar`'s
   sticky rule in woocommerce.css: capping the sidebar to its own scrollable
   box breaks down the moment more widgets get added below the visible cap,
   so this theme lets position:sticky do its native thing (stop being
   "stuck" once the sidebar's own bottom reaches the bottom of its column)
   instead. Turned off via `functions.php`'s `body_class` filter
   (`.alq-sidebar-not-sticky` class) when the Customizer toggle is
   unchecked. */
@media (min-width: 992px) {
    body:not(.alq-sidebar-not-sticky) .blog-sidebar {
        position: sticky;
        top: calc(var(--alq-header-total-h, 80px) + 20px);
        align-self: flex-start;
    }
}

.blog-sidebar .widget {
    background: var(--alq-white);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 28px;
    box-shadow: 0 2px 16px rgba(26,95,168,0.07);
    border: 1px solid rgba(26,95,168,0.07);
}

/* ── Blog sidebar — unified widget title style ───────────────────────────
   Targets classic widget titles, Gutenberg block headings, and our custom
   alq-pw-widget-title — all get the same look.
   ─────────────────────────────────────────────────────────────────────── */
.blog-sidebar .widget-title,
.blog-sidebar .alq-pw-widget-title,
.blog-sidebar .wp-block-heading {
    font-family     : var(--bs-font-heading) !important;
    font-size       : .82rem !important;
    font-weight     : 700 !important;
    color           : var(--alq-primary) !important;
    text-transform  : uppercase !important;
    letter-spacing  : .07em !important;
    margin-bottom   : 14px !important;
    padding-bottom  : 10px !important;
    border-bottom   : 2px solid var(--alq-accent) !important;
    line-height     : 1.3 !important;
    width           : 100% !important;   /* fix: flex child was shrinking to text width */
}

/* Remove the original ::after decorative bar on our custom widget title —
   it doubles up with the border-bottom we just added above              */
.blog-sidebar .alq-pw-widget-title::after {
    display : none !important;
}

/* Hide empty block headings (Gutenberg renders h2 even with no title set) */
.blog-sidebar .wp-block-heading:empty {
    display         : none !important;
    margin-bottom   : 0 !important;
    padding-bottom  : 0 !important;
    border-bottom   : none !important;
}

/* Hide the Gutenberg Search block's built-in "Search" label
   (it always renders regardless of whether a label was entered) */
.blog-sidebar .wp-block-search__label {
    display : none !important;
}

.blog-sidebar .widget ul                    { list-style: none; padding: 0; margin: 0; }
.blog-sidebar .widget ul li                 { padding: 8px 0; border-bottom: 1px solid var(--alq-tint); font-size: 0.9rem; }
.blog-sidebar .widget ul li:last-child      { border-bottom: none; padding-bottom: 0; }

.blog-sidebar .widget ul li a {
    color: var(--alq-text);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
}

.blog-sidebar .widget ul li a:hover { color: var(--alq-accent); }

/* Sidebar list arrows removed (2026-09-25): a small arrow after every item looked odd next to
   the post counts and after the Recent Posts titles; the title colour change on hover is enough. */
.blog-sidebar .widget ul li a::after {
    content: none;
}

/* Post counts in the sidebar (2026-09-25): WordPress prints the count right after the link
   (<a>Name</a> (4)), and the link above is a full-width flex row, so the count dropped onto a
   line of its own. Each item is now one row: name on the left, the count in muted text on the right. Sub-categories still open on their own line underneath. */
.blog-sidebar .widget ul li.cat-item,
.blog-sidebar .widget .wp-block-archives-list > li,
.blog-sidebar .widget_archive ul > li {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    column-gap  : 8px;
    color       : var(--alq-muted, #64748b);
}
.blog-sidebar .widget ul li.cat-item > a,
.blog-sidebar .widget .wp-block-archives-list > li > a,
.blog-sidebar .widget_archive ul > li > a {
    flex      : 1 1 0;
    min-width : 0;
}
.blog-sidebar .widget ul li.cat-item > ul {
    flex-basis : 100%;
    order      : 5;
}

/* WooCommerce product list widgets — suppress the ::after arrow
   (items are already styled as flex rows; the arrow clutters the layout) */
.blog-sidebar .product_list_widget li a::after,
.alq-shop-sidebar .product_list_widget li a::after {
    display : none !important;
}

/* Search widget inside sidebar — handled by .search-form-inner rules below */

@media (max-width: 576px) {
    .blog-post-thumb { height: 200px; }
    .blog-no-posts   { padding: 40px 20px; }
}


/* =====================================================================
   07 · SINGLE POST
   ===================================================================== */

/* Banner meta */
.single-banner-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.single-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--alq-banner-text-color, rgba(255,255,255,0.8));
}

.single-meta-item i       { font-size: 0.72rem; color: var(--alq-banner-text-color, rgba(255,255,255,0.6)); }
.single-meta-item a       { color: var(--alq-banner-text-color, rgba(255,255,255,0.8)); text-decoration: none; transition: color 0.2s ease; }
.single-meta-item a:hover { color: var(--alq-white); }
.single-meta-sep          { color: var(--alq-banner-text-color, rgba(255,255,255,0.3)); font-size: 0.85rem; }

/* Tags */
.single-tags-wrap {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--alq-tint);
    font-size: 0.88rem;
    color: var(--alq-muted);
}

.single-tags-label { font-weight: 600; color: var(--alq-text); margin-right: 4px; }

.single-tags-wrap a {
    display: inline-block;
    background: var(--alq-tint);
    color: var(--alq-primary);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    text-decoration: none;
    margin: 2px;
    transition: all 0.2s ease;
}

.single-tags-wrap a:hover { background: var(--alq-primary); color: var(--alq-white); }

/* ---- Social Share Buttons (.alq-share-*) ----
   Shared between the WooCommerce single-product page and blog posts —
   rendered by alqamara_render_share_buttons() (inc/helpers.php), called
   from inc/woocommerce.php (product) and single.php (blog). Lives here
   in custom.css (moved from woocommerce.css) so it loads on blog pages
   too — woocommerce.css is only enqueued on WooCommerce page types. */
.alq-share-wrap {
    display    : flex;
    align-items: center;
    gap        : .6rem;
    flex-wrap  : wrap;
    margin-top : 1.1rem;
    padding-top: 1rem;
    border-top : 1px solid var(--alq-wc-border, #e5e7eb);
}

.alq-share-label {
    font-size  : .82rem;
    font-weight: 600;
    color      : var(--alq-wc-muted, #6b7280);
    white-space: nowrap;
    margin-right: .2rem;
}

.alq-share-buttons {
    display    : flex;
    align-items: center;
    gap        : .45rem;
    flex-wrap  : wrap;
}

/* Individual share button — muted by default, brand color on hover */
.alq-share-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    background     : #f3f4f6;
    color          : #6b7280;
    border         : 1.5px solid #e5e7eb;
    cursor         : pointer;
    text-decoration: none;
    transition     : transform .18s, background .18s, color .18s, border-color .18s, box-shadow .18s;
    position       : relative;
    flex-shrink    : 0;
}

.alq-share-btn:hover {
    background  : var(--alq-share-color, #6b7280);
    color       : #fff;
    border-color: var(--alq-share-color, #6b7280);
    transform   : translateY(-2px);
    box-shadow  : 0 4px 10px rgba(0,0,0,.15);
}

.alq-share-btn svg {
    width  : 16px;
    height : 16px;
    display: block;
}

/* Copy link button (type=button, no href) */
button.alq-share-btn {
    padding   : 0;
    outline   : none;
    box-shadow: none;
}

/* "Copied!" tooltip */
.alq-copy-tip {
    position     : absolute;
    bottom       : calc(100% + 6px);
    left         : 50%;
    transform    : translateX(-50%) translateY(4px);
    background   : var(--alq-primary, #0f172a);
    color        : #fff;
    font-size    : .72rem;
    font-weight  : 600;
    white-space  : nowrap;
    padding      : .25rem .55rem;
    border-radius: 4px;
    pointer-events: none;
    opacity      : 0;
    transition   : opacity .2s, transform .2s;
}

.alq-copy-tip::after {
    content      : '';
    position     : absolute;
    top          : 100%;
    left         : 50%;
    transform    : translateX(-50%);
    border       : 4px solid transparent;
    border-top-color: var(--alq-primary, #0f172a);
}

.alq-share-btn.alq-copied .alq-copy-tip {
    opacity  : 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile — slightly smaller buttons */
@media (max-width: 480px) {
    .alq-share-btn { width: 30px; height: 30px; }
    .alq-share-btn svg { width: 14px; height: 14px; }
}

/* ---- Author Box ---- */
.single-author-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--alq-white);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid rgba(26,95,168,0.08);
    box-shadow: 0 2px 12px rgba(26,95,168,0.05);
}

.author-box-avatar { flex-shrink: 0; line-height: 0; }

.author-box-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.author-box-body  { flex: 1; min-width: 0; }

.author-box-name {
    font-family: var(--bs-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.author-box-name a { color: var(--alq-ink); text-decoration: none; }
.author-box-name a:hover { color: var(--alq-accent); }

.author-box-bio {
    font-size: 0.92rem;
    color: var(--alq-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.author-box-social { display: flex; gap: 10px; }

.author-box-social a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--alq-tint);
    color: var(--alq-primary);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.author-box-social a:hover {
    background: var(--alq-accent);
    color: var(--alq-white);
}

@media (max-width: 576px) {
    .single-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-box-social { justify-content: center; }
}

/* Post navigation */
.single-post-nav { margin-bottom: 30px; }

.single-nav-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--alq-white);
    border-radius: 12px;
    padding: 18px 20px;
    text-decoration: none;
    border: 1px solid rgba(26,95,168,0.08);
    box-shadow: 0 2px 12px rgba(26,95,168,0.05);
    transition: all 0.2s ease;
    height: 100%;
}

.single-nav-card:hover {
    border-color: var(--alq-primary);
    box-shadow: 0 4px 20px rgba(26,95,168,0.12);
    transform: translateY(-2px);
}

.single-nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--alq-primary);
}

.single-nav-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--alq-ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-nav-next .single-nav-label,
.single-nav-next .single-nav-title { text-align: right; }

/* Related posts */
.single-related-wrap  { margin-bottom: 30px; }

.single-related-title {
    font-family: var(--bs-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--alq-ink);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--alq-tint);
}

.related-post-card {
    background: var(--alq-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,95,168,0.06);
    border: 1px solid rgba(26,95,168,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(26,95,168,0.12);
}

.related-post-thumb { height: 140px; overflow: hidden; }

.related-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-post-card:hover .related-thumb-img { transform: scale(1.05); }

.related-post-body  { padding: 14px 16px; }

.related-post-date {
    font-size: 0.75rem;
    color: var(--alq-muted);
    display: block;
    margin-bottom: 6px;
}

.related-post-date i { color: var(--alq-primary); font-size: 0.7rem; }

.related-post-title { font-size: 0.88rem; font-weight: 700; line-height: 1.4; margin-bottom: 0; }

.related-post-title a {
    color: var(--alq-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.related-post-title a:hover { color: var(--alq-accent); }

@media (max-width: 767px) {
    .single-banner-meta { gap: 6px; }
    .single-nav-card    { padding: 14px; }
    .single-nav-title   { font-size: 0.82rem; }
    .related-post-thumb { height: 120px; }
}

@media (max-width: 576px) {
    .single-meta-sep    { display: none; }
    .single-banner-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* =====================================================================
   08 · PAGE  (static page — page.php)
   ===================================================================== */

/* Breadcrumb */
.page-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--alq-banner-text-color, rgba(255,255,255,0.65));
}

.page-breadcrumb li + li::before { content: '/'; color: var(--alq-banner-text-color, rgba(255,255,255,0.35)); }
.page-breadcrumb li a            { color: var(--alq-banner-text-color, rgba(255,255,255,0.85)); text-decoration: none; transition: color 0.2s ease; }
.page-breadcrumb li a:hover      { color: var(--alq-white); }

/* Light bg override — used on white-background pages (e.g. single-service) */
.alq-breadcrumb-light li            { color: #555; }
.alq-breadcrumb-light li + li::before { color: #aaa; }
.alq-breadcrumb-light li a          { color: var(--alq-accent); }
.alq-breadcrumb-light li a:hover    { color: var(--alq-primary); }

/* Container */
.page-container             { padding-top: 50px; padding-bottom: 60px; }
.page-container--no-banner  { padding-top: 24px; }

/*
 * Phone-width horizontal overflow fix — `.row.g-5` inside a `.container`.
 *
 * Bootstrap's grid balances three values: the container's side padding, the
 * row's negative side margin, and the column's side padding. A plain
 * `.container` pads 12px per side (`--bs-gutter-x: 1.5rem` ÷ 2), but `g-5`
 * raises the row's own gutter to 3rem, so the row pulls itself out by 24px
 * per side — 12px MORE than the container pads in. Above 576px that
 * overhang is invisible, because `.container` is then max-width-constrained
 * and has free space beside it to absorb it. Below 576px the container is
 * full-width, so those 12px become real page overflow: the document scrolls
 * ~12px to the right and shows an empty white strip down the right edge.
 * Measured live at a 412px viewport: documentElement scrollWidth 409 vs
 * clientWidth 397, with the row's right edge landing at exactly 409.
 *
 * Fix: below 576px, drop only the HORIZONTAL gutter back to 1.5rem, so the
 * row's -12px margin again matches the container's +12px padding. This is
 * visually a no-op: `--bs-gutter-x` drives the row's negative margin and the
 * columns' padding together, so the content's inset stays exactly 12px from
 * the viewport edge either way (12 − 24 + 24 = 12 − 12 + 12). The vertical
 * gutter (`--bs-gutter-y`, also 3rem from `g-5`) is deliberately left alone,
 * so the gap between stacked columns is unchanged, and every `col-lg-*` is
 * already full-width at this size, so the horizontal gutter has nothing left
 * to space apart anyway.
 *
 * Not scoped to one template on purpose: the same `.container > .row.g-5`
 * pattern is used by the Guide template, page.php, single.php, index.php and
 * the Project/Team/Testimonial singles — the overflow was reproduced on both
 * a Guide page and a single post, so this is one shared root cause, not a
 * per-template quirk. Deliberately NOT fixed with `overflow-x: hidden` on an
 * ancestor: the Guide template's table of contents is `position: sticky`, and
 * an `overflow` value on any ancestor silently kills sticky positioning.
 */
@media (max-width: 575.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* =====================================================================
   AL QAMARA — BANNER FALLBACK STYLES
   When full page banner is OFF in Customizer:
     1. .alq-breadcrumb-bar  — thin white breadcrumb bar (full-width)
     2. .alq-content-header  — title + meta inside the content column
   Style matches WooCommerce / CPT single breadcrumb pattern:
     pt-4 (1.5rem) gap + py-2 (0.5rem) nav = 2rem total from header.
===================================================================== */

/* 1. Thin breadcrumb bar — replaces full banner when banner is OFF */
.alq-breadcrumb-bar {
    background    : var(--alq-content-bg, #fbfbfb);
    border-bottom : 1px solid #dee2e6;
    padding-top   : 1.5rem; /* matches container pt-4 used in WC/CPT */
}
.alq-breadcrumb-bar nav {
    padding       : .5rem 0; /* matches py-2 on CPT nav */
}
/* .page-breadcrumb default margin-bottom (12px) intentionally kept here —
   it provides the gap between breadcrumb text and the border-bottom,
   matching the CPT nav (py-2 + margin 12px) pattern. */

/* 2. In-content title block (above thumbnail, inside content column) */
.alq-content-header {
    padding       : 36px 40px 1.25rem; /* top & sides match .page-body desktop */
    margin-bottom : 0;
    border-bottom : 1px solid #dee2e6;
}
.alq-content-title {
    font-family : var(--bs-font-heading);
    font-size   : clamp(1.4rem, 3vw, 1.85rem);
    font-weight : 700;
    color       : var(--alq-ink);
    line-height : 1.3;
    margin      : 0 0 .5rem;
}

/* Meta row — dark-text override of .single-meta-* for light content bg */
.alq-content-meta                       { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.alq-content-meta .single-meta-item    { color: var(--alq-muted); }
.alq-content-meta .single-meta-item i  { color: var(--alq-accent); }
.alq-content-meta .single-meta-item a  { color: var(--alq-muted); text-decoration: none; }
.alq-content-meta .single-meta-item a:hover { color: var(--alq-accent); }
.alq-content-meta .single-meta-sep     { color: #ced4da; font-size: 0.85rem; }

/* Archive fallback header — no card wrapper, so reset padding to match container alignment */
.alq-archive-header { padding: .75rem 0 1.25rem; margin-bottom: 1.5rem; }

/* Archive fallback header (banner OFF) */
.alq-archive-badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    font-size    : 0.72rem;
    font-weight  : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color        : var(--alq-accent);
    background   : rgba(var(--alq-accent-rgb, 184,145,42), 0.08);
    border       : 1px solid rgba(var(--alq-accent-rgb, 184,145,42), 0.2);
    border-radius: 20px;
    padding      : 4px 12px;
    margin-bottom: .75rem;
}
.alq-archive-desc {
    font-size    : 0.95rem;
    color        : var(--alq-muted);
    margin       : .4rem 0 0;
    line-height  : 1.6;
}
.alq-archive-count {
    font-size    : 0.82rem;
    color        : var(--alq-muted);
    margin       : .6rem 0 0;
}

/* Content card */
.page-content-card {
    background: var(--alq-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(26,95,168,0.07);
    border: 1px solid rgba(26,95,168,0.07);
}

/* Featured image */
.page-featured-img     { width: 100%; }
.page-featured-img img { width: 100%; height: auto; display: block; }

/* Page body */
.page-body { padding: 36px 40px 40px; }

/* Entry content typography */
.page-entry-content { font-size: 0.97rem; line-height: 1.8; color: var(--alq-text); }

.page-entry-content h1,
.page-entry-content h2,
.page-entry-content h3,
.page-entry-content h4,
.page-entry-content h5,
.page-entry-content h6 {
    font-family: var(--bs-font-heading);
    font-weight: 700;
    color: var(--alq-ink);
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.page-entry-content h2 { font-size: 1.6rem; }
.page-entry-content h3 { font-size: 1.35rem; }
.page-entry-content h4 { font-size: 1.15rem; }

/* Table of Contents jump-links land here — offset so the target heading
   doesn't end up hidden under the sticky header. Reuses the same
   --alq-header-total-h variable the sticky product gallery / mobile menu
   already depend on (see js/main.js alqSyncHeaderHeight()). */
.page-entry-content h2,
.page-entry-content h3 {
    scroll-margin-top: calc(var(--alq-header-total-h, 80px) + 20px);
}

.page-entry-content p  { margin-bottom: 1.2rem; }

/* ---- Table of Contents box (inc/toc.php) ---- */
html { scroll-behavior: smooth; }

.alq-toc-box {
    background: var(--alq-tint);
    border: 1px solid rgba(26,95,168,0.08);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 1.5rem;
}

.alq-toc-summary {
    font-family: var(--bs-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--alq-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom chevron instead of the browser's default marker/triangle —
   rotates on open, matching the collapse/expand affordance pattern used
   elsewhere in the theme (mobile accordion menus etc.). */
.alq-toc-summary::-webkit-details-marker { display: none; }
.alq-toc-summary::marker { content: ''; }

.alq-toc-summary::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--alq-primary);
    transition: transform 0.2s ease;
    margin-left: 12px;
    flex-shrink: 0;
}

.alq-toc-box[open] > .alq-toc-summary::after { transform: rotate(180deg); }

.alq-toc-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.alq-toc-list li {
    margin-bottom: 8px;
    padding-left: 0;
}

.alq-toc-list li.alq-toc-item-sub {
    margin-left: 20px;
    font-size: 0.92rem;
}

.alq-toc-list a {
    color: var(--alq-primary);
    text-decoration: none;
    line-height: 1.5;
}

.alq-toc-list a:hover {
    color: var(--alq-accent);
}

/* Full width: plain block, no float. */
.alq-toc-box.alq-toc-full { width: 100%; }

/* Left/Right: float so surrounding paragraph text wraps beside the box —
   only makes visual sense on wider screens, so it's forced back to a
   full-width stacked block below 768px (a narrow floated box next to
   wrapped text reads badly on phones). */
@media (min-width: 768px) {
    .alq-toc-box.alq-toc-left {
        float: left;
        width: 300px;
        max-width: 45%;
        margin-right: 24px;
    }
    .alq-toc-box.alq-toc-right {
        float: right;
        width: 300px;
        max-width: 45%;
        margin-left: 24px;
    }
}

/* No underline by default, matching every other link family in the theme
   (nav, sidebar, footer, TOC) — hover just shifts color. This only targets
   real <a> links; it does NOT touch manual "Underline" text formatting a
   user applies in the block editor (that renders as an inline style /
   <u> tag with higher specificity than this class rule, so it always wins
   and displays correctly regardless of this default). */
/* .page-entry-content link colours: see "Content links" near the top of this file. */

.page-entry-content ul,
.page-entry-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }

.page-entry-content ul li,
.page-entry-content ol li { margin-bottom: 0.4rem; }

.page-entry-content blockquote {
    border-left: 4px solid var(--alq-primary);
    background: var(--alq-tint);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--alq-muted);
}

.page-entry-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }

.page-entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}

.page-entry-content table th,
.page-entry-content table td { padding: 10px 14px; border: 1px solid var(--alq-border); text-align: left; }

.page-entry-content table th { background: var(--alq-primary); color: var(--alq-white); font-weight: 600; }
.page-entry-content table tr:nth-child(even) { background: var(--alq-surface); }

.page-entry-content pre {
    background: var(--alq-surface);
    border: 1px solid var(--alq-border);
    border-radius: 8px;
    padding: 16px 20px;
    overflow-x: auto;
    font-size: 0.88rem;
}

.page-entry-content code {
    background: var(--alq-tint);
    color: var(--alq-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88rem;
}

/* Page links (paginated content) */
.page-links {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-links span,
.page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(26,95,168,0.2);
}

.page-links > span:first-child { width: auto; border: none; font-weight: 600; color: var(--alq-muted); }

.page-links a {
    background: var(--alq-white);
    color: var(--alq-primary);
    transition: all 0.2s ease;
}

.page-links a:hover,
.page-links > span:not(:first-child) {
    background: var(--alq-primary);
    color: var(--alq-white);
    border-color: var(--alq-primary);
}

@media (max-width: 991px) {
    .page-body          { padding: 24px; }
    .alq-content-header { padding: 24px 24px 1.25rem; }
}

@media (max-width: 576px) {
    .page-body          { padding: 20px 16px; }
    .alq-content-header { padding: 20px 16px 1.25rem; }
}


/* =====================================================================
   09 · SEARCH FORMS — unified design
   Same border-radius, border, background, and button style everywhere:
   • get_search_form() (.search-form-inner)
   • WordPress Search Widget (.widget_search .search-form)
   • Block Search Widget (.wp-block-search__inside-wrapper)
   • Header dropdown (.alq-search-dd .search-form-inner / .search-form)
   • Mobile slide menu (.mobile-menu-search .search-form-inner)
   ===================================================================== */

/* ── Shared variables ── */
:root {
    --alq-search-radius : 10px;
    --alq-search-bg     : #fff;
}

/* ── Container ── */
.search-form-inner,
.widget_search .search-form,
.widget .wp-block-search__inside-wrapper,
.alq-search-dd .search-form {
    display       : flex;
    align-items   : stretch;
    background    : var(--alq-search-bg);
    border        : 1.5px solid var(--alq-border);
    border-radius : var(--alq-search-radius);
    overflow      : hidden;
    transition    : border-color .2s, box-shadow .2s;
}

/* ── Focus ring ── */
.search-form-inner:focus-within,
.widget_search .search-form:focus-within,
.widget .wp-block-search__inside-wrapper:focus-within,
.alq-search-dd .search-form:focus-within {
    border-color : var(--alq-primary);
    box-shadow   : 0 0 0 3px rgba(13,27,62,.08);
}

/* ── Input ── */
.search-form-inner .search-field,
.widget_search .search-field,
.widget .wp-block-search__input,
.alq-search-dd .search-field,
.search-form .search-field {
    flex       : 1;
    min-width  : 0;
    border     : none !important;
    outline    : none !important;
    box-shadow : none !important;
    background : transparent;
    padding    : 10px 16px;
    font-size  : .88rem;
    color      : var(--alq-text);
}

.search-form .search-field::placeholder { color: var(--alq-faint); }

/* ── Submit button ── */
.search-form-inner .search-submit,
.widget_search .search-submit,
.widget .wp-block-search__button,
.alq-search-dd .search-submit,
.search-form .search-submit {
    border          : none;
    border-radius   : 0;
    background      : var(--alq-primary);
    color           : #fff;
    padding         : 10px 16px;
    font-size       : .88rem;
    cursor          : pointer;
    flex-shrink     : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : background .2s;
}

.search-form-inner .search-submit:hover,
.widget_search .search-submit:hover,
.widget .wp-block-search__button:hover,
.alq-search-dd .search-submit:hover,
.search-form .search-submit:hover {
    background : var(--alq-accent);
}

/* ── AJAX live search suggestions (js/alq-ajax-search.js) ─────────────────
   Only ever appears inside `.alq-ajax-search-form` (the product search form,
   see alq_get_product_search_form() in functions.php) — never the plain WP
   search widget. Card language (small thumb-left / text-right) matches the
   theme's other "product mini-card" patterns for visual consistency. */
.alq-search-results {
    margin-top    : .5rem;
    max-height    : 60vh;
    overflow-y    : auto;
    border        : 1px solid var(--alq-wc-border, #e5e7eb);
    border-radius : 8px;
    background    : #fff;
}
.alq-search-results[hidden] { display: none; }
/* `.alq-search-dd .search-form` (the outer <form>, not just its inner input+
   button row) is ALSO display:flex — see the shared "Container" rule above,
   originally written so it could double as the flex row for the classic WP
   search widget's markup (whose input+button sit directly on the <form>,
   with no inner wrapper). Our product search form nests input+button one
   level deeper inside `.search-form-inner`, so before this results panel
   existed the outer form only ever had that ONE flex child and the rule was
   harmless. Adding `.alq-search-results` as a second direct child of that
   same flex row squeezed the input down to a sliver instead of stacking
   below it — fixed by wrapping the row and forcing the results panel onto
   its own full-width line. */
.alq-search-dd .search-form { flex-wrap: wrap; }
.alq-search-dd .alq-search-results { flex: 1 0 100%; margin-top: .5rem; }

.alq-search-loading,
.alq-search-empty {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    padding    : .9rem 1rem;
    font-size  : .82rem;
    color      : var(--alq-wc-muted, #6b7280);
}
.alq-search-spinner {
    width         : 14px;
    height        : 14px;
    border        : 2px solid var(--alq-wc-border, #e5e7eb);
    border-top-color: var(--alq-accent, #b8912a);
    border-radius : 50%;
    display       : inline-block;
    animation     : alq-search-spin .6s linear infinite;
    flex-shrink   : 0;
}
@keyframes alq-search-spin { to { transform: rotate(360deg); } }

.alq-search-result-list {
    list-style: none;
    margin    : 0;
    padding   : .35rem;
}
.alq-search-result-item {
    display        : flex;
    align-items    : center;
    gap            : .65rem;
    padding        : .5rem;
    border-radius  : 6px;
    text-decoration: none;
    color          : inherit;
    transition     : background-color .15s;
}
.alq-search-result-item:hover,
.alq-search-result-item.is-active {
    background: var(--alq-wc-light, #f8f9fa);
}
.alq-search-result-thumb { flex-shrink: 0; }
.alq-search-result-thumb img {
    width        : 44px;
    height       : 44px;
    object-fit   : cover;
    border-radius: 5px;
    display      : block;
    background   : var(--alq-wc-light, #f8f9fa);
}
.alq-search-result-info {
    display      : flex;
    flex-direction: column;
    gap          : .15rem;
    min-width    : 0;
}
.alq-search-result-name {
    font-size    : .82rem;
    font-weight  : 600;
    color        : var(--alq-primary, #0f172a);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.alq-search-result-price {
    font-size  : .78rem;
    font-weight: 700;
    color      : var(--alq-accent, #b8912a);
}
.alq-search-result-price del { color: #9ca3af; font-weight: 400; margin-right: .3rem; }
.alq-search-result-price ins { text-decoration: none; }

.alq-search-see-all {
    display        : block;
    text-align     : center;
    padding        : .75rem 1rem;
    font-size      : .82rem;
    font-weight    : 600;
    color          : var(--alq-primary, #0f172a);
    text-decoration: none;
    border-top     : 1px solid var(--alq-wc-border, #e5e7eb);
    transition     : color .15s;
}
.alq-search-see-all:hover { color: var(--alq-accent, #b8912a); }

/* "Try again" box on no-results page */
.search-again-wrap {
    background: var(--alq-white);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 2px 16px rgba(26,95,168,0.07);
    border: 1px solid rgba(26,95,168,0.07);
}


/* =====================================================================
   10 · COMMENTS
   ===================================================================== */

.comments-section { border-top: 2px solid var(--alq-tint); padding-top: 40px; }

.comments-heading {
    font-family: var(--bs-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--alq-ink);
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--alq-tint);
}

/* Comment list */
.comment-list,
.comment-list .children { list-style: none; padding: 0; margin: 0; }

.comment-list .comment,
.comment-list .pingback  { margin-bottom: 24px; }

/* Comment card */
.comment-body {
    background: var(--alq-white);
    border: 1px solid rgba(26,95,168,0.08);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(26,95,168,0.05);
    position: relative;
}

.comment-awaiting-moderation {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 10px;
}

/* Comment header */
.comment-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.comment-avatar { flex-shrink: 0; }

.comment-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(26,95,168,0.15);
}

.comment-author-name         { font-weight: 700; font-size: 0.95rem; color: var(--alq-ink); margin-bottom: 2px; }
.comment-author-name a       { color: var(--alq-ink); text-decoration: none; transition: color 0.2s ease; }
.comment-author-name a:hover { color: var(--alq-primary); }

.comment-meta-date {
    font-size: 0.78rem;
    color: var(--alq-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.comment-meta-date i { color: var(--alq-primary); font-size: 0.72rem; }

/* Comment text */
.comment-content p { font-size: 0.93rem; color: var(--alq-text); line-height: 1.75; margin-bottom: 0; }

/* Reply link */
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--alq-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 12px;
    transition: color 0.2s ease;
}

.comment-reply-link:hover { color: var(--alq-primary-dark); }

/* Nested replies */
.comment-list .children {
    margin-top: 16px;
    margin-left: 40px;
    border-left: 3px solid rgba(26,95,168,0.12);
    padding-left: 20px;
}

/* Comment navigation */
.comment-navigation a { color: var(--alq-primary); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
.comment-navigation a:hover { color: var(--alq-primary-dark); }

/* Comments closed notice */
.comments-closed {
    background: var(--alq-surface);
    border: 1px solid var(--alq-border);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--alq-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* Comment form */
.comment-notes { font-size: 0.85rem; margin-bottom: 20px; }

.comment-form .form-control {
    border: 1.5px solid var(--alq-border);
    border-radius: 10px;
    font-size: 0.9rem;
    padding: 10px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form .form-control:focus {
    border-color: var(--alq-primary);
    box-shadow: 0 0 0 3px rgba(26,95,168,0.1);
}

.comment-form .form-label { font-size: 0.88rem; font-weight: 600; color: var(--alq-text); margin-bottom: 6px; }

@media (max-width: 576px) {
    .comment-list .children { margin-left: 16px; padding-left: 12px; }
    .comment-body           { padding: 16px; }
    .comment-avatar img     { width: 44px; height: 44px; }
}


/* =====================================================================
   11 · POSTS WIDGET  (.alq-posts-widget / Alqamara_Posts_Widget)
   ===================================================================== */

/* ── Card shell ── */
.alq-pw-card {
    display        : flex;
    flex-direction : column;
    border         : 1px solid #e9ecef !important; /* !important overrides Bootstrap border-0 */
    border-radius  : 10px;
    overflow       : hidden;
    background     : #fff;
    transition     : box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.alq-pw-card:hover {
    box-shadow   : 0 8px 28px rgba(0,0,0,.1);
    transform    : translateY(-3px);
    border-color : var(--alq-accent, #b8912a) !important;
}

/* ── Thumbnail wrap — equal height for all cards ── */
.alq-pw-thumb-wrap {
    position     : relative;
    overflow     : hidden;
    aspect-ratio : 16 / 9;        /* blog/project/service cards */
}
.alq-pw-thumb-wrap--product {
    aspect-ratio : 1 / 1;         /* products look better square */
}
.alq-pw-thumb-link { display: block; width: 100%; height: 100%; }
/*
 * Unified no-image placeholder — used by BOTH the Posts Widget (blog posts)
 * AND WooCommerce product cards.  SVG data URI keeps it font-independent.
 * The icon is a classic "image" outline (rectangle + mountain + sun).
 */
.alq-pw-no-thumb, .alq-cs-no-thumb {
    background-color  : #f3f4f6;
    background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23c8d0da' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    background-repeat : no-repeat;
    background-position: center;
    background-size   : 3rem;
}
.alq-pw-thumb {
    width      : 100%;
    height     : 100%;
    display    : block;
    object-fit : cover;
    transition : transform .4s ease;
}
.alq-pw-card:hover .alq-pw-thumb { transform: scale(1.04); }

/* ── Body ── */
.alq-pw-body {
    padding : 1rem 1.1rem 1.1rem;
    gap     : .35rem;
}

/* ── Title ── */
.alq-pw-title {
    font-size   : 1rem;
    font-weight : 700;
    margin      : 0 0 .15rem;
    line-height : 1.4;
}
.alq-pw-title a {
    color           : var(--alq-primary, #0f172a);
    text-decoration : none;
    transition      : color .2s;
}
.alq-pw-title a:hover { color: var(--alq-accent); }

/* ── Meta row (date + category badge) ── */
.alq-pw-meta {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : .4rem;
    margin      : 0 0 .1rem;
}

/* ── Date (inline inside meta row) ── */
.alq-pw-date {
    font-size   : .78rem;
    color       : var(--alq-primary-muted, #6b7280);
    display     : flex;
    align-items : center;
    gap         : .25rem;
    white-space : nowrap;
}

/* ── Category badge ── */
.alq-pw-cat-badge {
    display         : inline-block;
    font-size       : .72rem;
    font-weight     : 600;
    text-transform  : capitalize;
    letter-spacing  : .04em;
    color           : var(--alq-accent, #b8912a);
    text-decoration : none;
    transition      : color .2s;
}
.alq-pw-cat-badge:hover { color: var(--alq-accent-dark, #9a7821); }

/* ── Excerpt ── */
.alq-pw-excerpt {
    font-size   : .875rem;
    color       : var(--alq-primary-muted, #6b7280);
    line-height : 1.6;
    margin      : 0;
}

/* ── WooCommerce — price ── */
/*
 * DEL / INS / price SPANs are inline — white-space:nowrap keeps the range on one line
 * without display:flex, which can trigger min-width expansion on narrow screens.
 */
.alq-pw-price {
    margin      : .25rem 0;
    font-size   : .82rem;        /* matches .alq-wpr-price (native WC widget) for
                                     consistent price sizing wherever this widget
                                     is placed alongside Top Rated Products —
                                     2026-08-13, see PROGRESS.md */
    white-space : nowrap;
    overflow    : hidden;
    min-width   : 0;             /* prevent flex-item min-width expansion in parent */
}
/* Belt-and-suspenders: if WC outputs a .price wrapper, zero its own spacing */
.alq-pw-price .price,
.alq-pw-price span.price { margin: 0 !important; padding: 0 !important; }
/* Color + weight now match .alq-wpr-price (native WC widget, woocommerce.css)
 * exactly — was slate gray (#64748b) and font-weight 600, a visibly different
 * "this is a price" signal than the accent-gold/bold treatment used
 * everywhere else on the site (product cards, single product, Top Rated
 * Products widget). Found via user comparison of the footer's "Top Rated
 * Products" vs "WC Product" columns 2026-08-13. */
.alq-pw-price .woocommerce-Price-amount { font-weight: 700; color: var(--alq-accent, #b8912a); font-size: .82rem; }
.alq-pw-price del { color: #9ca3af; font-size: .74rem; }
.alq-pw-price ins { text-decoration: none; font-size: .82rem; color: var(--alq-accent, #b8912a); }

/* ── WooCommerce — star rating (Bootstrap Icons, font-independent) ── */
.alq-pw-rating       { margin: .2rem 0; display: flex; align-items: center; gap: .3rem; }
.alq-pw-stars        { display: inline-flex; gap: .05rem; line-height: 1; }
.alq-pw-stars .bi   { color: var(--alq-accent, #b8912a); font-size: .78rem; }
.alq-pw-rcount       { font-size: .72rem; color: #9ca3af; }
/* Keep WC default star-rating hidden — we render our own */
.alq-pw-rating .star-rating { display: none; }

/* ── WooCommerce — add to cart (widget card context) ── */

/* ── WooCommerce — badge stack (Sale / Featured / New / Best Seller / Custom) ──
   ALL badges share one stack, top-LEFT, one under another — same corner,
   same pill shape/border-radius, only the background color differs per
   type. Kept in a single flex container so badges never need individual
   top/left math: add, remove, or reorder one and the others reflow
   automatically. This also keeps every badge away from WooCommerce's own
   full-screen gallery trigger (top-RIGHT on the single product page) with
   no special-casing needed. See alqamara_render_product_badge() and the
   woocommerce_sale_flash filter in inc/woocommerce.php. */
.alq-badge-stack {
    position       : absolute;
    top            : .55rem;
    left           : .55rem;
    z-index        : 2;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : .4rem;
    max-width      : calc(100% - 1.1rem); /* never wider than the image */
    pointer-events : none;
}
.alq-pw-sale-badge,
.alq-new-badge {
    position       : static !important; /* flow children of .alq-badge-stack, not individually placed */
    display        : inline-flex;
    align-items    : center;
    max-width      : 100%;
    padding        : .3rem .6rem;
    border-radius  : 999px;
    font-size      : .64rem;
    font-weight    : 700;
    letter-spacing : .02em;
    text-transform : uppercase;
    color          : #fff;
    box-shadow     : 0 2px 6px rgba(0,0,0,.2);
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}
.alq-pw-sale-badge         { background: var(--alq-accent, #b8912a); }       /* gold    — matches theme accent */
.alq-new-badge--featured   { background: #6d28d9; }                          /* violet  — curated flag */
.alq-new-badge--new        { background: #16a34a; }                          /* green   — freshness */
.alq-new-badge--bestseller { background: #ea580c; }                          /* orange  — popularity */
.alq-new-badge--custom     { background: var(--alq-accent-dark, #9a7821); }  /* theme gold-dark — manual override, was black */
.alq-new-badge--outofstock { background: #4b5563; }                          /* neutral gray — deliberately not red/alarming, just informational */

/* ── WooCommerce — product card corner icons (Wishlist / Compare) ── */

/* Top-right corner icon stack — always visible on hover over the card */
.alq-pw-corner-icons {
    position       : absolute;
    top            : .45rem;
    right          : .45rem;
    display        : flex;
    flex-direction : column;
    gap            : .3rem;
    z-index        : 3;
    opacity        : 0;
    transition     : opacity .2s ease;
}
.alq-pw-card:hover .alq-pw-corner-icons { opacity: 1; }

/* Touch devices have no hover state — keep the icons permanently visible
   below the same breakpoint the mobile bottom bar itself switches on at
   (Bootstrap's lg breakpoint, used consistently elsewhere in this theme),
   otherwise mobile shoppers could never discover Wishlist/Compare on the
   product cards at all. */
@media (max-width: 991.98px) {
    .alq-pw-corner-icons { opacity: 1; }
}

/* Active state (already in this product's wishlist/compare list) — filled
   icon + accent color instead of the plain outline, matching WooCommerce's
   own convention of a filled heart once "added". */
.alq-pw-icon-btn.is-active {
    background : var(--alq-accent, #b8912a);
    color      : #fff !important;
}

/* Individual icon button (circular, white bg).
 * These render as real <button> elements (alq_render_wishlist_compare_icons()
 * in inc/wishlist-compare.php), which get a heavy browser-default border
 * unless explicitly reset — that default border was showing up as an
 * unwanted dark ring around each icon on the shop/archive hover cards.
 * Replaced with `border: none` + a light, subtle border color instead of
 * relying only on the box-shadow, per feedback. */
.alq-pw-icon-btn {
    width           : 2rem;
    height          : 2rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(255,255,255,.92);
    color           : var(--alq-dark, #0f172a) !important;
    border           : 1px solid rgba(15, 23, 42, .08);
    border-radius   : 50%;
    font-size       : .85rem;
    text-decoration : none;
    box-shadow      : 0 1px 4px rgba(0,0,0,.1);
    transition      : background .2s, color .2s, border-color .2s;
}
/* Hover is deliberately a SOFT tint, not the same solid gold as
   `.is-active` below (2026-08-18 — user reported the "added" color
   appearing to "not go away" after removing an item; investigation found
   the toggle logic itself is correct, but hover and active previously
   used the exact identical solid-gold/white styling, so simply leaving
   the cursor resting on an icon after clicking it looked indistinguishable
   from it genuinely still being active). Now hover reads as a light,
   temporary highlight and active as a clearly different, stronger solid
   fill — the two states are visually distinguishable at a glance. */
.alq-pw-icon-btn:hover {
    background   : color-mix(in srgb, var(--alq-accent) 15%, white 85%);
    border-color : var(--alq-accent);
    color        : var(--alq-dark, #0f172a) !important;
}

/* ── Inline variant — single product page, rendered above the Share row.
   Not absolutely positioned (this isn't overlaying a thumbnail), always
   visible (no hover-to-reveal — there's no card to hover), pill-shaped
   with a visible text label instead of icon-only, matching the Share
   row's own visual language (.alq-share-wrap) directly above/below it. ── */
.alq-pw-corner-icons--inline {
    position       : static;
    opacity        : 1;
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : .6rem;
    margin-top     : 1.1rem;
}
.alq-pw-corner-icons--inline .alq-pw-icon-btn {
    width          : auto;
    height         : auto;
    border-radius  : 999px;
    padding        : .5rem .9rem;
    gap            : .4rem;
    background     : #f3f4f6;
    border         : 1.5px solid #e5e7eb;
    font-size      : .82rem;
    font-weight    : 600;
}
/* Same hover/active distinction as the plain icon-button variant above —
   hover is a soft tint, active (genuinely in the list) is solid gold. */
.alq-pw-corner-icons--inline .alq-pw-icon-btn:hover {
    background   : color-mix(in srgb, var(--alq-accent, #b8912a) 15%, white 85%);
    border-color : var(--alq-accent, #b8912a);
    color        : var(--alq-dark, #0f172a) !important;
}
.alq-pw-corner-icons--inline .alq-pw-icon-btn.is-active {
    background   : var(--alq-accent, #b8912a);
    border-color : var(--alq-accent, #b8912a);
    color        : #fff !important;
}
.alq-pw-icon-btn-text { white-space: nowrap; }

/* Cart body (always-visible, for mobile / when no image) */
.alq-pw-cart { margin-top: auto; }
.alq-pw-cart .button,
.alq-pw-cart .add_to_cart_button {
    display         : block;
    width           : 100%;
    padding         : .5rem .9rem !important;  /* !important overrides WC plugin line-height:1 shrinkage */
    line-height     : 1.4  !important;         /* WC plugin sets line-height:1 on .button; fix button height */
    font-size       : .82rem !important;
    font-weight     : 600;
    border-radius   : 5px;
    background      : var(--alq-accent, #b8912a) !important;
    color           : #fff !important;
    border          : none !important;
    cursor          : pointer;
    text-align      : center;
    text-decoration : none;
    transition      : background .2s;
    box-sizing      : border-box;
}
.alq-pw-cart .button:hover,
.alq-pw-cart .add_to_cart_button:hover {
    background : var(--alq-accent-dark, #9a7821) !important;
    color      : #fff !important;
}

/* ── Read More button — full-width, centered text ── */
.alq-pw-readmore {
    font-size   : .8rem;
    font-weight : 600;
    text-align  : center !important;
    display     : block !important;
}

/* ── WooCommerce "View cart" link (shown after add-to-cart) ── */
.alq-pw-cart .added_to_cart {
    display         : block;
    margin-top      : .4rem;
    padding         : .35rem .75rem;
    font-size       : .78rem;
    font-weight     : 600;
    text-align      : center;
    text-decoration : none;
    border          : 1.5px solid var(--alq-accent, #b8912a);
    border-radius   : 5px;
    color           : var(--alq-accent, #b8912a) !important;
    background      : transparent;
    transition      : background .2s, color .2s;
}
.alq-pw-cart .added_to_cart:hover {
    background : var(--alq-accent, #b8912a);
    color      : #fff !important;
}

/* ── Section head (title left + actions right) ── */
.alq-pw-section-head {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 1.5rem;
    gap             : 1rem;
}

/* ── Widget title — same 2rem as .alq-section-title for consistency ── */
.alq-pw-widget-title {
    font-size   : 2rem;
    font-weight : 700;
    color       : var(--alq-primary, #0f172a);
    margin      : 0;
    position    : relative;
    line-height : 1.3;
}
.alq-pw-widget-title::after {
    content       : '';
    display       : block;
    width         : 40px;
    height        : 4px;
    background    : var(--alq-accent, #b8912a);
    margin-top    : 8px;
    border-radius : 2px;
}

/* ── Head actions (View All + nav group) ── */
.alq-pw-head-actions {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    flex-shrink : 0;
}

/* ── "View All" — uses global .btn-outline-custom; no extra CSS needed ── */

/* ── External slider nav buttons (rounded-square, matches View All style) ── */
.alq-pw-slider-nav-btns { display: flex; gap: .35rem; }
.alq-pw-nav-btn {
    width           : 42px;
    height          : 42px;
    border-radius   : 5px;
    border          : 1.5px solid var(--alq-accent, #b8912a);
    background      : transparent;
    color           : var(--alq-accent, #b8912a);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .9rem;
    cursor          : pointer;
    transition      : background .2s, color .2s;
    line-height     : 1;
    padding         : 0;
}
.alq-pw-nav-btn:hover {
    background : var(--alq-accent, #b8912a);
    color      : #fff;
}

/* ── Mobile — section head (title + View All + slider arrows) ──────────────
   Title, "View All" button, and slider nav buttons were all still full
   desktop size on mobile (no override existed anywhere), so on narrow
   screens the three fought for space in one row and the title wrapped to
   two lines. Shrink all three so they comfortably share one line. ── */
@media (max-width: 575.98px) {
    .alq-pw-section-head {
        gap : .5rem;
    }
    .alq-pw-widget-title {
        font-size : 1.15rem;
    }
    .alq-pw-widget-title::after {
        margin-top : 5px;
        height     : 3px;
    }
    .alq-pw-head-actions {
        gap : .35rem;
    }
    .alq-pw-head-actions .btn-outline-custom {
        padding   : .3rem .6rem !important;
        font-size : .72rem;
    }
    .alq-pw-nav-btn {
        width     : 32px;
        height    : 32px;
        font-size : .75rem;
    }
}

/* ── Equal-height cards — columns stretch to match tallest in row ── */
.alq-posts-grid > .alq-pw-col {
    display        : flex;
    flex-direction : column;
}

/*
 * Widget grid — CSS Grid gives equal-height rows natively.
 * --alq-cols is set inline by PHP (1–4 columns).
 * Bootstrap column classes on .alq-pw-col are ignored by grid layout.
 */
.alq-posts-grid {
    display               : grid;
    grid-template-columns : repeat( var(--alq-cols, 3), 1fr );
    gap                   : 1.5rem;
    align-items           : stretch;   /* all cells same height per row */
}
@media (max-width: 991px) {
    .alq-posts-grid {
        grid-template-columns: repeat( min( var(--alq-cols, 3), 2 ), 1fr );
    }
}
@media (max-width: 575px) {
    /* Blog/post cards: 1 column on xs (text-heavy, needs full width) */
    .alq-posts-grid { grid-template-columns: 1fr; }
    /* Product cards: 2 columns on xs (visual cards, compact looks good) */
    .alq-product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Grid item — override Bootstrap col padding/width, be a flex column */
.alq-pw-col {
    padding        : 0 !important;   /* Bootstrap col gutter not needed (grid has gap) */
    width          : auto !important;
    flex           : none !important;
    display        : flex;
    flex-direction : column;
}
/* Card fills the full grid cell height */
.alq-pw-col > .alq-pw-card { flex: 1; }

/* ── Slider (Swiper) — shared by Posts Widget (.alq-posts-slider) and
   Category Showcase Widget (.alq-cs-slider); identical mechanics, so the
   selectors are just extended rather than duplicating the whole block. ── */
.alq-posts-slider, .alq-cs-slider                 { overflow: hidden; }
.alq-posts-slider .swiper-wrapper, .alq-cs-slider .swiper-wrapper { align-items: stretch; }

/*
 * Equal-height cards in Swiper:
 * - swiper-slide gets height:auto so Swiper's flex stretch equalises heights
 * - alq-pw-slide/alq-cs-slide fills that height (height:100%) but must NOT
 *   have flex:1 or width:100% — those fight Swiper's inline width calculation
 *   and break layout
 * - The card inside gets flex:1 to fill the slide vertically
 */
.alq-posts-slider .swiper-slide, .alq-cs-slider .swiper-slide {
    height : auto;      /* Swiper stretch via align-items on wrapper */
    display: flex;
    flex-direction: column;
}
.alq-posts-slider .alq-pw-slide, .alq-cs-slider .alq-cs-slide {
    display       : flex;
    flex-direction: column;
    height        : 100%;   /* fill slide height, no flex:1 / width:100% */
}
.alq-posts-slider .alq-pw-slide > .alq-pw-card,
.alq-cs-slider .alq-cs-slide > .alq-cs-card {
    flex: 1;
}
/* Prevent Swiper from hiding our custom nav buttons (reused as-is by both widgets) */
.alq-pw-nav-btn.swiper-button-lock {
    display : flex !important;
}

/*
 * Fallback layout when Swiper is not initialized (admin widget preview iframe).
 * Swiper adds .swiper-initialized only after JS runs.
 * Without it, slides default to 100% width — only 1 card shows.
 * Fix: show exactly --alq-cols slides at equal widths, rest hidden.
 * This mimics the real slider appearance in admin preview.
 */
.alq-posts-slider:not(.swiper-initialized), .alq-cs-slider:not(.swiper-initialized) {
    overflow : hidden;
}
.alq-posts-slider:not(.swiper-initialized) .swiper-wrapper,
.alq-cs-slider:not(.swiper-initialized) .swiper-wrapper {
    display    : flex !important;
    flex-wrap  : nowrap !important;
    gap        : 24px;
    transform  : none !important;
    height     : auto !important;
    align-items: stretch;
}
.alq-posts-slider:not(.swiper-initialized) .swiper-slide,
.alq-cs-slider:not(.swiper-initialized) .swiper-slide {
    flex        : 0 0 calc( (100% - (var(--alq-cols, 3) - 1) * 24px) / var(--alq-cols, 3) ) !important;
    width       : calc( (100% - (var(--alq-cols, 3) - 1) * 24px) / var(--alq-cols, 3) ) !important;
    min-width   : 0 !important;
    height      : auto !important;
    box-sizing  : border-box;
}

/* ── Dark footer context — invert card + section-head colors ── */
.alq-footer .alq-pw-card {
    background    : rgba(255,255,255,.06);
    border-color  : rgba(255,255,255,.1);
    color         : var(--alq-on-dark-muted);
}
.alq-footer .alq-pw-title,
.alq-footer .alq-pw-title a          { color: var(--alq-on-dark-muted); }
.alq-footer .alq-pw-date,
.alq-footer .alq-pw-excerpt          { color: var(--alq-on-dark-muted); }
.alq-footer .alq-pw-cat-badge        { color: var(--alq-accent); }
.alq-footer .alq-pw-no-thumb, .alq-footer .alq-cs-no-thumb {
    background-color : rgba(255,255,255,.06);
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C0.2)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}
.alq-footer .alq-pw-card:hover       { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
/* Widget title — match existing footer h5 style (white, same underline) */
.alq-footer .alq-pw-widget-title {
    color          : #fff;
    font-size      : 1.02rem !important;
    font-weight    : 600 !important;
    position       : relative !important;
    padding-bottom : 10px !important;
    margin-bottom  : 18px !important;
}
.alq-footer .alq-pw-widget-title::after {
    content    : "" !important;
    position   : absolute !important;
    left       : 0 !important;
    bottom     : 0 !important;
    width      : 60% !important;
    height     : 2px !important;
    background : var(--alq-accent, #b8912a) !important;
}
.alq-footer .btn-outline-custom           { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); }
.alq-footer .btn-outline-custom:hover     { background: var(--alq-accent); border-color: var(--alq-accent); color: #fff; }
.alq-footer .alq-pw-nav-btn               { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.7); }
.alq-footer .alq-pw-nav-btn:hover         { background: var(--alq-accent); border-color: var(--alq-accent); color: #fff; }


/* =====================================================================
   11B · CATEGORY SHOWCASE WIDGET  (.alq-cat-showcase-widget /
         Alqamara_Category_Showcase_Widget)
   ===================================================================== */

/* ── Section head (title LEFT + slider nav RIGHT) — same layout as the
   Posts Widget's .alq-pw-section-head. NOTE: this flex/space-between rule
   was missing entirely in the v2 build — .alq-cs-section-head only had
   margin-bottom, so the title <h3> and the nav-buttons <div> just stacked
   as plain block elements (nav buttons landed left-aligned BELOW the title
   instead of right-aligned beside it). Fixed to match .alq-pw-section-head
   exactly. ── */
.alq-cs-section-head {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 1.5rem;
    gap             : 1rem;
}
.alq-cs-widget-title {
    font-size   : 2rem;
    font-weight : 700;
    color       : var(--alq-primary, #0f172a);
    margin      : 0;
    position    : relative;
    line-height : 1.3;
}
.alq-cs-widget-title::after {
    content       : '';
    display       : block;
    width         : 40px;
    height        : 4px;
    background    : var(--alq-accent, #b8912a);
    margin-top    : 8px;
    border-radius : 2px;
}
@media (max-width: 575.98px) {
    .alq-cs-section-head       { gap: .5rem; }
    .alq-cs-widget-title       { font-size: 1.15rem; }
    .alq-cs-widget-title::after{ margin-top: 5px; height: 3px; }
}
/* NOTE on mobile nav-button sizing: Category Showcase's slider nav buttons
   reuse the Posts Widget's exact .alq-pw-nav-btn class (not a separate
   .alq-cs-nav-btn), so they already shrink to 32x32px on mobile via the
   existing @media (max-width: 575.98px) { .alq-pw-nav-btn {...} } rule
   near .alq-pw-section-head above — no duplicate rule needed here. */

/* ── Grid — CSS Grid, --alq-cols set inline by PHP (1–6 columns) ── */
.alq-cs-grid {
    display               : grid;
    grid-template-columns : repeat( var(--alq-cols, 4), 1fr );
    gap                   : 1.25rem;
}
@media (max-width: 991px) {
    .alq-cs-grid { grid-template-columns: repeat( min( var(--alq-cols, 4), 3 ), 1fr ); }
}
@media (max-width: 575px) {
    .alq-cs-grid { grid-template-columns: repeat( min( var(--alq-cols, 4), 2 ), 1fr ); }
}

/* ── Card — image with a bottom gradient overlay (name + product count) ── */
.alq-cs-card {
    display       : block;
    position      : relative;
    border-radius : 10px;
    overflow      : hidden;
    text-decoration: none !important;
    box-shadow    : 0 2px 10px rgba(0,0,0,.06);
    transition    : box-shadow .25s ease, transform .25s ease;
}
.alq-cs-card:hover {
    box-shadow : 0 8px 28px rgba(0,0,0,.14);
    transform  : translateY(-3px);
}
.alq-cs-thumb-wrap {
    position     : relative;
    overflow     : hidden;
    aspect-ratio : 1 / 1;
    background   : #f3f4f6;
}
.alq-cs-thumb {
    width      : 100%;
    height     : 100%;
    display    : block;
    object-fit : cover;
    transition : transform .4s ease;
}
.alq-cs-card:hover .alq-cs-thumb { transform: scale(1.06); }

/* Bottom gradient overlay — name + count sit on top of the image */
.alq-cs-overlay {
    position   : absolute;
    left       : 0;
    right      : 0;
    bottom     : 0;
    padding    : 2rem .9rem .8rem;
    background : linear-gradient( to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100% );
    display        : flex;
    flex-direction : column;
    gap            : .15rem;
}
.alq-cs-name {
    color       : #fff;
    font-size   : .98rem;
    font-weight : 600;
    line-height : 1.3;
}
.alq-cs-count {
    color     : rgba(255,255,255,.8);
    font-size : .78rem;
}

/* ── Narrow sidebars / footer columns — single-column stacked list ──
   Widget forces --alq-cols:1 server-side; shrink the card + overlay to
   match the compact look used by the Posts Widget in the same contexts. */
.blog-sidebar .alq-cs-grid,
.alq-shop-sidebar .alq-cs-grid,
.alq-footer-col .alq-cs-grid {
    gap : .9rem;
}
.blog-sidebar .alq-cs-thumb-wrap,
.alq-shop-sidebar .alq-cs-thumb-wrap,
.alq-footer-col .alq-cs-thumb-wrap {
    aspect-ratio : 21 / 9;
}
/* NOTE: .alq-cs-name stays white in every context — it sits on the photo's
   own dark gradient overlay, not on the page background, so it never
   needs the per-context color overrides the Posts Widget's plain-text
   title requires. */

/* Footer widget title — match Posts Widget's footer title treatment */
.alq-footer .alq-cs-widget-title {
    color          : #fff;
    font-size      : 1.02rem !important;
    font-weight    : 600 !important;
    position       : relative !important;
    padding-bottom : 10px !important;
    margin-bottom  : 18px !important;
}
.alq-footer .alq-cs-widget-title::after {
    content    : "" !important;
    position   : absolute !important;
    left       : 0 !important;
    bottom     : 0 !important;
    width      : 60% !important;
    height     : 2px !important;
    background : var(--alq-accent, #b8912a) !important;
}

/* ── Design Style: Circle / Outline ──────────────────────────────────
   Same HTML as the default Box/Overlay style (.alq-cs-card > .alq-cs-thumb-wrap
   > [.alq-cs-thumb img] + .alq-cs-overlay > .alq-cs-name/.alq-cs-count) —
   only re-skinned via this modifier class on .alq-cs-wrap, no separate PHP
   render path.
   ──
   IMPORTANT (found live-testing, several iterations to get right):
   .alq-cs-thumb-wrap must NOT have a fixed height here. Box style fixes its
   height (aspect-ratio 1/1) because the overlay sits ABSOLUTELY positioned
   on top of the photo — that's fine, overlay doesn't need wrap to grow.
   Circle style instead wants the overlay to sit BELOW the photo in normal
   flow, so wrap's height must be auto and grow to contain both. overflow
   :visible alone does NOT fix this — a visually-overflowing child never
   grows an ancestor's auto-height (that's the whole point of overflow:
   visible), so with a fixed-height wrap the overlay painted outside it but
   every ancestor up to the Swiper root still sized/clipped to the old
   (photo-only) height and hid it completely. Real fix: give the ROUND
   SHAPE to .alq-cs-thumb (the image/placeholder itself) instead of the
   wrap, and let the wrap be a plain auto-height flex column containing
   both children in normal flow. ── */
.alq-cs-style-circle .alq-cs-grid {
    justify-items : center; /* center each card within its grid cell */
}
.alq-cs-style-circle .alq-cs-slide {
    align-items : center; /* center each card within its slider slide */
    height      : auto;   /* let the slide size to its natural content height */
}
.alq-cs-style-circle .alq-cs-card {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    max-width      : 160px;
    box-shadow     : none;
    overflow       : visible; /* override base .alq-cs-card{overflow:hidden} */
}
/*
 * Specificity note: the shared slider rule is
 * ".alq-cs-slider .alq-cs-slide > .alq-cs-card { flex:1 }" (3 classes) —
 * higher specificity than a plain ".alq-cs-style-circle .alq-cs-card"
 * (2 classes). Matching the same 3-class shape here to win the cascade.
 */
.alq-cs-style-circle .alq-cs-slide > .alq-cs-card {
    flex : none; /* size to natural content, don't stretch to slide height */
}
.alq-cs-style-circle .alq-cs-card:hover {
    box-shadow : none;
    transform  : none;
}
.alq-cs-style-circle .alq-cs-thumb-wrap {
    /* background:none is required here — the BASE .alq-cs-thumb-wrap rule
       (used by Box style, where the wrap IS the fixed-size photo frame)
       sets background:#f3f4f6 as a loading-state/edge fallback behind the
       image. In Circle style the wrap is no longer just the photo frame —
       it's an auto-height flex column containing BOTH the circle AND the
       name/count text below it — so that inherited gray background was
       painting a rectangle behind the whole circle+text block, not just
       the circle. Found via live inspection (getComputedStyle), not
       visible from code review alone. */
    display        : flex;
    flex-direction : column;
    align-items    : center;
    width          : auto;
    height         : auto;
    aspect-ratio   : auto;   /* cancel Box style's 1/1 */
    overflow       : visible;
    background     : none;
    /* Reserve a little headroom above the circle for the hover zoom
       (.alq-cs-thumb scales to 1.08 on hover — on a 120px circle that's
       ~9.6px of growth, split ~4.8px above/below its own box since the
       scale grows from center). In slider mode the outer .alq-cs-slider
       container is overflow:hidden and height-locked to exactly the
       content's natural (non-hover) height by the shared Swiper
       equal-height JS, so without this padding the top of the enlarged
       circle got clipped by that boundary on hover. Padding here counts
       toward the natural height measurement up front, so the room exists
       before the hover even happens — found via live hover test. */
    padding-top    : 6px;
}
.alq-cs-style-circle .alq-cs-thumb {
    /* No padding/background here on purpose — a white ring behind the
       photo (inside the border) was tried first, but it reads as a
       redundant "box inside a box" once you already have the Box/Overlay
       style elsewhere on the site, and it's not needed for a real photo
       (object-fit:cover already fills the full circle). The border now
       sits flush against the image. The no-image placeholder case still
       gets its own light background from .alq-cs-no-thumb below (that
       rule is untouched) so the icon stays visible on any page background. */
    width           : 120px;
    height          : 120px;
    flex-shrink     : 0;
    border-radius   : 50%;
    /* Neutral border, not the accent gold — this widget can show either
       WooCommerce product categories (accent-color contexts) or blog
       categories (dark-navy contexts), so a brand-tied color would clash
       in one of the two use cases. --alq-border is the theme's existing
       neutral border color, already used everywhere else regardless of
       blog/shop context. A subtle accent-color hover keeps some visual
       interest without permanently committing to one palette. */
    border          : 3px solid var(--alq-border, #e5e2d6);
    box-sizing      : border-box;
    object-fit      : cover;
    transition      : border-color .25s ease, transform .4s ease;
}
.alq-cs-style-circle .alq-cs-card:hover .alq-cs-thumb {
    border-color : var(--alq-accent, #b8912a);
    transform     : scale(1.08);
}
.alq-cs-style-circle .alq-cs-overlay {
    position       : static;
    background     : none;
    padding        : .7rem 0 0;
    align-items    : center;
    text-align     : center;
}
.alq-cs-style-circle .alq-cs-name {
    color     : var(--alq-primary, #0f172a);
    font-size : .95rem;
}
.alq-cs-style-circle .alq-cs-count {
    color     : #64748b;
    font-size : .78rem;
}
/* Dark footer context — circle style's text sits on the footer background
   now (not on the photo), so it needs the same per-context color override
   the Posts Widget's plain-text title already requires for the same reason. */
.alq-footer .alq-cs-style-circle .alq-cs-name  { color: #fff; }
.alq-footer .alq-cs-style-circle .alq-cs-count { color: rgba(255,255,255,.65); }
/* Narrow sidebars force a wide 21/9 thumb for Box style, but Circle style
   should stay a small circle everywhere regardless of column count. */
.blog-sidebar .alq-cs-style-circle .alq-cs-thumb,
.alq-shop-sidebar .alq-cs-style-circle .alq-cs-thumb,
.alq-footer-col .alq-cs-style-circle .alq-cs-thumb {
    width  : 90px;
    height : 90px;
}


/* =====================================================================
   12 · FOOTER
   ===================================================================== */

.alq-footer   { background: var(--alq-footer-bg, var(--alq-primary-dark)); color: var(--alq-on-dark-muted); }
.alq-footer a { color: var(--alq-on-dark-muted); text-decoration: none; transition: color .2s ease; }
.alq-footer a:hover { color: var(--alq-accent); }

.alq-footer-top { padding: 60px 0 34px; }

.alq-footer-col h5 {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.alq-footer-col h5::after,
.alq-footer-col .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 2px;
    background: var(--alq-accent);
}

.alq-footer-col p    { color: var(--alq-on-dark-muted); font-size: .92rem; line-height: 1.7; }
.alq-footer-links    { list-style: none; padding: 0; margin: 0; }
.alq-footer-links li { margin-bottom: 10px; }

/* Contact Info widget (inc/contact-widget.php) — icon + label shown once
   per group, lines listed underneath (indented to align under the label,
   not the icon). This is a REGISTERED WIDGET, usable in any widget area.
   Base colors are the theme's normal (dark-on-light) text colors, since
   most widget areas default to a light background; only .alq-footer-col
   (reliably dark) gets the light-on-dark override below. */
.alq-contact-info-widget {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.alq-contact-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.alq-contact-info-icon {
    color: var(--alq-accent);
    font-size: 1rem;
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
}
.alq-contact-info-label {
    color: var(--alq-primary, #0f172a);
    font-weight: 700;
    font-size: .95rem;
}
.alq-contact-info-label--regular {
    font-weight: 400;
}
.alq-contact-info-lines {
    padding-left: 28px;
}
.alq-contact-info-lines--flush {
    padding-left: 0;
}
.alq-contact-info-line {
    color: var(--alq-text, #333);
    font-size: .9rem;
    line-height: 1.7;
}
.alq-footer-col .alq-contact-info-label {
    color: #fff;
}
.alq-footer-col .alq-contact-info-line {
    color: var(--alq-on-dark-muted);
}

/* Widget title inside footer columns — same style as h5 */
.alq-footer-col .widget-title {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

/* Nav menu widget inside footer — remove list bullets & default padding */
.alq-footer-col .widget_nav_menu ul,
.alq-footer-col .widget_nav_menu li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.alq-footer-col .widget_nav_menu li { margin-bottom: 10px; }
.alq-footer-col .widget_nav_menu a {
    color: var(--alq-on-dark-muted);
    text-decoration: none;
    font-size: .92rem;
    transition: color .2s ease;
}
.alq-footer-col .widget_nav_menu a:hover { color: var(--alq-accent); }

/* Footer legal row widget — center-aligned nav menu */
.alq-footer-mid .widget_nav_menu ul,
.alq-footer-mid .widget_text,
.alq-footer-mid .widget_custom_html {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    justify-content: center;
}
.alq-footer-mid .widget_nav_menu li { margin: 0; }
.alq-footer-mid .widget_nav_menu a,
.alq-footer-mid .widget_text,
.alq-footer-mid .widget_custom_html {
    color: var(--alq-on-dark-muted);
    font-size: .92rem;
    text-decoration: none;
    transition: color .2s ease;
}
.alq-footer-mid .widget_nav_menu a:hover { color: var(--alq-accent); }
.alq-footer-mid .widget-title { display: none; }

.alq-footer-brand .alq-footer-logo {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 14px;
    text-decoration: none;
}

/* Site name fallback */
.alq-footer-brand .alq-footer-logo span { color: var(--alq-accent); }

/* Custom logo image */
.alq-footer-brand .alq-footer-logo img {
    max-height: 55px;
    width: auto;
    display: block;
}

.alq-footer-social { margin-top: 6px; }

.alq-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    transition: background .2s, border-color .2s, color .2s;
    text-decoration: none;
}

.alq-footer-social a:hover {
    background: var(--alq-accent);
    color: var(--alq-primary);
    border-color: var(--alq-accent);
}

.alq-footer-mid {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    /* border-bottom removed — alq-footer-bottom already has border-top above it */
}

.alq-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    justify-content: center;
}

.alq-footer-menu a { font-size: .92rem; }

.alq-footer-bottom                       { padding: 20px 0; font-size: .88rem; border-top: 1px solid rgba(255,255,255,.08); }
.alq-footer-bottom .alq-designed a       { color: var(--alq-accent); }
.alq-footer-bottom .alq-designed a:hover { color: #fff; }

/* Footer uses Bootstrap .row/.col — no custom grid needed.
   Brand column : col-lg-3 (fixed).
   Widget zone  : col-lg-9 → inner .row with dynamic col classes (1–4 active areas). */
.alq-footer-col { min-width: 0; }

/* Brand column — subtle right border on desktop */
@media (min-width: 992px) {
    .alq-footer-brand {
        border-right  : 1px solid rgba(255,255,255,.08);
        padding-right : 2.5rem;
    }
}

@media (max-width: 575px) {
    .alq-footer-menu   { gap: 6px 18px; }
    .alq-footer-bottom { text-align: center; }
}


/* =====================================================================
   12 · PAGE TEMPLATES
   ===================================================================== */

/* ---- Blank canvas ---- */
.blank-canvas-wrapper   { min-height: 60vh; }
.blank-canvas-container { padding: 0; }
.blank-canvas-content   { width: 100%; }

.blank-canvas-content h1,
.blank-canvas-content h2,
.blank-canvas-content h3,
.blank-canvas-content h4,
.blank-canvas-content h5,
.blank-canvas-content h6 {
    font-family: var(--bs-font-heading);
    font-weight: 700;
    color: var(--alq-ink);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.blank-canvas-content p { font-size: 0.97rem; color: var(--alq-text); line-height: 1.8; margin-bottom: 1.2rem; }

.blank-canvas-content a {
    color: var(--alq-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.blank-canvas-content a:hover { color: var(--alq-primary-dark); }
.blank-canvas-content img     { max-width: 100%; height: auto; }


/* ---- Guide template (page-templates/template-guide.php) ----
   Sticky sidebar Table of Contents. See inc/doc-toc.php for why this is a
   separate mechanism from the blog-post inline TOC box (css rules for that
   one — .alq-toc-box etc. — live further down, unaffected by this block).
   Class names below still say "doc" (internal only, not user-facing) —
   left as-is when the template was renamed from "Documentation" to
   "Guide" for general-purpose use, to avoid an unnecessary CSS/JS/PHP
   rename across every file that touches this feature. */

/* Headings need breathing room above them so a jump-link doesn't land the
   heading text flush against (or hidden behind) the sticky site header —
   96px comfortably clears the header's own height on every layout this
   theme ships (Single Row and Two Rows alike) plus a little visual margin. */
.alq-doc-content h2,
.alq-doc-content h3 {
    scroll-margin-top: 96px;
}

.alq-doc-toc-wrap {
    /* Sits below the site's own sticky header (not at the very top of the
       viewport) and stops scrolling with the page once it reaches there —
       the standard "sticky sidebar" pattern. Falls back to static on
       mobile below, since col-lg-4 already stacks it under the content
       there and a short screen has no room for a pinned sidebar anyway.
       display:flex + overflow:hidden here (rather than overflow-y:auto)
       is what lets the search box stay permanently visible below — see
       .alq-doc-toc-nav, which is the part that actually scrolls now
       (found needed from live testing, 2026-08-30: with the whole sidebar
       scrolling as one block, scrolling back up to the very top of the
       page didn't reliably bring the search box back into view, since the
       "bring the active link into view" logic only guaranteed the LINK was
       visible, not everything above it). */
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 116px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.alq-doc-toc-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* allow this flex child to actually shrink so its own child can scroll, instead of forcing the whole box to grow past max-height */
    background: #fff;
    border: 1px solid var(--alq-border, #e5e2d6);
    border-radius: 10px;
    padding: 20px;
}

.alq-doc-toc-search-wrap {
    position: relative;
    margin-bottom: 16px;
    flex: 0 0 auto; /* pinned — never part of the scrolling area below */
}

.alq-doc-toc-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--alq-text);
    opacity: 0.55;
    pointer-events: none;
}

.alq-doc-toc-search {
    width: 100%;
    padding: 9px 14px 9px 36px;
    font-size: 0.88rem;
    background: #fff;
    border: 1px solid var(--alq-border, #e5e2d6);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease;
}

.alq-doc-toc-search:focus {
    border-color: var(--alq-accent);
}

.alq-doc-toc-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alq-text);
    opacity: 0.65;
    margin-bottom: 10px;
    flex: 0 0 auto; /* pinned, same as the search box above it */
}

.alq-doc-toc-nav {
    /* The ONLY part of the sidebar that scrolls — search box and title
       above are flex:0 (fixed), this is flex:1 (fills, then scrolls
       internally). min-height:0 is required here too, for the same
       flexbox-children-won't-shrink-below-content-size reason as .alq-doc-toc-inner. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.alq-doc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alq-doc-toc-list li {
    margin: 0;
}

.alq-doc-toc-item-sub {
    padding-left: 16px;
}

.alq-doc-toc-link {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--alq-text);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.alq-doc-toc-item-sub .alq-doc-toc-link {
    font-size: 0.84rem;
    opacity: 0.85;
}

.alq-doc-toc-link:hover {
    background: var(--alq-content-bg, #fbfbfb);
    color: var(--alq-primary);
}

.alq-doc-toc-link.is-active {
    background: var(--alq-content-bg, #fbfbfb);
    color: var(--alq-accent);
    border-left-color: var(--alq-accent);
    font-weight: 600;
}

.alq-doc-toc-empty-msg {
    font-size: 0.85rem;
    color: var(--alq-text);
    opacity: 0.65;
    padding: 8px 10px 0;
    margin: 0;
    flex: 0 0 auto;
}

/* Below the row's own breakpoint (col-lg-4 stacks under the content),
   a pinned sidebar has nowhere useful to pin to — let it scroll normally
   like any other block instead. Undo the flex/scroll setup from above too,
   so mobile gets one plain stacked block rather than a short inner
   scrollbox squeezed under the search bar. */
@media (max-width: 991.98px) {
    .alq-doc-toc-wrap {
        position: static;
        max-height: none;
        overflow: visible;
        display: block;
    }

    .alq-doc-toc-inner {
        display: block;
    }

    .alq-doc-toc-nav {
        overflow-y: visible;
    }
}

/* ---- Guide Hub (page-templates/template-guide-hub.php) ----
   Hub-level search box, scoped to that one hub's own direct children only
   (see inc/doc-toc.php's alqamara_doc_toc_build_search_index() and
   js/alq-hub-search.js for the reasoning/behavior). Reuses the exact same
   .alq-doc-toc-search / .alq-doc-toc-search-icon box styling as the Guide
   template's own per-page search above (applied as an extra class on the
   markup itself) so the two look like one consistent pattern site-wide,
   while keeping its own wrapper/results classes so the two scripts never
   collide.

   Band placement: a full-width strip directly under the page banner (see
   template-guide-hub.php) rather than tucked above the card grid further
   down — moved here from user feedback: a search box should be one of the
   first things a visitor sees, not something found only after scrolling
   past the intro text. Slim on purpose (16px vertical padding, not a
   second hero) — it's a utility bar, not a new banner. Band background
   uses --alq-surface (the theme's existing warm-grey "alternating section"
   tone, not a one-off color) so the white search input actually stands out
   against it — the earlier --alq-content-bg fallback (#fbfbfb) was close
   enough to the page's own white background that the band barely read as
   a distinct bar (caught from user feedback live-testing). */

.alq-hub-search-band {
    background: var(--alq-surface, #f7f4ec);
    border-bottom: 1px solid var(--alq-border, #e5e2d6);
    padding: 16px 0;
}

.alq-hub-search-wrap {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.alq-hub-search-results {
    /* top: 100% (not 100% + Npx) — deliberately flush against the input's
       own bottom edge, no visible gap between the two, so the results
       panel reads as physically attached to the search box rather than a
       separate floating card (caught from user feedback live-testing).
       Top corners squared to match — only the bottom corners stay rounded,
       so the whole thing looks like one continuous control opening
       downward instead of a rounded box floating just below another one. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--alq-border, #e5e2d6);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
}

.alq-hub-search-result {
    padding: 8px 10px;
    border-radius: 8px;
}

.alq-hub-search-result + .alq-hub-search-result {
    margin-top: 2px;
    border-top: 1px solid var(--alq-border, #e5e2d6);
    padding-top: 12px;
}

.alq-hub-search-result-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--alq-ink);
    text-decoration: none;
}

.alq-hub-search-result-title:hover {
    color: var(--alq-primary);
}

.alq-hub-search-result-headings {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.alq-hub-search-result-headings li {
    margin: 0;
}

.alq-hub-search-result-headings a {
    display: block;
    padding: 4px 0 4px 14px;
    font-size: 0.85rem;
    color: var(--alq-text);
    opacity: 0.85;
    text-decoration: none;
    border-left: 2px solid var(--alq-border, #e5e2d6);
}

.alq-hub-search-result-headings a:hover {
    color: var(--alq-accent);
    border-left-color: var(--alq-accent);
    opacity: 1;
}

.alq-hub-search-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.88rem;
    color: var(--alq-text);
    opacity: 0.65;
}

@media (max-width: 575.98px) {
    .alq-hub-search-wrap {
        max-width: 100%;
    }
}


/* ---- Guide content — tables, callout notes, badges ----
   Only these three content patterns needed dedicated styling; everything
   else in a documentation page (headings, paragraphs, lists, links) already
   inherits the same rules the theme applies to any page's .page-entry-content. */

.alq-doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 0.93rem;
}

.alq-doc-content th,
.alq-doc-content td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--alq-border, #e5e2d6);
    vertical-align: top;
}

.alq-doc-content th {
    background: var(--alq-primary);
    color: #fff;
    font-weight: 600;
}

.alq-doc-content tr:nth-child(even) td {
    background: var(--alq-content-bg, #fbfbfb);
}

.alq-doc-content code {
    background: var(--alq-content-bg, #fbfbfb);
    border: 1px solid var(--alq-border, #e5e2d6);
    border-radius: 4px;
    padding: 1px 7px;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.88em;
    color: #8a5a00;
}

/* Callout box — used for "Note:", "Tip:", warnings. Left accent bar keeps
   it visually distinct from a normal paragraph without needing an icon. */
.alq-doc-note {
    border-left: 4px solid var(--alq-accent);
    background: var(--alq-content-bg, #fdf8ec);
    padding: 14px 20px;
    border-radius: 0 8px 8px 0;
    margin: 18px 0;
    font-size: 0.94rem;
}

.alq-doc-note strong {
    color: #8a5a00;
}

/* Screenshot images inside doc content — consistent card-style framing */
.alq-doc-content .alq-doc-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--alq-border, #e5e2d6);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    margin: 18px 0 6px;
}

.alq-doc-content .alq-doc-shot-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--alq-text);
    opacity: 0.7;
    margin: 0 0 22px;
}


/* =====================================================================
   13 · BOOTSTRAP & BRAND OVERRIDES
   ===================================================================== */

/* Bootstrap primary button — brand navy */
.btn-primary {
    --bs-btn-bg:                 var(--alq-primary);
    --bs-btn-border-color:       var(--alq-primary);
    --bs-btn-hover-bg:           var(--alq-primary-dark);
    --bs-btn-hover-border-color: var(--alq-primary-dark);
    --bs-btn-active-bg:          var(--alq-primary-dark);
    --bs-btn-active-border-color:var(--alq-primary-dark);
}

/* Bootstrap outline-primary button — brand navy */
.btn-outline-primary {
    --bs-btn-color:              var(--alq-primary);
    --bs-btn-border-color:       var(--alq-primary);
    --bs-btn-hover-bg:           var(--alq-primary);
    --bs-btn-hover-border-color: var(--alq-primary);
}

/* Breadcrumb separator colour */
.breadcrumb-item + .breadcrumb-item::before { color: var(--alq-muted); }

/* Widget search — styles now in unified 09 · SEARCH FORMS block above */
/* =========================================================
   SERVICE CARDS
   ========================================================= */
.alq-service-card {
    background: #fff;
    border: 1px solid #e9ecef;
    color: #111;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .25s, box-shadow .25s;
}
.alq-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,.13);
}
.alq-service-card:hover .alq-service-title { color: var(--alq-accent); }

.alq-service-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: var(--alq-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    align-self: flex-start;
}
.alq-service-icon--lg { width: 64px; height: 64px; min-width: 64px; font-size: 1.6rem; }

.alq-service-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111;
    transition: color .2s;
}
.alq-service-desc {
    font-size: .88rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
}
.alq-service-readmore {
    font-size: .82rem;
    font-weight: 700;
    color: var(--alq-accent);
    text-decoration: none;
    transition: color .2s, letter-spacing .2s;
}
.alq-service-readmore:hover { color: var(--alq-primary); letter-spacing: .02em; }


/* =========================================================
   MOBILE SEARCH — inside slide menu
   ========================================================= */
.mobile-menu-search {
    border-bottom : 1px solid var(--alq-surface);
    padding       : 12px 16px;
}
/* Stretch the form to full width of the panel */
.mobile-menu-search .search-form,
.mobile-menu-search .search-form-inner { width: 100%; }


/* =========================================================
   TEAM MEMBERS
   ========================================================= */

/* ── Archive card ── */
.alq-team-card {
    background    : #fff;
    border        : 1px solid var(--alq-border);
    border-radius : 14px;
    overflow      : hidden;
    transition    : transform .25s, box-shadow .25s;
    text-align    : center;
    height        : 100%;
    display       : flex;
    flex-direction: column;
}
.alq-team-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 28px rgba(0,0,0,.12);
}

/* ── Photo link wrapper ── */
.alq-team-photo-link {
    display : block;
    width   : 100%;
    height  : 100%;
}

/* ── Photo wrapper ── */
.alq-team-photo-wrap {
    position : relative;
    overflow  : hidden;
    aspect-ratio : 1 / 1;
    background : var(--alq-surface);
}
.alq-team-photo,
.alq-team-photo-wrap img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform .35s ease;
}
.alq-team-card:hover .alq-team-photo,
.alq-team-card:hover .alq-team-photo-wrap img { transform: scale(1.05); }

/* Photo placeholder (no thumbnail) */
.alq-team-photo-placeholder {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    color           : var(--alq-muted);
    font-size       : 3rem;
    text-decoration : none;
}

/* ── Social overlay ── */
.alq-team-social-overlay {
    position        : absolute;
    inset           : 0;
    background      : rgba(13,27,62,.55);
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 12px;
    opacity         : 0;
    transition      : opacity .25s;
}
.alq-team-card:hover .alq-team-social-overlay { opacity: 1; }

/* Inner links row — allow wrapping so icons never clip */
.alq-team-social-links {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 8px;
    max-width       : 100%;
}

.alq-team-social-link {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : rgba(255,255,255,.15);
    border          : 1.5px solid rgba(255,255,255,.5);
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .8rem;
    text-decoration : none;
    transition      : background .2s, border-color .2s, transform .2s;
}
.alq-team-social-link:hover {
    background    : var(--alq-accent);
    border-color  : var(--alq-accent);
    color         : #fff;
    transform     : scale(1.1);
}

/* ── Card info strip ── */
.alq-team-info {
    padding    : 18px 16px 20px;
    flex-grow  : 1;
    display    : flex;
    flex-direction : column;
    justify-content: center;
}
.alq-team-name {
    font-size   : 1rem;
    font-weight : 700;
    margin      : 0 0 4px;
    color       : var(--alq-ink);
}
.alq-team-name a {
    color           : inherit;
    text-decoration : none;
    transition      : color .2s;
}
.alq-team-name a:hover { color: var(--alq-accent); }

.alq-team-position {
    font-size   : .82rem;
    color       : var(--alq-accent);
    font-weight : 600;
    margin      : 0;
    letter-spacing : .03em;
    text-transform : uppercase;
}

/* ── Single profile page — sticky card ──────────────────────────────────── */
.alq-team-profile-card {
    position      : sticky;
    top           : 100px;
    background    : var(--alq-content-bg, #fff);
    border        : 1px solid var(--alq-border);
    border-radius : 14px;
    box-shadow    : 0 4px 24px rgba(0,0,0,.09);
    overflow      : hidden;
}
.col-lg-4:has(.alq-team-profile-card) { align-self: stretch; }

/* Photo — full-width at top of card */
.alq-team-profile-photo-wrap { line-height: 0; }
.alq-team-profile-photo {
    width        : 100%;
    aspect-ratio : 3 / 4;
    object-fit   : cover;
    object-position: top center;
    display      : block;
}
.alq-team-profile-photo-placeholder {
    width           : 100%;
    aspect-ratio    : 3 / 4;
    background      : var(--alq-surface);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--alq-border);
}

/* Card body padding */
.alq-team-profile-body { padding: 1.5rem; }

.alq-team-profile-name {
    font-size     : 1.2rem;
    font-weight   : 700;
    color         : var(--alq-primary);
    margin-bottom : .25rem;
}
.alq-team-profile-position {
    font-size      : .82rem;
    font-weight    : 600;
    color          : var(--alq-accent);
    text-transform : uppercase;
    letter-spacing : .05em;
    margin-bottom  : 0;
}
.alq-team-profile-divider {
    border-color : var(--alq-border);
    margin       : 1rem 0;
}

/* Contact items */
.alq-team-profile-contact {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}
.alq-team-contact-item {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    font-size       : .85rem;
    color           : var(--alq-text);
    text-decoration : none;
    transition      : color .2s;
    word-break      : break-all;
}
.alq-team-contact-item:hover { color: var(--alq-accent); }
.alq-team-contact-item i { color: var(--alq-accent); width: 16px; text-align: center; flex-shrink: 0; }

/* Social buttons */
.alq-team-social-list {
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px;
}
.alq-team-social-btn {
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    background      : var(--alq-tint);
    color           : var(--alq-primary);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .88rem;
    text-decoration : none;
    transition      : background .2s, color .2s, transform .2s;
}
.alq-team-social-btn:hover {
    background : var(--alq-accent);
    color      : #fff;
    transform  : scale(1.1);
}

/* Bio column — name/position (banner OFF only) */
.alq-team-single-name {
    font-size     : 2rem;
    font-weight   : 800;
    color         : var(--alq-ink);
    margin-bottom : 4px;
}
.alq-team-single-position {
    font-size      : .95rem;
    font-weight    : 600;
    color          : var(--alq-accent);
    letter-spacing : .04em;
    text-transform : uppercase;
    margin-bottom  : 1rem;
}

/* Department badges */
.alq-badge-dept {
    background    : var(--alq-tint);
    color         : var(--alq-primary);
    font-size     : .78rem;
    font-weight   : 600;
    padding       : 4px 12px;
    border-radius : 50px;
    margin-right  : 4px;
}

/* Bio body typography */
.alq-single-team-body {
    line-height : 1.8;
    color       : var(--alq-text);
}

/* Mobile — unstick card */
@media (max-width: 991.98px) {
    .alq-team-profile-card { position: static; }
}


/* =============================================================================
   PHASE 4 — HOMEPAGE SECTIONS
   (Section base · Hero · Stats · About · Services extra · Projects · Team extra
    Testimonials · Blog · Partners · Newsletter · Generic Rows · CTA Banner)
============================================================================= */

/* ── Section Base ─────────────────────────────────────────────────────────── */
.alq-section {
    position       : relative;
    padding-top    : 80px;
    padding-bottom : 80px;
    overflow       : hidden;
}

/* Shared semi-transparent dark overlay for image backgrounds */
.alq-bg-overlay {
    position   : absolute;
    inset      : 0;
    background : rgba(10, 15, 44, .6);
    z-index    : 0;
    pointer-events : none;
}

/* ── Section Header (title + subtitle) ────────────────────────────────────── */
.alq-section-header {
    margin-bottom : 3rem;
}
.alq-section-title {
    font-size      : 2rem;
    font-weight    : 700;
    color          : var(--alq-primary, #0f172a);
    margin-bottom  : .5rem;
    position       : relative;
    display        : inline-block;
}
.alq-section-title::after {
    content       : '';
    display       : block;
    width         : 48px;
    height        : 4px;
    background    : var(--alq-accent, #b8912a);
    margin        : 10px auto 0;
    border-radius : 2px;
}
.alq-section-header.text-white .alq-section-title {
    color : #fff;
}
.alq-section-header.text-white .alq-section-title::after {
    background : rgba(255,255,255,.7);
}
.alq-section-subtitle {
    font-size    : 1rem;
    color        : var(--alq-muted, #6c757d);
    max-width    : 600px;
    margin-left  : auto;
    margin-right : auto;
    margin-top   : .5rem;
}
.alq-section-header.text-white .alq-section-subtitle {
    color : rgba(255, 255, 255, .8);
}


/* ── Hero Section ─────────────────────────────────────────────────────────── */
.alq-hero-section {
    min-height      : 100vh;
    display         : flex;
    align-items     : center;
    padding         : 0;
    overflow        : hidden;
}
.alq-hero-bg {
    position : absolute;
    inset    : 0;
    z-index  : 0;
}
.alq-hero-bg-img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}
.alq-hero-overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(135deg, rgba(10,15,44,.82) 0%, rgba(10,15,44,.42) 100%);
}
.alq-hero-inner {
    position        : relative;
    z-index         : 1;
    width           : 100%;
    padding-top     : calc(var(--alq-header-total-h, 80px) + 60px);
    padding-bottom  : 80px;
}
.alq-hero-title {
    font-size  : clamp(2rem, 5vw, 3.5rem);
    color      : #fff;
    line-height: 1.2;
}
.alq-hero-subtitle {
    font-size : clamp(1rem, 2vw, 1.25rem);
    color     : rgba(255,255,255,.85);
    max-width : 620px;
}
/* btn-hero-primary / btn-hero-secondary → defined in the real hero block above
   (~line 1965). This used to have a duplicate .btn-hero-secondary:hover rule
   here (a leftover from the unused .alq-hero-* block below) that silently
   overrode the real one, since a later same-specificity rule always wins —
   removed so the accent-color hover set above is the only rule left. */


/* ── Stats Counter ────────────────────────────────────────────────────────── */
.alq-stats-section {
    background : #0a0f2c;
}
.alq-stat-item {
    padding : 1.5rem 1rem;
}
.alq-stat-icon {
    font-size  : 2.5rem;
    color      : var(--alq-accent, #c9a84c);
}
.alq-stat-number {
    font-size   : clamp(2rem, 4vw, 3rem);
    font-weight : 700;
    color       : #fff;
    line-height : 1;
}
.alq-stat-label {
    font-size   : .9rem;
    color       : rgba(255,255,255,.7);
    margin-top  : .4rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* ── About Section ────────────────────────────────────────────────────────── */
.alq-about-section {
    background : var(--alq-section-warm);
}

/* Mobile: cap image height so it doesn't dominate the screen */
.alq-about-img {
    width      : 100%;
    max-height : 320px;
    object-fit : cover;
    object-position : center;
}

/* Desktop: remove the cap — let the image breathe naturally */
@media (min-width: 992px) {
    .alq-about-img {
        max-height : none;
        object-fit : unset;
    }
}


/* ── Services — alq-service-body (missing from Phase 2) ──────────────────── */
.alq-service-body {
    flex : 1 1 0%;
}


/* ── Features (Why Work With Us) ──────────────────────────────────────────── */
.alq-feature-card {
    border        : 1px solid #e9ecef;
    border-radius : 12px;
    background    : #fff;
    transition    : box-shadow .25s, transform .25s;
}
.alq-feature-card:hover {
    box-shadow : 0 6px 24px rgba(0,0,0,.09);
    transform  : translateY(-3px);
}

/* Circular icon wrapper — gold tint background, accent icon */
.alq-feature-icon-wrap {
    width           : 64px;
    height          : 64px;
    border-radius   : 50%;
    background      : #f8f2e3;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0 auto 1rem;
    font-size       : 1.4rem;
    color           : var(--alq-accent);
    transition      : background .25s;
}
.alq-feature-card:hover .alq-feature-icon-wrap {
    background : var(--alq-accent);
    color      : #fff;
}

.alq-feature-title {
    font-size   : 1rem;
    font-weight : 700;
    color       : var(--alq-dark);
    margin-bottom : .5rem;
}
.alq-feature-desc {
    font-size   : .875rem;
    color       : var(--alq-primary);
    line-height : 1.6;
}


/* ── Projects ─────────────────────────────────────────────────────────────── */
.alq-projects-section {
    background : var(--alq-section-light);
}
.alq-project-card {
    background  : #fff;
    box-shadow  : 0 2px 12px rgba(0,0,0,.07);
    transition  : transform .25s, box-shadow .25s;
}
.alq-project-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 24px rgba(0,0,0,.12);
}
.alq-project-img-wrap {
    position   : relative;
    overflow   : hidden;
}
.alq-project-img {
    display    : block;
    width      : 100%;
    height     : 220px;
    object-fit : cover;
    transition : transform .4s ease;
}
.alq-project-card:hover .alq-project-img {
    transform : scale(1.05);
}
.alq-project-img-placeholder {
    width      : 100%;
    height     : 220px;
    background : #dee2e6;
}
.alq-project-overlay {
    position   : absolute;
    inset      : 0;
    background : rgba(10,15,44,.7);
    display    : flex;
    align-items: center;
    justify-content: center;
    opacity    : 0;
    transition : opacity .3s;
}
.alq-project-card:hover .alq-project-overlay {
    opacity : 1;
}
.alq-project-link {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    background      : var(--alq-accent, #c9a84c);
    color           : #fff;
    font-size       : 1rem;
    text-decoration : none;
    transform       : scale(.8);
    transition      : transform .2s;
}
.alq-project-card:hover .alq-project-link {
    transform : scale(1);
}
.alq-project-info {
    background : #fff;
}
.alq-project-cat {
    display         : inline-block;
    font-size       : .75rem;
    font-weight     : 600;
    color           : var(--alq-accent, #c9a84c);
    text-transform  : uppercase;
    letter-spacing  : .05em;
}
.alq-project-title a {
    color           : var(--alq-primary, #0f172a);
    text-decoration : none;
    transition      : color .2s;
}
.alq-project-title a:hover {
    color : var(--alq-accent, #c9a84c);
}


/* ── Testimonials ─────────────────────────────────────────────────────────── */
.alq-testi-section {
    background : #f8f9fa;
}
.alq-testi-item {
    background    : #fff;
    border-radius : 12px;
    padding       : 2rem;
    border        : 1px solid var(--alq-border, #e5e2d6);
    box-shadow    : 0 4px 20px rgba(0,0,0,.09);
    height        : 100%;
    position      : relative;
    transition    : box-shadow .25s, transform .25s;
}
.alq-testi-item:hover {
    box-shadow : 0 8px 32px rgba(0,0,0,.13);
    transform  : translateY(-3px);
}
.alq-testi-item::before {
    content     : '\201C';   /* " */
    display     : block;
    font-family : Georgia, 'Times New Roman', serif;
    font-size   : 4.5rem;
    line-height : 1;
    color       : var(--alq-accent, #b8912a);
    opacity     : .35;
    margin-bottom: -.75rem;
    user-select : none;
}
/* Image embedded in the testimonial's own content editor (separate from
   the author's circular avatar below) — shown so whatever the admin adds
   in the content editor (text and/or image) actually renders in card
   views too, not just on the full single-testimonial page. Added
   2026-08-12 alongside inc/helpers.php's alqamara_extract_first_image(). */
.alq-testi-content-img {
    margin-bottom : 1rem;
}
.alq-testi-content-img img {
    width         : 100%;
    max-height    : 160px;
    object-fit    : cover;
    border-radius : 10px;
    display       : block;
}
.alq-testi-stars {
    color     : var(--alq-accent, #c9a84c);
    font-size : .9rem;
}
.alq-testi-stars .alq-star-empty {
    color : #dee2e6;
}
.alq-testi-quote {
    font-size    : .95rem;
    color        : #555;
    line-height  : 1.7;
    border       : none;
    padding      : 0;
    margin       : .25rem 0 0;
    font-style   : italic;
}
.alq-testi-name {
    font-size   : .95rem;
    color       : var(--alq-primary, #0f172a);
}
.alq-testi-role {
    font-size : .8rem;
    color     : #6c757d;
}
.alq-testi-photo {
    width      : 48px;
    height     : 48px;
    object-fit : cover;
}

/* Fallback shown when a testimonial has no featured photo (was a bare "—"
   character before 2026-08-18; now matches the team-member placeholder
   pattern for visual consistency). */
.alq-testi-avatar-placeholder {
    width      : 48px;
    height     : 48px;
    background : var(--alq-surface, #f5f6f8);
    color      : var(--alq-muted);
    font-size  : 1.15rem;
}


/* ── Blog ─────────────────────────────────────────────────────────────────── */
.alq-blog-section {
    background : var(--alq-section-warm);
}
.alq-blog-card {
    background    : #fff;
    box-shadow    : 0 2px 12px rgba(0,0,0,.07);
    transition    : transform .25s, box-shadow .25s;
    border-radius : 8px;
}
.alq-blog-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 24px rgba(0,0,0,.12);
}
.alq-blog-img-wrap {
    overflow     : hidden;
    aspect-ratio : 16 / 9;
}
.alq-blog-img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .4s ease;
}
.alq-blog-card:hover .alq-blog-img {
    transform : scale(1.04);
}
.alq-blog-body {
    padding : 1.5rem;
}
.alq-blog-meta {
    font-size : .78rem;
    color     : #6c757d;
}
.alq-blog-date,
.alq-blog-cat {
    color : #6c757d;
}
.alq-blog-title {
    font-size   : 1.15rem;
    font-weight : 700;
}
.alq-blog-title a {
    color           : var(--alq-primary, #0f172a);
    text-decoration : none;
    transition      : color .2s;
}
.alq-blog-title a:hover {
    color : var(--alq-accent, #c9a84c);
}
.alq-blog-excerpt {
    color       : #6c757d;
    line-height : 1.6;
}
.alq-blog-link {
    font-size       : .85rem;
    font-weight     : 600;
    color           : var(--alq-accent, #c9a84c);
    text-decoration : none;
    transition      : color .2s;
}
.alq-blog-link:hover {
    color : var(--alq-primary);
}


/* ── Partners ─────────────────────────────────────────────────────────────── */
.alq-partners-section {
    background  : var(--alq-section-light);
    padding-top : 60px;
    padding-bottom: 60px;
}

/* ── Partner Swiper carousel ── */
.alq-partner-swiper-outer {
    position : relative;
    padding  : 0 52px;
}
.alq-pc-prev,
.alq-pc-next {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    z-index         : 2;
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    border          : 1px solid var(--alq-border, #e9ecef);
    background      : #fff;
    color           : var(--alq-primary);
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    transition      : background .2s, color .2s, border-color .2s;
    font-size       : .8rem;
}
.alq-pc-prev { left: 0; }
.alq-pc-next { right: 0; }
.alq-pc-prev:hover,
.alq-pc-next:hover {
    background   : var(--alq-accent);
    color        : #fff;
    border-color : var(--alq-accent);
}
/* Override Swiper default nav button styles */
.alq-partner-swiper { overflow: hidden; }

/* ── Partner logo item ──
   Size bumped up (2026-08-18, then padding tightened further same day
   after user feedback the first pass wasn't enough): logos + their
   built-in text were reading too small to notice at a glance. The
   uploaded logo files are 300×93px PNGs — max-height 88px sits just under
   that native resolution (no upscale blur) while padding was cut from
   16px/20px to 8px/12px so the image itself gets more of the box instead
   of empty margin. Wrap min-height 108px stays enough to fit 88px image +
   2×8px padding without clipping. Default grayscale dimming eased from
   opacity(.65) to opacity(.85) — logos with text in them lose contrast
   twice over when both grayscaled AND dimmed, so keeping the grayscale
   "polish" but backing off the dimming keeps them legible before hover.
   NOTE: this is the resolution ceiling CSS can safely reach — the source
   PNG files themselves only contain ~93px of real detail; noticeably
   bigger/crisper logo text would need the logo images regenerated at a
   larger size, not just more CSS. */
.alq-partner-logo-wrap {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    padding         : 8px 12px;
    border-radius   : 8px;
    border          : 1px solid var(--alq-border, #e9ecef);
    background      : #fff;
    transition      : border-color .25s, box-shadow .25s;
    min-height      : 108px;
}
.alq-partner-logo-wrap:hover {
    border-color : var(--alq-accent, #b8912a);
    box-shadow   : 0 4px 16px rgba(0,0,0,.08);
}
.alq-partner-logo {
    max-width   : 100%;
    max-height  : 88px;
    width       : auto;
    height      : auto;
    object-fit  : contain;
    display     : block;
    margin      : 0 auto;
    filter      : grayscale(100%) opacity(.85);
    transition  : filter .3s ease;
}
.alq-partner-logo-wrap:hover .alq-partner-logo,
.alq-partner-logo-wrap a:focus .alq-partner-logo {
    filter : grayscale(0%) opacity(1);
}
.alq-partner-logo-wrap a {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
}


/* ── Newsletter ───────────────────────────────────────────────────────────── */
.alq-newsletter-section {
    background : #1e2c5f;
}
.alq-newsletter-section .alq-section-title {
    color : #fff;
}


/* ── Generic Rows ─────────────────────────────────────────────────────────── */
.alq-row-section {
    background : #fff;
}


/* ── CTA Banner ───────────────────────────────────────────────────────────── */
.alq-cta-banner {
    /* background controlled by Customizer inline style */
    padding-top    : 80px;
    padding-bottom : 80px;
}
.alq-cta-title {
    font-size : clamp(1.6rem, 3.5vw, 2.4rem);
}
.alq-cta-subtitle {
    font-size  : 1.05rem;
    color      : rgba(255,255,255,.75);
    max-width  : 560px;
    margin-left: auto;
    margin-right:auto;
}
/* CTA buttons on dark background — override btn-custom to gold solid */
.alq-cta-banner .btn-custom {
    background   : var(--alq-accent);
    border-color : var(--alq-accent);
    color        : #fff;
    border-radius: 4px;
}
.alq-cta-banner .btn-custom:hover {
    background   : var(--alq-accent-dark);
    border-color : var(--alq-accent-dark);
    transform    : translateX(0) translateY(-2px);
}

/* Outline button stays gold border + gold text on dark bg */
.alq-cta-banner .btn-outline-custom {
    border-radius: 4px;
}


/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .alq-section {
        padding-top    : 56px;
        padding-bottom : 56px;
    }
    .alq-section-title {
        font-size : 1.5rem;
    }
    .alq-hero-section {
        min-height : 90vh;
    }
    .alq-hero-inner {
        padding-top : calc(var(--alq-header-total-h, 70px) + 40px);
    }
    .alq-hero-title {
        font-size : 2rem;
    }
    .alq-stat-number {
        font-size : 2rem;
    }
    .alq-project-img,
    .alq-project-img-placeholder {
        height : 180px;
    }
    /* .alq-blog-img height contr
lled by aspect-ratio on wrapper — no override needed */
}


/* =====================================================================
   AL QAMARA — SIDEBAR WIDGET LAYOUT
   Targets .alq-pw-card inside .blog-sidebar and .alq-shop-sidebar.
   Switches the card from a vertical grid card to a compact horizontal
   list item: small thumbnail on left, title + meta on right.
   The homepage / full-width layout is unchanged.
===================================================================== */

/* Force single-column list — override CSS Grid set by --alq-cols */
.blog-sidebar .alq-posts-grid,
.alq-shop-sidebar .alq-posts-grid {
    display        : flex !important;
    flex-direction : column !important;
    gap            : 0 !important;
}

.blog-sidebar .alq-pw-card,
.alq-shop-sidebar .alq-pw-card {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : flex-start !important;
    gap            : .65rem !important;
    border         : none !important;
    border-radius  : 0 !important;
    box-shadow     : none !important;
    background     : transparent !important;
    padding        : .55rem 0 !important;
    border-bottom  : 1px solid rgba(0,0,0,.07) !important;
    overflow       : visible !important;
    transform      : none !important;
}
.blog-sidebar .alq-pw-card:last-child,
.alq-shop-sidebar .alq-pw-card:last-child {
    border-bottom : none;
}

/* Thumbnail — fixed square, no hover zoom effect in sidebar */
.blog-sidebar .alq-pw-thumb-wrap,
.alq-shop-sidebar .alq-pw-thumb-wrap {
    flex-shrink    : 0 !important;
    width          : 68px !important;
    height         : 68px !important;
    min-width      : 68px !important;
    border-radius  : 6px !important;
    overflow       : hidden !important;
    aspect-ratio   : unset !important;
}
.blog-sidebar .alq-pw-thumb,
.alq-shop-sidebar .alq-pw-thumb {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : none;
}
.blog-sidebar .alq-pw-card:hover .alq-pw-thumb,
.alq-shop-sidebar .alq-pw-card:hover .alq-pw-thumb {
    transform : none;
}

/* Placeholder (no image) — same fixed square */
.blog-sidebar .alq-pw-no-thumb,
.alq-shop-sidebar .alq-pw-no-thumb {
    flex-shrink    : 0;
    width          : 68px;
    height         : 68px;
    border-radius  : 6px;
}

/* Section-head wrapper — remove its own margin-bottom in sidebar
   (the title already has margin-bottom: 14px; double gap not needed) */
.blog-sidebar .alq-pw-section-head,
.alq-shop-sidebar .alq-pw-section-head {
    margin-bottom : 0 !important;
}

/* Body — takes remaining space, no padding */
.blog-sidebar .alq-pw-body,
.alq-shop-sidebar .alq-pw-body {
    flex           : 1 !important;
    padding        : 0 !important;
    display        : flex !important;
    flex-direction : column !important;
    gap            : .15rem !important;
    min-width      : 0 !important;
}

/* Title — shown above meta via order. Font-size/weight matched to
 * .alq-wpr-name (Top Rated Products, the native WC widget's title) —
 * was 1rem/700 (visibly bigger+bolder than Top Rated's .84rem/500 sitting
 * right above/below it in the same sidebar), now unified so both widget
 * engines look like one consistent design language. 2026-08-13, see
 * PROGRESS.md. */
.blog-sidebar .alq-pw-title,
.alq-shop-sidebar .alq-pw-title {
    font-size   : .9rem !important;
    font-weight : 500 !important;
    line-height : 1.4 !important;
    margin      : 0 !important;
    order       : -1 !important;   /* pull title above the meta row */
}

/* Sidebar — hide everything except thumbnail, title, category, price, rating.
   Purpose: discovery only. Buying happens on the product/post page.        */
.blog-sidebar .alq-pw-excerpt,
.blog-sidebar .alq-pw-readmore,
.blog-sidebar .alq-pw-cart,
.blog-sidebar .alq-pw-cart-overlay,
.blog-sidebar .alq-pw-corner-icons,
.blog-sidebar .alq-pw-view-all,
.blog-sidebar .alq-pw-slider-nav-btns,
.alq-shop-sidebar .alq-pw-excerpt,
.alq-shop-sidebar .alq-pw-readmore,
.alq-shop-sidebar .alq-pw-cart,
.alq-shop-sidebar .alq-pw-cart-overlay,
.alq-shop-sidebar .alq-pw-corner-icons,
.alq-shop-sidebar .alq-pw-view-all,
.alq-shop-sidebar .alq-pw-slider-nav-btns {
    display : none !important;
}

/* Price — compact */
.blog-sidebar .alq-pw-price,
.alq-shop-sidebar .alq-pw-price {
    margin  : 0;
    padding : 0;
}


/* Meta (date, category badge) — visible below title */
.blog-sidebar .alq-pw-meta,
.alq-shop-sidebar .alq-pw-meta {
    font-size   : .75rem !important;
    gap         : .25rem !important;
    flex-wrap   : wrap !important;
    color       : #6c757d !important;
}

/* Badge stack — hide in sidebar (too small to look good) */
.blog-sidebar .alq-badge-stack,
.alq-shop-sidebar .alq-badge-stack {
    display : none !important;
}

/* View All link — keep but compact */
.blog-sidebar .alq-pw-view-all,
.alq-shop-sidebar .alq-pw-view-all {
    font-size  : .8rem;
    margin-top : .4rem;
    display    : block;
    text-align : right;
}

/* ── WooCommerce built-in product widgets (Top Rated, Best Selling, etc.) ── */
/* Same compact horizontal look as our custom widget.                         */

/* Suppress clearfix ::before — it becomes a flex item and creates a gap offset */
.blog-sidebar .product_list_widget li::before,
.alq-shop-sidebar .product_list_widget li::before,
.alq-footer-col .product_list_widget li::before {
    content : none !important;
    display : none !important;
}

.blog-sidebar .product_list_widget,
.alq-shop-sidebar .product_list_widget {
    list-style : none !important;
    padding    : 0 !important;
    margin     : 0 !important;
}

.blog-sidebar .product_list_widget li,
.alq-shop-sidebar .product_list_widget li {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : flex-start !important;
    gap            : .65rem !important;
    padding        : .55rem 0 !important;
    border-bottom  : 1px solid rgba(0,0,0,.07) !important;
    border-top     : none !important;
    background     : transparent !important;
}
.blog-sidebar .product_list_widget li:last-child,
.alq-shop-sidebar .product_list_widget li:last-child {
    border-bottom : none !important;
}

/* Thumbnail — 68×68 square */
.blog-sidebar .product_list_widget li img,
.alq-shop-sidebar .product_list_widget li img {
    width         : 68px !important;
    height        : 68px !important;
    min-width     : 68px !important;
    object-fit    : cover !important;
    border-radius : 6px !important;
    flex-shrink   : 0 !important;
    margin        : 0 !important;
    float         : none !important;
}

/* Product title link (the <a> that doesn't wrap the image) */
.blog-sidebar .product_list_widget li > a:not(:has(img)),
.alq-shop-sidebar .product_list_widget li > a:not(:has(img)) {
    font-size   : .92rem !important;
    line-height : 1.35 !important;
    font-weight : 600 !important;
    color       : var(--alq-primary, #0f172a) !important;
    display     : block !important;
    margin-bottom: .1rem !important;
}
.blog-sidebar .product_list_widget li > a:not(:has(img)):hover,
.alq-shop-sidebar .product_list_widget li > a:not(:has(img)):hover {
    color : var(--alq-accent, #b8912a) !important;
}
/* Product title — same dead-selector issue as the footer's version of this
 * rule (see the .alq-footer-col block below): the rule above targets
 * WooCommerce's default markup, but our content-widget-product.php
 * template override makes the title <a class="alq-wpr-name"> a grandchild
 * of <li>, not a direct child, so it never matched here either. Top Rated
 * Products' sidebar title was stuck on woocommerce.css's base
 * `.alq-wpr-name { color: #4b5563 }` (a lighter gray) instead of the
 * intended dark navy `var(--alq-primary)` that the "Products" widget
 * (alq-posts-widget in product mode) correctly gets right next to it.
 * Found + fixed 2026-08-13, see PROGRESS.md. */
.blog-sidebar .alq-wpr-name,
.alq-shop-sidebar .alq-wpr-name {
    color : var(--alq-primary, #0f172a) !important;
}
.blog-sidebar .alq-wpr-name:hover,
.alq-shop-sidebar .alq-wpr-name:hover {
    color : var(--alq-accent, #b8912a) !important;
}

/* Star rating */
.blog-sidebar .product_list_widget .star-rating,
.alq-shop-sidebar .product_list_widget .star-rating {
    font-size : .72rem !important;
    margin    : .1rem 0 !important;
}

/* Price */
.blog-sidebar .product_list_widget .woocommerce-Price-amount,
.alq-shop-sidebar .product_list_widget .woocommerce-Price-amount {
    font-size   : .82rem !important;
    color       : var(--alq-accent, #b8912a) !important;
    font-weight : 600 !important;
}
.blog-sidebar .product_list_widget del .woocommerce-Price-amount,
.alq-shop-sidebar .product_list_widget del .woocommerce-Price-amount {
    color     : #9ca3af !important;
    font-size : .76rem !important;
}


/* =====================================================================
   AL QAMARA — FOOTER COLUMN WIDGET COMPACT LAYOUT
   Same compact horizontal layout as .blog-sidebar / .alq-shop-sidebar,
   but colour-adjusted for the dark navy footer background.
   Selector: .alq-footer-col  (each footer widget column div)
===================================================================== */

/* Single-column list — override CSS Grid */
.alq-footer-col .alq-posts-grid {
    display        : flex !important;
    flex-direction : column !important;
    gap            : 0 !important;
}

/* Horizontal card: image left, body right */
.alq-footer-col .alq-pw-card {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : flex-start !important;
    gap            : .65rem !important;
    border         : none !important;
    border-radius  : 0 !important;
    box-shadow     : none !important;
    background     : transparent !important;
    padding        : .55rem 0 !important;
    border-bottom  : 1px solid rgba(255,255,255,.1) !important;
    overflow       : visible !important;
    transform      : none !important;
}
.alq-footer-col .alq-pw-card:last-child {
    border-bottom : none !important;
}

/* 68×68 thumbnail */
.alq-footer-col .alq-pw-thumb-wrap {
    flex-shrink  : 0 !important;
    width        : 68px !important;
    height       : 68px !important;
    min-width    : 68px !important;
    border-radius: 6px !important;
    overflow     : hidden !important;
    aspect-ratio : unset !important;
}
.alq-footer-col .alq-pw-thumb {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : none;
}
.alq-footer-col .alq-pw-card:hover .alq-pw-thumb {
    transform : none;
}

/* Placeholder (no image) */
.alq-footer-col .alq-pw-no-thumb {
    flex-shrink   : 0;
    width         : 68px;
    height        : 68px;
    border-radius : 6px;
}

/* Section-head wrapper — remove double gap above cards */
.alq-footer-col .alq-pw-section-head {
    margin-bottom : 0 !important;
}

/* Widget title — full width inside flex container (overrides flex child shrink) */
.alq-footer-col .alq-pw-widget-title {
    width         : 100% !important;
    display       : block !important;
}

/* Body — takes remaining width */
.alq-footer-col .alq-pw-body {
    flex           : 1 !important;
    padding        : 0 !important;
    display        : flex !important;
    flex-direction : column !important;
    gap            : .15rem !important;
    min-width      : 0 !important;
}

/* Title — pull above meta via CSS order. Font-size/weight matched to
 * .alq-wpr-name (Top Rated Products' title) for the same reason as the
 * sidebar block above — see PROGRESS.md 2026-08-13. */
.alq-footer-col .alq-pw-title {
    font-size   : .9rem !important;
    font-weight : 500 !important;
    line-height : 1.4 !important;
    margin      : 0 !important;
    order       : -1 !important;
}

/* Meta (date, category) — muted light colour for dark bg */
.alq-footer-col .alq-pw-meta {
    font-size : .75rem !important;
    gap       : .25rem !important;
    flex-wrap : wrap !important;
    color     : rgba(255,255,255,.5) !important;
}

/* Price */
.alq-footer-col .alq-pw-price {
    margin  : 0;
    padding : 0;
}

/* Hide clutter — discovery only, same policy as sidebar */
.alq-footer-col .alq-pw-excerpt,
.alq-footer-col .alq-pw-readmore,
.alq-footer-col .alq-pw-cart,
.alq-footer-col .alq-pw-cart-overlay,
.alq-footer-col .alq-pw-corner-icons,
.alq-footer-col .alq-pw-view-all,
.alq-footer-col .alq-pw-slider-nav-btns,
.alq-footer-col .alq-badge-stack {
    display : none !important;
}

/* ── WooCommerce product_list_widget in footer — compact horizontal ── */
.alq-footer-col .product_list_widget {
    list-style : none !important;
    padding    : 0 !important;
    margin     : 0 !important;
}
.alq-footer-col .product_list_widget li {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : flex-start !important;
    gap            : .65rem !important;
    padding        : .55rem 0 !important;
    border-bottom  : 1px solid rgba(255,255,255,.1) !important;
    border-top     : none !important;
    background     : transparent !important;
}
.alq-footer-col .product_list_widget li:last-child {
    border-bottom : none !important;
}
.alq-footer-col .product_list_widget li img {
    width         : 68px !important;
    height        : 68px !important;
    min-width     : 68px !important;
    object-fit    : cover !important;
    border-radius : 6px !important;
    flex-shrink   : 0 !important;
    margin        : 0 !important;
    float         : none !important;
}
.alq-footer-col .product_list_widget li > a:not(:has(img)) {
    font-size    : .92rem !important;
    line-height  : 1.35 !important;
    font-weight  : 600 !important;
    color        : var(--alq-on-dark-muted) !important;
    display      : block !important;
    margin-bottom: .1rem !important;
}
.alq-footer-col .product_list_widget li > a:not(:has(img)):hover {
    color : var(--alq-accent, #b8912a) !important;
}
/* Product title — dark-footer color override.
 * The rule above (li > a:not(:has(img))) targets WooCommerce's DEFAULT
 * widget markup, where the title <a> is a direct child of <li>. Our
 * woocommerce/content-widget-product.php template override changes that
 * structure to <li><a class="alq-wpr-thumb">...</a><div class="alq-wpr-info">
 * <a class="alq-wpr-name">...</a>...</div></li> — the title is now a
 * GRANDCHILD of <li>, so the rule above never matches it, and it fell
 * back to woocommerce.css's base `.alq-wpr-name { color: #4b5563 }`,
 * a dark slate meant for the light .blog-sidebar/.alq-shop-sidebar
 * background — nearly unreadable on the dark footer. Found live
 * 2026-08-13 (user report: footer "Top rated products" title color
 * looked wrong). */
.alq-footer-col .alq-wpr-name {
    color : var(--alq-on-dark-muted) !important;
}
.alq-footer-col .alq-wpr-name:hover {
    color : var(--alq-accent, #b8912a) !important;
}
.alq-footer-col .product_list_widget .star-rating {
    font-size : .72rem !important;
    margin    : .1rem 0 !important;
}
.alq-footer-col .product_list_widget .woocommerce-Price-amount {
    font-size   : .82rem !important;
    color       : var(--alq-accent, #b8912a) !important;
    font-weight : 600 !important;
}
.alq-footer-col .product_list_widget del .woocommerce-Price-amount {
    color     : rgba(255,255,255,.3) !important;
    font-size : .76rem !important;
}
/* Suppress arrow icon on product links */
.alq-footer-col .product_list_widget li a::after {
    display : none !important;
}


/* =============================================================================
   SINGLE SERVICE PAGE — two-column layout
   ============================================================================= */

/* ── Featured image ──────────────────────────────────────────────────────── */
.alq-service-featured-img {
    border-radius : 12px;
    overflow      : hidden;
    box-shadow    : 0 4px 24px rgba(0,0,0,.10);
}
.alq-service-featured-img img {
    display        : block;
    width          : 100%;
    height         : auto;
    vertical-align : middle;
}

/* ── Body content area ───────────────────────────────────────────────────── */
.alq-single-service-body {
    line-height : 1.8;
    font-size   : .97rem;
}
.alq-single-service-body h2,
.alq-single-service-body h3,
.alq-single-service-body h4 {
    margin-top    : 1.6rem;
    margin-bottom : .5rem;
    font-weight   : 700;
    color         : var(--alq-primary);
}
.alq-single-service-body p {
    color         : var(--alq-text, #333);
    margin-bottom : 1rem;
}

/* ── Extra-large icon variant (used in no-banner header) ─────────────────── */
.alq-service-icon--xl {
    width     : 72px;
    height    : 72px;
    min-width : 72px;
    font-size : 1.8rem;
}

/* ── Single service header (shown only when banner is off) ───────────────── */
.alq-single-service-header {
    padding-bottom : 1.25rem;
    border-bottom  : 1px solid var(--alq-border, #e5e2d6);
    margin-bottom  : 1.5rem !important;
}


/* ── Sticky info card (right sidebar) ───────────────────────────────────── */
.alq-service-info-card {
    position      : sticky;
    top           : 100px;          /* clears fixed navbar */
    background    : #fff;
    border        : 1px solid var(--alq-border, #e5e2d6);
    border-radius : 14px;
    padding       : 1.75rem 1.5rem;
    box-shadow    : 0 4px 24px rgba(0,0,0,.09);
    text-align    : left;
}

/* Icon circle */
.alq-service-info-icon-wrap {
    display         : flex;
    justify-content : flex-start;
    margin-bottom   : .9rem;
}
.alq-service-info-icon {
    width           : 52px;
    height          : 52px;
    border-radius   : 10px;
    background      : var(--alq-accent, #b8912a);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.25rem;
    color           : #fff;
    box-shadow      : 0 4px 14px rgba(184,145,42,.28);
}

/* Title */
.alq-service-info-title {
    font-size       : 1rem;
    font-weight     : 700;
    color           : var(--alq-primary);
    margin-bottom   : 1rem;
    text-transform  : uppercase;
    letter-spacing  : .05em;
}

/* Excerpt */
.alq-service-info-excerpt {
    font-size   : .88rem;
    color       : #666;
    line-height : 1.6;
    margin-bottom: 0;
}

/* Divider */
.alq-service-info-divider {
    border     : none;
    border-top : 1px solid var(--alq-border, #e5e2d6);
    margin     : 1rem 0;
}

/* Checklist */
.alq-service-info-list {
    list-style  : none;
    padding     : 0;
    margin      : 0 0 1.5rem;
    text-align  : left;
}
.alq-service-info-list li {
    display       : flex;
    align-items   : flex-start;
    gap           : .55rem;
    font-size     : .87rem;
    color         : var(--alq-text, #333);
    padding       : .35rem 0;
    border-bottom : 1px solid rgba(0,0,0,.05);
}
.alq-service-info-list li:last-child { border-bottom: none; }
.alq-service-info-list li i {
    color      : var(--alq-accent);
    font-size  : .9rem;
    margin-top : .15rem;
    flex-shrink: 0;
}

/* CTA button */
.alq-btn-service-cta {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : .75rem 1.25rem;
    background      : var(--alq-primary);
    color           : #fff;
    font-size       : .92rem;
    font-weight     : 700;
    border-radius   : 8px;
    text-decoration : none;
    transition      : background .2s, transform .15s, box-shadow .2s;
    box-shadow      : 0 3px 12px rgba(15,23,42,.18);
}
.alq-btn-service-cta:hover {
    background  : var(--alq-accent);
    color       : #fff;
    transform   : translateY(-2px);
    box-shadow  : 0 6px 18px rgba(184,145,42,.28);
}

/* WhatsApp button */
.alq-service-info-whatsapp {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    font-size       : .9rem;
    font-weight     : 600;
    color           : #fff;
    text-decoration : none;
    padding         : .6rem 1rem;
    background      : #25d366;
    border-radius   : 8px;
    transition      : background .2s, transform .15s, box-shadow .2s;
    box-shadow      : 0 3px 10px rgba(37,211,102,.28);
}
.alq-service-info-whatsapp:hover {
    background  : #1ebe5d;
    color       : #fff;
    transform   : translateY(-2px);
    box-shadow  : 0 6px 16px rgba(37,211,102,.36);
}
.alq-service-info-whatsapp .fab {
    font-size : 1.1rem;
}


/* ── Related services section ────────────────────────────────────────────── */
.alq-related-services-heading {
    font-size     : 1.3rem;
    font-weight   : 700;
    color         : var(--alq-primary);
    margin-bottom : 0;
}

.alq-related-service-card {
    display         : flex;
    align-items     : flex-start;
    gap             : 1rem;
    padding         : 1.1rem 1.1rem;
    background      : #fff;
    border          : 1px solid var(--alq-border, #e5e2d6);
    border-radius   : 12px;
    text-decoration : none;
    color           : inherit;
    transition      : box-shadow .22s, transform .22s, border-color .22s;
    box-shadow      : 0 2px 10px rgba(0,0,0,.06);
    height          : 100%;
}
.alq-related-service-card:hover {
    box-shadow   : 0 6px 24px rgba(0,0,0,.13);
    transform    : translateY(-3px);
    border-color : var(--alq-accent);
    color        : inherit;
}
.alq-related-service-card:hover .alq-service-title {
    color : var(--alq-accent);
}
.alq-related-service-body {
    flex : 1 1 0%;
}
.alq-related-service-desc {
    font-size   : .82rem;
    color       : #777;
    margin-top  : .2rem;
    line-height : 1.45;
}
.alq-related-service-arrow {
    color      : var(--alq-accent);
    font-size  : .85rem;
    margin-top : .2rem;
    flex-shrink: 0;
    opacity    : 0;
    transition : opacity .2s, transform .2s;
}
.alq-related-service-card:hover .alq-related-service-arrow {
    opacity   : 1;
    transform : translateX(3px);
}

/* Sticky sidebar — the col must stretch to match the content col height.
   Bootstrap row default (stretch) handles this; we only need to ensure
   the col itself doesn't clip the sticky card. */
.col-lg-4:has(.alq-service-info-card) {
    align-self : stretch;   /* keep col as tall as the left col */
}

/* Mobile: unstick the sidebar card */
@media (max-width: 991.98px) {
    .alq-service-info-card,
    .alq-project-meta-card {
        position : relative;
        top      : auto;
    }
}


/* =============================================================================
   PROJECT ARCHIVE / CATEGORY PAGE — CARD CATEGORY BADGE
   ============================================================================= */

.alq-work-cat {
    display        : inline-flex;
    align-items    : center;
    gap            : .3rem;
    font-size      : .72rem;
    font-weight    : 600;
    letter-spacing : .04em;
    text-transform : uppercase;
    color          : var(--alq-accent);
    background     : color-mix(in srgb, var(--alq-accent) 10%, transparent);
    border         : 1px solid color-mix(in srgb, var(--alq-accent) 25%, transparent);
    border-radius  : 50px;
    padding        : .2rem .65rem;
    line-height    : 1.4;
    margin-bottom  : .4rem;
    /* .alq-work-body is a flex column, whose children stretch to full width
       by default — that overrode this badge's inline-flex intrinsic width and
       made the pill span the whole card. Shrink it back to its content. */
    align-self     : flex-start;
}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .alq-work-cat {
        background : rgba(180, 140, 60, .1);
        border     : 1px solid rgba(180, 140, 60, .3);
    }
}

/* Card thumbnail — was unstyled, so each card's image showed at its own
   native aspect ratio (soft-cropped by add_image_size, not hard-cropped),
   making cards look randomly taller/shorter next to each other. Fixed
   height + object-fit: cover matches the homepage's .alq-project-img
   treatment so every card in the grid is the same height regardless of
   the source image's aspect ratio. */
.alq-work-thumb {
    overflow : hidden;
}
.alq-work-thumb img {
    display    : block;
    width      : 100%;
    height     : 220px;
    object-fit : cover;
    transition : transform .4s ease;
}
.alq-work-card:hover .alq-work-thumb img {
    transform : scale(1.05);
}

/* Card body — clamped title + excerpt.
   The excerpt is already the_excerpt() (globally capped at 25 words by the
   excerpt_length filter in functions.php), so it was never full content.
   But 25 words wraps to 2 lines for one project and 4 for another, and a
   long title wraps to 2 lines while a short one takes 1 — so card heights
   still varied even after the thumbnail was fixed. Clamping both to a fixed
   line count makes every card in the grid identical in height. */
.alq-work-card {
    display        : flex;
    flex-direction : column;
    background     : #fff; /* matches .alq-project-card on the homepage */
}
.alq-work-body {
    display        : flex;
    flex-direction : column;
    flex           : 1 1 auto;
}
.alq-work-title {
    display            : -webkit-box;
    -webkit-line-clamp : 2;
    -webkit-box-orient : vertical;
    overflow           : hidden;
    line-height        : 1.4;
    min-height         : calc(2 * 1.4em); /* reserves both lines even for a 1-line title */
}
.alq-work-excerpt {
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
    line-height        : 1.55;
    color              : var(--alq-muted, #6c757d);
}

@media (max-width: 767.98px) {
    .alq-work-thumb img {
        height : 180px;
    }
}


/* =============================================================================
   SINGLE PROJECT PAGE
   ============================================================================= */

/* ── Featured image ──────────────────────────────────────────────────────── */
.alq-project-featured-img {
    border-radius : 12px;
    overflow      : hidden;
    box-shadow    : 0 4px 24px rgba(0,0,0,.10);
}
.alq-project-featured-img img {
    display        : block;
    width          : 100%;
    height         : auto;
    vertical-align : middle;
}

/* ── Body content ────────────────────────────────────────────────────────── */
.alq-single-project-body {
    line-height : 1.8;
    font-size   : .97rem;
}
.alq-single-project-body h2,
.alq-single-project-body h3,
.alq-single-project-body h4 {
    margin-top    : 1.6rem;
    margin-bottom : .5rem;
    font-weight   : 700;
    color         : var(--alq-primary);
}
.alq-single-project-body p {
    color         : var(--alq-text, #333);
    margin-bottom : 1rem;
}

/* ── Sticky project details card ─────────────────────────────────────────── */
.alq-project-meta-card {
    position      : sticky;
    top           : 100px;
    background    : #fff;
    border        : 1px solid var(--alq-border, #e5e2d6);
    border-radius : 14px;
    padding       : 1.75rem 1.5rem;
    box-shadow    : 0 4px 24px rgba(0,0,0,.09);
}

/* Heading */
.alq-project-meta-heading {
    font-size      : 1rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .08em;
    color          : var(--alq-primary);
    margin-bottom  : 1rem;
}

/* Meta list */
.alq-project-meta-list {
    list-style  : none;
    padding     : 0;
    margin      : 0;
}
.alq-project-meta-list li {
    display       : flex;
    align-items   : flex-start;
    gap           : .75rem;
    padding       : .65rem 0;
    border-bottom : 1px solid var(--alq-border, #e5e2d6);
}
.alq-project-meta-list li.alq-project-meta-last,
.alq-project-meta-list li:last-child {
    border-bottom : none;
}
.alq-project-meta-list li > i {
    font-size  : .95rem;
    margin-top : .2rem;
    flex-shrink: 0;
}
/* Label — matches Bootstrap .small .text-muted */
.alq-project-meta-label {
    display       : block;
    font-size     : .875rem;
    color         : #6c757d;
    margin-bottom : .15rem;
}
/* Project name value — bold, accent, larger */
strong.alq-project-meta-value {
    font-size   : 1.1rem;
    font-weight : 700;
    color       : var(--alq-primary);
}
/* All other values — normal weight, dark */
span.alq-project-meta-value {
    font-size   : .95rem;
    font-weight : 400;
    color       : var(--alq-primary);
}

/* Status badges — solid Bootstrap-style */
.alq-project-status {
    display       : inline-block;
    font-size     : .75em;
    font-weight   : 700;
    padding       : .35em .65em;
    border-radius : 50px;
    line-height   : 1;
}
.alq-project-status--done {
    background : #198754;
    color      : #fff;
}
.alq-project-status--progress {
    background : #ffc107;
    color      : #000;
}

/* CTA buttons */
.alq-btn-project-primary {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : .72rem 1.25rem;
    background      : var(--alq-primary);
    color           : #fff;
    font-size       : .9rem;
    font-weight     : 700;
    border-radius   : 8px;
    text-decoration : none;
    transition      : background .2s, transform .15s, box-shadow .2s;
    box-shadow      : 0 3px 12px rgba(15,23,42,.18);
}
.alq-btn-project-primary:hover {
    background : var(--alq-accent);
    color      : #fff;
    transform  : translateY(-2px);
    box-shadow : 0 6px 18px rgba(184,145,42,.28);
}
.alq-btn-project-outline {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : .68rem 1.25rem;
    background      : transparent;
    color           : var(--alq-primary);
    font-size       : .9rem;
    font-weight     : 700;
    border-radius   : 8px;
    border          : 2px solid var(--alq-primary);
    text-decoration : none;
    transition      : background .2s, color .2s, border-color .2s, transform .15s;
}
.alq-btn-project-outline:hover {
    background   : var(--alq-primary);
    color        : #fff;
    border-color : var(--alq-primary);
    transform    : translateY(-2px);
}

/* ── Related projects section ────────────────────────────────────────────── */
.alq-related-projects-heading {
    font-size     : 1.3rem;
    font-weight   : 700;
    color         : var(--alq-primary);
    margin-bottom : 0;
}

.alq-related-project-card {
    display         : flex;
    align-items     : flex-start;
    gap             : .9rem;
    padding         : .9rem;
    background      : #fff;
    border          : 1px solid var(--alq-border, #e5e2d6);
    border-radius   : 12px;
    text-decoration : none;
    color           : inherit;
    transition      : box-shadow .22s, transform .22s, border-color .22s;
    box-shadow      : 0 2px 10px rgba(0,0,0,.06);
    height          : 100%;
}
.alq-related-project-card:hover {
    box-shadow   : 0 6px 24px rgba(0,0,0,.13);
    transform    : translateY(-3px);
    border-color : var(--alq-accent);
    color        : inherit;
}
.alq-related-project-card:hover .alq-project-title {
    color : var(--alq-accent);
}

/* Thumbnail */
.alq-related-project-thumb {
    width         : 80px;
    min-width     : 80px;
    height        : 60px;
    border-radius : 6px;
    overflow      : hidden;
    flex-shrink   : 0;
}
.alq-related-project-thumb img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

.alq-related-project-body {
    flex : 1 1 0%;
}
.alq-related-project-cat {
    font-size  : .78rem;
    color      : #888;
    margin-top : .2rem;
}
.alq-related-project-arrow {
    color      : var(--alq-accent);
    font-size  : .85rem;
    margin-top : .2rem;
    flex-shrink: 0;
    opacity    : 0;
    transition : opacity .2s, transform .2s;
    align-self : center;
}
.alq-related-project-card:hover .alq-related-project-arrow {
    opacity   : 1;
    transform : translateX(3px);
}


/* =============================================================================
   SINGLE TESTIMONIAL
============================================================================= */
.alq-testi-profile-card {
    position      : sticky;
    top           : 100px;
    background    : var(--alq-content-bg, #fff);
    border        : 1px solid var(--alq-border);
    border-radius : 14px;
    box-shadow    : 0 4px 24px rgba(0,0,0,.09);
    overflow      : hidden;
    text-align    : center;
}
.col-lg-4:has(.alq-testi-profile-card) { align-self: stretch; }
.alq-testi-profile-photo-wrap { line-height: 0; }
.alq-testi-profile-photo {
    width           : 100%;
    aspect-ratio    : 1 / 1;
    object-fit      : cover;
    object-position : center;
    display         : block;
}
.alq-testi-profile-photo-placeholder {
    width           : 100%;
    aspect-ratio    : 1 / 1;
    background      : var(--alq-surface);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--alq-border);
}
.alq-testi-profile-body { padding: 1.5rem; }
.alq-testi-profile-name {
    font-size     : 1.2rem;
    font-weight   : 700;
    color         : var(--alq-primary);
    margin-bottom : .25rem;
}
.alq-testi-profile-role {
    font-size      : .82rem;
    font-weight    : 600;
    color          : var(--alq-accent);
    text-transform : uppercase;
    letter-spacing : .05em;
    margin-bottom  : 0;
}
.alq-testi-single-name {
    font-size     : 2rem;
    font-weight   : 800;
    color         : var(--alq-ink);
    margin-bottom : 4px;
}
.alq-testi-single-role-heading {
    font-size      : .95rem;
    font-weight    : 600;
    color          : var(--alq-accent);
    letter-spacing : .04em;
    text-transform : uppercase;
    margin-bottom  : 1rem;
}
.alq-testi-single-quote {
    font-size     : 1.05rem;
    line-height   : 1.85;
    color         : var(--alq-text, #4b5563);
    font-style    : italic;
    border-left   : 4px solid var(--alq-accent);
    padding       : 2rem 2rem 2rem 3rem;
    background    : var(--alq-surface, #f8f9fa);
    border-radius : 0 12px 12px 0;
    position      : relative;
    margin        : 0;
}
.alq-testi-single-quote::before {
    content        : '\201C';
    font-family    : Georgia, 'Times New Roman', serif;
    font-size      : 5rem;
    line-height    : 1;
    color          : var(--alq-accent);
    opacity        : .25;
    position       : absolute;
    top            : .75rem;
    left           : .75rem;
    pointer-events : none;
    user-select    : none;
}
.alq-testi-single-quote p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
    .alq-testi-profile-card { position: static; }
}

/* =============================================================================
   DEPARTMENT CARDS — taxonomy-department.php + homepage dept-card mode
============================================================================= */
.alq-dept-card {
    background    : var(--alq-content-bg, #fff);
    border-radius : 14px;
    border        : 1px solid var(--alq-border);
    box-shadow    : 0 4px 20px rgba(0,0,0,.08);
    overflow      : hidden;
    position      : relative;
    transition    : transform .25s, box-shadow .25s;
}
.alq-dept-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 10px 32px rgba(0,0,0,.14);
}
.alq-dept-card-thumb {
    position     : relative;
    overflow     : hidden;
    aspect-ratio : 4 / 3;
    background   : var(--alq-surface);
}
.alq-dept-card-thumb img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : top center;
    display         : block;
    transition      : transform .35s;
}
.alq-dept-card:hover .alq-dept-card-thumb img { transform: scale(1.06); }
.alq-dept-card-thumb-placeholder {
    width           : 100%;
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--alq-border);
}
.alq-dept-card-overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(to top, rgba(15,23,42,.55) 0%, transparent 55%);
}
.alq-dept-card-body {
    padding    : 1.25rem 1.25rem 1.5rem;
    text-align : center;
}
.alq-dept-card-name {
    font-size     : 1.05rem;
    font-weight   : 700;
    color         : var(--alq-primary);
    margin-bottom : .3rem;
}
.alq-dept-card-count {
    font-size  : .82rem;
    color      : #6c757d;
    margin     : 0;
}
.alq-dept-card-link {
    position        : absolute;
    inset           : 0;
    z-index         : 1;
    text-decoration : none;
    border-radius   : inherit;
}


/* =============================================================================
   COOKIE CONSENT BANNER (inc/cookie-consent.php, js/alq-privacy-notice.js)
   Added 2026-08-12. Fixed bottom bar, slides up on show / down on dismiss.
============================================================================= */
.alq-cookie-banner {
    position        : fixed;
    left            : 0;
    right           : 0;
    bottom          : 0;
    /* Below the mobile menu (1050), cart drawer (1060) and its overlay
     * (1059) — was 1080 (above all of them), which is exactly why opening
     * either drawer while the banner was showing left it poking out on
     * top, covering part of the slide-in panel. Still above the plain
     * mobile bottom bar (1040) doesn't matter here since they never
     * spatially overlap (see the bottom:58px rule below) — but keeping
     * it lower than the two real overlays is what actually matters.
     * 2026-08-12 fix. */
    z-index         : 1030;
    background      : var(--alq-primary, #0f172a);
    color           : #fff;
    box-shadow      : 0 -4px 20px rgba(0,0,0,.15);
    transform       : translateY(100%);
    transition      : transform .3s ease;
}
.alq-cookie-banner.alq-cookie-banner--visible {
    transform : translateY(0);
}
.alq-cookie-banner-inner {
    max-width      : 1140px;
    margin         : 0 auto;
    padding        : 1rem 1.25rem;
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 1rem;
}
.alq-cookie-banner-text {
    margin    : 0;
    font-size : .92rem;
    color     : rgba(255,255,255,.9);
    flex      : 1 1 320px;
}
.alq-cookie-banner-actions {
    display   : flex;
    gap       : .6rem;
    flex-shrink: 0;
}
/* Button style fix (2026-08-12, revised): the first fix filled Accept
   with accent gold (var(--alq-accent)) — but that's the same gold used
   for WooCommerce's own buttons elsewhere on the site, so it read as an
   "Add to Cart"-style button, not a neutral cookie-consent action, and
   it also made Accept/Decline visually inconsistent with each other
   (one filled, one outlined). Fixed per feedback: both buttons now
   share the SAME outline treatment — transparent background, a visible
   white-ish border, and a box-shadow for definition against the dark
   navy banner (border alone read too weak on its own). */
.alq-cookie-banner .alq-cookie-accept,
.alq-cookie-banner .alq-cookie-decline {
    background  : transparent;
    color       : #fff;
    border      : 1.5px solid rgba(255,255,255,.6);
    box-shadow  : 0 2px 10px rgba(0,0,0,.25);
}
.alq-cookie-banner .alq-cookie-accept:hover,
.alq-cookie-banner .alq-cookie-decline:hover {
    background  : rgba(255,255,255,.15);
    border-color: #fff;
    color       : #fff;
}
/* Leave room above the mobile bottom bar on small screens so the two
   fixed bars don't overlap. Also centers text + buttons on narrow
   screens (2026-08-12) — the default space-between/left-aligned layout
   only reads well once there's enough width for text and buttons to sit
   side by side. */
@media (max-width: 991.98px) {
    .alq-cookie-banner { bottom: 58px; }
    .alq-cookie-banner-inner {
        flex-direction : column;
        text-align     : center;
        /* Reduced from the desktop 1rem: in a column layout this gap
           applies vertically between text and buttons, and 1rem read
           as a large, awkward empty space between them. */
        gap            : .5rem;
    }
    /* .alq-cookie-banner-text has `flex: 1 1 320px` for the desktop row
       layout (used as a min-width there). In a column flex container
       flex-basis instead sets the item's HEIGHT, so it was forcing the
       text paragraph into a 320px-tall box and pushing the buttons far
       below it — that's what caused the large gap. Reset to auto here
       so the text just takes its natural height on mobile. 2026-08-12. */
    .alq-cookie-banner-text {
        flex     : 0 1 auto;
        /* Slightly smaller than the desktop .92rem — on narrow screens the
           default size read as oversized relative to the compact banner.
           2026-08-12. */
        font-size: .82rem;
    }
    .alq-cookie-banner-actions {
        justify-content: center;
        width          : 100%;
    }
    /* Shrink the buttons to match — same reasoning as the text above.
       2026-08-12. */
    .alq-cookie-banner .alq-cookie-accept,
    .alq-cookie-banner .alq-cookie-decline {
        padding  : .3rem .7rem;
        font-size: .78rem;
    }
}


/* =====================================================================
   30 · STACKED HEADER LAYOUT (Customizer: Header Layout = "Two Rows")
   Row 1 = logo + an always-visible inline search box + whatever Header
   Style puts on the right (nothing / Agency CTA button / Shop icons).
   Row 2 = menu only, full width, below Row 1 (see header.php,
   .alq-navbar-row2 — a SIBLING of <nav>, not nested inside it, so it
   isn't pulled into Bootstrap's .navbar flex row).

   Always solid — deliberately bypasses the homepage transparent-over-hero
   system entirely rather than trying to make a menu-row-plus-search
   header transparent over a photo (a full row of nav text floating over
   a busy image is hard to read). Two independently customizable colors,
   one per row (Customizer → Header → Header Row 1/2 Background Color).

   Desktop (≥992px) only, by design — mobile keeps the exact single-row +
   hamburger + dedicated search icon behavior it always had, completely
   untouched. Every rule below is inside the same @media boundary as the
   d-none/d-lg-flex/d-lg-block wrappers in header.php that gate this
   layout's markup, so there is no code path where this fires below
   992px regardless of which Header Layout is selected.
   ===================================================================== */
@media (min-width: 992px) {

    /* ---- Force solid backgrounds, independent of scroll/page state ----
       Row 1 reuses the existing nav.navbar-transparent element (no new
       markup there), so this has to out-specificity two existing
       !important rules that would otherwise make it transparent:
       .navbar-transparent.scrolled and
       body:not(.home):not(.front-page) .navbar-transparent
       (both (0,0,3,1) specificity). Adding html+body ancestors here makes
       this (0,0,3,2) — a guaranteed win regardless of scroll position,
       page type, or source order. */
    html body .alq-navbar-wrap.alq-header-stacked .navbar-transparent {
        background: var(--alq-header-row1-bg, var(--alq-primary)) !important;
    }
    .alq-header-stacked .alq-navbar-row2 {
        background: var(--alq-header-row2-bg, var(--alq-primary)) !important;
    }

    /* ---- Text / icon / button colors ----
       Written fresh rather than reusing the .alq-header-solid-scoped
       rules earlier in this file, because .alq-header-solid can be
       ABSENT on the homepage (Hero enabled, "Solid Background Header on
       Homepage" off) even while Two Rows still forces a solid background
       here — the two flags are intentionally independent in this layout,
       see the Header Layout control's description in Customizer.

       Specificity: these have to out-rank the transparent/scrolled ink
       rules near the top of this file, which target the SAME elements
       (both live inside nav.navbar-transparent, i.e. Row 1) and resolve
       to --alq-header-ink — the ink for the SINGLE-row header background,
       not Row 1's. Two rules there beat a plain .alq-header-stacked X
       selector (0,0,2,0):

           .navbar-transparent.scrolled .alq-nav-icon            (0,0,3,0)
           body:not(.home):not(.front-page) ... .alq-nav-icon    (0,0,4,1)

       Both are !important, so raising specificity here is the only way to
       win. `html body .alq-navbar-wrap.alq-header-stacked
       .navbar-transparent X` is (0,0,4,2) — above both — and mirrors the
       same ancestor-padding trick already used for the Row 1 background
       rule above.

       Real bug this fixes (user report 2026-08-29, verified live on a
       Two Rows site with a white Row 1): the header icons rendered white
       on a white Row 1. On the homepage it appeared only after scrolling
       (when .scrolled lands); on every inner page the body:not(.home)
       rule made it permanent, with no scrolling needed — the logo text
       colour was hit the same way. The Row 2 menu links were never
       affected, because Row 2 is a SIBLING of nav.navbar-transparent, so
       neither of those two rules can ever match inside it — which is
       exactly why the menu text looked right while the icons did not. */
    html body .alq-navbar-wrap.alq-header-stacked .navbar-transparent .navbar-brand {
        color: var(--alq-header-row1-ink, #fff);
    }
    html body .alq-navbar-wrap.alq-header-stacked .navbar-transparent .alq-nav-icon {
        color: var(--alq-header-row1-ink, #fff) !important;
    }
    .alq-header-stacked .navbar .btn-custom {
        background: transparent;
        color: var(--alq-accent);
        border: 1.5px solid var(--alq-accent);
    }
    .alq-header-stacked .navbar .btn-custom:hover {
        background: var(--alq-accent);
        color: var(--alq-primary-dark);
    }

    /* ---- Row 2 menu ----
       .navbar-nav is display:flex/flex-direction:column by BASE Bootstrap
       default — it only becomes a horizontal row via the
       .navbar-expand-lg .navbar-nav{flex-direction:row} override, which
       requires a .navbar-expand-lg ancestor. Row 2's wrapper deliberately
       isn't given the .navbar/.navbar-expand-lg classes (avoids pulling in
       the rest of Bootstrap's navbar flex/collapse behavior for a plain
       full-width strip), so that override never fires — without this rule
       the menu rendered as a vertical list (found via live testing).
       justify-content:center replicates the .mx-auto centering the
       old single-row menu got for free from its flex parent. */
    .alq-navbar-row2 .navbar-nav {
        display        : flex;
        flex-direction : row;
        flex-wrap      : wrap;
    }
    /* ---- Row 2 submenu positioning (bug fix, 2026-09-10) ----
       Same root cause as the flex-direction override just above: Bootstrap
       ships .navbar-nav .dropdown-menu{position:static} as the base/mobile
       default, and only flips it to position:absolute via the compound
       selector .navbar-expand-lg .navbar-nav .dropdown-menu at the ≥992px
       breakpoint (see bootstrap.min.css). That compound selector requires
       an actual .navbar-expand-lg ANCESTOR — which Row 1's menu has (it
       lives inside <nav class="navbar navbar-expand-lg">), but Row 2's
       .navbar-nav does not, by the same deliberate design noted above
       (Row 2 is a plain sibling strip, not given the .navbar classes).
       Without this rule, Row 2's dropdown-menu/mega-submenu-style panels
       stayed position:static even on desktop — rendering in normal flow
       instead of overlaying, so opening one visibly stretched
       .alq-navbar-row2's own background downward to contain it (reported
       as "the header background drops down when a submenu opens", Two
       Rows layout only — Single Row was never affected since its menu
       does sit inside .navbar-expand-lg). This mirrors Bootstrap's own
       desktop rule directly onto Row 2 so its dropdowns overlay properly
       instead of pushing the row's height. */
    .alq-navbar-row2 .dropdown-menu {
        position: absolute;
    }
    /* Alignment (Customizer: Row 2 Menu Alignment). flex-start/center are
       logical values — under RTL (dir="rtl") flex-start already resolves
       to the visual right edge on its own, so this needs no separate
       right-aligned variant and no rtlcss involvement. */
    .alq-navbar-row2-align-center .navbar-nav { justify-content: center; }
    .alq-navbar-row2-align-left   .navbar-nav { justify-content: flex-start; }

    /* ---- Row 1 / Row 2 separator ----
       A subtle hairline so the two rows still read as distinct strips even
       when their background colors are set close together (or left at the
       same default). Only ever present when Two Rows is selected, since
       .alq-navbar-row2 only exists in the markup in that case. */
    .alq-header-stacked .alq-navbar-row2 {
        border-top: 1px solid rgba(255,255,255,.12);
    }

    /* Same padding/type/hover language as the normal single-row menu
       (.navbar .navbar-nav .nav-link, "Nav links" section above), written
       fresh here for the same .navbar-class reason above. Vertical padding
       is smaller than the single-row menu's 28px — that value sets a
       single row's whole header height; Row 2 is its own slim dedicated
       strip. */
    .alq-navbar-row2 .navbar-nav .nav-link {
        padding       : 16px 14px;
        font-weight   : 400;
        font-size     : 14px;
        letter-spacing: 0.05em;
        outline       : none;
        transition    : color 0.2s;
        color         : var(--alq-header-row2-ink, var(--alq-on-dark));
    }
    .alq-navbar-row2 .navbar-nav .nav-link:hover,
    .alq-navbar-row2 .navbar-nav .nav-link.active {
        color: var(--alq-accent);
    }

    /* ---- Row 1 inline search box ----
       Sits where the menu normally would (.mx-auto in the markup),
       between the logo and whatever Header Style puts on the right.
       max-width keeps it from stretching edge-to-edge when Header Style
       = Default (nothing on the right to stop it). */
    .alq-header-search-inline {
        position : relative; /* anchors the results dropdown below */
        flex     : 1 1 auto;
        max-width: 480px;
    }
    /* Same wrap-and-float pattern as the header dropdown search
       (.alq-search-dd .search-form / .alq-search-results, "Search forms"
       section above) — the results panel needs to float over the page
       instead of pushing Row 1 taller (and shoving Row 2 down) when
       results appear. */
    .alq-header-search-inline .search-form { flex-wrap: wrap; }
    .alq-header-search-inline .alq-search-results {
        position  : absolute;
        top       : 100%;
        left      : 0;
        right     : 0;
        z-index   : 1050;
        flex      : 1 0 100%;
        /* Flush against the search box (no gap) — unlike the dropdown
           version above, there's no shared bordered panel wrapping input +
           results together here, so a visible gap read as two disconnected
           boxes instead of one search box with its own suggestions
           (user feedback, 2026-08-15). */
        margin-top: 0;
    }
}


/* =============================================================================
   WCAG — BASIC ACCESSIBILITY PASS (Lite version)
   1. Skip Link — hidden off-screen until it receives keyboard focus, then
      jumps straight past the header/navigation to #main-content (see
      header.php). Standard WordPress skip-link pattern (same technique
      the default themes use), styled to match this theme's brand colors.
   2. Global :focus-visible outline — a safety net so any interactive
      element without its own explicit focus style (this theme already
      has several component-specific ones — mega menu, cart drawer,
      search) still gets a clearly visible keyboard-focus indicator
      (WCAG 2.4.7 Focus Visible). :focus-visible (not :focus) keeps the
      existing mouse-click experience unchanged — no ring on click,
      same as before — while guaranteeing keyboard/Tab users always see
      exactly where focus is.
============================================================================= */

.alq-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--alq-primary, #0f172a);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top 0.15s ease;
}

.alq-skip-link:focus,
.alq-skip-link:focus-visible {
    top: 0;
    color: #fff;
    outline: 2px solid var(--alq-accent, #b8912a);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--alq-accent, #b8912a);
    outline-offset: 2px;
}


/* =============================================================================
   CORE CMS CLASSES — standard classes WordPress core itself outputs
   (image captions, galleries, post alignment, screen-reader-only text).
   These aren't specific to any one template — WordPress can insert them
   into post content, comments, or admin-generated markup at any time, so
   the theme must style them globally rather than only where used today.
============================================================================= */

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}
.wp-caption-text {
    text-align: center;
}
.gallery-caption {
    display: block;
}
.bypostauthor {
    display: block;
}
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* Wide tables on phones (added 2026-09-24) — content tables (documentation
   pages, and any table an owner puts in a page or post) used to run past the
   screen edge and get clipped by the article's overflow:hidden, so the right-
   hand columns could not be read at all. Below 768px the table becomes its own
   horizontally scrollable strip, with a sensible minimum column width so cells
   do not squash into one-word columns. Wide screens are unchanged. */
@media (max-width: 767.98px) {
    .page-entry-content table,
    .alq-doc-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-entry-content table th,
    .page-entry-content table td,
    .alq-doc-content table th,
    .alq-doc-content table td {
        min-width: 110px;
    }
}