/* ============================================================================
   Al Mada — Design Tokens  ·  "Clean & Minimal" visual language
   ----------------------------------------------------------------------------
   Al Mada's OWN, independent stylesheet. Same LOOK as the reference, but
   INDEPENDENT CODE:
     • No Q8tly plugin CSS, no --ekg-* tokens, no .q8tly-* classes.
     • Nothing imported from any Q8tly file or the reference HTML.
     • Namespaced --qa-* / .qa-* so it can never collide with Q8tly.

   Visual language in one line: navy ink on white, generous cool/coral bands,
   hairline rules, sharp corners (pills only for CTAs), and NO shadows. Coral
   is a POINTER only — kickers, hover, CTAs — never body, decks, or large fills.
   ============================================================================ */

:root {
  /* --- Brand palette -------------------------------------------------------
     Raw brand colors. Prefer the semantic tokens below in components.        */
  --qa-navy:          #16213D;  /* primary ink (text, headings, marks)        */
  --qa-coral:         #FF4747;  /* accent — pointer only (kickers/hover/CTAs) */
  --qa-coral-ink:     #C42E2E;  /* SMALL coral text + coral hover/active      */
  --qa-white:         #FFFFFF;

  /* Background bands */
  --qa-band-cool:     #F4F6F9;  /* calm alternating section background        */
  --qa-band-coral:    #FFF1EE;  /* coral-tint accent band (still a light bg)  */

  /* Hairline rules */
  --qa-rule:          #E7EAF0;  /* default 1px hairline                       */
  --qa-rule-strong:   #D3D9E2;  /* slightly stronger hairline / dividers      */

  /* --- Semantic colors (use THESE in components) --------------------------- */
  --qa-bg:            var(--qa-white);     /* page background                  */
  --qa-text:          var(--qa-navy);      /* body + heading ink               */
  --qa-text-muted:    #4A546B;             /* navy tinted toward grey (decks)  */
  --qa-accent:        var(--qa-coral);     /* coral pointer (large/UI only)    */
  --qa-accent-text:   var(--qa-coral-ink); /* coral for SMALL text (a11y-safe) */
  --qa-accent-hover:  var(--qa-coral-ink); /* darken coral on hover/active     */
  --qa-on-accent:     var(--qa-white);     /* text/icon sitting on coral fill  */

  /* --- Shape ---------------------------------------------------------------
     Sharp corners EVERYWHERE. The pill radius is reserved for CTA buttons.   */
  --qa-radius:        0;        /* default: sharp corners                     */
  --qa-radius-pill:   999px;    /* CTA pills ONLY                             */

  /* --- Borders ------------------------------------------------------------- */
  --qa-border:        1px solid var(--qa-rule);
  --qa-border-strong: 1px solid var(--qa-rule-strong);

  /* --- Elevation -----------------------------------------------------------
     No shadows, ever. Separation comes from hairlines and bands.            */
  --qa-shadow:        none;

  /* --- Focus ring (accessibility; not "elevation") ------------------------- */
  --qa-focus-ring:    0 0 0 3px rgba(255, 71, 71, 0.45);

  /* --- Motion -------------------------------------------------------------- */
  --qa-transition:    150ms ease;

  /* --- Typography ----------------------------------------------------------
     Arabic-ready pairing — RESOLVED (see D-004). IBM Plex Sans + IBM Plex Sans
     Arabic share design DNA, so mixed Latin/Arabic runs stay cohesive; the
     browser auto-selects Arabic glyphs from "IBM Plex Sans Arabic". Hierarchy
     comes from WEIGHT (heading 500 / body 400), not a second family — a clean
     sans suits an Arabic-first tech brand better than an editorial serif.
     IBM Plex Mono is used for small Latin labels (kickers); Arabic kickers fall
     back to the Sans Arabic face (no mono, no uppercase — Arabic has no case).
     Fonts are loaded via Google Fonts (see styleguide.html / DESIGN_SYSTEM.md).
     Note: a free typeface IBM Plex is — choosing it is a brand/Arabic decision,
     not Q8tly code; no separation concern.                                    */
  --qa-font-body:    "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qa-font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qa-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --qa-weight-body:    400;
  --qa-weight-heading: 500;   /* hierarchy via weight contrast, not family    */
  --qa-weight-bold:    700;   /* CTA labels, strong emphasis                  */
  --qa-weight-kicker:  600;   /* mono label                                   */

  /* --- Type scale (structural defaults; not brand-locked) ------------------ */
  --qa-fs-kicker:   0.75rem;   /* 12px — small uppercase label                */
  --qa-fs-body:     1rem;      /* 16px                                        */
  --qa-fs-deck:     1.25rem;   /* 20px — sub-headline / lead (navy, not coral)*/
  --qa-fs-h3:       1.5rem;
  --qa-fs-h2:       2rem;
  --qa-fs-h1:       2.75rem;
  --qa-lh-tight:    1.15;
  --qa-lh-body:     1.6;

  /* --- Spacing & layout (structural defaults) ------------------------------ */
  --qa-space-1: 0.25rem;
  --qa-space-2: 0.5rem;
  --qa-space-3: 1rem;
  --qa-space-4: 1.5rem;
  --qa-space-5: 2rem;
  --qa-space-6: 3rem;
  --qa-space-7: 4rem;
  --qa-section-y: clamp(3rem, 6vw, 6rem); /* vertical rhythm between sections */
  --qa-container:  1140px;                /* max content width               */
}

/* ============================================================================
   Minimal primitives — encode the rules so they're hard to break.
   Scoped under .qa-* ; load this file, then build pages with these classes.
   ============================================================================ */

/* Base ---------------------------------------------------------------------- */
.qa-root {
  background: var(--qa-bg);
  color: var(--qa-text);
  font-family: var(--qa-font-body);
  font-weight: var(--qa-weight-body);
  font-size: var(--qa-fs-body);
  line-height: var(--qa-lh-body);
}

.qa-root :where(h1, h2, h3, h4) {
  font-family: var(--qa-font-display);
  font-weight: var(--qa-weight-heading);  /* 500 — weight contrast vs body    */
  line-height: var(--qa-lh-tight);
  color: var(--qa-text);       /* headings are navy ink — never coral        */
  margin: 0 0 var(--qa-space-3);
}

/* Layout -------------------------------------------------------------------- */
.qa-container {
  max-width: var(--qa-container);
  margin-inline: auto;
  padding-inline: var(--qa-space-4);
}

.qa-section { padding-block: var(--qa-section-y); }

/* Section bands. Coral-tint is a light BACKGROUND band, not a coral fill. */
.qa-band--cool  { background: var(--qa-band-cool); }
.qa-band--coral { background: var(--qa-band-coral); }

/* Hairline rules ------------------------------------------------------------ */
.qa-rule        { border: 0; border-top: var(--qa-border); }
.qa-rule--strong{ border: 0; border-top: var(--qa-border-strong); }

/* Kicker — the canonical SMALL coral pointer. Uses the a11y-safe coral. ----- */
.qa-kicker {
  display: inline-block;
  font-family: var(--qa-font-mono);  /* Latin labels: IBM Plex Mono           */
  font-size: var(--qa-fs-kicker);
  font-weight: var(--qa-weight-kicker);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qa-accent-text);   /* small text → #C42E2E, not #FF4747       */
}

/* Arabic kicker: no mono, no uppercase (Arabic has no case). Auto-switches to
   the Sans Arabic face on RTL / lang="ar". */
:lang(ar) .qa-kicker,
[dir="rtl"] .qa-kicker {
  font-family: var(--qa-font-body);
  font-weight: var(--qa-weight-heading);
  letter-spacing: 0;
  text-transform: none;
}

/* Deck / lead — stays navy-muted. Coral is NOT allowed here. ---------------- */
.qa-deck {
  font-size: var(--qa-fs-deck);
  color: var(--qa-text-muted);
  max-width: 60ch;
}

/* Links — navy by default, coral on hover (coral as a pointer). ------------- */
.qa-link {
  color: var(--qa-text);
  text-decoration: none;
  border-bottom: 1px solid var(--qa-rule-strong);
  transition: color var(--qa-transition), border-color var(--qa-transition);
}
.qa-link:hover { color: var(--qa-accent-text); border-bottom-color: currentColor; }

/* Cards — sharp corners, hairline border, NO shadow. ------------------------ */
.qa-card {
  background: var(--qa-white);
  border: var(--qa-border);
  border-radius: var(--qa-radius);   /* sharp */
  box-shadow: var(--qa-shadow);      /* none  */
  padding: var(--qa-space-5);
}

/* Buttons ------------------------------------------------------------------- */
/* The ONLY pill in the system — the primary CTA. Coral fill, white text. */
.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
  padding: 0.75rem 1.5rem;
  font: inherit;
  font-weight: var(--qa-weight-bold);  /* large + bold → coral CTA is legible */
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--qa-radius-pill);  /* pill — the documented exception   */
  box-shadow: var(--qa-shadow);          /* none                              */
  transition: background var(--qa-transition), color var(--qa-transition),
              border-color var(--qa-transition);
}
.qa-btn--primary {
  background: var(--qa-accent);
  color: var(--qa-on-accent);
}
.qa-btn--primary:hover { background: var(--qa-accent-hover); }

/* Secondary CTA — navy outline pill, no coral fill. */
.qa-btn--secondary {
  background: transparent;
  color: var(--qa-text);
  border-color: var(--qa-rule-strong);
}
.qa-btn--secondary:hover { border-color: var(--qa-text); }

.qa-btn:focus-visible { outline: none; box-shadow: var(--qa-focus-ring); }

/* Respect reduced-motion preferences. -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qa-root * { transition: none !important; }
}

/* ============================================================================
   WPML Language Switcher (header) — keep on the main row + style the dropdown
   ----------------------------------------------------------------------------
   WPML ships `.wpml-language-switcher-block{width:100% !important}` which forces
   the switcher onto its own line. Shrink it to content width so it sits inline
   on the header row, and style its dropdown to the Clean & Minimal system.
   ============================================================================ */

/* Issue 1 — stop the switcher forcing a full-width row (header-scoped, beats WPML's !important) */
header .wpml-language-switcher-block,
header .wpml-language-switcher-block > .wp-block-navigation-item,
header .wpml-language-switcher-block > .wp-block-navigation-item > div {
  width: auto !important;
}
header .wpml-language-switcher-block { flex: 0 0 auto; margin-inline-start: var(--qa-space-2); }

/* Trigger label ("English" / "العربية") — navy ink, brand font */
.wpml-language-switcher-block .wp-block-navigation-item__content,
.wpml-language-switcher-block .wp-block-navigation-item__content > a,
.wpml-language-switcher-block a { color: var(--qa-navy); font-family: var(--qa-font-body); }

/* Issue 2 — dropdown panel: white, hairline border, sharp corners, no shadow, above hero.
   LITERAL values + `.wpml-ls-dropdown` specificity (0,3,0) + !important to beat WPML's inline
   `.wp-block-navigation__submenu-container{background-color:unset!important;border:inherit!important}`
   (a var()-based value gets dropped in that cascade, so literals are required here). */
.wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container {
  background-color: #FFFFFF !important;   /* white panel */
  border: 1px solid #E7EAF0 !important;   /* hairline */
  border-radius: 0 !important;            /* sharp corners */
  box-shadow: none !important;            /* no shadow */
  padding: 0.5rem 0 !important;
  min-width: 9rem !important;
  z-index: 1000 !important;               /* above the hero */
}
.wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container li a,
.wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container li .wp-block-navigation-item__content {
  color: #16213D !important;              /* navy ink */
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  padding: 0.5rem 1rem !important;
}
/* Subtle hover — cool band only (coral stays a pointer, never a fill here) */
.wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container li a:hover,
.wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container li a:focus-visible {
  background-color: #F4F6F9 !important;   /* cool band */
  color: #16213D !important;
}

/* RTL — right-align items and anchor the panel under the trigger's right edge */
[dir="rtl"] .wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container { text-align: right !important; right: 0 !important; left: auto !important; }
[dir="rtl"] .wpml-language-switcher-block .wpml-ls-dropdown .wp-block-navigation__submenu-container li a { text-align: right !important; }

/* ============================================================================
   Brand lockup — real SVG assets
   ----------------------------------------------------------------------------
   The lockup is an SVG whose wordmark is stored as OUTLINES, so it renders
   identically everywhere with no webfont dependency, stays crisp at any size,
   and needs no retina variants. Arabic has its own file with the whole lockup
   mirrored (symbol right, text left), which is why no RTL flipping is needed.
   Never render the wordmark into a raster used for content — a rename should
   be an edit, not a redraw.
   ========================================================================= */
.almada-logo        { margin: 0; }
.almada-logo img    { display: block; height: auto; }
.almada-logo a      { display: inline-block; line-height: 0; }

/* Legal disclosure — small and quiet, but it must stay legible (it is a legal
   notice). No reading max-width: a constrained layout centres anything narrower
   than the content column with `margin: auto !important`, which read as an
   indent against the footer's other lines. Matching their width removes the
   cause instead of fighting the specificity. */
.almada-legal { color: var(--qa-text-muted); }
.almada-legal bdi,
.almada-legal span[dir="ltr"] { unicode-bidi: isolate; }

/* ============================================================================
   Blog index — contained cards
   ----------------------------------------------------------------------------
   The old index was full-bleed images separated only by a hairline, which gave
   the eye no boundary between entries. Cards give each post an edge. The grid
   and card internals mirror under RTL without extra rules.
   ========================================================================= */
.almada-card {
  border: 1px solid var(--qa-rule);
  background: var(--qa-white);
  overflow: hidden;
  height: 100%;
}
.almada-card .wp-block-post-featured-image { margin: 0; }
.almada-card .wp-block-post-featured-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.almada-card__body { padding: 1.25rem 1.25rem 1.4rem; }
.almada-card__cat a {
  color: var(--qa-coral-ink);
  text-decoration: none;
  font-family: var(--qa-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.almada-card .wp-block-post-title { margin: 0.4rem 0 0.5rem; }
.almada-card .wp-block-post-title a { text-decoration: none; }
.almada-card .wp-block-post-title a:hover { color: var(--qa-coral-ink); }
.almada-card .wp-block-post-excerpt__excerpt { color: var(--qa-text-muted); margin: 0; }
.almada-card .wp-block-post-date { color: var(--qa-text-muted); margin: 0.75rem 0 0; }
.almada-card .wp-block-post-excerpt__more-text { display: none; }

/* Category chips above the grid */
.almada-chips { gap: 0.5rem; margin-bottom: 1.5rem; }
.almada-chips p { margin: 0; }
.almada-chips a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--qa-rule-strong);
  color: var(--qa-navy);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.5;
}
.almada-chips a:hover { border-color: var(--qa-navy); color: var(--qa-navy); }

@media (max-width: 599px) {
  .almada-card__body { padding: 1rem 1rem 1.15rem; }
}

/* ============================================================================
   Layout fixes (owner review, 2026-08-10)
   ----------------------------------------------------------------------------
   1. Equal card heights. WP columns stretch, but the card inside does not fill
      its column, so a longer card grew taller than its neighbours in the row.
   2. Footer legal block alignment. It carries a reading max-width, and a
      constrained layout centres anything narrower than the content column —
      which read as an indent. Pin it to the content's inline start instead.
   ========================================================================= */
.wp-block-column:has(> .qa-card) { display: flex; }
.wp-block-column > .qa-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
/* push the last paragraph down so card feet line up even with uneven copy */
.wp-block-column > .qa-card > :last-child { margin-block-end: 0; }


/* ============================================================================
   Header — three states (headroom pattern)

     A  at scroll top, FRONT PAGE ONLY: in flow over the hero, fully
        transparent. No background, no border, no shadow. Scrolls away with
        the page.
     B  scrolled down past the threshold: fixed but translated out of view.
        pointer-events:none so a hidden bar cannot swallow clicks.
     C  scrolling up past the threshold (and the default on every other page):
        fixed, visible, solid, with a hairline.

   Only transform is animated — never top/height.
   ========================================================================= */
.wp-site-blocks > header {
  inset-inline: 0;
  top: 0;
  z-index: 60;
  transition: transform 220ms ease, background-color 220ms ease,
              border-color 220ms ease, box-shadow 220ms ease;
}

/* States B/C. These must be the CSS DEFAULT, not something JS applies — a
   position that changes after load pulls the header out of flow mid-render and
   costs ~0.197 CLS. JS only ever toggles .is-hidden (and, on the front page,
   .almada-header--pinned once past the hero). */
.wp-site-blocks > header,
.wp-site-blocks > header.almada-header--pinned {
  position: fixed;
  background: var(--qa-white);
  border-bottom: 1px solid var(--qa-rule);
  /* No transform (and no will-change) in the visible state ON PURPOSE: either
     one makes the header a containing block for position:fixed descendants,
     which trapped the full-screen mobile menu inside the header's own 78px box
     instead of the viewport. The slide still animates — transitioning from
     `none` to a translate is treated as from the identity transform. */
  transform: none;
}
.wp-site-blocks > header.is-hidden {
  transform: translateY(-100%);
  will-change: transform;
  pointer-events: none;
}
.wp-site-blocks > header.almada-header--pinned.is-hidden {
  transform: translateY(-100%);
  will-change: transform;
  pointer-events: none;          /* a hidden header must not intercept clicks */
}

/* Non-front pages: the header is IN FLOW and sticks, so it reserves exactly its
   own height. Taking it out of flow and paying the height back with a constant
   could not work — the bar is 80px on phones, 131px at 768-899px where the nav
   wraps to two rows, and 80px again on desktop, against a single 98/163px
   guess. That left an 83px white band on phones and, at 768px, a header sitting
   on the copy. Sticky has no constant to keep in sync and is right at every
   width, including ones nobody thought to test. */
body:not(.home) .wp-site-blocks > header,
body:not(.home) .wp-site-blocks > header.almada-header--pinned {
  position: sticky;
}

/* Core gives every .wp-site-blocks child a 1.2rem block-start margin. The old
   padding swallowed it; with the header in flow it shows as a ~19px white
   sliver between the bar and the first section — obvious wherever that section
   is a tinted band. Sections carry their own padding, so this is pure gap. */
.wp-site-blocks > main { margin-block-start: 0; }

/* A sticky/fixed header still covers anchor targets. This one is scroll-only,
   so unlike the reservation above it costs nothing when it is slightly large. */
html { scroll-padding-top: 96px; }
@media (min-width: 768px) and (max-width: 899px) { html { scroll-padding-top: 148px; } }

/* Purely the hero's own breathing room under the nav — NOT the header height.
   The two were one variable, which is why correcting the header moved the hero. */
:root { --almada-hero-offset: 98px; }
@media (max-width: 767px) { :root { --almada-hero-offset: 163px; } }

/* The core navigation block un-collapses its inline nav at 600px, but this
   site's mobile menu is designed to 767px. In the 600-767px gap the nav
   rendered inline and wrapped, giving a 378px-tall header. Hold the hamburger
   until the design's own breakpoint. */
@media (max-width: 767px) {
  .wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .wp-site-blocks > header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: inline-flex;
  }
}

.wp-site-blocks > header a:focus-visible,
.wp-site-blocks > header button:focus-visible,
.wp-site-blocks > header .wp-block-navigation-submenu__toggle:focus-visible {
  outline: 2px solid var(--qa-navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.almada-logo--rev { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* no slide at all — the header simply stays put */
  .wp-site-blocks > header { transition: none; }
  .wp-site-blocks > header.is-hidden,
  .wp-site-blocks > header.almada-header--pinned.is-hidden {
    transform: none;
    pointer-events: auto;
  }
}

/* ----------------------------------------------------------------------------
   The grey band above the header.

   WordPress gives every .wp-site-blocks child margin-block-start: 1.2rem. On the
   front page the header is position:absolute (State A), so the first IN-FLOW
   child is <main> — and with no border or padding on <body>, that 19.2px margin
   COLLAPSED THROUGH body, starting it at y=19 and exposing the canvas above it.
   Fix the gap at source; the dark canvas below is belt and braces so overscroll
   or any future gap matches the hero instead of flashing light.
   -------------------------------------------------------------------------- */
body.home .wp-site-blocks > main { margin-block-start: 0; }
html { background-color: #060d18; }

/* Header nav reads as one even row of text links — no element louder than the
   others now that the red pill is gone. */
.wp-site-blocks > header .wp-block-navigation { gap: clamp(1rem, 1.8vw, 1.75rem); }
.wp-site-blocks > header .wp-block-navigation a,
.wp-site-blocks > header .wpml-ls-item a {
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
}
.wp-site-blocks > header .wp-block-navigation a:hover { color: var(--qa-coral-ink); }

/* ============================================================================
   Industries page
   ----------------------------------------------------------------------------
   Two-column card grid on desktop, one on mobile. Owning the grid here rather
   than using core's columnCount, which is fixed at every width and would need
   an !important to collapse. Card styling itself is unchanged .qa-card.
   ========================================================================= */
.qa-industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qa-space-4);
  align-items: start;
}
.qa-industry-grid > .qa-card { height: 100%; }
/* The group is a flow container in the block markup, so core still gives every
   child margin-block-start: 1.2rem — which knocked the second card in each row
   ~19px below the first. Grid gap handles the spacing here. */
.qa-industry-grid > * { margin-block-start: 0; margin-block-end: 0; }
@media (max-width: 767px) {
  .qa-industry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The clinical / legal safeguards are the reason a cautious buyer keeps
   reading, so they get their own line instead of trailing a paragraph. */
.qa-safeguard {
  display: block;
  margin-block-start: 0.4rem;
  font-style: normal;
  font-size: 0.92em;
  color: var(--qa-text-muted);
  border-inline-start: 3px solid var(--qa-coral);
  padding-inline-start: 0.6rem;
}

/* ============================================================================
   Mobile menu trigger — tap target
   ----------------------------------------------------------------------------
   The block's open/close buttons render at 24x24. Nothing overlaps them and
   pointer-events are fine, but 24px is well under the 44px minimum, so on a
   real finger a near-miss reads as "the hamburger does nothing".
   ========================================================================= */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 10px;
  margin: -10px;              /* keep the visual position identical */
  touch-action: manipulation; /* no 300ms delay, no double-tap zoom */
  cursor: pointer;
}

/* ============================================================================
   Mobile menu panel
   ----------------------------------------------------------------------------
   Restyles the core navigation overlay into a full-screen light panel: logo
   top-start, X in the hamburger's position, a plain vertical list at large
   REGULAR weight with hairline dividers, and the language switcher plus a
   WhatsApp link pinned at the bottom. No chevrons — nothing here has a submenu,
   so they would be decoration.
   ========================================================================= */
@media (max-width: 767px) {
  /* the header carries logo + hamburger only; the switcher moves into the panel */
  /* WPML's dropdown is too heavy for the bar; .almada-lang replaces it here. */
  .wp-site-blocks > header .wpml-language-switcher-block { display: none; }

  /* Language lives in the BAR on mobile, not behind a tap: in Kuwait it is one
     of the first things a visitor looks for on landing. Target-language label
     only, so the bar stays uncrowded. */
  .wp-site-blocks > header .almada-lang {
    display: inline-flex;
    align-items: center;
    /* pushes it up against the hamburger rather than floating mid-bar */
    margin-inline-start: auto;
    margin-inline-end: 0.25rem;
    min-block-size: 44px;
    padding-inline: 0.5rem;
    font-family: var(--qa-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--qa-navy);
    text-decoration: none;
  }

  /* Core sets height:auto on
       .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay))
     — :where() contributes nothing, so that is (0,2,0), the same as a bare
     .container.is-menu-open, and core's stylesheet loads later and wins. Scoping
     through the header raises this to (0,3,1) so the panel is actually
     full-screen rather than 78px of content height. */
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-block-size: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--qa-white);
    padding: 0;
    z-index: 100;
  }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close { block-size: 100%; max-inline-size: none; }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
    padding: 1.15rem clamp(1.25rem, 5vw, 2rem) 1.5rem;
    margin: 0;
  }

  /* logo sits where the header logo was */
  .almada-menu__logo { display: block; line-height: 0; margin-block-end: 2rem; }
  .almada-menu__logo img { inline-size: 150px; block-size: auto; display: block; }

  /* X in the hamburger's slot, same 44px target */
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    position: absolute;
    inset-block-start: 1.4rem;
    inset-inline-end: clamp(1.25rem, 5vw, 2rem);
    color: var(--qa-navy);
  }

  /* the list itself */
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: block;
    gap: 0;
    inline-size: 100%;
  }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > li {
    display: block;
    inline-size: 100%;
    border-block-start: 1px solid var(--qa-rule);
  }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > li:last-child { border-block-end: 1px solid var(--qa-rule); }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > li > a,
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > li > .wp-block-navigation-item__content {
    display: block;
    padding-block: 0.85rem;
    font-size: clamp(1.6rem, 7vw, 1.85rem);   /* ~26–30px */
    font-weight: 400;                          /* regular, not bold */
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--qa-navy);
    text-align: start;
    text-decoration: none;
  }
  /* The panel is a white sheet, so nothing inside it may inherit a header
     state's colour. Belt and braces against the front-page State A bug: state
     the colour on the panel itself, and give it its own visible focus ring. */
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open,
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__label { color: var(--qa-navy); }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .almada-menu__wa,
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .almada-menu__wa .wp-block-navigation-item__label { color: var(--qa-white); }
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    button:focus-visible { outline: 2px solid var(--qa-navy); outline-offset: 3px; }
  /* nothing here has a submenu, so no chevrons */
  .wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon { display: none; }

  /* pinned foot: language + WhatsApp */
  .almada-menu__foot {
    margin-block-start: auto;
    padding-block-start: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
  }
  .almada-menu__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 52px;
    padding: 0.85rem 1rem;
    background: var(--qa-navy);
    color: var(--qa-white);
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 999px;
  }
  .almada-menu__wa:hover, .almada-menu__wa:focus-visible { background: var(--qa-coral-ink); color: #fff; }
}

/* desktop keeps the switcher in the header and never shows the panel extras */
@media (min-width: 768px) {
  .almada-menu__logo, .almada-menu__foot { display: none; }
  .almada-lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open { transition: none !important; animation: none !important; }
}


/* ============================================================================
   Footer — three columns on desktop, one on mobile.

   Grouping, not redesign: the spacing scale and type sizes are the ones already
   in use. Grid (rather than floats or fixed widths) means the column order
   mirrors under RTL on its own, since grid flows with the writing mode.
   ========================================================================= */
.almada-footer__cols {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}
.almada-footer__cols > *,
.almada-footer__col > * { margin-block-start: 0; }
.almada-footer__col > * + * { margin-block-start: var(--wp--preset--spacing--20); }

@media (min-width: 768px) {
  .almada-footer__cols {
    /* identity column carries the logo and tagline, so it gets the slack */
    grid-template-columns: 1.6fr 1fr 1fr;
    column-gap: var(--wp--preset--spacing--50);
    align-items: start;
  }
}

/* primary nav, stacked in its column */
.almada-footer__nav .wp-block-navigation__container { gap: 0.55rem; }
.almada-footer__nav a { text-decoration: none; }
.almada-footer__nav a:hover { text-decoration: underline; }

/* Contact column: ONE primary action, then quiet links.
   WhatsApp is a filled coral pill — the same treatment as the "Talk to us"
   CTA, inherited from theme.json's button element, so it stays in sync if the
   brand colour ever moves. It is sized to its content rather than filling the
   column, which is what makes it read as the single primary action instead of
   one of a stack of equal-weight buttons. */
.almada-footer__cta .wp-block-button { width: auto; }
.almada-footer__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Call us / Email — plain text links at footer text colour, underline on
   hover only. Icons are decorative (aria-hidden) because the label already
   says what the link is. */
.almada-footer__contact {
  list-style: none;
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.almada-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.almada-footer__contact a:hover,
.almada-footer__contact a:focus-visible { text-decoration: underline; }
.almada-footer__contact svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}

/* full-width base row: products line, disclosure, legal links, copyright */
.almada-footer__base {
  margin-block-start: var(--wp--preset--spacing--50);
  padding-block-start: var(--wp--preset--spacing--30);
  border-block-start: 1px solid var(--qa-rule);
}
.almada-footer__base > * + * { margin-block-start: var(--wp--preset--spacing--20); }

/* Legal is deliberately quieter than the primary nav — it is not equal weight. */
.almada-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}
.almada-footer__legal > * { margin-block-start: 0 !important; }
.almada-footer__links a,
.almada-footer__copy { color: var(--qa-text-muted); }
.almada-footer__links a { text-decoration: none; }
.almada-footer__links a:hover,
.almada-footer__links a:focus-visible { text-decoration: underline; }

/* Copyright + social icons travel together at the end of the bottom bar, so
   the legal row keeps exactly two flex children and the existing
   space-between still puts the policy links at the start. Logical properties
   throughout, so the whole row mirrors under RTL without a separate rule. */
.almada-footer__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}
/* core's flow layout would otherwise stack these two */
.almada-footer__end > * { margin-block-start: 0 !important; }
.almada-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.almada-footer__social a {
  display: inline-flex;
  color: var(--qa-text-muted);
  transition: color var(--qa-transition);
}
.almada-footer__social a:hover,
.almada-footer__social a:focus-visible { color: var(--qa-accent-text); }
.almada-footer__social svg {
  inline-size: 1.25rem;   /* 20px — small enough to stay subordinate to legal */
  block-size: 1.25rem;
  display: block;
}