/* EU Force: only what Elementor atomic styles cannot express (decorative hero shape, icons, menu/FAQ behaviour).
   Spacing, type and colours live in the global classes/variables of the atomic templates (tools/wp-builder/site/tokens.mjs).
   Atomic global classes are emitted as `.elementor .<label>`, so overrides here use the same prefix. Tokens: tokens.css. */

body { font-family: var(--euf-font); color: var(--euf-color-text); margin: 0; }
.euf-body a, .euf-footer a { color: inherit; }
.euf-body a:hover, .euf-footer a:hover { text-decoration: underline; }

/* ---- Hero: blue shape + SVG overlay, three floating photos ---- */
.elementor .euf-hero { position: relative; overflow: hidden; background: var(--euf-color-main); }
.elementor .euf-hero::after { content: ""; position: absolute; inset: 0; margin-bottom: -10px; z-index: 1; background: url("../img/features/cover-element.svg") no-repeat right bottom / cover; pointer-events: none; user-select: none; }
.elementor .euf-hero > * { position: relative; z-index: 2; }
.elementor .euf-hero-images { pointer-events: none; }
@media (max-width: 767px) {
  .elementor .euf-hero::after { background-size: 100vw auto; }
  .elementor .euf-hero-images { pointer-events: auto; }
}

/* ---- Icons ---- */
.elementor .euf-check-icon { background: url("../img/icons/check.svg") no-repeat center / contain; }
.elementor .euf-faq-chevron::before { content: ""; display: block; width: .55rem; height: .55rem; margin: .2rem auto 0; border-right: 2px solid var(--euf-color-main); border-bottom: 2px solid var(--euf-color-main); transform: rotate(45deg); transition: transform .2s; }
.elementor .euf-faq-item.is-open .euf-faq-chevron::before { transform: rotate(-135deg); margin-top: .45rem; }

/* ---- FAQ (toggled by site.js) ---- */
.elementor .euf-faq-a { display: none !important; }
.elementor .euf-faq-item.is-open .euf-faq-a { display: block !important; }

/* ---- Cards ---- */
.elementor .euf-card-link { transition: border-color .18s ease, transform .18s ease; }
.elementor .euf-card-link:hover { border-color: #2b2b2b; transform: scale(1.02); }
.elementor .euf-blog-card:hover h3 { text-decoration: underline; }

/* ---- Header / menu ---- */
.elementor .euf-header { position: sticky; top: 0; }
.elementor .euf-menu-link:hover { color: var(--euf-color-white); }
.elementor .euf-has-sub > .euf-sub { display: none !important; position: absolute; left: 0; top: 100%; min-width: 15rem; background: var(--euf-color-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); border-radius: 8px; padding: .5rem 0; z-index: 200; flex-direction: column; }
.elementor .euf-has-sub:hover > .euf-sub, .elementor .euf-has-sub.euf-sub-open > .euf-sub { display: flex !important; }
.elementor .euf-sub .euf-menu-link { padding: .6rem 1.1rem; }
.elementor .euf-sub .euf-has-sub > .euf-sub { left: 100%; top: 0; }
.elementor .euf-sub .euf-menu-link:hover { color: var(--euf-color-main); }
@media (max-width: 1024px) {
  .elementor .euf-menu { display: none !important; }
  .euf-menu-open .elementor .euf-menu { display: flex !important; flex-direction: column; align-items: stretch; position: fixed; inset: 70px 0 0 0; background: var(--euf-color-main); z-index: 99; padding: 1rem 1.5rem 2rem; overflow-y: auto; }
  .elementor .euf-has-sub > .euf-sub { position: static; display: flex !important; box-shadow: none; background: transparent; padding: 0 0 0 1rem; }
}

/* ---- Blog posts (real WP posts rendered by the Hello template) ---- */
.single-post .site-main { max-width: 820px; margin: 0 auto; padding: 3rem 1rem 4rem; }
.single-post .entry-title, .single-post .site-main h1, .single-post .site-main h2, .single-post .site-main h3 { font-family: var(--euf-font); font-weight: 700; color: var(--euf-color-heading); line-height: 1.25; }
.single-post .entry-title, .single-post .site-main h1 { font-size: var(--euf-h2-size); margin: 0 0 1rem; }
.single-post .site-main h2 { font-size: var(--euf-h3-size); margin: 2rem 0 .75rem; }
.single-post .site-main h3 { font-size: var(--euf-h4-size); margin: 1.5rem 0 .5rem; }
.single-post .site-main p, .single-post .site-main li { line-height: var(--euf-body-line-height); }
.single-post .site-main a { color: var(--euf-color-dark); text-decoration: underline; }
@media (max-width: 767px) { .single-post .entry-title, .single-post .site-main h1 { font-size: 2rem; } }