/* ==========================================================================
   AAA Shepherd's Care Home — Design System
   Edit this file to change colors, fonts, and components across the entire site.
   ========================================================================== */

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Design Tokens ===== */
:root {
    /* Brand colors — adjust these and the whole site updates */
    --sage: #b4c5be;
    --sage-dark: #8fa99e;
    --sage-deeper: #526f60;
    --sage-light: #d5e0da;
    --sage-lightest: #eef3f0;
    --warm-white: #faf9f7;
    --accent: #c9a96e;
    --accent-light: #e8d5a8;

    /* Text colors */
    --text-dark: #2d3a35;
    --text-medium: #4a5d54;
    --text-light: #5f7369;

    /* Semantic colors */
    --success: #16a34a;
    --success-bg: #dcfce7;
    --warning: #d97706;
    --warning-bg: #fef3c7;
    --error: #dc2626;
    --error-bg: #fee2e2;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, monospace;

    /* Spacing scale (multiples of 4px) */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;

    /* Border radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(180,197,190,0.15);
    --shadow-md: 0 8px 25px rgba(180,197,190,0.18);
    --shadow-lg: 0 20px 60px rgba(107,138,126,0.2);

    /* Transitions */
    --transition: all 0.25s ease;

    /* Layout */
    --container-max: 1200px;
    --section-pad: 5rem 1.5rem;
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--warm-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Suppress horizontal scrollbar caused by reveal-left/reveal-right
       GSAP tweens that briefly translate elements off-canvas before they
       animate into place. `clip` is preferred over `hidden` so any
       sticky-positioned descendants still work. */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

a { color: var(--sage-deeper); }

/* ===== Layout ===== */
.section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--section-pad);
}
.section--tinted { background: var(--sage-lightest); }
.section--warm { background: var(--warm-white); }
.section--dark { background: var(--text-dark); color: rgba(255,255,255,0.7); }

.section-head {
    text-align: center;
    margin-bottom: var(--space-2xl);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.section-eyebrow {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--sage-deeper);
    margin-bottom: 0.75rem;
}
.section-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    margin-bottom: var(--space-md);
    color: var(--text-dark);
}
.section-head p { color: var(--text-light); font-size: 1.05rem; }

/* ===== Navigation ===== */
nav.site-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250,249,247,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(180,197,190,0.3);
}
.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
    display: flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: var(--text-dark);
}
.nav-brand img { width: 44px; height: 44px; border-radius: 50%; }
.nav-brand span {
    font-family: var(--font-heading);
    font-size: 1.1rem; font-weight: 600; line-height: 1.1;
}
.nav-brand small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 400;
}
.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.nav-links a {
    text-decoration: none;
    color: var(--text-medium);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--sage-deeper); }
.nav-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--sage-deeper) !important;
    color: white !important;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s !important;
    font-weight: 600 !important;
}
.nav-cta:hover { background: var(--text-medium) !important; color: white !important; }
.nav-cta svg { width: 14px; height: 14px; }

.mobile-toggle {
    display: none; background: none; border: none; cursor: pointer; padding: 0.5rem;
}
.mobile-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--text-dark); margin: 5px 0;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 2rem; border-radius: var(--radius-sm);
    font-size: 0.95rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: none;
    transition: var(--transition);
    font-family: inherit;
}
.btn-primary {
    background: var(--sage-deeper); color: white;
    box-shadow: 0 4px 15px rgba(107,138,126,0.3);
}
.btn-primary:hover {
    background: var(--text-medium);
    box-shadow: 0 6px 20px rgba(107,138,126,0.4);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent; color: var(--sage-deeper);
    border: 2px solid var(--sage);
}
.btn-outline:hover {
    background: var(--sage-lightest);
    border-color: var(--sage-deeper);
}
.btn-accent {
    background: var(--accent); color: white;
    box-shadow: 0 4px 15px rgba(201,169,110,0.3);
}
.btn-accent:hover { background: #b89656; }

/* ===== Cards ===== */
.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(180,197,190,0.25);
    transition: var(--transition);
}
.card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--sage);
}
.card--link {
    text-decoration: none; color: inherit; display: block;
}

/* ===== Icon containers ===== */
.icon-box {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--sage-lightest);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
}
.icon-box svg { width: 26px; height: 26px; color: var(--sage-deeper); }

/* ===== Footer ===== */
footer.site-footer {
    background: var(--text-dark);
    color: rgba(255,255,255,0.7);
    padding: 3rem 1.5rem 1.5rem;
    margin-top: 4rem;
}
.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1rem; }
.footer-brand h3 {
    font-family: var(--font-heading);
    color: white; font-size: 1.15rem; margin-bottom: 0.5rem;
}
.footer-brand p { font-size: 0.88rem; line-height: 1.6; max-width: 280px; }
.footer-col h4 {
    font-family: var(--font-body);
    color: white;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
    color: rgba(255,255,255,0.6); text-decoration: none;
    font-size: 0.88rem; transition: color 0.2s;
}
.footer-col a:hover { color: rgba(255,255,255,0.95); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem; text-align: center;
    font-size: 0.78rem; color: rgba(255,255,255,0.4);
    max-width: var(--container-max);
    margin: 0 auto;
}
.footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-bottom a:hover { color: white; }

/* ===== Footer locations block =====
   Two-column NAP + map block, present on every page for local SEO weight.
   Maps are lazy-loaded via IntersectionObserver in _template-foot.php. */
.footer-locations {
    max-width: var(--container-max);
    margin: 0 auto 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-loc h4 {
    font-family: var(--font-heading);
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0;
    text-transform: none;
}
.footer-loc-addr {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.footer-loc-phone {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.footer-loc-phone:hover { border-bottom-color: rgba(255,255,255,0.5); }
.footer-loc-link {
    display: block;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    transition: color 0.2s;
}
.footer-loc-link:hover { color: white; }
.footer-loc-map {
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    position: relative;
}
.footer-loc-map iframe {
    width: 100%; height: 100%; border: 0; display: block;
}
/* Subtle placeholder hint while map hasn't loaded yet */
.footer-loc-map:not([data-loaded="1"])::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(180,197,190,0.08), rgba(107,138,126,0.04));
}

/* ===== Form elements ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--sage-light);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-family: inherit;
    color: var(--text-dark);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sage-deeper);
    box-shadow: 0 0 0 3px rgba(107,138,126,0.12);
}

label {
    display: block;
    font-size: 0.85rem; font-weight: 500;
    color: var(--text-medium);
    margin-bottom: 0.35rem;
}

/* ===== Utilities ===== */
.text-center { text-align: center; }
.text-sage { color: var(--sage-deeper); }
.text-muted { color: var(--text-light); }
.italic { font-style: italic; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
    .footer-locations { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-loc-map { height: 200px; }
}
@media (max-width: 1100px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(250,249,247,0.98);
        backdrop-filter: blur(12px);
        padding: 1.25rem 1.5rem;
        gap: 1rem;
        border-bottom: 1px solid rgba(180,197,190,0.3);
    }
    .mobile-toggle { display: block; }
    .footer-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion + animated illustrations
   --------------------------------------------------------------------------
   All scroll motion is driven by GSAP + ScrollTrigger in motion.js. This CSS
   file only handles:
     - Initial visibility state (visible by default — never invisible due to
       broken JS or missing library)
     - Sticky nav backdrop blur
     - Base SVG illustration styling
     - prefers-reduced-motion handling

   .has-motion is added to <html> by the inline script in _template-head.php
   only if reduced-motion is NOT requested. motion.js then animates from
   opacity 0 to 1 via GSAP. If anything fails, the page still shows everything.
   ========================================================================== */

/* Reveals are visible by default — only hidden when .has-motion is on
   <html>, which the inline script in <head> sets BEFORE CSS loads.
   That prevents FOUC: users with motion enabled don't see content flash
   visible-then-invisible-then-visible. Users without motion enabled (or
   if the inline script never runs) see content immediately at full opacity. */
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; }

.has-motion .reveal,
.has-motion .reveal-left,
.has-motion .reveal-right,
.has-motion .reveal-scale {
    opacity: 0;
}

/* Safety net: if GSAP fails to load for any reason, this CSS animation
   fires after 1.5s and fades all reveal elements in. Page is never
   permanently invisible. When GSAP runs, it animates each element well
   before this triggers, and GSAP's inline transform overrides this. */
@keyframes revealSafetyNet { to { opacity: 1; } }
.has-motion .reveal,
.has-motion .reveal-left,
.has-motion .reveal-right,
.has-motion .reveal-scale {
    animation: revealSafetyNet 0.5s ease-out 1.5s forwards;
}

/* ----- Sticky nav scroll state ----- */
.site-nav { transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; }
.site-nav.is-scrolled {
    background: rgba(250, 249, 247, 0.92);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 rgba(180,197,190,0.25), 0 8px 24px rgba(45,58,53,0.04);
}

/* ----- Animated SVG illustrations -----
   GSAP handles the line-draw via stroke-dashoffset tween in motion.js.
   Base styles below: stroke colors, fill colors. svg-fill elements start
   at opacity 0 so they fade in only after GSAP fires. If GSAP fails, the
   fallback at the bottom of this file makes them visible at opacity 1. */
.svg-illus { display: block; }
.svg-illus .svg-stroke {
    fill: none;
    stroke: var(--sage-deeper);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.svg-illus .svg-stroke-soft { stroke: var(--sage); }
.svg-illus .svg-stroke-accent { stroke: var(--accent); }
.svg-illus .svg-fill { fill: var(--sage-light); }
.svg-illus .svg-fill-accent { fill: var(--accent-light); }
.svg-illus .svg-fill-deep  { fill: var(--sage-deeper); }

/* Icon-sized illustration in a card */
.illus-circle {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--sage-lightest);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
}
.illus-circle .svg-illus { width: 48px; height: 48px; }

/* ----- Count-up numerals ----- */
.count-up { font-variant-numeric: tabular-nums; }

/* ----- Slow-zoom image wrapper (formerly parallax) -----
   The wrapper clips overflow so the gentle scale-up doesn't push the image
   beyond the wrapper's rounded corners. The image fills the wrapper normally
   — no absolute positioning, no oversized height. GSAP scales the image
   between 1.0 and ~1.06 as the section scrolls through view. */
.parallax-wrap { overflow: hidden; }

/* ----- Full-width parallax band -----
   A drop-in section component for "feature band" sections — a wide
   horizontal stripe with a hero background photo and content overlaid.
   The image is in its own container that translates SLOWER than the
   page scroll (the classic parallax effect). The content layer scrolls
   normally on top.

   Usage:
     <section class="band-parallax">
       <div class="band-image" style="background-image: url(...)"></div>
       <div class="band-overlay"></div>
       <div class="band-content">
         <h2>Headline</h2>
         <p>Lead text</p>
         <a class="btn btn-primary" href="...">CTA</a>
       </div>
     </section>
   ------------------------------------------------------------------ */
.band-parallax {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 6rem 1.5rem;
}
.band-parallax .band-image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Oversize so parallax translate has room without exposing edges */
    height: 130%; top: -15%;
    will-change: transform;
}
.band-parallax .band-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(45, 58, 53, 0.50) 0%,
        rgba(45, 58, 53, 0.65) 100%);
    pointer-events: none;
}
.band-parallax .band-content {
    position: relative; z-index: 2;
    max-width: 720px;
}
.band-parallax .band-eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1rem;
}
.band-parallax h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: white;
    margin-bottom: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.band-parallax p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.92);
    margin-bottom: 1.75rem;
    line-height: 1.6;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.band-parallax .band-actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.band-parallax .btn-primary {
    background: white;
    color: var(--sage-deeper);
}
.band-parallax .btn-primary:hover { background: var(--warm-white); }
.band-parallax .btn-outline {
    color: white;
    border-color: rgba(255,255,255,0.5);
    background: transparent;
}
.band-parallax .btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

/* ----- Photo placeholder ("photo needed") -----
   Shown where the customer needs to take/supply a new photo. Dashed outline
   and friendly description so it's instantly recognizable as "TODO photo
   here" rather than looking like broken styling. Aspect-ratio variants
   match common image shapes. */
.photo-note {
    max-width: 900px;
    margin: 2rem auto;
    border: 2px dashed var(--sage);
    border-radius: 14px;
    background: var(--sage-lightest);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 1.5rem;
    transition: var(--transition);
}
.photo-note:hover { border-color: var(--sage-deeper); background: white; }
.photo-note--wide     { aspect-ratio: 16 / 9; }
.photo-note--banner   { aspect-ratio: 21 / 9; }
.photo-note--square   { aspect-ratio: 1 / 1;   max-width: 480px; }
.photo-note--portrait { aspect-ratio: 3 / 4;   max-width: 420px; }
/* In-place variant: fills its parent (no aspect-ratio, max-width, or margin).
   Use when the parent already constrains size (e.g. .portrait wrappers
   on the homepage / about page). */
.photo-note--inplace {
    width: 100%; height: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    border-radius: inherit;
}
.photo-note-inner { max-width: 480px; }
.photo-note-icon {
    width: 48px; height: 48px;
    color: var(--sage-deeper);
    margin: 0 auto 0.75rem;
    display: block;
}
.photo-note-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sage-deeper);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.photo-note-desc {
    color: var(--text-medium);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ----- Inline photo (figure) -----
   For mid-content images that break up long text. */
.inline-photo {
    max-width: 900px;
    margin: 2rem auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.inline-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.inline-photo--wide     img { aspect-ratio: 16 / 9; object-fit: cover; }
.inline-photo--banner   img { aspect-ratio: 21 / 9; object-fit: cover; }
.inline-photo--square   img { aspect-ratio: 1 / 1;  object-fit: cover; }
.inline-photo--portrait img { aspect-ratio: 3 / 4;  object-fit: cover; }
.inline-photo figcaption {
    padding: 0.85rem 1.25rem;
    background: var(--warm-white);
    color: var(--text-light);
    font-size: 0.88rem;
    font-style: italic;
    text-align: center;
}

/* ----- Reduced-motion: kill all motion ------
   This is the accessibility branch. The inline head script also detects
   reduced-motion and skips adding .has-motion, but this CSS rule is the
   ultimate guarantee that nothing animates. */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    .parallax-img { transform: none !important; }
    .site-nav { transition: none; }
    html { scroll-behavior: auto; }
}

/* Website refresh: shared community photographs and longer contact details. */
.community-photos {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.community-photos img {width:100%;height:230px;object-fit:cover;border-radius:14px;}
.footer-col a,.contact-card a {overflow-wrap:anywhere;}
.contact-card p {margin:.75rem 0;}
.tour-info h2 {margin-top:1.5rem;}
@media(max-width:800px){.community-photos{grid-template-columns:repeat(2,minmax(0,1fr));}.community-photos img{height:190px;}}
@media(max-width:480px){.community-photos{grid-template-columns:1fr;}}

/* Keep photographed subjects in frame at every scroll position. */
.band-framed {min-height:clamp(480px,31.25vw,640px);}
.band-framed .band-image {height:100%;top:0;background-position:var(--band-focus,50% 50%);will-change:auto;}
.inline-photo--panorama img {aspect-ratio:auto;height:auto;max-height:none;}
@media(max-width:700px){.band-framed .band-image{background-position:var(--band-focus-mobile,var(--band-focus,50% 50%));}}

/* Mobile controls: preserve zoom, fit intrinsic input sizes, and keep focus visible. */
html { scroll-padding-top: calc(var(--site-nav-height, 76px) + 16px); }
input, select, textarea { min-width: 0; max-width: 100%; box-sizing: border-box; scroll-margin-block: 16px; }
textarea { resize: vertical; }
input[type="date"], input[type="month"] { appearance: none; -webkit-appearance: none; min-height: 48px; }
input::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
button, .btn { max-width: 100%; }
.btn { justify-content: center; text-align: center; overflow-wrap: anywhere; }
.btn svg { flex-shrink: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sage-deeper); outline-offset: 3px; }
@media (max-width: 1100px) {
    .mobile-toggle { min-width: 44px; min-height: 44px; flex-shrink: 0; }
    .nav-links.open { max-height: calc(100vh - var(--site-nav-height, 76px)); max-height: calc(100dvh - var(--site-nav-height, 76px)); overflow-y: auto; overscroll-behavior: contain; gap: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .nav-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: 8px 12px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: max(16px, 1rem); }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, .btn { min-height: 44px; }
}