/* =============================================================================
   Energia Residence — Theme components & layout
   Depends on tokens.css. Intentionally minimal: Blocksy + Elementor own most
   layout; this adds brand primitives (buttons, focus, sections, utilities) and
   a11y baselines that apply site-wide regardless of builder.
   ============================================================================= */

/* ---- Brand fonts (drop-in). Uncomment after adding woff2 to assets/fonts/ ----
@font-face {
  font-family: "Energia Text";
  src: url("../fonts/energia-text.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Energia Display";
  src: url("../fonts/energia-display.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
-------------------------------------------------------------------------------- */

/* ---- Icon system (assets/icons/*.svg, inlined via energia_icon()) ---- */
.en-icon {
  width: 1.25em; height: 1.25em; flex: 0 0 auto;
  vertical-align: -0.2em;
  color: inherit;
}
.en-icon--sm { width: 1em; height: 1em; }
.en-icon--lg { width: 1.75em; height: 1.75em; }

/* ---- Base ---- */
body {
  font-family: var(--en-font-body);
  font-size: var(--en-fs-400);
  line-height: var(--en-lh-body);
  color: var(--en-anthracite);
  background: var(--en-warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .en-head {
  font-family: var(--en-font-head);
  line-height: var(--en-lh-tight);
  letter-spacing: var(--en-track-tight);
  color: var(--en-anthracite);
  font-weight: var(--en-fw-semi);
}
a { color: var(--en-accent-strong); }

/* ---- Accessibility baselines (apply everywhere) ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--en-focus-ring);
  outline-offset: var(--en-focus-offset);
  border-radius: var(--en-radius-sm);
}
.en-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--en-z-popup);
  background: var(--en-anthracite); color: #fff; padding: var(--en-sp-2) var(--en-sp-4);
  border-radius: 0 0 var(--en-radius-sm) 0;
}
.en-skip-link:focus { left: 0; }
.en-visually-hidden {
  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: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Layout primitives ---- */
.en-container { width: 100%; max-width: var(--en-container); margin-inline: auto; padding-inline: var(--en-gutter); }
.en-container--narrow { max-width: var(--en-container-narrow); }
.en-container--wide { max-width: var(--en-container-wide); }
.en-section { padding-block: var(--en-section-y); }
.en-section--band { background: var(--en-cream); }
.en-section--dark { background: var(--en-anthracite); color: var(--en-warm-white); }
.en-section--dark :where(h1,h2,h3,h4) { color: #fff; }
.en-stack > * + * { margin-top: var(--en-sp-4); }
.en-grid { display: grid; gap: var(--en-sp-5); }

/* ---- Buttons ---- */
.en-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 var(--en-sp-5);
  font-family: var(--en-font-body); font-weight: var(--en-fw-semi); font-size: var(--en-fs-400);
  line-height: 1.1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--en-radius-pill);
  transition: background-color var(--en-dur-1) var(--en-ease),
              transform var(--en-dur-1) var(--en-ease),
              border-color var(--en-dur-1) var(--en-ease);
}
.en-btn:active { transform: translateY(1px); }
.en-btn--primary { background: var(--en-accent-strong); color: #fff; }
.en-btn--primary:hover { background: var(--en-accent-hover); color: #fff; }
.en-btn--ghost { background: transparent; color: var(--en-anthracite); border-color: var(--en-anthracite); }
.en-btn--ghost:hover { background: var(--en-anthracite); color: #fff; }
.en-btn--light { background: #fff; color: var(--en-anthracite); border-color: var(--en-grey-line); }
.en-btn--light:hover { border-color: var(--en-anthracite); }
.en-btn--whatsapp { background: #25d366; color: #063; }
.en-btn--whatsapp:hover { background: #1fbe5a; }
.en-btn--block { width: 100%; }

/* ---- Status badges ---- */
.en-badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--en-fs-300); font-weight: var(--en-fw-semi); line-height: 1;
  padding: .4em .7em; border-radius: var(--en-radius-pill); color: #fff;
}
.en-badge--available { background: var(--en-status-available); }
.en-badge--reserved  { background: var(--en-status-reserved); }
.en-badge--sold      { background: var(--en-status-sold); }
.en-badge--todo      { background: var(--en-grey-mut); }

/* ---- Card ---- */
.en-card {
  background: var(--en-white); border: var(--en-border); border-radius: var(--en-radius);
  box-shadow: var(--en-shadow-sm); overflow: hidden;
  transition: box-shadow var(--en-dur-2) var(--en-ease), transform var(--en-dur-2) var(--en-ease);
}
.en-card:hover { box-shadow: var(--en-shadow); }

/* ---- TODO/placeholder marker (dev-visible, never a fake value) ---- */
.en-todo {
  display: inline-block; font-size: var(--en-fs-300); color: var(--en-grey-mut);
  border: 1px dashed var(--en-grey-line); border-radius: var(--en-radius-sm);
  padding: .1em .5em;
}

/* ===================== Global header (transparent → solid sticky) =====================
   Logo (country-logo) + menu are white, so the header reads on both the deep-green
   solid bar and the transparent-over-hero state. */
#header.ct-header {
  transition: background-color var(--en-dur-2) var(--en-ease), box-shadow var(--en-dur-2) var(--en-ease);
}
/* Header background lives on #header; inner Blocksy rows must be transparent
   (their default white was covering the hero + hiding the white menu). */
#header.ct-header [data-row],
#header.ct-header > [data-device] { background-color: transparent !important; }
/* Logo image already contains the wordmark — hide the duplicate text title. */
#header.ct-header .ct-site-title,
#header.ct-header .site-description,
#header.ct-header .site-branding a:not(.site-logo-container) { display: none !important; }
#header.ct-header .ct-menu-link { color: #fff !important; }

/* Mobile offcanvas panel — brand green with white menu, copper active. */
#offcanvas.ct-panel,
.ct-panel.ct-header,
.ct-panel[class*="ct-header"] { background-color: var(--en-green-900) !important; }
.ct-panel .ct-panel-inner, .ct-panel .ct-panel-content-inner { background-color: transparent !important; }
.ct-panel .ct-menu-link { color: #fff !important; font-family: var(--en-font-body); }
.ct-panel .current-menu-item > .ct-menu-link,
.ct-panel .ct-menu-link:hover { color: var(--en-accent) !important; }
.ct-panel .ct-toggle-close svg { color: #fff; }
#header.ct-header .ct-menu-link:hover,
#header.ct-header .current-menu-item > .ct-menu-link,
#header.ct-header .current-menu-ancestor > .ct-menu-link { color: var(--en-accent) !important; }

/* Pages WITHOUT a hero: solid green sticky header from the top. */
body:not(.en-hero-header) #header.ct-header {
  position: sticky; top: 0; z-index: var(--en-z-sticky);
  background-color: var(--en-green-900);
}

/* Pages WITH a hero: transparent header laid over the hero, solid on scroll. */
body.en-hero-header #header.ct-header {
  position: absolute; inset-inline: 0; top: 0; z-index: var(--en-z-sticky);
  background-color: transparent;
  /* subtle top scrim guarantees white-on-image contrast before scroll */
  background-image: linear-gradient(to bottom, rgba(20,48,42,.55), rgba(20,48,42,0));
}
body.en-hero-header.en-scrolled #header.ct-header {
  position: fixed;
  background-color: var(--en-green-900);
  background-image: none;
  box-shadow: 0 2px 22px rgba(0,0,0,.20);
}

/* Logged-in admin bar: WP's own #wpadminbar is fixed at the true viewport
   top (32px tall) only from 783px up — below that it scrolls with the page
   instead. This offset is needed only for our header's `sticky`/`fixed`
   states, which (like the admin bar) position relative to the real
   viewport regardless of ancestor offsets. The pre-scroll hero header uses
   `position: absolute` instead, whose containing block already shifts down
   with the rest of the document via WP's own `html { margin-top: 32px }` —
   adding the offset there too would double it (confirmed via a logged-in
   browser test: 64px gap instead of 32px). */
@media (min-width: 783px) {
  body.admin-bar:not(.en-hero-header) #header.ct-header,
  body.admin-bar.en-hero-header.en-scrolled #header.ct-header {
    top: 32px;
  }
}

/* Search / toggles inherit white on the header */
#header.ct-header .ct-toggle svg,
#header.ct-header .ct-header-trigger svg,
#header.ct-header [class*="search"] svg { color: #fff; }

/* ===================== WPForms — brand styling ===================== */
.wpforms-form .wpforms-field-label { font-weight: var(--en-fw-semi); color: var(--en-anthracite); font-size: var(--en-fs-300); }
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form select,
.wpforms-form textarea {
  min-height: 48px; border: 1px solid var(--en-grey-line) !important; border-radius: var(--en-radius-sm) !important;
  background: #fff; font: inherit; padding: .55em .8em; box-shadow: none !important;
}
.wpforms-form textarea { min-height: 120px; }
.wpforms-form input:focus, .wpforms-form select:focus, .wpforms-form textarea:focus {
  border-color: var(--en-accent) !important; outline: 2px solid var(--en-accent-tint);
}
/* Submit button — copper pill */
.wpforms-form button[type="submit"],
.wpforms-submit-container button {
  background: var(--en-accent-strong) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--en-radius-pill) !important; min-height: 50px; padding: 0 2rem !important;
  font-weight: var(--en-fw-semi) !important; text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; transition: background-color var(--en-dur-1) var(--en-ease);
}
.wpforms-form button[type="submit"]:hover { background: var(--en-accent-hover) !important; }
/* Image choices (apartment type) — compact, tidy */
.wpforms-image-choices-modern .wpforms-image-choices-image { max-width: 96px; margin-inline: auto; }
.wpforms-image-choices-item { border-radius: var(--en-radius); }
.wpforms-image-choices-item.wpforms-selected { outline: 2px solid var(--en-accent); border-radius: var(--en-radius); }
.wpforms-form .wpforms-field { padding: 8px 0 !important; }
/* GDPR + description text */
.wpforms-form .wpforms-field-description,
.wpforms-form .wpforms-gdpr-checkbox label { font-size: var(--en-fs-300); color: var(--en-grey-mut); }

/* ===================== Branded footer ===================== */
.ct-footer { display: none !important; } /* replace Blocksy footer with ours */
.en-footer { background: var(--en-green-900); color: var(--en-on-green); margin-top: 0; }
.en-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--en-sp-6);
  padding-block: var(--en-sp-8) var(--en-sp-6);
}
.en-footer__brand img { height: auto; margin-bottom: var(--en-sp-4); }
.en-footer__brand p { color: var(--en-on-green-mut); font-size: var(--en-fs-300); line-height: 1.6; max-width: 42ch; }
.en-footer__legal-entity { margin-top: var(--en-sp-3); font-weight: var(--en-fw-semi); color: var(--en-on-green) !important; }
.en-footer__col h4 { color: #fff; font-family: var(--en-font-body); font-size: var(--en-fs-400); margin: 0 0 var(--en-sp-4); }
.en-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--en-sp-3); }
.en-footer__col a, .en-footer__col li { color: var(--en-on-green-mut); text-decoration: none; font-size: var(--en-fs-300); }
.en-footer__col a:hover { color: var(--en-accent); }
.en-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.en-footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--en-sp-3);
  padding-block: var(--en-sp-4); color: var(--en-on-green-mut); font-size: var(--en-fs-300); }
.en-footer__legal a { color: var(--en-on-green-mut); text-decoration: none; margin-left: var(--en-sp-4); }
.en-footer__legal a:hover { color: var(--en-accent); }
@media (max-width: 900px) { .en-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .en-footer__grid { grid-template-columns: 1fr; gap: var(--en-sp-5); }
  .en-footer__bottom-inner { flex-direction: column; }
  .en-footer__legal a { margin-left: 0; margin-right: var(--en-sp-4); }
}

/* ---- Mobile sticky action bar (Sună · WhatsApp · Vezi apartamente) ---- */
.en-actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--en-z-sticky);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--en-white); border-top: var(--en-border);
  box-shadow: 0 -4px 16px rgba(30,33,36,.08);
  padding: max(env(safe-area-inset-bottom), 6px) 6px 6px;
}
.en-actionbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; min-height: 48px; text-decoration: none;
  font-size: .72rem; font-weight: var(--en-fw-semi); color: var(--en-anthracite);
}
.en-actionbar a + a { border-inline-start: var(--en-border); }
.en-actionbar svg { width: 22px; height: 22px; }
body { padding-bottom: 0; }
@media (max-width: 767px) { body.en-has-actionbar { padding-bottom: 68px; } }
@media (min-width: 768px) { .en-actionbar { display: none; } }