/* ==========================================================================
   EOHU Air microsite stylesheet
   ==========================================================================
   Converted from the legacy /lyme/css/{normalize,bootstrap.min,style,
   top-social}.css to pure CSS (no Bootstrap, no JavaScript). WCAG 2.0 AA:
   contrast ≥ 4.5:1 (large text ≥ 3:1), visible focus, keyboard-accessible
   CSS-only nav.
   ========================================================================== */

/* ── 1. Fonts (moved into the theme assets dir) ── */
@font-face {
    font-family: 'robotolight';
    src: url('../assets/fonts/Roboto-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('../assets/fonts/Roboto-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotobold';
    src: url('../assets/fonts/Roboto-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ── 2. Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
img { border: 0; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
ul { list-style: none; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'robotoregular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    background: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: #333; font-weight: normal; }

a {
    color: #0076c0;
    text-decoration: underline;
    transition: color 150ms ease-in-out;
}
a:hover { color: #00467f; }
a:focus-visible,
summary:focus-visible,
input:focus-visible {
    outline: 3px solid #005a9e;
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: #fff;
    color: #005a9e;
    padding: .75rem 1rem;
    font-weight: bold;
}
.skip-link:focus { left: 0; top: 0; }

/* ── 3. Layout (sidebar + main, no floats) ── */
body {
    display: grid;
    grid-template-columns: 25% 75%;
}
.top-contact { grid-column: 1 / -1; }
.sidebar-menu { grid-column: 1; }
.main-content { grid-column: 2; min-width: 0; }
.responsive-header { display: none; }

/* ── 4. Print-only header (shown only when printing) ── */
.print-logo { display: none; }

/* ── 5. Top contact bar ── */
.top-contact {
    background-color: #085dad;
    color: #fff;
    line-height: 53px;
}
.top-contact-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .25rem 1.5rem;
    padding: 0 10px 0 20px;
}
.contact-list { display: flex; align-items: center; }
.contact-list a { color: #fff; text-decoration: none; }
.contact-list a:hover { color: #d9e6f5; text-decoration: underline; }
.top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    color: #085dad;
    vertical-align: middle;
}
.contact-list .top-icon { margin-right: .5rem; }
.top-social { display: flex; align-items: center; gap: .75rem; }
.top-social a.top-icon { color: #085dad; }
.top-social a.top-icon:hover { background-color: #d9e6f5; }

/* ── 6. Sidebar (desktop) ── */
.sidebar-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: #666;
    color: #fff;
}
.top-section {
    background-color: #fbbb3a;
    text-align: center;
    padding: 4px 0 0;
}
.profile-image { width: 100%; display: block; margin-bottom: 2px; }
.profile-title {
    display: block;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 4px 10px;
}
h2.profile-title { font-size: 20px; text-transform: uppercase; padding-bottom: 6px; }
h3.profile-title { font-size: 18px; padding-top: 5px; padding-bottom: 5px; }

.main-navigation-wrap { padding-bottom: 2rem; }
.main-navigation li { display: block; }
.main-navigation li a {
    display: block;
    padding: 4px 10px 4px 20px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.main-navigation li a:hover { background-color: #ccc; color: #333; }
.main-navigation li a.active { background-color: #ccc; color: #333; }
.main-navigation li a.nav-link--lang {
    margin-top: 1rem;
    border-top: 1px solid #8a8a8a;
    padding-top: .6rem;
    font-weight: bold;
}

/* ── 7. Mobile responsive header + CSS-only menu ── */
.responsive-header { background: #fff; }
.responsive-header .top-section { padding-top: 0; }
.responsive-header .profile-content { text-align: center; }
.responsive-header .profile-image { width: 100px; height: 100px; margin: .5rem auto; object-fit: contain; }
.mobile-menu summary.toggle-menu {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ccc;
    color: #333;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    list-style: none;
}
.mobile-menu summary.toggle-menu::-webkit-details-marker { display: none; }
.mobile-menu summary.toggle-menu:hover { background: #333; color: #ccc; }
.mobile-menu[open] .responsive-menu { padding-bottom: 1rem; }
.responsive-menu .main-navigation li a { color: #333; }
.responsive-menu .main-navigation li a:hover,
.responsive-menu .main-navigation li a.active { background: #ccc; color: #333; }

/* ── 8. Main content ── */
.main-content { padding-top: 110px; }
.banner-bg {
    position: relative;
    background: url('../assets/heat/img/intro_image.jpg') no-repeat right top;
    padding-bottom: 0;
}
.content-wrapper {
    padding: 0 30% 0 80px;
}
.page-section h1 {
    font-size: 36px;
    padding: 18px 0 8px;
    color: #5c6670;
    font-family: 'robotobold';
}
.page-section h1.center { text-align: center; padding-top: 20px; }
.page-section h2 {
    font-size: 22px;
    padding: 8px 0 6px;
    color: #666;
    font-family: 'robotolight';
}
.page-section h3 {
    font-size: 20px;
    line-height: 1.5;
    padding: 16px 0 6px;
    color: #666;
}
.page-section h4 { font-size: 24px; padding-top: 10px; color: #666; }
.page-section h6 { font-size: 14px; padding: 15px 0 6px; color: #333; font-family: 'robotolight'; }
.page-section p { padding: 5px 0; }
.page-section ul { list-style: square; list-style-position: outside; margin: 0; padding-left: 40px; }
.page-section li { margin: 0 0 4px; }
.page-section p.highlighted_text {
    background-color: #f8dcf0;
    padding: 20px;
    margin: 20px 0;
}
.emergency {
    background-color: #ffcc99;
    margin-top: 20px;
    padding: 12px;
}
.emergency h1, .emergency h2 { color: #b00000; }
.emergency h1 { padding-top: 0; }

/* Content image & video utilities (converted from Bootstrap img-responsive /
   img-center / img-right and embed-responsive). */
.content-img { max-width: 100%; height: auto; }
.content-img--center { display: block; margin: 0 auto; }
.content-img--right { float: right; margin: 0 0 1rem 1.5rem; }
.video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1rem 0;
}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 9. Footer / tagline ── */
.tagline { text-align: center; margin-top: 40px; border-top: 2px solid #ccc; padding-top: 20px; }
.tagline-inner { margin: 0 auto; max-width: 760px; }
.topnav-link { padding: 6px 0; display: none; }
@media screen and (max-width: 992px) {
    .topnav-link { display: block; }
}
.topnav-link a { color: #5f6d7e; font-weight: bold; text-decoration: none; }
.topnav-link a:hover { color: #333; text-decoration: underline; }
.social-links { display: flex; justify-content: center; gap: 1rem; margin: .5rem 0 1rem; }
.social-links a { color: #0076c0; display: inline-flex; }
.social-links a:hover { color: #00467f; }
.locations-text { font-size: 14px; color: #333; }
#footer p { margin: 10px 0; }
#footer p.copyright-text { font-size: 14px; color: #5f6d7e; }
.footer-box p a { color: #5f6d7e; }
.footer-box p a:hover { color: #0076c0; }
.print-footer { margin-top: 1rem; }

/* ── 10. Responsive ── */
@media screen and (max-width: 1290px) {
    .main-content { width: 100%; }
}

@media screen and (max-width: 992px) {
    body { grid-template-columns: 1fr; }
    .sidebar-menu { display: none; }
    .responsive-header { display: block; }
    .main-content { width: 100%; padding-top: 0; }
    .banner-bg { background: none; padding: 0 30px 30px; }
    .content-wrapper { padding: 0; }
    .content-img--right { float: none; margin: 1rem 0; }
    h2.profile-title { font-size: 20px; }
    h3.profile-title { font-size: 18px; }
}

@media screen and (max-width: 600px) {
    .banner-bg { padding: 0 0 30px; }
    .top-contact { line-height: 44px; }
    .top-contact-inner { padding: 0 10px; }
    .content-wrapper { padding: 0 8px; }
    .page-section h1 { font-size: 28px; }
    .page-section h2 { font-size: 20px; }
    .page-section h3 { font-size: 18px; line-height: 1.4; }
    .locations-text { font-size: 12px; }
    #footer p.copyright-text { font-size: 12px; }
}

/* ── 11. Print (mirrors the legacy print stylesheet) ── */
@media print {
    @page { margin: 1.0cm 2.0cm; }
    body { font-size: 10pt; line-height: 12pt; display: block; }
    .top-contact, .sidebar-menu, .responsive-header, .tagline,
    .skip-link, .social-links, .topnav-link { display: none; }
    .main-content, .banner-bg, .content-wrapper { width: 100%; padding: 0; margin: 0; }
    .page-section h1 { font-size: 18pt; line-height: 20pt; text-align: center; color: #000; }
    .page-section h2 { font-size: 13pt; line-height: 17pt; color: #000; }
    .page-section h3 { font-size: 12pt; line-height: 16pt; }
    .page-section p, .page-section li { font-size: 10pt; }
    .print-logo { display: block; }
    .print-logo img { display: block; margin: 0 auto; }
    .print-footer img { padding-bottom: 10px; }
    .page-section ul { list-style: square; list-style-position: outside; margin-bottom: 8px; }
    .page-section li { padding: 2px; margin-left: 40px; margin-bottom: 4px; }
    .content-img, .video-wrap { display: none; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
    a { word-wrap: break-word; }
}