/* The site's shared look (PROM_21397), taken from the front page (PROM_21382).
   Loaded by includes/header.php on every page, after Bootstrap 4.5.2.
   The fonts (Cormorant Garamond, Great Vibes, Mulish) are linked in includes/header.php.

   Part 1 is the frame every page shares: colours, body, header and menu, fixed footer.
   Part 2 restyles page content, and only inside .page-body (the wrapper header.php opens).
   index.php opens .front-body instead, so Part 2 never touches the front page.
   Part 2 uses :where(.page-body), which adds no specificity: a page's own class or inline
   style still wins over it. */

/* ── Part 1 · the frame ─────────────────────────────── */
:root {
    --night: #13213a;
    --night-2: #1f3557;
    --sky-deep: #2c4f7c;
    --sky: #4d77a8;
    --sky-light: #7da3cf;
    --mist: #eaf1f9;
    --cloud: #fbfdff;
    --ink: #24344d;
    --ink-soft: #5b6b82;
    --gold: #c8a45a;
    --gold-soft: #f3e7c9;
    --rose: #fbe6e6;
    --rose-ink: #8a2f3b;
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(19, 33, 58, .06), 0 2px 8px rgba(19, 33, 58, .06);
    --shadow-md: 0 2px 4px rgba(19, 33, 58, .05), 0 10px 30px rgba(19, 33, 58, .10);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --script: 'Great Vibes', 'Segoe Script', cursive;
    --sans: 'Mulish', 'Helvetica Neue', sans-serif;
    --footer-space: 80px;
}

html, body { height: auto; }
/* body's background is painted over html's box: at least the screen's height, so a short page
   has no white band under its content (PROM_21409) */
html { min-height: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    text-align: center;
    background:
        radial-gradient(ellipse 60% 40% at 12% 18%, rgba(255,255,255,.9), transparent 70%),
        radial-gradient(ellipse 50% 35% at 88% 32%, rgba(255,255,255,.8), transparent 70%),
        linear-gradient(180deg, #dce8f5 0, #eef4fb 520px, #ffffff 1100px);
    background-repeat: no-repeat;
    /* the fixed footer never covers a page's last line */
    padding-bottom: var(--footer-space);
}
a { color: var(--sky-deep); }
a:hover { color: var(--night); }

/* Header */
#header {
    width: 100%;            /* full width inside a flex body too (admin/admin.css) */
    box-sizing: border-box;
    background: linear-gradient(180deg, #121212 0%, #191818 55%, var(--night) 100%);
    padding: 6px 12px 18px;
    box-shadow: 0 6px 24px rgba(19, 33, 58, .25);
    position: relative;
    text-align: center;     /* the logo stays centred where a page loads Bootstrap after this file (PROM_21409) */
}
#header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    opacity: .7;
}
/* admin.php and archives.php print a second <body class="admin-page"> after header.php, and
   admin/admin.css gives that body a 20px margin, which left a pale frame round the header
   (PROM_21437). The header touches the edges; the 20px moves to the content beside it. */
html body.admin-page { margin: 0; }
html body.admin-page > .page-body { margin: 0 20px 20px; }
#header .logo { max-height: 200px; max-width: 100%; width: auto; height: auto; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.menu + .menu { margin-top: 8px; }
.menu a {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    color: #eaf3ff;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(161, 236, 254, .35);
    background: rgba(161, 236, 254, .08);
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.menu a:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--night);
    transform: translateY(-1px);
}
.menu.admin a { border-style: dashed; font-size: 13px; }

/* Fixed footer */
.fixed-footer {
    position: fixed; right: 0; bottom: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px;
    background: rgba(19, 33, 58, .92);
    backdrop-filter: blur(6px);
    border-top-left-radius: 16px;
    box-shadow: -2px -2px 14px rgba(19, 33, 58, .3);
}
.fixed-footer a {
    font-size: 13px; font-weight: 600; color: #dbe9fb; text-decoration: none;
    padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(219, 233, 251, .25);
}
.fixed-footer a:hover { background: var(--gold-soft); color: var(--night); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Part 2 · page content (not the front page) ─────── */
.page-body {
    min-height: 100%;
    text-align: center;
    padding-top: 8px;
    animation: fade .5s ease-out both;
}

/* Headings */
:where(.page-body) h1,
:where(.page-body) h2,
:where(.page-body) h3 {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--night-2);
}
:where(.page-body) h1 { font-size: 2.6rem; }
:where(.page-body) h2 { font-size: 2.2rem; }
:where(.page-body) h3 { font-size: 1.8rem; }
:where(.page-body) h4,
:where(.page-body) h5 { color: var(--night-2); }

/* Boxes and cards */
:where(.page-body) .card {
    border-radius: var(--radius);
    border: 1px solid rgba(77, 119, 168, .14);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
:where(.page-body) .card-header {
    color: #fff;
    background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 55%, var(--sky-light) 100%);
    border-bottom: 2px solid var(--gold);
}

/* Buttons */
:where(.page-body) .btn { border-radius: 999px; }
:where(.page-body) .btn-primary {
    background: linear-gradient(135deg, #1e6fd9 0%, #007BFF 50%, #3d9bff 100%);
    border-color: #1e6fd9;
}
a.buttonBlue, a.button4 {
    display: inline-block;
    margin: 5px 0.1em 0.1em 0;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(77, 119, 168, .35);
    box-sizing: border-box;
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--sky-deep);
    background: var(--mist);
    text-align: center;
    transition: background .2s, border-color .2s, color .2s;
}
a.button4 { font-size: 18px; background: #fff; }
a.buttonBlue:hover, a.button4:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--night);
}
@media all and (max-width: 30em) {
    a.buttonBlue, a.button4 { display: block; margin: 0.2em auto; }
}

/* Form inputs */
:where(.page-body) input[type="text"],
:where(.page-body) input[type="email"],
:where(.page-body) input[type="password"],
:where(.page-body) input[type="tel"],
:where(.page-body) input[type="number"],
:where(.page-body) input[type="date"],
:where(.page-body) select,
:where(.page-body) textarea,
:where(.page-body) .form-control {
    border: 1px solid rgba(77, 119, 168, .35);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ink);
}
:where(.page-body) input:focus,
:where(.page-body) select:focus,
:where(.page-body) textarea:focus,
:where(.page-body) .form-control:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(77, 119, 168, .2);
}

/* Tables */
:where(.page-body) th { color: var(--night-2); }
:where(.page-body) .table thead th {
    background: var(--mist);
    border-bottom: 2px solid var(--gold);
}

/* Old helpers that pages still use */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 360px;
    background-color: var(--night);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.question-mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--sky);
    color: #fff;
    text-align: center;
    line-height: 20px;
    margin-bottom: 2px;
}

#topcontainer { position: relative; width: 100%; }
#right-div {
    width: 500px;
    position: absolute;
    right: 0;
    background-color: #ddd;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    top: 100%;
    cursor: pointer;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 1em;
    background: rgba(0, 0, 0, 0.8);
}
.lightbox:target { display: block; }
.lightbox span {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}