/*
 * Freelove Orthodontics & Smile Design: site rules on top of the Orthodynamo GreenLight library (odgl.css).
 * Publish as the WPCodeBox2 CSS snippet "Freelove site styles (site.css)", same hooks as the library, priority 20,
 * so it loads after the library. Only rules that belong to this clinic: its brand overrides, its photo keys and
 * the treatment-color swatches build.py generates from its pages.
 */

/* Link contrast. The theme derives both tokens as readable(brand, page, 4.5) in brand/declarations.json: just
   dark enough for 4.5:1 on white. #007FB0 measured 4.50:1 on white and FAILED WCAG AA on the cream band
   (4.25:1), which is every band and every cream card. Approved by Donny 2026-09-16: #0079A8 passes on both
   (white 4.88:1, cream 4.61:1) and looks the same. The lasting fix is the shared theme declaration,
   readable(brand, band, 4.5), which would change every clinic's links; until that is decided this Freelove
   override applies. html:root outranks the brand screen's :root inline CSS whatever the load order. */
html:root { --od-text-link: #0079A8; --od-brand-strong: #0079A8; }

.odgl-section .odgl-photo-key-team-group img { object-position: 50% 35%; }

/* Homepage hero: background video (Dr. Freelove chose it over the photo, 2026-10-08; the section carries
   odgl-hero--video). The poster paints with the page (a 30 KB WebP behind a dark overlay), and the video (1080px, no
   sound, 1.7 MB WebM or 2.1 MB MP4) loads only after the visitor's first scroll, tap or key, at 768px and wider, never
   with reduced motion, Save-Data or a 2G estimate. A pause button covers WCAG 2.2.2.
   The overlay keeps every hero text at 4.5:1 or better over every second of the video (worst: the trust row, measured
   against the 95th-percentile brightest pixel behind it, frame by frame). */
.odgl-lime-hero.odgl-hero--video { position: relative; isolation: isolate; overflow: hidden; background: #14191d url(/wp-content/uploads/2026/10/freelove-hero-video-poster.webp) center / cover no-repeat; }
.odgl-hero-media { display: none; }
.odgl-hero--video .odgl-hero-media { display: block; position: absolute; inset: 0; z-index: -2; }
.odgl-hero--video .odgl-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.odgl-hero--video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 16 20 / 86%) 0%, rgb(12 16 20 / 76%) 48%, rgb(12 16 20 / 52%) 100%); }
.odgl-hero--video .odgl-hero-visual { display: none; }
@media (max-width: 1024px) { .odgl-hero--video::before { background: rgb(12 16 20 / 80%); } }
.odgl-hero--video .odgl-hero-split { grid-template-columns: minmax(0, 720px); }
.odgl-hero--video :is(h1, p, .odgl-hero-lead, .odgl-attribution, .odgl-hero-consult-scope, .odgl-hero-trust, .odgl-hero-trust *) { color: #fff; }
.odgl-section.odgl-hero--video :is(p.odgl-attribution, p.odgl-attribution *, p.odgl-hero-consult-scope) { color: rgb(255 255 255 / 88%); }
.odgl-section.odgl-hero--video .odgl-button.odgl-secondary { color: #fff; border-color: rgb(255 255 255 / 80%); background: transparent; }
.odgl-section.odgl-hero--video .odgl-button.odgl-secondary:is(:hover, :focus-visible) { color: #14191d; background: #fff; border-color: #fff; }
.odgl-hero--video .odgl-hero-trust { border-top-color: rgb(255 255 255 / 28%); }
.odgl-hero--video .odgl-hero-trust > span::before { background: #fff; }
.odgl-hero-video-toggle { display: none; }
.odgl-hero--video .odgl-hero-video-toggle:not([hidden]) { display: inline-flex; position: absolute; right: 20px; bottom: 20px; z-index: 2; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; background: rgb(12 16 20 / 55%); color: #fff; font: 600 14px/1 var(--od-font-body, inherit); cursor: pointer; }
.odgl-hero--video .odgl-hero-video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Generated treatment-color swatches. */
.odgl-swatch-000000{background:#000000;}
.odgl-swatch-0047AB{background:#0047AB;}
.odgl-swatch-008C8C{background:#008C8C;}
.odgl-swatch-0B5D28{background:#0B5D28;}
.odgl-swatch-12A05A{background:#12A05A;}
.odgl-swatch-1A1A1A{background:#1A1A1A;}
.odgl-swatch-1A3D7C{background:#1A3D7C;}
.odgl-swatch-1B6FA8{background:#1B6FA8;}
.odgl-swatch-1E8B3C{background:#1E8B3C;}
.odgl-swatch-1F5FC4{background:#1F5FC4;}
.odgl-swatch-228B22{background:#228B22;}
.odgl-swatch-2A7BAF{background:#2A7BAF;}
.odgl-swatch-2E8B57{background:#2E8B57;}
.odgl-swatch-39FF14{background:#39FF14;}
.odgl-swatch-3E7FE0{background:#3E7FE0;}
.odgl-swatch-3FBF6F{background:#3FBF6F;}
.odgl-swatch-3FD9D9{background:#3FD9D9;}
.odgl-swatch-4A4A4A{background:#4A4A4A;}
.odgl-swatch-5B2C87{background:#5B2C87;}
.odgl-swatch-5FC7F0{background:#5FC7F0;}
.odgl-swatch-68D4C0{background:#68D4C0;}
.odgl-swatch-7B1E2B{background:#7B1E2B;}
.odgl-swatch-7B2FBE{background:#7B2FBE;}
.odgl-swatch-808080{background:#808080;}
.odgl-swatch-8A4FD3{background:#8A4FD3;}
.odgl-swatch-8FD98F{background:#8FD98F;}
.odgl-swatch-9BD62F{background:#9BD62F;}
.odgl-swatch-9DC0E8{background:#9DC0E8;}
.odgl-swatch-A8D8F0{background:#A8D8F0;}
.odgl-swatch-A9B6E8{background:#A9B6E8;}
.odgl-swatch-B9A0DC{background:#B9A0DC;}
.odgl-swatch-C0C0C0{background:#C0C0C0;}
.odgl-swatch-C3A6E0{background:#C3A6E0;}
.odgl-swatch-C6E68A{background:#C6E68A;}
.odgl-swatch-C7359B{background:#C7359B;}
.odgl-swatch-C9A227{background:#C9A227;}
.odgl-swatch-D22630{background:#D22630;}
.odgl-swatch-DE2B3B{background:#DE2B3B;}
.odgl-swatch-E8112D{background:#E8112D;}
.odgl-swatch-EAEAEA{background:#EAEAEA;}
.odgl-swatch-EDE3D2{background:#EDE3D2;}
.odgl-swatch-EDEDED{background:#EDEDED;}
.odgl-swatch-F0566E{background:#F0566E;}
.odgl-swatch-F0707A{background:#F0707A;}
.odgl-swatch-F07C1F{background:#F07C1F;}
.odgl-swatch-F0EDE5{background:#F0EDE5;}
.odgl-swatch-F58220{background:#F58220;}
.odgl-swatch-F5D520{background:#F5D520;}
.odgl-swatch-F79AA6{background:#F79AA6;}
.odgl-swatch-FF1F8F{background:#FF1F8F;}
.odgl-swatch-FF3FA4{background:#FF3FA4;}
.odgl-swatch-FFB6D5{background:#FFB6D5;}
.odgl-swatch-FFD700{background:#FFD700;}
.odgl-swatch-FFFFFF{background:#FFFFFF;}
