/* ─── Social icons (v1.1.3) ────────────────────────────────────────────────
   [hzo_social_icons] outputs inline SVGs without explicit width/height
   attributes. Without an explicit CSS constraint, SVGs in a flex container
   fall to fill-the-parent sizing — produced the 150px+ Facebook/Instagram
   icons surfaced 2026-05-22. Constrains both the default .hzo-social-icons
   class and the .hzo-footer-social variant the footer.html part passes. */
.hzo-social-icons,
.hzo-footer-social {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-smd);
}
/* Social icon links carry the .hzo-social-icons__link class (added in
   [hzo_social_icons], v1.1.93) — again, the class exists so a per-client
   `a:not([class])` content-link rule excludes them. Styling stays on the
   original descendant selectors, which win on cascade order within this file.
   No !important. */
.hzo-social-icons a,
.hzo-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px tap target (WCAG 2.5.5 comfort size) — G53 gate requires the family
       bar move off the old 36px, especially now the row carries more platforms.
       The glyph stays 20px; the extra size is padding around it. */
    width: 44px;
    height: 44px;
    color: var(--footer-social-link, var(--accent, currentColor));
    text-decoration: none;
    background-image: none;
    border-radius: 50%;
    /* Smooth ease-out settle rather than a snappy linear flip (v1.1.93). */
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hold the accent color after the (external) social link is visited — without
   this, `.hzo-site-footer a:visited` (rgba .85) repaints visited icons. Mirrors
   the .hzo-footer-link:visited pattern; placed after that rule so it wins the
   same-specificity tie on cascade order. No !important. */
.hzo-social-icons a:visited,
.hzo-footer-social a:visited { color: var(--footer-social-link, var(--accent, currentColor)); }
.hzo-social-icons a:hover,
.hzo-social-icons a:focus-visible,
.hzo-footer-social a:hover,
.hzo-footer-social a:focus-visible {
    color: var(--footer-social-link-hover, var(--text-on-accent, #fff));
    background-color: var(--footer-social-bg-hover, var(--accent-hover-on-dark, rgba(255,255,255,0.1)));
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .hzo-social-icons a,
    .hzo-footer-social a { transition: color 0.15s ease, background-color 0.15s ease; }
    .hzo-social-icons a:hover,
    .hzo-footer-social a:hover { transform: none; }
}
.hzo-social-icons svg,
.hzo-footer-social svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Footer social row: a touch tighter (symmetric row + column gap) and a smaller
   hover disc. The 44px tap target (WCAG comfort) is PRESERVED — only the visible
   hover circle shrinks, via a centred ::before behind the glyph, so the icons read
   cleaner without losing reach. Scoped to .hzo-footer-social; the general
   .hzo-social-icons row is unchanged. */
.hzo-footer-social { gap: var(--space-sm); }
.hzo-footer-social a { position: relative; z-index: 0; }
.hzo-footer-social a,
.hzo-footer-social a:hover,
.hzo-footer-social a:focus-visible { background-color: transparent; }
.hzo-footer-social a::before {
    content: "";
    position: absolute;
    inset: 5px;                 /* 44px box → 34px visible disc, centred */
    border-radius: 50%;
    /* Always-on "glass" disc so each icon reads as a defined chip on the dark
       footer. Translucent (not solid white) to stay subtle; hover fills to the
       accent disc below. Client-tunable via --footer-social-bg. */
    background-color: var(--footer-social-bg, rgba(255,255,255,0.12));
    z-index: -1;
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hzo-footer-social a:hover::before,
.hzo-footer-social a:focus-visible::before {
    background-color: var(--footer-social-bg-hover, var(--accent-hover-on-dark, rgba(255,255,255,0.24)));
}
/* A touch more breathing room for the glyph inside the disc (the disc size stays
   the same; the icon just gets a hair more padding). */
.hzo-footer-social svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
    .hzo-footer-social a::before { transition: background-color 0.15s ease; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WAVE B — style-NEUTRAL, opt-in capability primitives (Group 4)
   Every rule below is class-scoped .hzo-*, token-driven, WCAG-AA, and gates
   all motion behind prefers-reduced-motion. New classes only — nothing here
   changes how any existing markup renders. Component-local vars carry token
   fallbacks so no main.css :root edit is needed.
   ═══════════════════════════════════════════════════════════════════════ */