/*
Theme Name:  Hello Elementor Child — PROTEC Q18
Theme URI:   https://protec-e.digimedion.com
Description: Child theme for the PROTEC Q18 Elementor build. Carries only what Elementor free cannot express: sticky header + scrolled glass state, smooth scrolling with anchor clearance, localized 404. Everything visual lives in Elementor (kit + pages).
Template:    hello-elementor
Version:     1.0.2
Author:      digimedion
Text Domain: hello-elementor-child
*/

/* ── Smooth scrolling + anchor clearance (original: scroll-padding 110px) ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Sticky header ─────────────────────────────────────────────────────────
   The UAE header template's root container carries the class `pe-header`
   (set in builder/pages/chrome.mjs). UAE renders it inside its own wrapper;
   making the wrapper sticky keeps the whole template pinned. The original
   site uses `position: fixed` so the transparent header overlays the hero —
   we reproduce that overlay on the homepage by pulling `.pe-hero` up under
   the sticky header (negative margin), so inner pages keep their normal flow. */
.hfe-site-header,
header.hfe-header,
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Glass state after 100px scroll (toggled by assets/header.js, mirrors the
   original .scrolled header: rgba(24,24,27,.92) + blur + hairline border). */
.pe-header {
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
body.pe-scrolled .pe-header {
  background-color: rgba(24, 24, 27, 0.92) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Transparent hero overlay (homepage) ────────────────────────────────────
   Original: header is `position: fixed` over a full-bleed hero. With our
   sticky header (kept for inner-page flow), the hero would sit BELOW the
   header as a dark band. Pull the full-bleed hero up under the header so the
   sky shows through the transparent nav — exactly like the original. The
   header (z-index:1000) still paints above it. Only the homepage hero opts in
   via its `.pe-hero` class, so every other page is untouched. */
.pe-hero {
  margin-top: -86px;
}
@media (max-width: 767px) {
  .pe-hero { margin-top: -72px; }
}

/* ── Instagram brand gradient (header + footer social circles) ──────────────
   Elementor's "default" Instagram colour is a flat purple-ish swatch applied
   via a generated `.elementor-widget-social-icons … .elementor-social-icon-instagram`
   rule whose specificity beats a bare class selector — so the footer circle
   rendered flat grey while the header (which adds a `.pe-header` ancestor) won.
   Match Elementor's specificity (widget wrapper + element class) AND keep the
   plain-class fallback, both !important, so the official IG gradient wins
   everywhere the brand circle appears (header, footer, anywhere else). */
.elementor-widget-social-icons .elementor-social-icon-instagram,
.elementor-social-icons-wrapper .elementor-social-icon-instagram,
.elementor-social-icon-instagram,
a.elementor-social-icon-instagram {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%) !important;
}
/* Keep brand social circles (header + footer) on one row. Elementor lays them
   out in a CSS grid; pin a single auto-track row so a tight container can't
   wrap the last icon (e.g. YouTube) onto a second line. */
.pe-footer .elementor-widget-social-icons .elementor-grid {
  grid-template-columns: repeat(3, auto) !important;
  grid-auto-flow: column;
  justify-content: start;
}

/* ── Typography guard rails from the design system (V16/V27 decisions):
   no hyphenation anywhere, balanced headings. ── */
body { hyphens: manual; overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, h6 { hyphens: none; text-wrap: balance; }

/* ── Footer language switcher (moved here from the header to match REF) ──────
   Connect-Polylang renders the dropdown toggle as
   nav.cpel-switcher__nav > div.cpel-switcher__toggle > a. Give it the same
   hairline pill treatment the header pill used, scoped to the footer. */
.pe-footer .pe-langsw .cpel-switcher__toggle > a {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.65);
}
.pe-footer .pe-langsw .cpel-switcher__toggle > a:hover { color: #fff; }
.pe-footer .pe-langsw .cpel-switcher__list a { border: 0; }

/* ── WhatsApp floating button (functions.php wp_footer hook) ─────────────────
   Site-wide green FAB pinned bottom-right on every page/language, matching the
   reference (https://protec-wp.digimedion.com): a 56px #25D366 circle with the
   white WhatsApp glyph, soft green shadow, hover scale. z-index sits above
   Elementor content but below the sticky header (z-index 1000). The bottom
   offset respects the iOS safe-area inset so it never hides behind the home
   indicator on mobile. */
.pe-whatsapp {
  position: fixed;
  right: 1.5rem;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: #25D366;
  color: #fff;
  box-shadow: 0 10px 30px -5px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s ease;
}
.pe-whatsapp:hover,
.pe-whatsapp:focus-visible {
  transform: scale(1.1);
  color: #fff;
}
.pe-whatsapp svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .pe-whatsapp { transition: none; }
}

/* ── News archive meta line: localized date + category pills ─────────────────
   The free UAE "Basic Posts" widget renders `.hfe-post-meta` as a single
   non-localized date span and can't show taxonomy terms. assets/news-pills.js
   rebuilds that meta block into the reference layout: an UPPERCASE localized
   month-year date followed by rounded outline tag chips. Styling mirrors the
   reference site (protec-wp.digimedion.com): the date is uppercase with wide
   tracking, the tags are pill chips (rounded outline, normal-case), separated
   only by the flex gap (the REF has no literal "·").

   UNIQUE class names — `.pe-cardmeta` / `.pe-newsdate` / `.pe-catpill` — chosen
   to avoid the pre-existing `.pe-news-pill` newsletter stat badge (built by
   builder/pages/news.mjs). Rules are written DIRECTLY against these classes
   (no `.hfe-post-meta` / `.hfe-post-card` ancestry) so they apply regardless of
   the wrapper element the JS rebuilds. */
.pe-cardmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.45);
}
.pe-cardmeta .pe-newsdate {
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.pe-catpill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ── 404 page (templates/404.php) ── */
.pe-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  background: #18181b;
  color: #fff;
  padding: 6rem 1.5rem;
}
.pe-404 .pe-404-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #d63a6c;
}
.pe-404 h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0; }
.pe-404 p { color: rgba(255, 255, 255, 0.65); max-width: 36rem; margin: 0; }
.pe-404 .pe-404-btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 9999px;
  background: #ece9e1;
  color: #18181b;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.pe-404 .pe-404-btn:hover { background: #f5f2ea; transform: translateY(-2px); }