:root {
    --uoe-blue: #041E42;
    --uoe-red: #D50032;
    --uoe-light-blue: #0072CE;
    --uoe-grey: #F2F2F2;
    --text-color: #333;
    --heading-font: 'Roboto', sans-serif;
    --body-font: 'Open Sans', sans-serif;
}

/* Emergency safeguard: ensure images are never stretched by CSS rules
   This forces images to render at their natural aspect ratio unless a
   specific class intentionally overrides it. Use !important to override
   any earlier rules that might be causing distortion. */
img, img.img-fluid, img.card-img-top, img.outing-img, img.news-thumb-img, img.research-img, img.pi-img, .banner-img {
    max-width: 100%;
    height: auto !important;
    width: auto;
    object-fit: cover;
}


/* News thumbnail and card padding moved from inline styles */
.news-thumb-padding {
    padding: 6px !important;
}
.news-thumb-img {
    max-height: 100px;
    object-fit: cover;
}
.news-page-thumb-img {
    max-height: 140px;
    object-fit: cover;
}
.news-card-content {
    padding: 6px !important;
}

body {
    /* Reset default browser margins so full-width elements (like the
       banner) truly span the viewport with no white gaps. */
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    color: var(--text-color);
    line-height: 1.6;
}

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

/* Header */
header {
    overflow: hidden;
}

.uoe-top-bar {
    background-color: white;
    color: #333;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.uoe-logo {
    /* Set a balanced, legible logo height site-wide (reduced per user request) */
    height: 32px;
}

/* Ensure the UoE logo inside the top bar is strictly constrained and doesn't
   scale unexpectedly due to other rules. Keep this `!important` so it wins
   over broader img selectors but matches `.uoe-logo` above. */
.uoe-top-bar .uoe-logo {
    height: 80px !important;
    width: auto !important;
    display: inline-block;
}

.banner-img {
    width: 100%;
    display: block;
    max-height: 315px; /* cap height so banner can't become too tall */
    height: auto;
    object-fit: cover;
    object-position: center 30%;
}

.lab-banner {
    /* Make the banner span the full viewport width (no side gaps), while
       using cover so the image fills the element without stretching. The
       margin-left trick allows this element to escape any centered container
       padding and truly reach the viewport edges. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 3;
    padding-bottom: 18%; /* fallback approximation for older browsers */
    max-height: 315px;   /* keep the banner from growing too high on large screens */
    min-height: 140px;   /* ensure the banner never collapses too small */
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../images/lab_banner.jpg?v=4');
}

.lab-header {
    background-color: #007480; /* Teal color from image */
    padding: 1.5rem 0;
    color: white;
}

.lab-header h1 {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white !important; /* Override any other color */
}

.uoe-nav {
    background-color: white;
    border-bottom: 1px solid #dee2e6;
}

.uoe-nav .nav-link {
    color: #333;
    font-weight: 600;
    padding: 1rem 1.5rem;
    text-transform: none; /* The image shows normal case or maybe capitalized, let's stick to what we have or adjust */
    font-size: 1.1rem;
    letter-spacing: normal;
}

.uoe-nav .nav-link:hover, .uoe-nav .nav-link.active {
    color: #007480; /* Match teal */
    background-color: transparent;
}

.uoe-nav .navbar-toggler {
    border-color: var(--uoe-blue);
}

.uoe-nav .navbar-toggler-icon {
    filter: none; /* Use default dark icon since bg is light */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%284, 30, 66, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hero Section */
.hero-section {
    background-color: var(--uoe-grey);
    padding: 4rem 0;
    border-bottom: 5px solid var(--uoe-red);
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 2rem;
}

/* Cards */
.card {
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
}

.hover-shadow:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.card-title {
    color: var(--uoe-blue);
    font-weight: bold;
}

.btn-uoe {
    background-color: var(--uoe-blue);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
}

.btn-uoe:hover {
    background-color: #031632;
    color: white;
}

.btn-outline-uoe {
    border: 2px solid var(--uoe-blue);
    color: var(--uoe-blue);
    border-radius: 0;
}

.btn-outline-uoe:hover {
    background-color: var(--uoe-blue);
    color: white;
}

/* Footer */
.uoe-footer {
    background-color: #151515;
    color: white;
    padding: 3rem 0;
    margin-top: 4rem;
    font-size: 0.9rem;
}

.uoe-footer h1, .uoe-footer h2, .uoe-footer h3, .uoe-footer h4, .uoe-footer h5, .uoe-footer h6 {
    color: white !important;
}

.uoe-footer a {
    color: #ccc;
    text-decoration: none;
}

.uoe-footer a:hover {
    color: white;
    text-decoration: underline;
}

.footer-logo {
    max-width: 200px;
    margin-bottom: 1rem;
}

/* Utility */
.bg-uoe-blue {
    background-color: var(--uoe-blue) !important;
}

.text-uoe-red {
    color: var(--uoe-red) !important;
}

.section-padding {
    padding: 4rem 0;
}

/* Publications Styles */
.publications-list .mb-4 {
    margin-bottom: 3rem !important; /* Increase separation between publications */
}

.publications-list p {
    margin-bottom: 0.2rem; /* Reduce space between lines of the same publication */
    line-height: 1.3; /* Reduce line height */
}

/* Research Images: do not force width; preserve intrinsic aspect ratio
   Use max-width so images scale down to fit their container but are
   never stretched larger than their natural size. Removed object-fit to
   avoid cropping. */
.research-img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    /* avoid forced cropping or stretching */
    object-fit: none;
}

/* Outings Images: preserve aspect ratio and avoid forced expansion */
.outing-img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    object-fit: none;
}

/* Ensure paired images (e.g., Megatron) display at equal height on medium+ screens */
.equal-height-img {
    /* Keep equal-height behavior optional; do not force width so images don't stretch.
       If equal height is desired, set a max-height on the container instead. */
    width: auto;
    max-width: 100%;
    height: auto !important;
    object-fit: none;
}


/* News thumbnail and card padding moved from inline styles */
.news-thumb-padding {
    padding: 6px !important;
}
.news-thumb-img {
    max-height: 100px;
    object-fit: cover;
}
.news-page-thumb-img {
    max-height: 140px;
    object-fit: cover;
}
.news-card-content {
    padding: 6px !important;
}

/* Duplicate header rules removed — consolidated header, logo and banner
   definitions live above. This keeps a single authoritative source for
   `.uoe-logo`, `.lab-banner` and related header styles. */

/* Hero Section */
.hero-section {
    background-color: var(--uoe-grey);
    padding: 4rem 0;
    border-bottom: 5px solid var(--uoe-red);
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 2rem;
}

/* Cards */
.card {
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
}

.hover-shadow:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.card-title {
    color: var(--uoe-blue);
    font-weight: bold;
}

.btn-uoe {
    background-color: var(--uoe-blue);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
}

.btn-uoe:hover {
    background-color: #031632;
    color: white;
}

.btn-outline-uoe {
    border: 2px solid var(--uoe-blue);
    color: var(--uoe-blue);
    border-radius: 0;
}

.btn-outline-uoe:hover {
    background-color: var(--uoe-blue);
    color: white;
}

/* Footer */
.uoe-footer {
    background-color: #151515;
    color: white;
    padding: 3rem 0;
    margin-top: 4rem;
    font-size: 0.9rem;
}

.uoe-footer h1, .uoe-footer h2, .uoe-footer h3, .uoe-footer h4, .uoe-footer h5, .uoe-footer h6 {
    color: white !important;
}

.uoe-footer a {
    color: #ccc;
    text-decoration: none;
}

.uoe-footer a:hover {
    color: white;
    text-decoration: underline;
}

.footer-logo {
    max-width: 200px;
    margin-bottom: 1rem;
}

/* Utility */
.bg-uoe-blue {
    background-color: var(--uoe-blue) !important;
}

.text-uoe-red {
    color: var(--uoe-red) !important;
}

.section-padding {
    padding: 4rem 0;
}

/* Publications Styles */
.publications-list .mb-4 {
    margin-bottom: 3rem !important; /* Increase separation between publications */
}

.publications-list p {
    margin-bottom: 0.2rem; /* Reduce space between lines of the same publication */
    line-height: 1.3; /* Reduce line height */
}

/* Research Images */
.research-img {
    width: 100%;
    /* constrain height but avoid forcing an exact height that stretches images
       use max-height so natural aspect ratio is preserved and object-fit:cover
       will crop rather than distort if necessary */
    max-height: 200px;
    height: auto;
    object-fit: cover;
}

/* Outings Images */
.outing-img {
    width: 100%;
    /* Allow images to keep their natural aspect ratio so they don't appear stretched.
       Removed enforced square aspect-ratio which caused cropping or distortion.
       Use height:auto so images display correctly and object-fit only influences
       container-cropped layouts when explicitly applied. */
    height: auto;
    object-fit: cover;
}

/* Ensure paired images (e.g., Megatron) display at equal height on medium+ screens */
.equal-height-img {
    width: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .equal-height-img {
        height: 360px; /* consistent display height for paired images */
    }
}

/* PI Image */
.pi-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Code Blocks */
pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
}

code {
    color: #e83e8c;
}

/* Hardware page: center media and text to the same width and allow
   image cropping (no stretching). Images in `.hardware-img` will
   fill the container and use object-fit:cover so borders are cropped
   while preserving the original aspect ratio. Text inside the
   container will align to the left for readability while the
   container itself is centered on the page. */
.hardware-container {
    max-width: 1100px; /* wider consistent page column width for hardware content */
    margin: 0 auto 2.5rem auto; /* center horizontally; larger bottom gap (~2 lines) */
    padding: 0 1rem; /* small left/right padding on narrow screens */
    text-align: left;
}
.hardware-container .hardware-img {
    width: 100%;
    display: block;
    height: 440px; /* crop height on larger screens */
    object-fit: cover; /* crop from borders without distortion */
    object-position: center center;
    border-radius: 6px;
    margin-bottom: 1rem;
}
@media (max-width: 767px) {
    .hardware-container .hardware-img {
        height: auto; /* allow natural height on small screens to avoid excessive cropping */
    }
}

/* Headings for hardware page should align with the centered content column */
.hardware-heading {
    max-width: 1100px;
    margin: 0 auto 0.75rem auto;
    padding: 0 1rem;
}

/* Outings page: widen the content column so cards/images are larger
   without changing the two-column layout. Images will be cropped on
   desktop via object-fit to provide a consistent visual height. */
.outings-content {
    /* Slightly wider column for outings to better showcase images and
       accompanying text while preserving the two-column layout on larger
       screens. This improves visual prominence without changing page grid. */
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 1rem;
}
.outings-content .card-img-top {
    width: 100%;
    display: block;
    height: 480px; /* slightly taller crop on desktop for a more cinematic look */
    object-fit: cover;
    object-position: center center;
}
@media (max-width: 767px) {
    .outings-content .card-img-top {
        height: auto; /* let images be natural height on narrow screens */
    }
}


/* PI Image */
.pi-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Code Blocks */
pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
}

code {
    color: #e83e8c;
}