/* Investissement La France - custom site styles */
:root{
  --ilf-navy:#20242c;
  --ilf-navy-dark:#191919;
  /* Primary brand color: orange (was blue #3392f8). --ilf-gold = base tone for
     text/borders/icons on LIGHT backgrounds (4.7:1 contrast on white, passes
     WCAG AA for body text). --ilf-gold-dark = richer/darker tone for hover-fill
     states. --ilf-gold-light = lighter, more saturated tone for DARK backgrounds
     (header nav, footer, CTA panels) — ~9:1 contrast on #191919. */
  --ilf-gold:#c2540a;
  --ilf-gold-dark:#a8480a;
  --ilf-gold-light:#ffa55c;
  --ilf-bg-light:#f7f7f7;
  --ilf-text:#3a3a3a;
  --ilf-muted:#4B4F58;
}
body{ color:var(--ilf-text); }
/* No blanket "a{color:...}" rule on purpose — link color is set per component
   instead (inline on the Coordonnées links, scoped here for header/footer),
   so it never leaks onto content that hasn't been deliberately styled. */
/* Dark-background contexts (footer, transparent header) need a lighter blue for
   contrast against #191919/#20242c backgrounds; hover brightens to pure white. */
#colophon a, #masthead a{ color:var(--ilf-gold-light) !important; }
#colophon a:hover, #colophon a:focus,
#masthead a:hover, #masthead a:focus{ color:#ffffff !important; }
.ilf-section{ padding:64px 24px; max-width:1180px; margin:0 auto; }
.ilf-section-tight{ padding:40px 24px; }
.ilf-bg-light{ background:var(--ilf-bg-light); }
.ilf-bg-navy{ background:var(--ilf-navy); color:#fff; }
.ilf-bg-navy h1, .ilf-bg-navy h2, .ilf-bg-navy h3, .ilf-bg-navy p{ color:#fff; }

.ilf-hero{ background:linear-gradient(135deg, var(--ilf-navy) 0%, var(--ilf-navy-dark) 100%); color:#fff; padding:96px 24px; text-align:center; }
.ilf-hero h1{ font-size:2.6rem; margin:0 0 12px; color:#fff; }
.ilf-hero p.subtitle{ font-size:1.2rem; color:#dbe3ef; margin:0 0 28px; }

.ilf-btn{ display:inline-block; background:var(--ilf-gold); color:#ffffff !important; font-weight:600; padding:14px 32px; border-radius:4px; text-decoration:none; transition:background .2s ease; }
.ilf-btn:hover{ background:var(--ilf-gold-dark); }
.ilf-btn-outline{ display:inline-block; border:2px solid #fff; color:#fff !important; font-weight:600; padding:12px 30px; border-radius:4px; text-decoration:none; }

.ilf-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:900px){ .ilf-pillars{ grid-template-columns:repeat(2,1fr);} }
.ilf-pillar{ text-align:center; padding:24px 12px; }
.ilf-pillar .ilf-icon{ font-size:2rem; margin-bottom:10px; }
.ilf-pillar h3{ font-size:1.05rem; margin:0 0 8px; color:var(--ilf-navy); }
.ilf-pillar p{ color:var(--ilf-muted); font-size:.92rem; margin:0; }

.ilf-columns-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media(max-width:900px){ .ilf-columns-3{ grid-template-columns:1fr; } }
.ilf-card{ background:#fff; border:1px solid #e5e9f0; border-radius:8px; padding:28px; box-shadow:0 2px 10px rgba(11,37,69,.05); }
.ilf-card h3{ color:var(--ilf-navy); margin-top:0; }
.ilf-card a{ color:var(--ilf-gold-dark); font-weight:600; text-decoration:none; }
.ilf-card a:hover{ text-decoration:underline; }

.ilf-about-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:700px){ .ilf-about-list{ grid-template-columns:1fr; } }
.ilf-about-list li{ padding-left:28px; position:relative; }
.ilf-about-list li:before{ content:"✓"; position:absolute; left:0; color:var(--ilf-gold-dark); font-weight:700; }

.ilf-cta-form-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media(max-width:800px){ .ilf-cta-form-wrap{ grid-template-columns:1fr; } }
.ilf-form{ background:#fff; padding:32px; border-radius:16px; color:var(--ilf-text); box-shadow:0 4px 18px rgba(0,0,0,.15); }
.ilf-field{ margin-bottom:22px; }
.ilf-field label{ display:block; margin-bottom:7px; font-weight:600; font-size:.9rem; color:var(--ilf-text); }
.ilf-input-wrap{ position:relative; }
/* Bug fixed: this previously mixed a fixed top:26px with translateY(-50%), which
   only centered correctly on inputs of exactly one specific height and left the
   icon overlapping the placeholder text everywhere else. top:50% + translateY is
   the correct pairing for true vertical centering regardless of input height. */
.ilf-input-wrap .ilf-input-icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ilf-gold); pointer-events:none; z-index:1;
}
.ilf-input-wrap .ilf-input-icon svg{ width:100%; height:100%; display:block; }
/* Textarea is much taller than one line, so its icon sits near the top instead
   of dead-center (that would float it awkwardly in the middle of empty space). */
.ilf-input-wrap-textarea .ilf-input-icon{ top:22px; transform:none; }
/* !important needed on padding/border-radius: Hello Elementor's reset.css targets
   input[type=text], input[type=email], input[type=tel] etc — an attribute selector
   has the same specificity as our .ilf-form class selector, and reset.css loads
   after this file, so its padding:.5rem 1rem / border-radius:3px would otherwise
   win the tie and silently shrink our left padding back down, overlapping the icon. */
.ilf-form input, .ilf-form textarea{
  width:100% !important; padding:14px 18px 14px 46px !important; border:none !important; border-radius:0 !important;
  background:#f2f4f7; font-size:1rem; box-sizing:border-box; transition:background-color .15s ease, box-shadow .15s ease;
  box-shadow:none;
  /* Kill any native browser affordance (clear/reveal buttons, spinners, the
     little autofill "contact card" icon Chrome shows on name/tel/email
     fields) that could visually compete with our own icon on the right or left. */
  -webkit-appearance:none; appearance:none;
}
.ilf-form input::-webkit-search-cancel-button,
.ilf-form input::-webkit-search-decoration,
.ilf-form input::-webkit-clear-button,
.ilf-form input::-webkit-credentials-auto-fill-button,
.ilf-form input::-webkit-contacts-auto-fill-button,
.ilf-form input::-webkit-caps-lock-indicator,
.ilf-form input::-ms-clear,
.ilf-form input::-ms-reveal{
  display:none !important; visibility:hidden !important; pointer-events:none; opacity:0; width:0; height:0;
}
.ilf-form textarea{ resize:vertical; padding-left:46px; }
.ilf-form input:focus, .ilf-form textarea:focus{
  outline:none; background:#ffffff; box-shadow:0 0 0 3px rgba(194,84,10,.22);
}
.ilf-form button{ width:100%; background:var(--ilf-gold); border:none; color:#ffffff; font-weight:700; padding:16px 28px; border-radius:50px; cursor:pointer; font-size:1rem; }
.ilf-form button:hover{ background:var(--ilf-gold-dark); }
.ilf-form button:disabled{ opacity:.6; cursor:not-allowed; }
.ilf-hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ilf-form-msg{ margin:14px 0 0; padding:0; font-size:.92rem; font-weight:600; display:none; }
.ilf-form-msg.ilf-form-msg-success{ display:block; color:#1a7a3c; }
.ilf-form-msg.ilf-form-msg-error{ display:block; color:#c62828; }

/* Parallax "Demandez votre consultation gratuite" background: disable the fixed
   attachment on small screens (perf + iOS Safari compatibility + looks wrong on
   short mobile viewports). */
@media(max-width:768px){
  .elementor-section, .e-con{ background-attachment:scroll !important; }
}

/* Home page hero: scales with the viewport (100vh) but stays within a sane
   range regardless of zoom level or extreme screen sizes. Targeted at the
   page's first top-level container specifically (.elementor-14 = home,
   ID stable) rather than a generic .e-con selector, which would also catch
   every other section/column container on every page. */
.elementor-14 > .e-con:first-child{
  height:100vh;
  min-height:550px;
  max-height:1200px;
}
/* The 4-pillars row right under the hero: 20vh is a MINIMUM, not a fixed height —
   a strict height:20vh clipped the icon+text on narrower screens where "Accompagnement
   personnalisé" wraps to two lines. min-height lets it grow when content needs more
   room; readability wins over hitting the number exactly. No max-height here for the
   same reason — capping it would just reintroduce the same clipping on short/zoomed
   viewports with wrapped titles. */
.elementor-14 > .e-con:nth-child(2){
  min-height:20vh;
  align-items:center;
}
.elementor-14 > .e-con:nth-child(2) > .e-con{
  align-items:center;
}

/* Active page indicator in the header nav: WordPress marks the current page's
   <li> with .current-menu-item automatically on every page, no per-page setup
   needed. */
#masthead .current-menu-item .hfe-menu-item{
  color:var(--ilf-gold-light) !important;
}

/* "Qui sommes-nous" / "Notre mission": the image column is naturally taller
   than the text column, leaving a gap at the bottom. Stretching the image to
   fill the full height of its (already flex-stretched) column and cropping
   with object-fit:cover keeps both columns ending at the same line instead of
   forcing extra height into the text block. */
.ilf-about-section .elementor-widget-image{ height:100%; }
.ilf-about-section .elementor-widget-image .elementor-widget-container,
.ilf-about-section .elementor-widget-image .elementor-image{ height:100%; }
.ilf-about-section .elementor-widget-image img{ height:100%; width:100%; object-fit:cover; }
.ilf-about-section .elementor-icon-list-item{ padding-top:4px; padding-bottom:4px; }

/* "Nos services" cards: uniform image size, link pinned to the bottom of each
   card regardless of description length, and a hover lift to signal they're
   clickable. .ilf-service-card is a flex column (Elementor container default)
   so margin-top:auto on the last child (the link) pushes it to the bottom —
   this only works because all 3 cards are already forced to equal height by
   their parent row's default align-items:stretch. */
.ilf-service-card{
  display:flex; flex-direction:column; height:100%; min-height:520px;
  border:none !important; box-shadow:none !important; border-radius:12px;
  overflow:hidden;
}
/* No longer needs a negative-margin bleed trick: card padding is 0 natively
   now (set directly on the container in the Elementor editor), so the image
   already sits flush with the card edges on its own. */
.ilf-service-card .elementor-widget-image{ margin:0 0 16px; overflow:hidden; }
.ilf-service-card .elementor-widget-image img{
  width:100%; height:280px; object-fit:cover; display:block;
  transition:transform .4s ease;
}
/* Only the image animates on hover (scale/zoom), clipped by the wrapper's own
   overflow:hidden so it never spills past the card's edges. No more card-level
   lift or title color change — those were removed per request. */
.ilf-service-card:hover .elementor-widget-image img{ transform:scale(1.12); }
.ilf-service-card > .elementor-widget-html{ margin-top:auto; padding-top:8px; }
/* "Voir nos services": a real outlined button (site norm — border matching
   the text color, standard button padding) instead of a bare text link. */
.ilf-service-card .ilf-btn{ padding:12px 26px !important; font-size:.92rem; }

/* Contact page map embed, under the Coordonnées text — styled to match the
   rounded-corner + shadow treatment used on other images site-wide, and
   fills the leftover vertical space so both columns end at a similar height. */
.ilf-map-embed{ margin-top:24px; border-radius:12px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.12); }
.ilf-map-embed iframe{ display:block; width:100%; }

/* "Pourquoi investir avec nous" key stats: big bold blue numbers, small muted
   label underneath. Higher specificity (2 classes) than the global
   h2.elementor-heading-title rule (1 tag + 1 class) so it wins without needing
   !important. */
.ilf-stat-number .elementor-heading-title{
  font-size:48px !important;
  line-height:1.1 !important;
  text-transform:none !important;
  color:var(--ilf-gold) !important;
}
@media(max-width:768px){ .ilf-stat-number .elementor-heading-title{ font-size:36px !important; } }

.ilf-404-number .elementor-heading-title{
  font-size:130px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-transform:none !important;
  color:var(--ilf-gold) !important;
}
@media(max-width:768px){ .ilf-404-number .elementor-heading-title{ font-size:80px !important; } }

/* "Comment ça marche" step numbers (1/2/3): same big-bold-orange treatment as
   the stats above, just left-aligned instead of centered. */
.ilf-step-number .elementor-heading-title{
  font-size:40px !important;
  line-height:1 !important;
  text-transform:none !important;
  color:var(--ilf-gold) !important;
  margin-bottom:4px;
}

.ilf-footer{ background:var(--ilf-navy-dark); color:#c7cedb; padding:40px 24px; text-align:center; font-size:.92rem; }
.ilf-footer a{ color:#fff; }

.ilf-nav-phone{ background:var(--ilf-gold); color:#ffffff; padding:8px 18px; border-radius:4px; font-weight:700; text-decoration:none; }

/* Typography matching lesprosdelentretien.com: Montserrat (headings, bold) / Noto Sans (body) */
body, p, input, textarea, button, select,
.elementor-widget-text-editor, .elementor-button, .ilf-form input, .ilf-form textarea, .ilf-form button{
  font-family:'Noto Sans', sans-serif !important;
  font-weight:400;
}
body{ font-size:16px; line-height:1.7em; }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title, .site-title, .site-title a, .hfe-site-title, .hfe-site-title a{
  font-family:'Montserrat', sans-serif !important;
  font-weight:700 !important;
}
h1.elementor-heading-title{ font-size:56px; line-height:1.3em; text-transform:uppercase; }
h2.elementor-heading-title{ font-size:34px; line-height:1.3em; text-transform:uppercase; }
h3.elementor-heading-title{ font-size:22px; line-height:1.3em; }
h4.elementor-heading-title{ font-size:18px; line-height:1.2em; }
@media(max-width:768px){ h1.elementor-heading-title{ font-size:34px; } h2.elementor-heading-title{ font-size:26px; } }

.elementor-button, .ilf-btn, .ilf-form button, .elementor-widget-button .elementor-button-text{
  font-family:'Montserrat', sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
}
/* Site-wide button style: outlined, square corners, border matching the text
   color — replaces the earlier filled pill style. Applied via CSS !important
   rather than per-widget settings because the free Button widget doesn't
   expose a reliable border-color control, and this guarantees every button
   already built (across all 5 pages, the header/footer, the "Envoyer" submit
   button) updates consistently from one place. */
.elementor-button, .ilf-btn, .ilf-form button{
  background-color:transparent !important;
  /* gold-dark, not the base gold: at button-label text size (~15px bold,
     under the WCAG "large text" bold threshold of 18.66px) the base
     --ilf-gold only reaches 4.29:1 against the light-gray section
     background (#f7f7f7) used by "Pourquoi investir", "Une firme, deux
     portes d'entrée" etc. — under the 4.5:1 AA minimum for normal text.
     gold-dark clears AA on every background the buttons appear on
     (5.45:1 on #f7f7f7, 5.84:1 on white). */
  color:var(--ilf-gold-dark) !important;
  border:2px solid var(--ilf-gold-dark) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  fill:var(--ilf-gold-dark) !important;
}
.elementor-button:hover, .elementor-button:focus,
.ilf-btn:hover, .ilf-btn:focus,
.ilf-form button:hover, .ilf-form button:focus{
  background-color:var(--ilf-gold) !important;
  color:#ffffff !important;
  fill:#ffffff !important;
  text-decoration:none !important;
}
.hfe-infocard-title{
  font-family:'Montserrat', sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:16px;
}

/* Transparent header merged into the hero image below it.
   !important is required: the plugin's own ".ehf-header #masthead{position:relative}"
   rule loads after ours and would otherwise win the position property. */
#masthead{
  position:absolute !important;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  background:transparent !important;
}
#masthead .hfe-nav-menu__layout-vertical{ background:var(--ilf-navy-dark); }
#masthead .hfe-menu-item, #masthead .hfe-nav-menu a{ color:#ffffff !important; }
#masthead .hfe-menu-item:hover, #masthead .hfe-nav-menu a:hover{ color:var(--ilf-gold-light) !important; }

/* Mobile hamburger menu fix: the dropdown panel (nav.hfe-dropdown) has a WHITE
   background, but the rule above forces white text everywhere in #masthead —
   fine for the transparent desktop header over a dark photo, invisible
   (white-on-white) for every link in the mobile dropdown except the current
   page (which happens to render in orange from the active-page rule below,
   which is why only "Accueil" was ever visible). Also forces the panel to a
   real full-width anchored drawer instead of the plugin's JS-computed
   `left:-315px`-style inline offset, which could land the panel off-center or
   partially off-screen depending on the page.
   `position:fixed` (not absolute) is required for a reliable full-viewport
   width: the dropdown's actual DOM parent is a narrow toggle-button wrapper,
   not #masthead itself, so `position:absolute` anchors it to that narrow
   wrapper instead (~40px wide, off in the corner) — fixed positioning is
   always relative to the viewport regardless of DOM nesting, which sidesteps
   that entirely. `top` is set dynamically by JS (see ilf-custom-style.php,
   which measures #masthead's real rendered height into
   --ilf-mobile-header-h) rather than a hardcoded px guess, since the header's
   height itself has changed at least once already from a manual Elementor
   edit and a stale hardcoded value caused the panel to clip the toggle. */
#masthead nav.hfe-dropdown,
#masthead nav.hfe-dropdown-expandible{
  position:fixed !important;
  top:var(--ilf-mobile-header-h, 84px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:100% !important;
}
#masthead nav.hfe-dropdown .menu-item a.hfe-menu-item,
#masthead nav.hfe-dropdown-expandible .menu-item a.hfe-menu-item{
  color:var(--ilf-text) !important;
  padding-top:16px !important;
  padding-bottom:16px !important;
}
#masthead nav.hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item,
#masthead nav.hfe-dropdown .menu-item a.hfe-menu-item:hover,
#masthead nav.hfe-dropdown-expandible .menu-item.current-menu-item a.hfe-menu-item,
#masthead nav.hfe-dropdown-expandible .menu-item a.hfe-menu-item:hover{
  color:var(--ilf-gold) !important;
}

/* Footer's 3 columns (Coordonnées / Liens rapides / Suivez-nous) were packing
   to their content's intrinsic width and left-aligning instead of filling the
   row, leaving a gap on the right. Forcing equal flex-grow makes them split
   the full boxed width (up to 1200px) evenly regardless of how little content
   "Suivez-nous" has. */
#colophon > .e-con > .e-con{ flex:1 1 0; }

/* The theme's default page title is redundant — every page already has its own styled H1 in the hero */
.page-header{ display:none; }

/* ==========================================================================
   Footer responsiveness (tablet <=1024px, mobile <=767px)
   Elementor containers set flex-direction via the --flex-direction custom
   property (consumed by Elementor's own base .e-con rule), so overriding the
   plain `flex-direction` property alone would not win — the custom property
   itself has to be reassigned.
   ========================================================================== */
/* Footer "Liens rapides" should always read as a plain link list, never a
   collapsed hamburger toggle — that pattern belongs to primary navigation
   (the header), not a small secondary link list at the bottom of the page. */
#colophon .hfe-nav-menu__toggle{ display:none !important; }
#colophon nav.hfe-dropdown,
#colophon nav.hfe-dropdown-expandible{
  position:static !important; display:block !important; width:100% !important;
  height:auto !important; max-height:none !important; overflow:visible !important;
  opacity:1 !important; visibility:visible !important;
  background:transparent !important;
}
#colophon .hfe-nav-menu{ align-items:center; }
/* The plugin's own dropdown-state CSS gives each .menu-item a and its <li>
   a white card background + light border (meant for the header's floating
   overlay panel on #masthead). That look doesn't belong in the dark,
   plain-text footer, so strip it back to transparent text links here. */
#colophon .hfe-nav-menu .menu-item,
#colophon .hfe-nav-menu .menu-item a.hfe-menu-item{
  background:transparent !important; border:none !important;
}

@media(max-width:1024px){
  /* Both the custom property AND the plain property: relying on
     --flex-direction alone assumes Elementor's base rule has already consumed
     it by the time fonts/images finish loading and the browser reflows — in
     practice that produced an intermittent layout race where the 3rd column
     (social icons) could paint at its pre-reflow position, overlapping the
     2nd column. Forcing the real `flex-direction` property removes that
     dependency on timing entirely. */
  #colophon > .e-con:first-child{
    --flex-direction:column;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #colophon > .e-con:first-child > .e-con{
    position:static !important;
    width:100% !important; flex-basis:100% !important; max-width:100% !important;
    text-align:center; margin-bottom:32px;
  }
  #colophon > .e-con:first-child > .e-con:last-child{ margin-bottom:0; }
  #colophon .elementor-widget-image{ margin-left:auto; margin-right:auto; }
  #colophon .hfe-nav-menu{ align-items:center; }
  #colophon .elementor-social-icons-wrapper{ justify-content:center !important; position:static !important; }

  /* Copyright bar (last row): copyright + legal links stack and center
     instead of sitting side-by-side, with clear spacing between the two
     lines — the side-by-side layout only makes sense with the width a
     1200px desktop container gives each half. */
  #colophon > .e-con:last-child{
    --flex-direction:column;
    flex-direction:column !important;
    align-items:center !important;
  }
  #colophon > .e-con:last-child > .e-con{
    width:100% !important; flex-basis:100% !important; max-width:100% !important;
    align-items:center !important;
  }
  #colophon > .e-con:last-child > .e-con:first-child{ margin-bottom:10px; }
  #colophon .hfe-copyright-wrapper{ text-align:center !important; }
  #colophon .ilf-footer-legal-links{ text-align:center !important; }
}
@media(max-width:767px){
  /* Bigger invisible tap target around each social icon (44px per WCAG/Apple
     touch-target guidance) without changing the icon's visual glyph size. */
  #colophon .elementor-icon{ padding:11px !important; }
  #colophon{ padding-left:12px; padding-right:12px; }
  #colophon .elementor-heading-title{ font-size:1rem !important; }
}

/* ==========================================================================
   Subtle, professional micro-interactions
   ========================================================================== */

/* Soft page entrance — a light fade on load, not a JS-driven page-transition
   system (that would mean intercepting every link click, which is more risk
   than a "nice to have" warrants on a normal multi-page site). */
body{ animation:ilf-page-fade .4s ease both; }
@keyframes ilf-page-fade{ from{ opacity:0; } to{ opacity:1; } }

/* Consistent, quick hover transition on every button site-wide. */
.elementor-button, .ilf-btn, .ilf-form button{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Scroll reveal: fade in + slight rise, applied via JS (see ilf-custom-style.php)
   to section titles, service cards, pillars, and stat numbers only — not every
   element individually. Disabled outright on mobile (both the JS skips
   attaching it there, and this query is a second guard in case that ever
   changes) since a scroll observer on every card is unnecessary work on a
   small screen and the content should just be visible immediately. */
.ilf-reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
.ilf-reveal-in{ opacity:1; transform:translateY(0); }
@media(max-width:767px){
  .ilf-reveal{ opacity:1; transform:none; transition:none; }
}
@media(prefers-reduced-motion:reduce){
  body{ animation:none; }
  .ilf-reveal{ opacity:1; transform:none; transition:none; }
}

/* FAQ accordion — native <details>/<summary>, no JS needed: keyboard-operable
   (Tab + Enter/Space) and screen-reader friendly out of the box. */
.ilf-faq{ max-width:800px; margin:0 auto; }
.ilf-faq-item{ border-bottom:1px solid #e5e9f0; padding:20px 0; }
.ilf-faq-item:first-child{ border-top:1px solid #e5e9f0; }
.ilf-faq-q{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:16px; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:1.05rem; color:var(--ilf-text);
}
.ilf-faq-q::-webkit-details-marker{ display:none; }
.ilf-faq-q::after{
  content:'+'; font-size:1.5rem; line-height:1; color:var(--ilf-gold);
  flex-shrink:0; transition:transform .25s ease;
}
.ilf-faq-item[open] .ilf-faq-q::after{ transform:rotate(45deg); }
.ilf-faq-a{ padding-top:12px; color:var(--ilf-muted, #4B4F58); line-height:1.6; }
.ilf-faq-q:focus-visible{ outline:2px solid var(--ilf-gold); outline-offset:4px; border-radius:2px; }

/* Site-wide visible keyboard-focus ring on every interactive element (links,
   buttons, form fields, accordion). Nothing in the theme/Elementor strips
   the browser's own default outline, so this isn't fixing a missing
   indicator — it's replacing the inconsistent native default with one
   on-brand ring everywhere, so Tab-navigating the site looks deliberate
   rather than accidental. gold-dark (not the base gold) on light
   backgrounds: 5.84:1 on white / 5.45:1 on #f7f7f7, comfortably clears the
   3:1 WCAG 1.4.11 non-text contrast minimum. Dark contexts (#masthead,
   #colophon) use gold-light instead — gold-dark only reaches 3.01:1 against
   #191919, right at the edge, while gold-light reaches 9.03:1. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible, .elementor-button:focus-visible, .ilf-btn:focus-visible{
  outline:2px solid var(--ilf-gold-dark);
  outline-offset:3px;
}
#masthead a:focus-visible, #masthead button:focus-visible,
#colophon a:focus-visible, #colophon button:focus-visible{
  outline:2px solid var(--ilf-gold-light);
  outline-offset:3px;
}
.ilf-form input:focus-visible, .ilf-form textarea:focus-visible{
  outline:2px solid var(--ilf-gold-dark);
  outline-offset:2px;
}