/* ==========================================================================
   Shared components: glass button, nav (mobile + desktop), footer,
   case-page overlay shell, cookie consent banner
   ========================================================================== */

/* ---------- CTA headline (used on every page's pre-footer CTA section) ----------
   Matches .pg-headline's font/size exactly (same weight, stroke, tracking) so the
   CTA headline reads as the same "page headline" treatment, just on the accent
   section. Desktop size is bumped per page below, mirroring that page's own
   .pg-headline desktop override. */
.pg-cta-head {
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-text-stroke: 0.048em currentColor;
  font-size: min(2.4rem, 8.8cqw, 4dvh);
  line-height: 1.1;
  letter-spacing: calc(0.029em + 0.2pt);
  text-transform: uppercase;
  color: var(--colour-bg);
  text-wrap: balance;
}

/* ---------- Glass button (the ONLY button style site-wide) ---------- */
.pg-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: min(16px, 1.5dvh) 12px;
  border-radius: var(--radius-button);
  border: none;
  background: var(--colour-accent-40);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-glass);
  color: var(--colour-ink);
  font-family: var(--font-ui);
  font-size: var(--size-button);
  font-weight: 400;
  -webkit-text-stroke: 0.018em currentColor;
  text-align: center;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pg-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glass-hover);
}

.pg-btn:active {
  filter: brightness(1.05);
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(58, 63, 67, 0.18);
}

.pg-btn--auto { width: auto; padding-left: 28px; padding-right: 28px; }

.pg-btn:disabled { opacity: 0.6; cursor: default; pointer-events: none; }

@media (min-width: 760px) {
  .pg-btn { font-size: min(12pt, 2.4dvh); }
}

/* ---------- Shared inline form-validation/submit error (Phase 5: Forms) ----------
   Used by the Inquiry (Section 7), Contact, and Acquire purchase forms. Always
   occupies its layout box (reserved for up to two lines of text) so that the
   submit button below it never jumps/shifts when a message appears — only
   opacity toggles via .is-visible once JS has a message to display. */
.pg-form-error {
  display: block;
  min-height: 2.6em;
  margin: 8px 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: calc(min(1rem, 4.6cqw, 2.8dvh) - 2pt);
  line-height: 1.3;
  color: #B23B3B;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pg-form-error.is-visible { opacity: 1; }

/* ---------- Shared honeypot field (Phase 6: Anti-Spam) ----------
   Off-screen (not display:none/type="hidden", which some bots skip) so real
   visitors never see or reach it via tab order, but bots that blindly fill
   every field in a form will populate it — a filled honeypot is treated as
   spam server-side (see is_spam_submission() in includes/form-helpers.php).
   Used by the Inquiry (Section 7), Contact, and Acquire purchase forms. */
.pg-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Nav: mobile three-dot trigger ---------- */
/* Plain 3-dot glyph, no circular glass backdrop — sits above the horizontal
   nav bar (.pg-nav-mobile) so it stays visible/tappable while the bar is open. */
.pg-nav-trigger {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 52;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border: none;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}

.pg-nav-trigger span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--colour-ink);
  display: block;
}

@media (min-width: 760px) {
  .pg-nav-trigger { display: none; }
}

/* Hide the fixed-position trigger while the mobile nav bar is open — it sits
   above the bar (z-index 52 vs 50) so it stays tappable to toggle closed,
   but that also means it visually overlaps the last link. Once the bar is
   open, closing already happens via outside-tap/close-button/Escape, so the
   trigger dots have no further job to do until the bar closes again. */
.pg-nav-trigger.is-hidden {
  display: none;
}

/* Per-section mobile menu trigger (three dots), used on pages that repeat the
   trigger inside every section rather than a single global one. Same rule:
   mobile-only, hidden once the always-visible desktop nav takes over. */
@media (min-width: 760px) {
  .pg-menu-btn { display: none !important; }
}

/* ---------- Nav: mobile fixed overlay panel ---------- */
.pg-nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: none;
  background: rgba(123, 148, 175, 0.37);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-glass);
}

.pg-nav-mobile.is-open { display: block; }

.pg-nav-mobile__panel {
  position: static;
  transform: none;
  width: 100%;
  max-width: none;
  height: auto;
  background: transparent;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pg-nav-mobile__panel::-webkit-scrollbar { display: none; }

.pg-nav-mobile__panel a {
  flex: 0 0 auto;
  color: var(--colour-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.62rem, 2.8dvh);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.2s ease;
}

.pg-nav-mobile__panel a:hover { transform: translateX(5px); }

.pg-nav-mobile__close {
  display: none;
}

@media (min-width: 760px) {
  .pg-nav-mobile { display: none !important; }
}

/* ---------- Nav: desktop always-visible glass panel, top-right ---------- */
.pg-nav-desktop {
  display: none;
}

@media (min-width: 760px) {
  .pg-nav-desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: fixed;
    top: 0;
    margin-top: 0;
    right: calc(max(20px, (100vw - 1200px) / 2 + 20px));
    z-index: 41;
    padding: 14px 16px;
    border-radius: 0 0 14px 14px;
    background: rgba(123, 148, 175, 0.37);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-glass);
    /* See .pg-nav-trigger: forces this fixed blurred panel onto its own
       compositor layer up front so Chrome isn't recomputing the blur
       backdrop from scratch on the first frames of every scroll. */
    will-change: backdrop-filter;
  }

  .pg-nav-desktop a {
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: calc(min(0.8rem, 2dvh) + 1pt);
    letter-spacing: 0.01em;
    line-height: calc(1.2em + 1pt);
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .pg-nav-desktop a:hover { transform: translateX(5px); }
}

/* ---------- Footer (two-zone: Navigate + Recent Thinking) ---------- */
/* Extra breathing room above the footer's first content (statement/CTA/
   footer-zones), on top of whatever top padding the page's own footer
   section rule already applies. */
#the-footer .pg-col { padding-top: 15px; }
.footer-statement { margin: min(8px, 1dvh) 0 0 0; font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: calc(min(2.1rem, 8cqw, 3.6dvh) + 4pt); line-height: calc(1.14em + 0.2pt); letter-spacing: calc(0.029em + 0.4pt); text-transform: uppercase; color: var(--colour-bg); }
.footer-zones { display: flex; flex-direction: column; gap: 25px; margin-top: min(24px, 3dvh); width: 100%; }
.footer-zone { display: flex; flex-direction: column; gap: min(10px, 1.2dvh); }
.footer-zone-label { font-family: var(--font-ui); font-weight: 500; font-size: calc(min(0.95rem, 4.2cqw, 2.4dvh) - 1.5pt); letter-spacing: 0.14em; color: rgba(246, 243, 238, 0.6); text-transform: uppercase; }
.footer-zone a { align-self: flex-start; font-family: var(--font-body); font-weight: 300; font-size: min(0.95rem, 4.2cqw, 2.4dvh); color: var(--colour-bg); transition: transform 0.2s ease, color 0.2s ease; }
.footer-zone a:hover { color: var(--colour-ink); transform: translateX(5px); }
.footer-thinking { display: flex; flex-direction: column; gap: min(16px, 1.9dvh); min-width: 0; }
.footer-thinking .footer-zone-label { margin-top: 10px; }
.footer-thinking a { align-self: flex-start; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.95rem, 4.2cqw, 2.4dvh) - 1pt); line-height: 1.25; color: var(--colour-bg); transition: transform 0.2s ease, color 0.2s ease; }
.footer-thinking a:hover { color: var(--colour-ink); transform: translateX(5px); }
.footer-divider { display: none; }
.footer-bottom { margin-top: 25px; padding-top: min(20px, 2.4dvh); display: flex; flex-direction: column; gap: 25px; border-top: 1px solid rgba(246, 243, 238, 0.25); }
.footer-social { display: flex; flex-wrap: wrap; gap: min(16px, 3.6cqw) min(14px, 3.1cqw); }
/* letter-spacing trimmed from 0.16em to 0.1em — at 0.16em the widest labels
   (DEVIANTART, INSTAGRAM) pushed the 8-link row just ~2px past the mobile
   content column's width, forcing an unwanted 3rd wrapped line instead of
   the intended 4+4 two-line layout. */
.footer-social a { font-family: var(--font-ui); font-weight: 400; font-size: calc(min(0.95rem, 4.2cqw, 2.4dvh) - 2pt); letter-spacing: 0.1em; color: var(--colour-bg); text-transform: uppercase; transition: transform 0.2s ease, color 0.2s ease; }
.footer-social a:hover { color: var(--colour-ink); transform: translateX(5px); }
.footer-copyright { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.68rem, 2.9cqw, 1.6dvh) + 1.5pt); line-height: 1.35; color: rgba(246, 243, 238, 0.7); }

/* Mobile only: tighten the gap between the footer statement/quote and the
   "Navigate" label by 20px — calc() on top of the existing min() keeps this
   a flat 20px reduction off whichever arm (px or dvh) is currently smaller,
   rather than guessing a fixed replacement value. !important is required
   because the spacer's height is set via an inline style in index.php. */
@media (max-width: 759px) {
  .footer-spacer { min-height: calc(min(100px, 8dvh) - 20px) !important; }
}

/* ---------- Case-page overlay shell (mobile) ---------- */
.case-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 20px;
  box-sizing: border-box;
}

.case-overlay.is-open { display: flex; justify-content: center; }

.case-overlay__close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 61;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

/* Prev/next/close icon buttons: shared by the case lightbox (mobile + desktop)
   and the testimonial overlay — hover slides the stroke to the dusty-blue accent. */
.case-mobile-actions button svg,
.case-desktop-actions button svg,
.t-card-head-actions button svg,
.acq-actions button svg {
  transition: stroke 0.2s ease;
}

.case-mobile-actions button:hover svg,
.case-desktop-actions button:hover svg,
.t-card-head-actions button:hover svg,
.acq-actions button:hover svg {
  stroke: var(--colour-accent);
}

/* ---------- Case-page desktop stacked-stage card ---------- */
.case-desktop {
  display: none;
}

@media (min-width: 760px) {
  .case-desktop {
    width: min(1160px, 95vw);
    height: auto;
    max-height: 94dvh;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18);
    padding: 34px 52px;
    box-sizing: border-box;
    flex-direction: column;
    overflow-y: auto;
  }
}

/* ---------- Cookie consent card ----------
   A small, self-contained card floating bottom-centre (not a full-width
   bar) — title, short copy + a "manage" link, then Accept/Reject stacked
   full-width below. Frosted glass-morphism surface (translucent white +
   backdrop blur, same treatment as the case-page overlay) so the single
   shared .pg-btn glass style (calibrated for light backgrounds) still
   reads correctly here — no scoped colour override needed. Centred on
   mobile; parked at the far right of the viewport on wide screens (see
   the min-width:760px block) so it doesn't block centred page content. */
.pg-consent-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: min(360px, var(--mobile-content-width));
  z-index: 70;
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 44px rgba(58, 63, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-align: left;
}

.pg-consent-bar.is-visible { display: flex; }

.pg-consent-bar__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--colour-ink);
}

.pg-consent-bar__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--colour-ink);
}

.pg-consent-bar__link {
  color: var(--colour-ink);
  text-decoration: underline;
}

.pg-consent-bar__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-consent-bar__accept,
.pg-consent-bar__decline {
  width: 100%;
  padding: 13px 12px;
  font-size: 0.8rem;
}

@media (min-width: 760px) {
  .pg-consent-bar {
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: none;
    max-width: 380px;
    padding: 28px 26px 24px;
    gap: 16px;
  }

  .pg-consent-bar__title { font-size: 1.15rem; }
  .pg-consent-bar__text { font-size: 0.85rem; }

  .pg-consent-bar__accept,
  .pg-consent-bar__decline {
    padding: 14px 16px;
    font-size: 0.85rem;
  }
}

/* ---------- Interaction prompt (global, used across all engagement prompts) ---------- */
.pg-prompt {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--size-prompt);
  letter-spacing: 0.02em;
  color: var(--colour-accent);
  text-transform: none;
}

/* ---------- SVG asset protection (global, all pages) ----------
   Deters casual right-click "Save Image As" / drag-out-to-desktop on the
   real logo/mark SVG files (uploaded marks, testimonial client logos,
   acquire listings, success-story logos, monograms). Scoped to img[src$=".svg"]
   only, so case-study/portrait photography (jpg/png) is untouched.
   Pure CSS, no extra requests — zero load-time cost. Does not touch alt
   text, filenames, or markup crawlers read, so SEO is unaffected. Every
   clickable tile/card that contains one of these images (mk-tile, acq-tile,
   ss-card, pf-card) handles its own click/tap via the parent element, not
   the <img> itself, so removing pointer-events from the <img> does not
   break any existing interaction. */
img[src$=".svg"] {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}