/* Design tokens and base typography for the Zeinet-style layout.
   Colours stay on the Sifanet brand; --primary and --secondary can be
   overridden from SiteConfiguration in base.html. */
:root {
    --primary: #eb711d;
    --primary-dark: #cf5e0e;
    --secondary: #023e58;
    --navy: #012a3d;
    --navy-deep: #011c29;
    --surface: #f5f7fa;
    --text: #6a6d7a;
    --heading: var(--secondary);
    --border: #e3e8ec;
    --white: #ffffff;
    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --navy-rgb: 1, 42, 61;
    --section-y: 120px;
    --shadow: 0 10px 60px rgba(1, 42, 61, 0.08);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color: var(--heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

a { color: var(--primary); text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--secondary); }
img { max-width: 100%; }

::selection { background: var(--primary); color: var(--white); }

/* Bootstrap container widened to the reference's 1200px content column. */
@media (min-width: 1200px) {
    .container { max-width: 1200px; }
}

.zn-section { padding: var(--section-y) 0; position: relative; }
.zn-section--surface { background: var(--surface); }
.zn-section--navy { background: var(--secondary); color: rgba(255, 255, 255, 0.75); }
.zn-section--navy h2, .zn-section--navy h3 { color: var(--white); }

@media (max-width: 991px) {
    :root { --section-y: 80px; }
}

@media (max-width: 575px) {
    :root { --section-y: 64px; }
}

/* Faint contour pattern used behind light sections in the reference,
   drawn in CSS so no image file is needed. */
.zn-pattern {
    background-color: var(--surface);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(2, 62, 88, 0.035) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(2, 62, 88, 0.035) 0 2px, transparent 3px);
    background-size: 46px 46px, 64px 64px;
}

p { margin-bottom: 1.5em; }

/* Inline Tabler icons from static/icons/sprite.svg (see {% icon %}). */
.zn-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* Reveal-on-scroll: elements start hidden only once JS confirms it runs. */
.js .zn-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .zn-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .zn-reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

.visually-hidden-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 10000; background: var(--white); padding: 8px 16px; }
.zn-flip { transform: scaleX(-1); }