/*
Theme Name:   Hedo Child
Template:     astra
Author:       Thesla Cloud Services
Version:      1.2.1
Text Domain:  hedo-child
*/

/* ---- Brand tokens. Every template file references these, never a raw hex. ---- */
:root {
  --hd-red:       #E03127;
  --hd-red-dark:  #B8241C;  /* hover on red */
  --hd-steel:     #2E5E8C;
  --hd-ink:       #1C2A35;
  --hd-ink-2:     #243544;  /* hover on ink */
  --hd-slate:     #5A6B78;
  --hd-line:      #DCE3E8;
  --hd-paper:     #F4F7F9;
  --hd-white:     #FFFFFF;
  --hd-mist:      #D7DEE4;  /* body text on ink and red panels */
  --hd-mist-2:    #EEF2F5;  /* lead text on photographs */

  --hd-wa:        #0A7D5A;  /* deep WhatsApp green: white text 5.13:1 (AA) */
  --hd-wa-dark:   #08694B;  /* hover on --hd-wa: white text 6.7:1 */
  --hd-wa-glow:   #25D366;  /* WhatsApp brand green, for the glyph on dark backgrounds only. Never behind text */
  --hd-spheros-navy: #101D40;  /* the Spheros logo's own background, for its tile only */

  --hd-scrim:     rgba(18, 26, 34, .62);  /* photo overlay under white text */
  --hd-scrim-2:   rgba(18, 26, 34, .88);
  --hd-ghost:     rgba(255, 255, 255, .7);
  --hd-ghost-2:   rgba(255, 255, 255, .12);

  --hd-radius:    4px;
  --hd-gutter:    16px;
  --hd-max:       1240px;
  --hd-callbar-h: 56px;

  --hd-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --hd-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base ---- */
body {
  font-family: var(--hd-body);
  color: var(--hd-ink);
  background: var(--hd-white);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--hd-head);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--hd-ink);
}
h1 { font-size: clamp(2.4rem, 1.2rem + 4.5vw, 4.5rem); line-height: 1.02; font-weight: 700; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.15; }

/* :where() keeps these defaults at element-level specificity, so any
   template rule (e.g. a centred band's margin-inline:auto) wins. */
:where(main[class^="hd-"]) p { max-width: 68ch; }

a { color: var(--hd-steel); }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 3px solid var(--hd-steel);
  outline-offset: 3px;
}
.hd-on-dark :focus-visible,
.hd-footer__bar :focus-visible { outline-color: var(--hd-white); }

.hd-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Full-bleed layout: sections run edge to edge, content sits in .hd-wrap ---- */
.ast-page-builder-template .site-content > .ast-container {
  max-width: 100%;
  padding: 0;
  display: block;
}
main[class^="hd-"] { display: block; width: 100%; }
.hd-wrap {
  width: min(100% - 2 * var(--hd-gutter), var(--hd-max));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  :root { --hd-gutter: 32px; }
}

/* ---- Section shell ---- */
.hd-section { padding: 56px 0; }
.hd-section--paper { background: var(--hd-paper); }
@media (min-width: 768px) { .hd-section { padding: 80px 0; } }

/* Every section heading keeps its distance from the content below. */
:where(main[class^="hd-"]) h2 { margin: 0 0 1.25rem; }

/* ---- Closing CTA band (template-parts/cta-band.php): one centre line ---- */
.hd-cta-band {
  background: var(--hd-red);
  color: var(--hd-white);
  text-align: center;
  padding: 56px 0;
}
.hd-cta-band__inner {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hd-cta-band .hd-cta-band__title {
  color: var(--hd-white);
  max-width: 22ch;
  margin: 0 auto 16px;
  text-wrap: balance;
}
.hd-cta-band__sentence { display: inline-block; }
.hd-cta-band .hd-cta-band__text {
  color: var(--hd-white);
  max-width: 60ch;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.hd-cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hd-cta-band__link {
  color: var(--hd-white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hd-cta-band__link:hover,
.hd-cta-band__link:focus { color: var(--hd-mist-2); }
@media (min-width: 768px) {
  .hd-cta-band { padding: 80px 0; }
}

/* ---- Icons ---- */
.hd-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: middle; }

/* ---- Buttons ---- */
.hd-btn,
.hd-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--hd-radius);
  font-family: var(--hd-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.hd-btn--primary,
.hd-btn--call { background: var(--hd-red); color: var(--hd-white); }
.hd-btn--primary:hover,
.hd-btn--call:hover { background: var(--hd-red-dark); color: var(--hd-white); }
.hd-btn--ghost {
  background: transparent;
  color: var(--hd-white);
  border-color: var(--hd-ghost);
}
.hd-btn--ghost:hover { background: var(--hd-ghost-2); color: var(--hd-white); }
.hd-btn--outline {
  background: var(--hd-white);
  color: var(--hd-ink);
  border-color: var(--hd-ink);
}
.hd-btn--outline:hover { background: var(--hd-ink); color: var(--hd-white); }

/* WhatsApp: glyph + the word, on the deep green. */
.hd-wa-btn { background: var(--hd-wa); color: var(--hd-white); }
.hd-wa-btn:hover,
.hd-wa-btn:focus { background: var(--hd-wa-dark); color: var(--hd-white); }
.hd-wa-btn--on-dark { background: var(--hd-white); color: var(--hd-wa); }
.hd-wa-btn--on-dark:hover,
.hd-wa-btn--on-dark:focus { background: var(--hd-paper); color: var(--hd-wa-dark); }
.hd-wa-btn--sm { min-height: 44px; padding: 9px 16px; font-size: .95rem; }
.hd-wa-btn--lg,
.hd-btn--lg { min-height: 60px; padding: 16px 28px; font-size: 1.1rem; }

/* ---- Icon panel: a vehicle slot with no photograph yet ---- */
.hd-slot-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: var(--hd-ink);
  color: var(--hd-mist);
}
.hd-slot-panel__icon { width: 30%; height: auto; max-width: 160px; stroke-width: 1.25; }

/* A small slot photo, shown whole and never enlarged (hd_slot_image contain_below). */
.hd-slot-contain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--hd-paper);
}
.hd-slot-contain .hd-slot-contain__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--hd-natural, 100%));
  max-height: 100%;
  object-fit: contain;
}

/* ---- Brand tiles (inc/images.php hd_brand_tile): Home strip and About ---- */
.hd-brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hd-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 14px 16px;
  box-sizing: border-box;
  background: var(--hd-white);
  border: 1px solid var(--hd-line);
}
.hd-brand-tile--navy {
  background: var(--hd-spheros-navy);
  border-color: var(--hd-spheros-navy);
}
.hd-brand-tile .hd-brand-tile__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--hd-natural, 100%));
  max-height: 100%;
}
.hd-brand-tile__name {
  font: 700 1.6rem/1 var(--hd-head);
  color: var(--hd-ink);
}
.hd-brand-tile--navy .hd-brand-tile__name { color: var(--hd-white); }
@media (min-width: 768px) {
  .hd-brand-tile { height: 112px; padding: 16px 20px; }
}

/* ---- Header actions: phone + WhatsApp (desktop), round WhatsApp (mobile) ---- */
.hd-hactions { display: flex; align-items: center; gap: 18px; }
.hd-hactions__phone {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--hd-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hd-hactions__phone:hover { color: var(--hd-steel); }
.hd-hactions__round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hd-wa); color: var(--hd-white);
}
.hd-hactions__round:hover,
.hd-hactions__round:focus { background: var(--hd-wa-dark); color: var(--hd-white); }
.hd-hactions__round .hd-icon { width: 24px; height: 24px; }
.hd-hactions--mobile { margin-right: 12px; }
/* The shortcode prints both; only one shows at a time. */
.hd-hactions--both .hd-hactions__round { display: none; }
@media (max-width: 920px) {
  .hd-hactions--both .hd-hactions__phone,
  .hd-hactions--both .hd-wa-btn { display: none; }
  .hd-hactions--both .hd-hactions__round { display: inline-flex; }
}

/* Mobile header: the Customizer logo width (247px) leaves no room for the
   menu toggle and the WhatsApp button at 360px, so cap it here. 77px tall
   (= 170px wide for this logo) keeps the "AIR CONDITIONING" line legible. */
#ast-mobile-header .site-header-section-left { min-width: 0; flex: 1 1 auto; }
#ast-mobile-header .site-header-section-right { flex: 0 0 auto; }
#ast-mobile-header .custom-logo-link img,
#ast-mobile-header .custom-logo {
  width: auto !important;
  max-width: min(170px, 100%) !important;
  height: auto !important;
  max-height: 77px;
}

/* ---- Active nav item: steel, plus an underline so it is not colour alone ---- */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current_page_item > .menu-link {
  color: var(--hd-steel);
  text-decoration: underline;
  text-decoration-color: var(--hd-steel);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- Mobile: room for the sticky call bar, and keep scroll-to-top above it ---- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--hd-callbar-h) + env(safe-area-inset-bottom)); }
  #ast-scroll-top { bottom: calc(var(--hd-callbar-h) + 16px + env(safe-area-inset-bottom)) !important; }
}

/* ---- Scroll-to-top: Astra's button is the site's only one. It steps aside
   while a link or button is underneath it (assets/js/hedo.js, part 3). ---- */
#ast-scroll-top { transition: opacity .15s ease, visibility .15s; }
#ast-scroll-top.hd-totop--hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---- While the gallery lightbox is open: nothing sits above it, and the
   page behind stays still (assets/js/hedo.js, part 1). ---- */
html.hd-lightbox-open { overflow: hidden; }
.hd-lightbox-open .hd-callbar,
.hd-lightbox-open #ast-scroll-top { display: none !important; }