/* ==========================================================================
   Fazzina Elements: WordPress / Elementor host adjustments.
   The design stylesheet (fazzina-design.css) is the source of truth; this file
   only neutralises what Elementor and the theme add around it.
   ========================================================================== */

/* Section widgets are whole bands: no Elementor spacing around them. */
.fz-site .e-con:has(> .fz-section-widget),
.fz-site .e-con:has(> .e-con-inner > .fz-section-widget) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px; }
.fz-site .elementor-element.fz-section-widget { width: 100%; max-width: 100%; margin: 0; --container-widget-width: 100%; }
.fz-site .fz-section-widget > .elementor-widget-container { margin: 0; padding: 0; }
.fz-site .elementor-widget:not(:last-child).fz-section-widget { margin-bottom: 0; }

/* Header: the theme-builder location wrapper is what must stick, since the
   design header sits inside it. The top bar scrolls away; the bar stays. */
.fz-site .elementor-location-header { position: sticky; top: calc(-1 * var(--topbar, 0px)); z-index: 50; }
.fz-site .elementor-location-header .site-header { position: relative; top: auto; }
.admin-bar .elementor-location-header { top: calc(32px - var(--topbar, 0px)); }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: calc(46px - var(--topbar, 0px)); } }

/* Hello Elementor's page wrapper adds width limits on some templates. */
.fz-site .site-main, .fz-site .page-content { max-width: none; padding: 0; margin: 0; }

/* Elementor sets img{height:auto} at matching specificity; restate the design's cover crops. */
.fz-site .cover img, .fz-site .split-media img, .fz-site .banner-media img, .fz-site .hx-frame img,
.fz-site .quote-band .bg img, .fz-site .talk .bg img, .fz-site .foot-bg img, .fz-site .process-media img,
.fz-site .panel-media img, .fz-site .post-card .thumb img { height: 100%; max-width: none; }
.fz-site .logo-wall img { height: 100%; }
.fz-site .site-header .brand img { height: 50px; width: auto; }
@media (min-width: 1280px) { .fz-site .site-header .brand img { height: 42px; } }
@media (max-width: 600px) { .fz-site .site-header .brand img { height: 36px; } }
.fz-site .site-footer .brand img { height: 46px; width: auto; }

/* Elementor's link reset removes box-shadow/text-decoration; the design uses neither,
   but its kit link colour must not tint buttons. */
.fz-site a.btn { color: var(--fg); }
.fz-site .on-dark a.link, .fz-site .model-panel .copy a.link { color: var(--white); }

.fz-site .btn[disabled] { opacity: .6; cursor: progress; }

/* Contact form: honeypot and error state. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-error { border-left-color: #A33A3A; background: #FBEDED; }

/* Chrome autofill keeps the design's field colours. */
.fz-site .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--white) inset; -webkit-text-fill-color: var(--ink); }

/* Inside the Elementor editor nothing waits for scroll-triggered reveals. */
.elementor-editor-active [data-reveal], .elementor-editor-active [data-stagger] > *,
.elementor-editor-active .split-media img, .elementor-editor-active .hx-line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
.elementor-editor-active .model-panel[hidden] { display: none; }


/* Smoothness: backdrop blurs are recomputed every frame anything moves behind
   them (scrolling content, the bobbing hero cards), which drops frames on
   integrated GPUs. Over these near-opaque panels the blur was barely visible,
   so a slightly more opaque fill gives the same look for free. */
.fz-site .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .97); }
.fz-site .site-header.is-scrolled { background: rgba(255, 255, 255, .985); }
.fz-site .hx-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .96); }
.fz-site .stage-badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .97); }
/* Top bar hairline sweep moved with a transform instead of repainting its background. */
.fz-site .topbar::before { right: auto; width: 28%; background-size: 100% 100%; background-position: 0 0; transform: translateX(-100%); animation-name: fz-shine-line; will-change: transform; }
@keyframes fz-shine-line { 0% { transform: translateX(-100%); } 32%, 100% { transform: translateX(358%); } }

/* Footer column titles are h2 in the page outline; same look as the design's h4. */
.fz-site .site-footer h2.foot-h { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.65; letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin: 0 0 18px; }

/* Skip link (from the theme): hidden until focused with the keyboard. */
.fz-site .skip-link.screen-reader-text { position: absolute; left: -9999px; top: 8px; z-index: 1000; }
.fz-site .skip-link.screen-reader-text:focus { left: 8px; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--white); color: var(--navy); font-weight: 600; box-shadow: 0 6px 20px rgba(14, 33, 56, .25); }

/* Accessibility: links inside sentences are underlined (not colour alone), and the
   contact form step numbers meet text contrast. */
.fz-site .ct-submit .note a, .fz-site .ar-author-bio a { text-decoration: underline; text-underline-offset: 3px; }
.fz-site .ct-num { color: var(--blue); }