/* ==========================================================================
   S.A.R.A. site styles - layered on top of Bootstrap 4.5.3
   Palette is taken from the logo: navy + red.
   ========================================================================== */

:root {
    --sara-navy: #1b3554;
    --sara-navy-dark: #12243a;
    --sara-red: #c8202a;
    --sara-red-dark: #a61a23;
    --sara-ink: #1d2733;
    --sara-muted: #5b6673;
    --sara-bg: #f5f7fa;
    --sara-line: #e1e6ec;
    --sara-radius: 12px;
    --sara-shadow: 0 1px 2px rgba(18, 36, 58, .06), 0 4px 14px rgba(18, 36, 58, .06);
    --sara-shadow-hover: 0 2px 4px rgba(18, 36, 58, .08), 0 10px 26px rgba(18, 36, 58, .12);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--sara-ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--sara-navy); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
a { color: var(--sara-red); }
a:hover { color: var(--sara-red-dark); }
.lead { font-weight: 400; }
.text-muted { color: var(--sara-muted) !important; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--sara-navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid rgba(200, 32, 42, .45); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 600; padding: .6rem 1.25rem; }
.btn-sm { padding: .4rem .95rem; }
.btn-lg { padding: .8rem 1.75rem; }
.btn-primary { background: var(--sara-red); border-color: var(--sara-red); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active { background: var(--sara-red-dark); border-color: var(--sara-red-dark); }
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(200, 32, 42, .35); }
.btn-outline-navy { color: var(--sara-navy); border: 2px solid var(--sara-navy); background: transparent; }
.btn-outline-navy:hover { color: #fff; background: var(--sara-navy); border-color: var(--sara-navy); }
.btn-outline-light { border-width: 2px; }

/* ---------- Header / nav ---------- */
.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--sara-line);
    box-shadow: 0 1px 8px rgba(18, 36, 58, .05);
}
.site-header .navbar { padding-top: .35rem; padding-bottom: .35rem; }
.navbar-brand { display: flex; align-items: baseline; padding: .4rem 0; }
.brand-mark { font-weight: 800; font-size: 1.45rem; color: var(--sara-red); letter-spacing: .02em; }
.brand-sub { margin-left: .6rem; font-size: .8rem; font-weight: 600; color: var(--sara-navy); text-transform: uppercase; letter-spacing: .06em; }
.site-header .navbar .navbar-nav .nav-link { color: var(--sara-navy); font-weight: 600; padding: .85rem .6rem; position: relative; white-space: nowrap; }
@media (min-width: 1200px) { .site-header .navbar .navbar-nav .nav-link { padding-left: .85rem; padding-right: .85rem; } }
.site-header .navbar .navbar-nav .nav-link:hover { color: var(--sara-red); }
.site-header .navbar .navbar-nav .nav-item.active .nav-link { color: var(--sara-red); }
.site-header .navbar .navbar-nav .btn.nav-cta { color: #fff; padding: .4rem .95rem; }
@media (min-width: 992px) {
    .site-header .navbar .navbar-nav .nav-item.active .nav-link::after {
        content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .35rem; height: 3px; border-radius: 2px; background: var(--sara-red);
    }
}
.nav-cta { white-space: nowrap; }
.site-header .navbar .navbar-nav .btn.nav-cta.active, .site-header .navbar .navbar-nav .btn.nav-cta.active:hover { background: var(--sara-red-dark); border-color: var(--sara-red-dark); box-shadow: 0 0 0 3px rgba(200, 32, 42, .25); }
@media (max-width: 991.98px) {
    .site-header .navbar .navbar-nav .nav-link { padding: .65rem 0; border-top: 1px solid var(--sara-line); }
    .site-header .navbar .navbar-nav .nav-item:first-child .nav-link { border-top: 0; }
    .site-header .navbar .navbar-nav .btn.nav-cta { padding: .6rem 1rem; }
    .site-header .navbar-collapse { padding-bottom: .75rem; }
    .nav-cta { display: block; text-align: center; }
}

/* ---------- Hero (home) ---------- */
.hero {
    position: relative;
    padding: 4rem 0 6.5rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .72) 32%, rgba(255, 255, 255, .15) 62%, rgba(255, 255, 255, 0) 100%),
        url('/assets/images/2010%20Rubble2.jpg') center / cover no-repeat;
}
.hero-logo { max-width: 440px; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(255, 255, 255, .8)); }
.hero-tagline { font-size: 1.35rem; font-weight: 700; font-style: italic; color: var(--sara-navy); margin: 1.25rem 0 1.75rem; max-width: 30rem; text-shadow: 0 1px 8px rgba(255, 255, 255, .9); }
.hero .btn { margin: 0 .5rem .6rem 0; }
@media (max-width: 767.98px) {
    .hero { padding: 2.25rem 0 5.5rem; background:
        linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, .35) 100%),
        url('/assets/images/2010%20Rubble2.jpg') center / cover no-repeat; }
    .hero-tagline { font-size: 1.15rem; }
}

/* ---------- Page header (inner pages) ---------- */
.page-header {
    background: linear-gradient(135deg, var(--sara-navy-dark) 0%, var(--sara-navy) 100%);
    color: #fff;
    padding: 3rem 0 2.75rem;
}
.page-header h1 { color: #fff; font-size: 2.4rem; margin-bottom: .5rem; }
.page-header .lead { color: rgba(255, 255, 255, .85); max-width: 42rem; margin-bottom: 0; }
.page-header a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
.page-header a:hover { text-decoration-color: #fff; color: #fff; }
.page-header .btn { text-decoration: none; }
@media (max-width: 575.98px) { .page-header h1 { font-size: 1.9rem; } }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-tight { padding: 2.5rem 0; }
.section-alt { background: var(--sara-bg); }
.section-title { font-size: 2rem; margin-bottom: .75rem; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sara-red); margin-bottom: .5rem; }
.band-navy { background: linear-gradient(135deg, var(--sara-navy-dark) 0%, var(--sara-navy) 100%); color: #fff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(255, 255, 255, .88); }
.band-navy .eyebrow { color: #ff8a90; }
.badge-new { background: var(--sara-red); color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; vertical-align: middle; }

/* ---------- Quick-link cards (home) ---------- */
.quick-links { margin-top: -4rem; position: relative; z-index: 2; }
.action-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--sara-line); border-top: 4px solid var(--sara-red);
    border-radius: var(--sara-radius); padding: 1.5rem; box-shadow: var(--sara-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.action-card:hover { box-shadow: var(--sara-shadow-hover); transform: translateY(-2px); }
.action-card.accent-navy { border-top-color: var(--sara-navy); }
.action-card .icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(200, 32, 42, .09); color: var(--sara-red); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.action-card.accent-navy .icon { background: rgba(27, 53, 84, .09); color: var(--sara-navy); }
.action-card .icon svg { width: 24px; height: 24px; }
.action-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.action-card p { color: var(--sara-muted); font-size: .95rem; flex-grow: 1; }
.action-card .card-link { font-weight: 700; text-decoration: none; }
.action-card .card-link::after { content: " \2192"; }
.action-card .card-link-secondary { font-size: .9rem; color: var(--sara-muted); }
@media (min-width: 1200px) { .site-header .navbar .navbar-nav .nav-item.active .nav-link::after { left: .85rem; right: .85rem; } }
@media (max-width: 991.98px) { .quick-links { margin-top: -3.5rem; } }

/* ---------- Check list ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: .45rem 0 .45rem 2rem; border-bottom: 1px solid var(--sara-line); }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
    content: ""; position: absolute; left: 0; top: .78rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--sara-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.panel { background: #fff; border: 1px solid var(--sara-line); border-radius: var(--sara-radius); padding: 1.75rem; box-shadow: var(--sara-shadow); }
.panel h3 { font-size: 1.15rem; margin-bottom: .75rem; }

/* ---------- Feature tiles (workshops) ---------- */
.stat-tile { text-align: center; padding: 1.25rem 1rem; }
.stat-tile .stat { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--sara-red); }
.stat-tile .stat-label { color: var(--sara-muted); font-size: .95rem; }
.topic-tile {
    height: 100%; background: #fff; border: 1px solid var(--sara-line); border-left: 5px solid var(--sara-navy);
    border-radius: var(--sara-radius); padding: 1.4rem 1.5rem; box-shadow: var(--sara-shadow);
}
.topic-tile h3 { font-size: 1.2rem; margin: 0; }
.topic-tile .level { display: inline-block; margin-top: .45rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sara-red); }

/* ---------- Media ---------- */
.img-card { border-radius: var(--sara-radius); box-shadow: var(--sara-shadow); background: #fff; border: 1px solid var(--sara-line); padding: .75rem; max-width: 100%; height: auto; }
.coin-pair img { width: 100%; height: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sara-navy-dark); color: rgba(255, 255, 255, .8); padding: 3.25rem 0 1.25rem; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-brand { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: .03em; }
.footer-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .55); font-weight: 700; margin-bottom: .75rem; }
.site-footer li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 1.5rem; padding-top: 1.1rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* ---------- Embedded legacy form (coin order) ---------- */
.form-embed { background: #fff; border: 1px solid var(--sara-line); border-radius: var(--sara-radius); box-shadow: var(--sara-shadow); padding: 1rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .action-card, .action-card:hover { transition: none; transform: none; }
}

/* ---------- Facilities page ---------- */
.photo-card { margin: 0; background: #fff; border: 1px solid var(--sara-line); border-radius: var(--sara-radius); box-shadow: var(--sara-shadow); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.photo-card a.photo-link { display: block; background: var(--sara-navy-dark); }
.photo-card img { display: block; width: 100%; height: auto; transition: opacity .2s ease; }
.photo-card a.photo-link:hover img { opacity: .92; }
.photo-card figcaption { padding: 1.25rem 1.5rem 1.5rem; }
.photo-card figcaption h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.photo-card figcaption p { color: var(--sara-muted); margin-bottom: 0; }
.photo-card .photo-note { display: block; margin-top: .6rem; font-size: .8rem; color: var(--sara-muted); }
.photo-placeholder { display: flex; align-items: center; justify-content: center; min-height: 170px; background: repeating-linear-gradient(135deg, #eef1f5, #eef1f5 12px, #e6eaf0 12px, #e6eaf0 24px); color: var(--sara-muted); font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Nav drop-down ---------- */
.site-header .dropdown-menu { border: 1px solid var(--sara-line); border-radius: 10px; box-shadow: var(--sara-shadow-hover); padding: .4rem 0; }
.site-header .dropdown-item { color: var(--sara-navy); font-weight: 600; padding: .5rem 1.1rem; }
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus { background: var(--sara-bg); color: var(--sara-red); }
.site-header .dropdown-item.active, .site-header .dropdown-item:active { background: rgba(200, 32, 42, .08); color: var(--sara-red); }
@media (min-width: 992px) {
    .site-header .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
@media (max-width: 991.98px) {
    .site-header .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 .25rem 1rem; background: transparent; }
    .site-header .dropdown-item { padding: .45rem 0; }
}