@font-face {
    font-family: 'IBM Plex Sans';
    src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --oxy-heading-blue: #0000ae;
    --oxy-link-blue: #0345bf;
    --oxy-accent: #3366ff;
    --oxy-accent-hover: #0037dd;
    --oxy-active-red: #b00000;
    --oxy-header-bg: #e3e4e8;
    --oxy-section-bg: #f9f9f9;
    --oxy-footer-bg: #171717;
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #252525;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--oxy-heading-blue);
}

a {
    color: var(--oxy-link-blue);
}
a:hover {
    color: var(--oxy-accent-hover);
}

/* Navbar — pure-CSS sticky (no JS needed), so it also renders correctly in
   design tools like Bootstrap Studio that don't execute page scripts */
header {
    position: sticky;
    top: 0;
    z-index: 1020;
}
.oxy-navbar {
    background-color: var(--oxy-header-bg);
}
.oxy-navbar .navbar-toggler {
    display: flex !important;
    border: 0;
    order: -1;
    margin-right: 1rem;
}
.oxy-navbar .navbar-brand {
    font-weight: 700;
    color: var(--oxy-active-red);
    display: flex;
    align-items: center;
}
.oxy-logo-img {
    height: 36px;
    width: auto;
}
.oxy-navbar .nav-link {
    font-weight: 500;
    color: #252525;
}
.oxy-navbar .nav-link.active,
.oxy-navbar .nav-link:hover {
    color: var(--oxy-active-red);
}

/* Hero carousel — sized to the source images' own aspect ratio, no cropping */
.oxy-hero .carousel-item {
    aspect-ratio: 1300 / 530;
    background-size: cover;
    background-position: center;
}
.oxy-hero .carousel-caption {
    background: rgba(0, 0, 0, .5);
    text-align: left;
    left: 5%;
    right: auto;
    bottom: 10%;
    max-width: 90%;
    padding: .5rem 1rem;
}
.oxy-hero .carousel-caption.oxy-caption-right {
    left: auto;
    right: 5%;
    text-align: right;
}

/* Sections */
.oxy-section-tint {
    background-color: var(--oxy-section-bg);
}

.oxy-photo-heading {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
    text-align: center;
}
.oxy-photo-heading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(245, 240, 240, .45);
}
.oxy-photo-heading h2 {
    position: relative;
    margin: 0;
}

/* Meeting entries: flat, no card chrome */
.oxy-meeting {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}
.oxy-meeting img {
    max-width: 100%;
    height: auto;
}

/* Info bar (footer content block) */
.oxy-info-bar {
    background-color: var(--oxy-section-bg);
    padding: 2rem 0;
}
.oxy-info-bar h3 {
    font-size: 1.1rem;
}

/* Footer */
.oxy-footer {
    background-color: var(--oxy-footer-bg);
    color: #fff;
    padding: 1.25rem 0;
    font-size: .9rem;
    text-align: center;
}
.oxy-footer a {
    color: #fff;
}

.oxy-btn-primary {
    background-color: var(--oxy-accent);
    border-color: var(--oxy-accent);
    color: #fff;
}
.oxy-btn-primary:hover {
    background-color: var(--oxy-accent-hover);
    border-color: var(--oxy-accent-hover);
    color: #fff;
}

/* Scroll-triggered zoom-in reveal, matching the original site's banner images.
   Base state stays fully visible — JS opts elements into the hidden pre-reveal
   state via .oxy-zoom-armed, so content never disappears without JS running
   (no-JS visitors, crawlers, design tools like Bootstrap Studio). */
.oxy-zoom.oxy-zoom-armed {
    opacity: 0;
    transform: scale(.3);
    transition: opacity 1s ease, transform 1s ease;
}
.oxy-zoom.oxy-zoom-armed.oxy-zoom-in {
    opacity: 1;
    transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .oxy-zoom.oxy-zoom-armed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}