/**
 * Quick Fix Force — Site header, mobile action bar, footer
 * Source: src/components/home/Header.jsx, Logo.jsx, MobileActionBar.jsx, Footer.jsx
 */

/* ===== Logo ===== */
.qff-logo { display: inline-flex; align-items: center; gap: 0.625rem; }
.qff-logo__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  background: var(--qff-navy);
  border-radius: var(--qff-radius-sm);
  flex-shrink: 0;
}
.qff-logo__mark-text { font-family: var(--qff-font-display); font-weight: 700; color: #fff; font-size: 14px; letter-spacing: -0.02em; }
.qff-logo__mark-dot { position: absolute; bottom: -2px; right: -2px; height: 8px; width: 8px; background: var(--qff-action); }
.qff-logo__word { line-height: 1; }
.qff-logo__name { display: block; font-family: var(--qff-font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--qff-navy); }
.qff-logo__name span { color: var(--qff-action); }
.qff-logo--light .qff-logo__name { color: #fff; }
.qff-logo__tag { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; color: var(--qff-charcoal-50); }
.qff-logo--light .qff-logo__tag { color: var(--qff-white-60); }

/* ----- Real logo artwork (Appearance → Customize → Site Identity) ----- */
/* overflow/position are scoped to the image variant on purpose: the CSS
   fallback logo has an absolutely-positioned accent dot at bottom/right -2px
   that `overflow: hidden` would clip. */
.qff-logo--img { position: relative; overflow: hidden; line-height: 0; }

/* Signature animated SVG logo (assets/images/quick-fix-force-logo.svg):
   deliberately its own modifier, not .qff-logo--img. It plays its own
   internal entrance choreography (gated to .qff-logo-intro inside the SVG's
   own <style> block) and its own hover effect on the red mark, so it opts
   out of the wrapper-level qffLogoEntrance fade + shine-sweep below, which
   were built for a plain logo image and would otherwise run a second,
   redundant reveal on top of the SVG's own. */
.qff-logo--signature { line-height: 0; }
.qff-logo__img {
  display: block;
  height: 38px;
  width: auto;
  max-width: min(60vw, 340px);
  object-fit: contain;
}
@media (max-width: 767px) {
  .qff-header .qff-logo__img {
    height: 48px;
    max-width: min(70vw, 340px);
  }
}
@media (min-width: 1024px) { .qff-logo__img { height: 42px; } }

/* ===== Logo intro (header only, once per session — see site-header.php) =====
   Sequence: logo eases in from the left and sharpens (blur → 0), then a light
   sweep crosses the wordmark. Deliberately finite — it settles and stops. */
/* `backwards`, not `both`: the final keyframe is identical to the element's
   natural resting state, and a lingering `both` fill would keep `transform`
   locked by the animation — which outranks the hover transition below and
   would silently kill the hover nudge for the rest of that page view. */
.qff-logo-intro .qff-header .qff-logo {
  animation: qffLogoEntrance 1.05s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.qff-logo-intro .qff-header .qff-logo--img::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -45%;
  width: 24%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: qffLogoShine 1.5s ease-out 0.45s both;
}

@keyframes qffLogoEntrance {
  0%   { opacity: 0; transform: translateX(-38px) scale(0.96); filter: blur(5px); }
  55%  { opacity: 1; transform: translateX(4px) scale(1.01);   filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1);        filter: blur(0); }
}
@keyframes qffLogoShine {
  0%   { left: -45%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

@media (max-width: 767px) {
  /* The logo is decorative but was the measured mobile LCP. Render its
     finished state immediately; retain the full entrance on larger screens. */
  .qff-logo-intro .qff-header .qff-logo,
  .qff-logo-intro .qff-header .qff-logo * { animation: none !important; }
  .qff-logo-intro .qff-header .halo,
  .qff-logo-intro .qff-header .precision-ring,
  .qff-logo-intro .qff-header .red-bloom,
  .qff-logo-intro .qff-header .thread { display: none !important; }
}

/* Hover: a small forward nudge, matching the "quick / force" identity. */
.qff-header .qff-logo { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
  .qff-header .qff-logo:hover { transform: translateX(3px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .qff-logo-intro .qff-header .qff-logo,
  .qff-logo-intro .qff-header .qff-logo--img::after { animation: none; }
  .qff-header .qff-logo { transition: none; }
  .qff-header .qff-logo:hover { transform: none; }
}

/* ===== Header ===== */
.qff-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--qff-white-85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.qff-header.is-scrolled {
  background: var(--qff-white-95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 0 rgba(11,63,120,0.08), 0 8px 30px -12px rgba(11,63,120,0.15);
}
.qff-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--qff-header-height);
}
.qff-header__nav { display: none; align-items: center; gap: 1rem; }
/* wp_nav_menu() (used once a real "Primary Navigation" menu is assigned —
   see qff_primary_nav_items()) wraps each item in <li class="menu-item">
   with `items_wrap` stripping only the outer <ul>, so the <li>'s default
   browser bullet/margin needs resetting here; the hardcoded-array fallback
   path (no menu assigned yet) renders bare <a> tags and never hits this. */
.qff-header__nav li,
.qff-header__mobile-nav li { list-style: none; margin: 0; padding: 0; }
.qff-header__nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--qff-charcoal-70);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.qff-header__nav a:hover, .qff-header__nav a.is-active { color: var(--qff-navy); }
@media (min-width: 1024px) { .qff-header__nav { display: flex; } }
@media (min-width: 1280px) { .qff-header__nav { gap: 1.25rem; } }

/* 1024–1439px: the 9-item nav (Knowledge Center + Careers added 2026-08-23)
   plus the "Book a Visit" CTA no longer both fit inside .qff-header__bar's
   default 3rem edge padding + 1rem/1.25rem nav gap at this width — .qff-btn
   would get pushed off-screen because .qff-header__nav has no `overflow`
   set, so per the flexbox spec its automatic minimum width is its full
   content width (it never actually shrinks, it just overflows). Rather than
   fix that generically (which would need a wrap/scroll affordance and grow
   the header's height, which var(--qff-header-height) assumes is fixed
   everywhere), this tightens only the values that have real slack at this
   one tier — edge padding, inter-link gap, link size, CTA padding — while
   1440px+ keeps the original, more generous spacing untouched. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .qff-header__bar { padding-left: 1.125rem; padding-right: 1.125rem; }
  .qff-header__nav { gap: 0.5rem; }
  .qff-header__nav a { font-size: 12px; }
  .qff-header__actions { padding-left: 0.625rem; gap: 0.5rem; }
  .qff-header__cta { padding-left: 1rem; padding-right: 1rem; }
}

/* ----- Desktop dropdowns (2026-08-19 IA restructure) -----
   wp_nav_menu()'s default walker already outputs
   <li class="menu-item-has-children"><a>…</a><ul class="sub-menu">…</ul></li>
   with no extra markup needed — this is pure CSS on top of that. Hover AND
   focus-within, so it's keyboard-reachable (tab onto the parent link, the
   panel opens; tab through the children; tabbing past the last child closes
   it naturally as focus leaves the <li>). */
.qff-header__nav .menu-item-has-children { position: relative; }
.qff-header__nav .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.qff-header__nav .menu-item-has-children > a::after {
  content: "";
  width: 0.6em;
  height: 0.6em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.qff-header__nav .menu-item-has-children:hover > a::after,
.qff-header__nav .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}
.qff-header__nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 220px;
  padding: 0.625rem;
  background: #fff;
  border: 1px solid var(--qff-navy-10);
  border-radius: var(--qff-radius-md);
  box-shadow: 0 12px 32px -8px rgba(11, 63, 120, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.qff-header__nav .menu-item-has-children:hover > .sub-menu,
.qff-header__nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.qff-header__nav .sub-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--qff-radius-sm);
  font-size: 13.5px;
  white-space: normal;
}
.qff-header__nav .sub-menu a:hover { background: var(--qff-navy-05); }
/* Services has 9 children — a single narrow column would run tall enough to
   feel like a different kind of menu than the others; two columns keeps it
   visually consistent with the shorter dropdowns. */
.qff-header__nav .menu-item-has-children.menu-item-services-dropdown > .sub-menu {
  min-width: 420px;
  columns: 2;
  column-gap: 0.5rem;
}
.qff-header__nav .menu-item-services-dropdown > .sub-menu li { break-inside: avoid; }

.qff-header__actions { display: none; align-items: center; gap: 0.75rem; flex-shrink: 0; padding-left: 1.25rem; }
@media (min-width: 1024px) { .qff-header__actions { display: flex; } }
@media (min-width: 1280px) { .qff-header__actions { gap: 1rem; } }
.qff-header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--qff-navy);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.qff-header__phone svg { width: 1rem; height: 1rem; }
.qff-header__phone:hover { color: var(--qff-action); }
@media (min-width: 1280px) { .qff-header__phone { display: flex; } }

.qff-header__cta {
  background: var(--qff-action-hover);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--qff-radius-sm);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.qff-header__cta:hover { background: #b20d18; }

.qff-header__toggle {
  display: flex;
  padding: 0.625rem;
  margin-right: -0.5rem;
  color: var(--qff-navy);
}
@media (min-width: 1024px) { .qff-header__toggle { display: none; } }
.qff-header__toggle svg { width: 1.5rem; height: 1.5rem; }

.qff-header__mobile-nav {
  display: none;
  background: #fff;
  border-top: 1px solid var(--qff-navy-05);
  padding: 1rem 1.25rem;
  /* .qff-header is `position: fixed` and this panel has no height rule of
     its own, so its opaque white box is only ever as tall as its own
     content — at 9 top-level items (Knowledge Center + Careers added
     2026-08-23) that's ~510px on a 375×812 phone, ending mid-way through
     whatever page content sits underneath at that exact y-coordinate
     (verified on the homepage: it landed inside the hero's own CTA button,
     showing a sliver of red page content peeking out below the panel's
     bottom edge). min-height forces the panel to always extend to the
     bottom of the viewport regardless of item count, so it always fully
     covers the page underneath; max-height + overflow-y is the other half —
     if a future taller submenu state ever exceeds the viewport instead, the
     panel scrolls internally rather than extending past the screen. */
  min-height: calc(100vh - var(--qff-header-height));
  max-height: calc(100vh - var(--qff-header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qff-header.is-open .qff-header__mobile-nav { display: block; }
@media (min-width: 1024px) { .qff-header__mobile-nav { display: none !important; } }
.qff-header__mobile-nav a {
  display: block;
  padding: 0.75rem 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--qff-charcoal-80);
  border-bottom: 1px solid var(--qff-navy-05);
}
.qff-header__mobile-nav a:last-of-type { border-bottom: 0; }

/* ----- Mobile submenu accordion (2026-08-19 IA restructure) -----
   .qff-mobile-submenu-toggle is injected by JS (initMobileSubmenus() in
   qff-main.js) next to any item with children, since wp_nav_menu() alone
   has nothing to expand/collapse a submenu with on a touch device — only
   :hover, which doesn't apply on mobile. The item's own link still
   navigates normally; only the separate chevron button toggles the list. */
.qff-header__mobile-nav .menu-item-has-children { position: relative; }
.qff-header__mobile-nav .menu-item-has-children > a { padding-right: 2.5rem; }
.qff-mobile-submenu-toggle {
  position: absolute;
  top: 0.25rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  color: var(--qff-navy);
}
.qff-mobile-submenu-toggle::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.qff-mobile-submenu-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.qff-header__mobile-nav .sub-menu {
  display: none;
  padding: 0.25rem 0 0.5rem 1rem;
}
.qff-header__mobile-nav li.is-submenu-open > .sub-menu { display: block; }
.qff-header__mobile-nav .sub-menu a {
  padding: 0.625rem 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--qff-charcoal-60);
  border-bottom: 0;
}
.qff-header__mobile-cta {
  display: block;
  text-align: center;
  background: var(--qff-action);
  color: #fff;
  font-weight: 600;
  padding: 0.875rem 0;
  border-radius: var(--qff-radius-sm);
  margin-top: 0.75rem;
}

/* ===== Mobile action bar ===== */
.qff-mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--qff-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--qff-navy-15);
  transform: translateY(0);
  transition: transform 0.3s ease;
}
/* Hidden only while scrolled within the page's hero section, so it doesn't
   sit on top of the hero's own Call/WhatsApp CTAs. JS-added only — if JS is
   unavailable the bar stays visible (safe default for a business-critical
   contact method), it just skips the hide-during-hero enhancement. */
.qff-mobile-bar.is-hidden-in-hero { transform: translateY(100%); }
@media (min-width: 1024px) { .qff-mobile-bar { display: none; } }
.qff-mobile-bar__inner {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
}
.qff-mobile-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--qff-radius-sm);
}
.qff-mobile-bar a svg { width: 1rem; height: 1rem; }
.qff-mobile-bar__call { border: 1px solid var(--qff-navy-15); color: var(--qff-navy); }
.qff-mobile-bar__whatsapp { background: var(--qff-action-hover); color: #fff; }

/* ===== Footer ===== */
.qff-footer { background: var(--qff-navy-deep); color: #fff; }
.qff-footer__inner { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .qff-footer__inner { padding-top: 5rem; padding-bottom: 5rem; } }
/* extra bottom clearance for the mobile action bar */
.qff-footer__inner { padding-bottom: 7rem; }
@media (min-width: 1024px) { .qff-footer__inner { padding-bottom: 5rem; } }

/* Desktop redesign, 2026-08-19 (see site-footer.php's docblock for the
   audit this came from): the old `repeat(7, minmax(0,1fr))` forced 7
   perfectly equal columns at 1280px+, so the brand block (already spanning
   2 of them) and all 6 content columns were squeezed into a rigid 1/7
   slice each — which is what read as "stretched/unfinished" rather than
   designed. Brand now gets a real, wider, non-negotiable minimum column
   instead of just a multiple of the same skinny unit everything else gets. */
.qff-footer__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem;
}
@media (min-width: 640px) { .qff-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (min-width: 1280px) {
  .qff-footer__grid {
    grid-template-columns: minmax(210px, 1.2fr) repeat(6, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

.qff-footer__brand { }
@media (min-width: 1024px) { .qff-footer__brand { grid-column: span 2 / span 2; } }
@media (min-width: 1280px) { .qff-footer__brand { grid-column: auto; } }
.qff-footer__desc { margin-top: 1.5rem; font-size: 14px; color: var(--qff-white-60); line-height: 1.7; max-width: 20rem; }
.qff-footer__social { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.qff-footer__social a {
  display: flex; align-items: center; justify-content: center;
  height: 2.5rem; width: 2.5rem;
  border-radius: var(--qff-radius-sm);
  background: var(--qff-white-05);
  transition: background-color 0.2s ease;
}
.qff-footer__social a:hover { background: var(--qff-white-10); }
.qff-footer__social svg { width: 1rem; height: 1rem; }

/* ----- Payment trust block (2026-08-19) -----
   Label matches .qff-footer__col h3's micro-label treatment exactly (same
   size/weight/tracking/color) so it reads as part of the same system, not a
   separate widget. Chips reuse .qff-footer__social's own tinted-box
   treatment at a smaller, text-sized scale — same background, radius and
   hover, just sized for a text label instead of an icon. */
.qff-footer__payments { margin-top: 2rem; }
.qff-footer__payments-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qff-white-60); margin-bottom: 0.875rem; }
.qff-footer__payments-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.qff-footer__payments-list li {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--qff-white-65);
  background: var(--qff-white-05);
  border: 1px solid var(--qff-white-10);
  border-radius: var(--qff-radius-sm);
  padding: 0.3rem 0.625rem;
}
.qff-footer__payments-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  max-width: 20rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--qff-white-60);
}
.qff-footer__payments-note svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--qff-white-50); }

.qff-footer__col h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qff-white-60); margin-bottom: 1.25rem; }
.qff-footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.qff-footer__col a { font-size: 14px; color: var(--qff-white-65); transition: color 0.2s ease; }
.qff-footer__col a:hover { color: #fff; }

.qff-footer__bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--qff-white-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .qff-footer__bottom { flex-direction: row; flex-wrap: wrap; row-gap: 0.75rem; } }
.qff-footer__copyright { font-size: 12px; color: var(--qff-white-60); }
.qff-footer__copyright a:hover { color: var(--qff-white-70); }
/* Same size/color as .qff-footer__copyright (it's the same kind of small
   legal/trust meta line), inline-flex + icon matches the existing
   .qff-page-hero__trust li pattern used for hero trust signals elsewhere. */
.qff-footer__vat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12px; color: var(--qff-white-60); }
.qff-footer__vat svg { width: 0.875rem; height: 0.875rem; color: var(--qff-white-50); flex-shrink: 0; }
.qff-footer__vat span { color: var(--qff-white-60); }
.qff-footer__motto { font-family: var(--qff-font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--qff-white-70); }
.qff-footer__motto span { color: #ff6670; }