/* ==========================================================================
   Sihatuna core — page surface, typography rhythm, focus and motion rules
   shared by every page. Component skins live in components.css.
   ========================================================================== */

html {
    color-scheme: light;
}

html[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* The footer sits at the foot of the window, not at the foot of the content.

   A short page — an empty list, a one-card result, a sign-in form — left the
   footer floating with the page background showing underneath it. The body is a
   column, the main region takes the slack, and the footer lands on the bottom edge
   whether the page is short or scrolls for a mile. 100dvh rather than 100vh so a
   phone's collapsing address bar does not leave a gap either. */
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

body > footer,
body > .site-footer {
    flex-shrink: 0;
}

body {
    background-color: var(--care-surface-soft);
    /* A whisper-quiet medical motif — cross, pulse line, capsule dot — tiled
       behind every page. Strokes sit at 4-5% opacity so text panels stay
       clean; the dark theme swaps in a white-stroke variant below. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%2308765D' stroke-opacity='.05' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 20v20M20 30h20'/%3E%3Cpath d='M84 118h14l7-16 9 30 7-14h15'/%3E%3C/g%3E%3Cg fill='none' stroke='%234AA0D8' stroke-opacity='.05' stroke-width='2'%3E%3Ccircle cx='124' cy='44' r='8'/%3E%3Crect x='36' y='96' width='10' height='22' rx='5' transform='rotate(-35 41 107)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 160px 160px;
}

[data-bs-theme="dark"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 20v20M20 30h20'/%3E%3Cpath d='M84 118h14l7-16 9 30 7-14h15'/%3E%3Ccircle cx='124' cy='44' r='8'/%3E%3Crect x='36' y='96' width='10' height='22' rx='5' transform='rotate(-35 41 107)'/%3E%3C/g%3E%3C/svg%3E");
}

::selection {
    color: #fff;
    background: var(--sihatuna-green);
}

/* Watermark helper: paints the Syria outline behind a section at whisper
   volume. The element keeps its own stacking context so content stays on top. */
.sihatuna-watermark {
    position: relative;
    overflow: hidden;
}

.sihatuna-watermark::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -6rem;
    width: min(36rem, 60vw);
    aspect-ratio: 600 / 330;
    background: url("/images/brand/syria-outline.svg") center / contain no-repeat;
    opacity: .06;
    transform: translateY(-50%);
    pointer-events: none;
}

.sihatuna-watermark > * {
    position: relative;
}

/* Global reduced-motion clamp. The !important is deliberate and documented:
   this is the accessibility override that must beat every third-party and
   component transition, including Bootstrap's. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}