/*
Theme Name: Seafarers Theme Alternative
Theme URI: https://seafarers-sailing-club.org.uk
Author: Seafarers Sailing Club
Author URI: https://seafarers-sailing-club.org.uk
Description: An alternative presentation theme for Seafarers Sailing Club, with a two-tier navigation, focused homepage and coordinated subpage templates.
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seafarers-theme-alternative
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, blog, portfolio, news
*/

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.wp-theme-seafarers-theme-alternative {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}

a {
    color: #ef6431;
}

a:hover {
    color: #c94f1b;
}

/* Accessibility */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.skip-link {
    background: #1e3a8a;
    color: white;
    font-weight: 700;
    left: 6px;
    padding: 8px 16px;
    position: absolute;
    top: 6px;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.skip-link:focus {
    transform: translateY(0%);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: #1e3a8a;
    color: white;
    padding: 1rem 0;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Site Branding */
.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.site-title-description {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.custom-logo-link {
    display: inline-block;
    text-decoration: none;
}

.custom-logo-link img {
    max-width: 438px;
    width: auto;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

.site-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.site-title a {
    color: white;
    text-decoration: none;
}

.site-title a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.site-description {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

/* Navigation */
.main-navigation {
    background-color: #1e40af;
    padding: 0.5rem 0;
    position: relative;
    display: none !important;
    z-index: 1000;
}

.main-navigation ul {
    list-style: none !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1e40af !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Menu container styling */
.menu-container {
    position: relative;
}

/* Empty menu state */
.menu-container:empty::after {
    content: 'No menu items available';
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: 1rem;
    text-align: center;
    display: block;
}

/* Columnar menu layout for root items */
.main-navigation ul.menu-columns {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2.5rem !important;
    padding: 2rem !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    min-width: 300px !important;
    max-width: none !important;
    margin: 0 auto !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
}

.main-navigation ul.menu-columns > li {
    display: flex !important;
    flex-direction: column !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    backdrop-filter: blur(10px) !important;
}

.main-navigation ul.menu-columns > li > a {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: white !important;
    text-decoration: none !important;
    padding: 0.75rem 0 !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.main-navigation ul.menu-columns > li > a:hover {
    color: #fbbf24 !important;
    border-bottom-color: #fbbf24 !important;
}

.main-navigation ul.menu-columns > li > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    position: static !important;
    box-shadow: none !important;
}

.main-navigation ul.menu-columns > li > ul > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    padding: 0.5rem 0 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.main-navigation ul.menu-columns > li > ul > li > a:hover {
    color: #fbbf24 !important;
    padding-left: 0.5rem !important;
    background: none !important;
}

/* Additional styling for better visual hierarchy */
.main-navigation ul.menu-columns > li > ul > li {
    margin-bottom: 0.25rem;
}

.main-navigation ul.menu-columns > li > ul > li:last-child {
    margin-bottom: 0;
}

/* Add subtle animation for menu items */
.main-navigation ul.menu-columns > li {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-navigation ul.menu-columns > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.main-navigation.toggled ul {
    display: flex;
}

.main-navigation.toggled ul.menu-columns {
    display: grid !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
}

.main-navigation a {
    color: white;
    text-decoration: none;
    padding: 1rem 1.5rem;
    transition: background-color 0.3s;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-navigation a:hover {
    background-color: #3b82f6;
}

/* Hamburger Menu Button */
.menu-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid white !important;
    color: white !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
    position: relative !important;
    z-index: 1001 !important;
}

.menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-toggle:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Hamburger Icon */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Animated hamburger when menu is open */
.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Main content */
.site-main {
    padding: 2rem 0;
    min-height: 60vh;
    flex: 1;
}

/* Breadcrumbs */
.breadcrumbs {
    background-color: #f8f9fa;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 1rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: #ef6431;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #c94f1b;
    text-decoration: underline;
}

.breadcrumb-item .current {
    color: #495057;
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #adb5bd;
    font-size: 0.75rem;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 0.5rem 0;
    }

    .breadcrumb-inner {
        padding: 0 15px;
    }

    .breadcrumb-list {
        font-size: 0.8rem;
    }

    .breadcrumb-separator {
        margin: 0 0.25rem;
    }
}

/* Ensure slideshow appears above other content */
.slideshow-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

/* Content styling */
.entry-title {
    margin-bottom: 1rem;
}

.entry-title a {
    color: #ef6431;
    text-decoration: none;
}

.entry-title a:hover {
    color: #c94f1b;
}

.entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Subtle "last updated" note at the foot of a page */
.entry-footer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.entry-last-modified {
    margin: 0;
    color: #999;
    font-size: 0.8rem;
    font-style: italic;
}

.byline--person {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.person-author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ef6431;
    font-weight: 500;
}

img.person-author-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.news-date,
.posted-on {
    display: inline;
}

.news-date::before,
.posted-on::before {
    content: '·';
    margin: 0 0.4rem;
    color: #cbd5e1;
}

/* No leading separator when the date is the only thing in the meta row. */
.news-date:first-child::before,
.posted-on:first-child::before {
    content: none;
    margin: 0;
}

.entry-content {
    margin-bottom: 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 0;
    list-style-position: outside;
    margin-left: 1.2em;
}

.entry-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.3em;
}

.read-more {
    display: inline-block;
    background: #1e3a8a;
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.read-more:hover {
    background: #3b82f6;
}

/* Widget area */
.widget-area {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.widget {
    margin-bottom: 2rem;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    color: #1e3a8a;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* ==========================================================================
   Site footer — the club's card, then the whole site below it

   Colours are the header's, so the page closes on the same navy it opens with.
   The sitemap flows in columns rather than sitting on a grid: the sections are
   very different lengths (Racing has seven pages, Media has one) and a grid
   left rows of dead space under the short ones.
   ========================================================================== */

.site-footer {
    --footer-ink: var(--nav-navy-dark, #070c22);
    --footer-panel: var(--nav-navy, #0d1236);
    --footer-accent: var(--nav-accent, #c2551f);
    --footer-current: var(--nav-current, #e8913f);
    --footer-text: rgba(220, 226, 250, 0.62);
    --footer-rule: rgba(148, 163, 214, 0.16);

    position: relative;
    margin-top: auto;
    background: linear-gradient(180deg, var(--footer-panel) 0%, var(--footer-ink) 100%);
    color: var(--footer-text);
}

/* Top edge: a hairline, and nothing else. The navy block against the page is
   already the boundary; anything brighter here reads as a stray mark rather
   than a deliberate one. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--footer-rule);
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 20px;
}

/* --- Masthead: who the club is, and how to reach it --------------------- */

.site-footer__brand {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--footer-rule);
}

.site-footer__identity {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.site-footer__identity img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
}

.site-footer__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.site-footer__name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.site-footer__tagline {
    color: var(--footer-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
}

.site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    align-items: center;
}

.site-footer__contact-link {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--footer-rule);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
    color: #fff;
    border-bottom-color: var(--footer-current);
}

.site-footer__member {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.4rem;
    border-radius: 6px;
    background: var(--footer-accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-footer__member:hover,
.site-footer__member:focus-visible {
    background: var(--footer-current);
    transform: translateY(-1px);
}

/* --- The sitemap -------------------------------------------------------- */

.site-footer__sitemap {
    columns: 5;
    column-gap: 2rem;
}

.site-footer__section {
    /* Keeps a section and its pages together when the columns break. */
    break-inside: avoid;
    margin-bottom: 2rem;
}

.site-footer__section-title {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer__section-title a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__section-title a:hover,
.site-footer__section-title a:focus-visible {
    color: var(--footer-current);
}

.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__link {
    display: block;
    padding: 0.28rem 0;
    color: var(--footer-text);
    font-size: 0.875rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer__link--nested {
    padding-left: 0.85rem;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: #fff;
    transform: translateX(3px);
}

/* Where you are. The footer carries the header's current-section state, so a
   long list of links still tells you which part of the site you are in. */
.site-footer__section.is-current-section .site-footer__section-title {
    position: relative;
}

.site-footer__section.is-current-section .site-footer__section-title::before {
    content: "";
    position: absolute;
    top: 0.15em;
    left: -0.85rem;
    width: 3px;
    height: 0.9em;
    border-radius: 2px;
    background: var(--footer-current);
}

.site-footer__section.is-current-section .site-footer__section-title a {
    color: var(--footer-current);
}

.site-footer__link.is-current {
    color: #fff;
    font-weight: 600;
}

/* --- Baseline ----------------------------------------------------------- */

.site-footer__baseline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 20px 1.75rem;
    border-top: 1px solid var(--footer-rule);
    font-size: 0.8rem;
}

.site-footer__copyright {
    margin: 0;
}

.site-footer__baseline-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__baseline a,
.site-footer__top {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__baseline a:hover,
.site-footer__baseline a:focus-visible {
    color: #fff;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--footer-current);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 1180px) {
    .site-footer__sitemap {
        columns: 4;
    }
}

@media (max-width: 1000px) {
    .site-footer__sitemap {
        columns: 3;
    }
}

@media (max-width: 900px) {
    .site-footer__inner {
        padding-top: 2.5rem;
    }

    .site-footer__brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__sitemap {
        columns: 2;
    }
}

/* Phones keep two columns for as long as the longest page name allows: one
   column turned the sitemap into a very long scroll. */
@media (max-width: 340px) {
    .site-footer__sitemap {
        columns: 1;
    }

    .site-footer__baseline {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__link,
    .site-footer__member {
        transition: color 0.2s ease;
    }

    .site-footer__link:hover,
    .site-footer__link:focus-visible,
    .site-footer__member:hover,
    .site-footer__member:focus-visible {
        transform: none;
    }
}

/* Mobile menu toggle button */
.menu-toggle {
    display: flex;
    background: none;
    border: none;
    color: white;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .main-navigation ul {
        display: none;
        flex-direction: column;
        gap: 0;
    }
    
    .main-navigation.toggled ul {
        display: flex;
    }
    
    .main-navigation.toggled ul.menu-columns {
        display: grid !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
    }
    
    .main-navigation ul.menu-columns {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 1rem !important;
        max-height: 70vh !important;
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    .main-navigation ul.menu-columns > li {
        padding: 1rem !important;
    }
    
    .main-navigation ul.menu-columns > li > a {
        font-size: 1.1rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .container {
        padding: 0 15px;
    }
    
}

/* Full Screen Slideshow Styles */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
}

.slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.slide.active {
    opacity: 1 !important;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.slide-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.slide-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.slide-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: #1e3a8a;
    color: white;
}

.btn-primary:hover {
    background-color: #3b82f6;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border-color: white;
}

.btn-secondary:hover {
    background-color: white;
    color: #1e3a8a;
    transform: translateY(-2px);
}

/* Navigation arrows */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-size: 2rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 3;
    cursor: pointer;
}

.slide-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slide-nav.prev {
    left: 20px;
}

.slide-nav.next {
    right: 20px;
}

/* Dots/circles */
.slide-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover {
    background-color: white;
}

/* Responsive slideshow */
@media (max-width: 768px) {
    .slide-title {
        font-size: 2.5rem;
    }
    
    .slide-subtitle {
        font-size: 1.2rem;
    }
    
    .slide-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .slide-nav {
        padding: 0.8rem 1.2rem;
        font-size: 1.5rem;
    }
    
    .slide-nav.prev {
        left: 10px;
    }
    
    .slide-nav.next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .slide-title {
        font-size: 2rem;
    }
    
    .slide-subtitle {
        font-size: 1rem;
    }
    
    .slide-nav {
        padding: 0.6rem 1rem;
        font-size: 1.2rem;
    }
}

/* Additional Section Styles */
.wordpress-content-section,
.about-section,
.news-section,
.contact-section {
    padding: 4rem 0;
}

/* WordPress Content Section */
.wordpress-content-section {
    background: transparent;
    margin-top: 0;
}

.wordpress-content-section .section-content {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.wordpress-content-section .entry-title {
    font-size: 2.5rem;
    color: #1e3a8a;
    margin-bottom: 2rem;
    text-align: center;
}

.wordpress-content-section .entry-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.wordpress-content-section .entry-content h1,
.wordpress-content-section .entry-content h2,
.wordpress-content-section .entry-content h3,
.wordpress-content-section .entry-content h4,
.wordpress-content-section .entry-content h5,
.wordpress-content-section .entry-content h6 {
    color: #1e3a8a;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.wordpress-content-section .entry-content p {
    margin-bottom: 1.5rem;
}

.wordpress-content-section .entry-content ul,
.wordpress-content-section .entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 0;
    list-style-position: outside;
    margin-left: 1.2em;
}

.wordpress-content-section .entry-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.3em;
}

.wordpress-content-section .entry-content blockquote {
    border-left: 4px solid #1e3a8a;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #666;
}

/* Content images
   Cap every image in post and page content to the column and keep its aspect
   ratio, whatever markup it arrived in — an image block, a bare <img> from an
   old-site import, or shortcode output. Inline avatars opt out: they are UI
   rather than content, and sized to the line they sit on. */
.entry-content img:not(.person-inline-photo):not(.person-author-avatar) {
    max-width: 100%;
    height: auto;
}

.entry-content .wp-block-image img,
.entry-content .sfr-content-lightbox img {
    border-radius: 8px;
}

/* Images are centred by default — an unaligned image block, or a bare imported
   <img>, sits in the middle of the column rather than against its left edge.
   Alignment is never written into the block itself (a default align attribute
   would change what core/image saves and invalidate every image already in the
   database), so this rule is what "centred by default" means, for old and new
   content alike. Only images at the top level of the content are centred, so
   images inside a gallery, columns or a group follow that layout instead; an
   explicit left/right/wide/full alignment still wins. Posts put content
   straight in .entry-content, pages wrap it in .entry-content-body. */
:is(.entry-content, .entry-content-body) > :is(
    .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
    p:has(> .sfr-content-lightbox:only-child),
    p:has(> img:only-child)
) {
    text-align: center;
}

/* A lightbox anchor sitting straight in the content has no line box to be
   centred in, so centre the box itself. */
:is(.entry-content, .entry-content-body) > .sfr-content-lightbox {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

/* A bare image — an import that never became a figure — has no figure margins
   of its own, so the click-to-enlarge wrapper supplies them. */
.entry-content .sfr-content-lightbox {
    margin: 1.5rem 0;
}

.entry-content figure .sfr-content-lightbox {
    margin: 0;
}

/* Prose links, and deliberately only those. This used to be `.entry-content a`,
   which reached every anchor a block renders as well — so a component's link
   carried this rule *on top of* its own decoration. The Upcoming Events footer
   link came out with two underlines in two colours: its own under the words,
   and this border under the words, the gap and the arrow. A link an author
   typed into a paragraph carries no class; a link a component built always
   does, and owns how it looks. */
.wordpress-content-section .entry-content a:not([class]) {
    color: #ef6431;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

.wordpress-content-section .entry-content a:not([class]):hover {
    border-bottom-color: #ef6431;
}

.wordpress-content-section .page-links {
    margin-top: 2rem;
    text-align: center;
}

.wordpress-content-section .page-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: #1e3a8a;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.wordpress-content-section .page-links a:hover {
    background: #3b82f6;
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-content h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e3a8a;
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.about-text p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.about-features {
    display: grid;
    gap: 2rem;
}

.feature {
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1e3a8a;
}

.feature h3 {
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

/* Page content with See Also sidebar */
.entry-content.page-content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 3rem;
    align-items: start;
}

.page-see-also {
    position: sticky;
    top: calc(var(--nav-bar-height, 64px) + var(--breadcrumb-height, 49px) + 1.5rem);
}

.see-also-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0 0 0.75rem 0;
}

.see-also-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid #e5e7eb;
}

.see-also-list li {
    margin: 0;
    padding: 0;
}

.see-also-list a {
    display: block;
    padding: 0.4rem 0.75rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.see-also-list a:hover {
    color: #ef6431;
    border-left-color: #ef6431;
}

/* Rows added by the seafarers/see-also block sit in the same list as the
   automatic child pages above them, and carry a marker when they lead off the
   page — to a file, or to another site. */
.see-also-list a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.see-also-icon {
    flex: 0 0 auto;
    opacity: 0.55;
}

.see-also-label {
    min-width: 0;
}

/* A row can carry a line of explanation under its label. The extra class says
   so, so the icon and the text line up with the first line rather than floating
   against the middle of a two-line row. */
.see-also-text {
    min-width: 0;
}

.see-also-item--described > a {
    align-items: flex-start;
}

.see-also-item--described .see-also-icon {
    margin-top: 0.2rem;
}

.see-also-description {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #6b7280;
}

@media (max-width: 768px) {
    .entry-content.page-content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .page-see-also {
        position: static;
    }
}

/* Homepage two-column layout */
.homepage-columns {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
    padding: 3rem 0;
}

.homepage-main-col {
    padding: 0;
}

.homepage-main-col .section-content {
    padding: 0;
    background: none;
    box-shadow: none;
}

.homepage-main-col .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.homepage-main-col h2 {
    margin-top: 0;
}

.homepage-sidebar-col {
    position: sticky;
    top: calc(var(--nav-bar-height, 64px) + var(--breadcrumb-height, 49px) + 1.5rem);
}

.homepage-sidebar-content {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}

.homepage-sidebar-content h1,
.homepage-sidebar-content h2,
.homepage-sidebar-content h3,
.homepage-sidebar-content h4,
.homepage-sidebar-content h5,
.homepage-sidebar-content h6 {
    color: #1e3a8a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.homepage-sidebar-content h2:first-child,
.homepage-sidebar-content h3:first-child {
    margin-top: 0;
}

.homepage-sidebar-content p {
    margin-bottom: 1rem;
}

.homepage-sidebar-content ul,
.homepage-sidebar-content ol {
    margin-bottom: 1rem;
    padding-left: 1.2em;
}

.homepage-sidebar-content a {
    color: #ef6431;
}

.homepage-sidebar-content a:hover {
    color: #c94f1b;
}

@media (max-width: 1024px) {
    .homepage-columns {
        grid-template-columns: 1fr 280px;
    }
}

@media (max-width: 768px) {
    .homepage-columns {
        grid-template-columns: 1fr;
    }

    .homepage-sidebar-col {
        position: static;
    }
}

/* News Section */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.news-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.news-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 1.5rem;
}

.news-content h3 {
    margin-bottom: 0.5rem;
}

.news-content h3 a {
    color: #ef6431;
    text-decoration: none;
}

.news-content h3 a:hover {
    color: #c94f1b;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/*
 * With an author, the name and date stack beside the avatar. A card is narrow
 * enough that keeping them on one line wraps the date onto its own row and
 * strands the "·" separator at the start of it.
 */
.news-meta__avatar {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

.news-meta__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.news-meta--with-author .person-author {
    font-weight: 600;
    line-height: 1.3;
}

.news-meta--with-author .news-date {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.3;
}

/* Stacked, the rows read as separate lines, so the inline separator goes. */
.news-meta--with-author .news-date::before {
    content: none;
    margin: 0;
}

.news-excerpt {
    line-height: 1.6;
}

.news-more {
    text-align: center;
}

.btn-outline {
    background-color: transparent;
    color: #1e3a8a;
    border: 2px solid #1e3a8a;
}

.btn-outline:hover {
    background-color: #1e3a8a;
    color: white;
}

/* News Index / Category Archive */
.news-archive-header {
    margin: 2.5rem 0 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #e5e7eb;
}

.news-archive-header .entry-title {
    margin: 0;
}

.news-archive-intro {
    margin-top: 0.75rem;
    max-width: 720px;
    color: #4b5563;
    line-height: 1.7;
}

.news-archive-page {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.news-empty {
    margin: 2rem 0 4rem;
    color: #6b7280;
}

body.blog .news-grid,
body.category .news-grid {
    margin-bottom: 3rem;
    align-items: stretch;
}

body.blog .news-card,
body.category .news-card {
    display: flex;
    flex-direction: column;
}

body.blog .news-card .news-content,
body.category .news-card .news-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* News pagination */
.news-pagination {
    margin: 0 0 4rem;
}

.news-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-pagination li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.85rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    color: #1e3a8a;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.news-pagination li a.page-numbers:hover,
.news-pagination li a.page-numbers:focus {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
    color: white;
}

.news-pagination li .page-numbers.current {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
    color: white;
}

.news-pagination li .page-numbers.dots {
    border-color: transparent;
    min-width: 1.5rem;
    padding: 0;
    color: #9ca3af;
}

@media (max-width: 480px) {
    .news-pagination li .page-numbers {
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 0.6rem;
        font-size: 0.9rem;
    }
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.contact-info h3,
.contact-form h3 {
    color: #1e3a8a;
    margin-bottom: 1.5rem;
}

.contact-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 5px;
}

.contact-item strong {
    color: #1e3a8a;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .custom-logo-link img {
        max-width: 375px;
    }
}

@media (max-width: 768px) {
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .section-content h2 {
        font-size: 2rem;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .wordpress-content-section .section-content {
        padding: 2rem;
        margin: 0 15px;
    }
    
    .wordpress-content-section .entry-title {
        font-size: 2rem;
    }
    
    .wordpress-content-section .entry-content {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .wordpress-content-section .section-content {
        padding: 1.5rem;
        margin: 0 10px;
    }
    
    .wordpress-content-section .entry-title {
        font-size: 1.8rem;
    }
    
    .wordpress-content-section .entry-content {
        font-size: 0.95rem;
    }
    
    .wordpress-content-section .entry-content ul,
    .wordpress-content-section .entry-content ol {
        padding-left: 0;
        margin-left: 1em;
    }
}

/* Logo and Header Responsive Styles */
@media (max-width: 1024px) {
    .slideshow-logo,
    div[style*="text-align: center"] .slideshow-logo,
    div[style*="position: absolute"] .slideshow-logo,
    div[style*="display: flex"] .slideshow-logo,
    .slideshow-logo-container .slideshow-logo {
        max-width: 200px !important;
        max-height: 100px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .slideshow-logo-container {
        top: 40px !important;
    }
}

@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .site-branding {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .site-title-description {
        align-items: center;
    }
    
    .custom-logo-link img {
        max-width: 350px;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .site-description {
        font-size: 0.9rem;
    }
    
    .slideshow-logo,
    div[style*="text-align: center"] .slideshow-logo,
    div[style*="position: absolute"] .slideshow-logo,
    div[style*="display: flex"] .slideshow-logo,
    .slideshow-logo-container .slideshow-logo {
        max-width: 175px !important;
        max-height: 88px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .slideshow-logo-container {
        top: 30px !important;
    }
}

/* Slideshow Logo Styles */
.slideshow-logo {
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    max-width: 225px !important;
    max-height: 113px !important;
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)) !important;
    transition: all 0.3s ease !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Fixed Slideshow Logo Container */
.slideshow-logo-container {
    position: absolute !important;
    top: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

.slideshow-logo-container .slideshow-logo {
    margin: 0 !important;
    display: block !important;
}

/* More specific selector to override any conflicting styles */
div[style*="text-align: center"] .slideshow-logo {
    width: auto !important;
    height: auto !important;
    max-width: 225px !important;
    max-height: 113px !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)) !important;
}

/* Target the specific slideshow context */
div[style*="position: absolute"] .slideshow-logo,
div[style*="display: flex"] .slideshow-logo {
    width: auto !important;
    height: auto !important;
    max-width: 225px !important;
    max-height: 113px !important;
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)) !important;
}

.slideshow-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.5));
}

@media (max-width: 480px) {
    .custom-logo-link img {
        max-width: 275px;
    }
    
    .site-title {
        font-size: 1.3rem;
    }
    
    .site-description {
        font-size: 0.8rem;
    }
    
    .slideshow-logo,
    div[style*="text-align: center"] .slideshow-logo,
    div[style*="position: absolute"] .slideshow-logo,
    div[style*="display: flex"] .slideshow-logo,
    .slideshow-logo-container .slideshow-logo {
        max-width: 150px !important;
        max-height: 75px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .slideshow-logo-container {
        top: 20px !important;
    }
}

/* Person Post Type Styles */
.person-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.person-photo-circle {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.person-photo-circle img {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
    display: block;
}

.person-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.person-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 0.25rem;
}

.person-info-row {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.person-info-label {
    font-weight: 600;
    color: #374151;
    min-width: 80px;
    font-size: 0.9rem;
}

.person-info-value {
    color: #4b5563;
}

/* Additional roles under the main position, smaller and lighter. */
.person-extra-roles {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.person-extra-roles span {
    display: block;
}

.person-info-value a {
    color: #ef6431;
    text-decoration: none;
}

.person-info-value a:hover {
    color: #c94f1b;
}

.person-profile {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.person-image {
    text-align: center;
}

.person-image img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.person-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.person-details > div {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.person-details > div:last-child {
    border-bottom: none;
}

.person-details strong {
    color: #1e3a8a;
    display: inline-block;
    min-width: 120px;
}

.person-bio {
    margin-top: 2rem;
    line-height: 1.8;
}

.social-links a {
    color: #ef6431;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #c94f1b;
}

/* Explicit People card grid */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.person-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.person-card:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

img.person-card-photo {
    display: block !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
    margin: 0 auto 1rem;
}

.person-card-no-photo {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #e2e8f0;
    margin: 0 auto 1rem;
}

.person-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0 0 0.25rem;
}

.person-card-role {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 0.25rem;
}

/* Additional roles: secondary to the main role above, one per line. */
.person-card-extra-roles {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #94a3b8;
    margin: 0 0 0.25rem;
}

.person-card-extra-roles span {
    display: block;
}

.person-card-email-icon {
    display: block;
    margin-top: 0.4rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.person-card-email-icon:hover {
    color: #ef6431;
}

.person-card-email-icon .dashicons {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
}

/* Responsive Design for Person Templates */
@media (max-width: 768px) {
    .person-profile {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .people-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ============================================================
   Event (sfr_event) Templates
   ============================================================ */

.sfr-event-header {
    margin-bottom: 2rem;
}

.sfr-event-title {
    font-size: 2rem;
    margin: 0 0 1rem;
    color: #1e3a8a;
}

.sfr-event-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .5rem 1rem;
    background: #f0f4ff;
    border-left: 4px solid #3b82f6;
    padding: 1rem 1.25rem;
    border-radius: 0 6px 6px 0;
    font-size: .95rem;
    color: #374151;
}

.sfr-event-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    grid-column: 1;
    align-self: center;
}

.sfr-event-meta-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.sfr-event-meta-row .dashicons {
    color: #3b82f6;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .sfr-event-meta {
        grid-template-columns: 1fr;
    }

    .sfr-event-meta-actions {
        grid-column: 1;
        grid-row: auto;
        margin-top: .5rem;
    }

    .sfr-event-meta-actions .sfr-event-cancel-action {
        width: 100%;
    }
}

.sfr-event-body {
    margin: 2rem 0;
}

.sfr-event-results {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.sfr-event-results h2 {
    margin-top: 0;
    color: #1e3a8a;
    font-size: 1.25rem;
}

/* Archive */
.sfr-events-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
}

.sfr-event-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.sfr-event-card-img-link {
    display: block;
}

.sfr-event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sfr-event-card-body {
    padding: 1.25rem 1.25rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sfr-event-card-date {
    font-size: .85rem;
    color: #6b7280;
}

.sfr-event-card-title {
    margin: 0;
    font-size: 1.25rem;
}

.sfr-event-card-title a {
    color: #1e3a8a;
    text-decoration: none;
}

.sfr-event-card-title a:hover {
    color: #3b82f6;
}

.sfr-event-card-excerpt {
    color: #374151;
    font-size: .95rem;
    flex: 1;
}

.sfr-event-card-cancellation {
    color: #172033;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.sfr-event-card-cancellation p {
    margin: .4rem 0 0;
}

.sfr-event-card .sfr-event-status-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border: 1px solid #b32d2e;
    border-radius: 4px;
    background: #fff;
    color: #b32d2e;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Event categories — a cross-cutting label, kept visually distinct from the
   calendar's blue so the two axes never read as the same thing. */
.sfr-event-categories {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.sfr-event-category {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #6b21a8;
}

a.sfr-event-category-link {
    text-decoration: none;
}

a.sfr-event-category-link:hover .sfr-event-category,
a.sfr-event-category-link:focus .sfr-event-category {
    background: #e9d5ff;
    color: #581c87;
}

.sfr-event-category-description {
    color: #6b7280;
    margin-top: .5rem;
}

.sfr-event-category-pastlink {
    margin-top: 1.5rem;
    font-size: .9rem;
}

@media (max-width: 640px) {
    .sfr-event-card {
        grid-template-columns: 1fr;
    }

    .sfr-event-card-body {
        padding: 1rem;
    }
}

/* ==========================================================================
   Site header — menu bar with grouped dropdown panels
   Below 900px the bar collapses to the full-screen menu (see js/site-navigation.js).
   ========================================================================== */

:root {
    --nav-utility-height: 88px;
    --nav-bar-height: 56px;
    --nav-height: calc(var(--nav-utility-height) + var(--nav-bar-height));
    --breadcrumb-height: 49px;
    --nav-navy: #0d1236;
    --nav-navy-dark: #070c22;
    --nav-accent: #c2551f;
    --nav-current: #e8913f;
}

/* Front-end block editors enqueue WordPress's admin styles in the footer.
   Their later bare body rule must not erase the fixed-header offset. */
body.wp-theme-seafarers-theme-alternative {
    padding-top: var(--nav-height);
}

body.has-menu-open,
body.has-search-open {
    overflow: hidden;
}

/* The hero sits under the bar, so the bar reads as part of the photo. */
.seafarers-hero {
    margin-top: calc(-1 * var(--nav-height));
}

body.seafarers-alt-homepage {
    padding-top: 0;
}

body.seafarers-alt-homepage .seafarers-hero {
    margin-top: 0;
}

.seafarers-hero--compact {
    padding-top: var(--nav-height);
}

/* dvh, so the hero tracks the toolbar instead of guessing at it. svh is the
   viewport with the toolbar *expanded*, so once a phone collapses it the hero
   fell short of the screen and let the white content below show as a strip
   along the bottom edge. */
.seafarers-hero--full {
    height: 100vh;
    height: 100dvh;
}

/* -----------------------------------------------
   Slide content
   Fluid rather than stepped: the headline has to survive everything from a
   phone held sideways to a desktop, and breakpoints alone left it colliding
   with the watermark logo in between.
   ----------------------------------------------- */
.hero-slide__content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    color: #fff;
    text-align: center;
}

.hero-slide__title {
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: bold;
    line-height: 1.15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-slide__subtitle {
    margin-bottom: 2rem;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-slide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.hero-slide__cta {
    box-sizing: border-box;
    width: 190px;
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-slide__cta:hover,
.hero-slide__cta:focus-visible {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
    transform: translateY(-2px);
}

.hero-slide__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.hero-slide__cta--member {
    background: #ef6431;
    border-color: #ef6431;
    box-shadow: 0 8px 22px rgba(239, 100, 49, 0.28);
}

.hero-slide__cta--member:hover,
.hero-slide__cta--member:focus-visible {
    background: #d95724;
    border-color: #d95724;
}

/* Tells the visitor the page carries on below the full-height hero. */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.4s ease, color 0.2s ease;
}

.hero-scroll-cue.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    color: #fff;
}

.hero-scroll-cue__arrow {
    width: 15px;
    height: 15px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: hero-scroll-cue-bob 2s ease-in-out infinite;
}

@keyframes hero-scroll-cue-bob {
    0%, 100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.55;
    }
    50% {
        transform: rotate(45deg) translate(4px, 4px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue__arrow {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .hero-scroll-cue__label {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {

    .hero-slide__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 360px;
        gap: 0.75rem;
        margin-inline: auto;
    }

    .hero-slide__cta {
        width: 100%;
        min-width: 0;
        padding-inline: 12px;
    }
}

/* A shallow landscape viewport — including an iPad after Safari's browser
   chrome takes its share — cannot fit both copies of the crest plus the slide
   copy. Everything still has to land above the fold, so trade the duplicate
   hero branding and decorative height back for content. */
@media (orientation: landscape) and (max-height: 740px) {
    /* The fixed header carries the same burgee and club name directly above
       this, and here it lands right on top of the headline. */
    .seafarers-hero--full .slideshow-logo-container {
        display: none;
    }

    .hero-slide__title {
        margin-bottom: 0.5rem;
        font-size: clamp(1.4rem, 3.2vw, 2rem);
    }

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

    .hero-slide__cta {
        padding: 8px 20px;
    }


    .hero-scroll-cue__label {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 0;
    background: transparent;
    color: #fff;
}


/* Branded masthead: club identity first, practical routes second. */
.site-header__utility {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: var(--nav-utility-height);
    padding: 0 clamp(1.25rem, 4vw, 4.5rem);
    overflow: hidden;
    background: var(--nav-navy-dark);
    border-bottom: 1px solid rgba(183, 197, 232, 0.16);
    font-size: 0.82rem;
    letter-spacing: 0;
    transition: height 0.25s ease, opacity 0.2s ease;
}

.nav-bar__brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: none;
    color: #fff;
    text-decoration: none;
}

.nav-bar__brand img {
    width: 58px;
    height: 58px;
    flex: none;
    object-fit: contain;
}

.nav-bar__identity {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.nav-bar__identity strong {
    max-width: 15ch;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.08;
}

.nav-bar__identity small {
    color: #aeb9d5;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.nav-bar__brand--mobile {
    display: none;
}

.site-header__utility-links {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.45vw, 1.35rem);
    margin-left: auto;
    white-space: nowrap;
}

.site-header__facebook,
.site-header__weather,
.site-header__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 32px;
    margin: 0;
    padding: 0;
    color: #c2cae0;
    text-decoration: none;
}

.site-header__facebook {
    width: 32px;
}

.site-header__facebook svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.site-header__weather svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header__utility-label {
    font: inherit;
}

.site-header__utility .site-header__weather--rain {
    color: #7dd3fc;
}

.site-header__utility .site-header__weather--uv {
    color: #fcd34d;
}

.site-header__utility .site-header__weather--wind {
    color: #c7d2fe;
}

.site-header__utility a:not(.nav-bar__cta):not(.site-header__weather) {
    color: #c2cae0;
    text-decoration: none;
}

.site-header__utility a:not(.nav-bar__cta):hover,
.site-header__utility a:not(.nav-bar__cta):focus,
.site-header__search-toggle:hover,
.site-header__search-toggle:focus,
.site-header__search-toggle[aria-expanded="true"] {
    color: #fff;
}

.site-header__contact {
    font-weight: 550;
}

.site-header__sign-out {
    padding-left: clamp(0.75rem, 1.2vw, 1.1rem);
    border-left: 1px solid rgba(194, 202, 224, 0.24);
}

/* The masthead folds away once the page scrolls, leaving the section row. */
.site-header:not(.is-at-top) .site-header__utility {
    height: 0;
    border-bottom-width: 0;
    opacity: 0;
}

/* Full-width section row */
.nav-bar {
    display: flex;
    align-items: stretch;
    height: var(--nav-bar-height);
    padding: 0 clamp(1.25rem, 4vw, 4.5rem);
    background: var(--nav-navy);
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.25s ease;
}

/* Over the hero the row is nearly solid, matching the masthead while retaining
   a slight sense of the photograph continuing underneath it. */
.site-header.is-at-top .nav-bar {
    position: relative;
    background: rgba(8, 16, 42, 0.96);
}

/* The scrim carries on past the bar so it fades into the photo. */
.site-header.is-at-top .nav-bar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 42px;
    z-index: 0;
    background: linear-gradient(rgba(8, 16, 42, 0.4), rgba(8, 16, 42, 0));
    pointer-events: none;
}

.site-header:not(.is-at-top) .nav-bar {
    box-shadow: 0 2px 14px rgba(5, 9, 28, 0.35);
}

.nav-bar__menu {
    display: flex;
    width: 100%;
    max-width: 1440px;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.nav-bar__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Sections folded into "More" are hidden, and so is "More" while everything
   fits; both need to beat the display:flex above. */
.nav-bar__item[hidden] {
    display: none;
}

.nav-bar__link {
    display: flex;
    align-items: center;
    padding: 0 0.55rem 0 0.7rem;
    color: #e7ecf8;
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

/* A section with no page of its own: the label still opens the panel. */
.nav-bar__link--static {
    cursor: pointer;
}

.nav-bar__toggle {
    display: flex;
    align-items: center;
    padding: 0 0.6rem 0 0.15rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #e7ecf8;
    cursor: pointer;
}

/* "More" has no page of its own, so its button carries the label as well. */
.nav-bar__toggle--more {
    gap: 0.35rem;
    padding: 0 0.6rem 0 0.7rem;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 500;
}

.nav-bar__caret {
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.nav-bar__item:hover .nav-bar__link,
.nav-bar__item:hover .nav-bar__toggle,
.nav-bar__item.is-open .nav-bar__link,
.nav-bar__item.is-open .nav-bar__toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-bar__item.is-open .nav-bar__caret {
    transform: rotate(225deg) translate(-1px, -1px);
    opacity: 1;
}

/* The section you are in reads brighter than the rest, without an underline. */
.nav-bar__item.is-current .nav-bar__link,
.nav-bar__item.is-current .nav-bar__toggle {
    color: #fff;
    font-weight: 600;
}

.nav-bar__cta {
    position: relative;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 0.4rem;
    padding: 0.58rem 1.05rem;
    background: #ef6431;
    border-radius: 4px;
    color: #111936;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sfr-member-unread-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 0.22rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    transform: translate(45%, -45%);
}

.site-header__utility .nav-bar__cta:hover,
.site-header__utility .nav-bar__cta:focus {
    background: #ff7b48;
    color: #111936;
    transform: translateY(-1px);
}

/* Search sits with the other first-row utilities and keeps its visible label
   on desktop; the compact mobile copy remains icon-only. */
.site-header__search-toggle {
    flex: none;
    width: auto;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.18s ease;
}

.site-header__search-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* A compact chart-table treatment links the search sheet to the chart grid on
   the results page without turning a utility action into another hero. */
.site-search-dialog {
    width: min(720px, calc(100% - 40px));
    max-width: none;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    color: #17213e;
}

.site-search-dialog::backdrop {
    background: rgba(5, 9, 28, 0.76);
    backdrop-filter: blur(5px);
}

.site-search-dialog__shell {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 48px);
    background:
        linear-gradient(rgba(30, 58, 138, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 58, 138, 0.045) 1px, transparent 1px),
        #f8fafc;
    background-size: 36px 36px;
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(3, 8, 30, 0.42);
    animation: site-search-arrive 180ms ease-out;
}

.site-search-dialog__shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(28px, 5vw, 48px);
    width: 92px;
    height: 4px;
    background: var(--nav-accent);
}

@keyframes site-search-arrive {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-search-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(24px, 4vw, 36px);
}

.site-search-dialog__eyebrow {
    margin: 0 0 4px;
    color: #52607b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.site-search-dialog__head h2 {
    margin: 0;
    color: #0d1236;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 650;
    line-height: 1.12;
}

.site-search-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #e9edf5;
    border: 0;
    border-radius: 50%;
    color: #26324f;
    font-family: inherit;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.site-search-dialog__close:hover,
.site-search-dialog__close:focus {
    background: #dfe5f0;
    color: #0d1236;
}

.site-search-dialog__form label {
    display: block;
    margin-bottom: 9px;
    color: #26324f;
    font-size: 0.88rem;
    font-weight: 650;
}

.site-search-dialog__form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    background: #fff;
    border: 1px solid #8d9ab1;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(13, 18, 54, 0.08);
}

.site-search-dialog__form-row:focus-within {
    border-color: #1e40af;
    outline: 3px solid rgba(59, 130, 246, 0.36);
    outline-offset: 3px;
}

.site-search-dialog__form input {
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    border-radius: 5px 0 0 5px;
    color: #111936;
    font: inherit;
}

.site-search-dialog__submit {
    min-width: 104px;
    padding: 12px 22px;
    background: var(--nav-accent);
    border: 0;
    border-radius: 0 4px 4px 0;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.site-search-dialog__submit:hover,
.site-search-dialog__submit:focus {
    background: #a84519;
}

.site-search-dialog__form input:focus-visible,
.site-search-dialog__submit:focus-visible {
    outline: 0;
}

.site-search-dialog__hint {
    margin: 12px 0 0;
    color: #66728b;
    font-size: 0.82rem;
}

/* Dropdown panels */
.nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2; /* above the scrim that fades below the bar */
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.25rem 1.75rem;
    width: max-content;
    max-width: min(720px, 90vw);
    padding: 1.15rem 1.25rem;
    background: #fff;
    border-top: 3px solid var(--nav-accent);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 18px 40px rgba(10, 17, 43, 0.25);
    text-align: left;
}

.nav-bar__item.is-open .nav-panel {
    display: grid;
}

/* Sections near the right edge open leftwards. Which sections those are moves
   as the bar folds, so the script sets data-align and that wins over this
   starting point (same specificity, declared later). */
.nav-bar__item:nth-last-child(-n+3) .nav-panel {
    left: auto;
    right: 0;
}

.nav-bar__item[data-align="left"] .nav-panel {
    left: 0;
    right: auto;
}

.nav-bar__item[data-align="right"] .nav-panel {
    left: auto;
    right: 0;
}

/* The overflow panel holds whole sections, so it needs room for a few columns. */
.nav-panel--more {
    max-width: min(780px, 94vw);
}

.nav-panel__column {
    display: flex;
    flex-direction: column;
}

.nav-panel__column[hidden] {
    display: none;
}

.nav-panel__heading {
    margin: 0 0 0.4rem;
    padding: 0 0.7rem;
    color: #7c86a3;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* In the overflow panel the heading is the section's own page. */
.nav-panel__heading a {
    color: inherit;
    text-decoration: none;
}

.nav-panel__heading a:hover,
.nav-panel__heading a:focus {
    color: var(--nav-accent);
}

.nav-panel__link {
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: 3px;
    color: #26324f;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-panel__link--nested {
    padding-left: 1.6rem;
    color: #556180;
    font-size: 0.86rem;
}

/* The section's own page, first in its panel: the same title as the label that
   opened it, so it is set apart as the way into the section rather than one of
   the pages within it. */
.nav-panel__link--section {
    margin-bottom: 0.35rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #e3e8f4;
    border-radius: 3px 3px 0 0;
    color: #14203c;
    font-weight: 600;
}

.nav-panel__link:hover,
.nav-panel__link:focus {
    background: #eef2fa;
    color: #0d1236;
}

.nav-panel__link.is-current {
    color: #1e3a8a;
    font-weight: 600;
}

.nav-panel__note {
    align-self: start;
    min-width: 190px;
    padding: 0.9rem 1rem;
    background: #f2f5fb;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #556180;
}

.nav-panel__note strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #14203c;
}

.nav-panel__note a {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--nav-accent);
    font-weight: 600;
    text-decoration: none;
}

.nav-bar__mobile-actions {
    display: none;
    align-items: center;
    flex: none;
    gap: 0.5rem;
    margin-left: auto;
}

.nav-bar__mobile-actions .site-header__weather,
.nav-bar__mobile-actions .site-header__search-toggle {
    width: 42px;
    height: 42px;
    margin: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    text-decoration: none;
}

.nav-bar__mobile-actions .site-header__weather:hover,
.nav-bar__mobile-actions .site-header__weather:focus,
.nav-bar__mobile-actions .site-header__search-toggle:hover,
.nav-bar__mobile-actions .site-header__search-toggle:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nav-bar__mobile-actions .site-header__weather--rain {
    color: #7dd3fc;
}

.nav-bar__mobile-actions .site-header__weather--uv {
    color: #fcd34d;
}

.nav-bar__mobile-actions .site-header__weather--wind {
    color: #c7d2fe;
}

.site-header__search-toggle--mobile {
    display: none;
}

/* Hamburger, shown only when the bar collapses */
.nav-bar__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
    align-self: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 11px 9px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.nav-bar__burger span[aria-hidden] {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* Full-screen menu */
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: #0b1130;
    overflow-y: auto;
}

.nav-drawer[hidden] {
    display: none;
}

.nav-drawer__inner {
    padding: 1.25rem 1.25rem 3rem;
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    color: #fff;
}

.nav-drawer__head span {
    font-size: 1.25rem;
    font-weight: 600;
}

.nav-drawer__close {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.nav-drawer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.nav-drawer__group {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.nav-drawer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

/* The rule under the title separates it from its pages, so a folded section
   does not carry one. */
.nav-drawer__group.is-open .nav-drawer__title,
.nav-drawer:not(.is-enhanced) .nav-drawer__group.has-pages .nav-drawer__title {
    padding-bottom: 0.65rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.nav-drawer__label {
    flex: 1;
    padding: 0.35rem 0;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.nav-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 38px;
    margin: -0.35rem -0.5rem -0.35rem 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.nav-drawer__group.is-open .nav-drawer__toggle .nav-bar__caret {
    transform: rotate(225deg) translate(-1px, -1px);
    opacity: 1;
}

.nav-drawer__list {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

/* Sections fold only once the script is running, so a failed bundle leaves
   every page listed rather than locked behind a dead caret. */
.nav-drawer.is-enhanced .nav-drawer__group:not(.is-open) .nav-drawer__list {
    display: none;
}

.nav-drawer__list a {
    display: block;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-drawer__list a:hover,
.nav-drawer__list a:focus {
    color: #fff;
}

/* The section's own page, first in the list. The card's title already carries a
   rule above the list, so unlike the dropdown panels this row is set apart by
   weight alone — a second hairline within a centimetre of the first read as
   clutter on a phone. */
.nav-drawer__list li.is-section a {
    color: #fff;
    font-weight: 600;
}

.nav-drawer__list li.is-nested a {
    padding-left: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.nav-drawer__cta {
    position: relative;
    display: flex;
    max-width: 320px;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto 0;
    padding: 0.85rem;
    background: var(--nav-accent);
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.nav-drawer__social {
    display: flex;
    justify-content: center;
    margin-top: 0.9rem;
}

.nav-drawer__facebook {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.nav-drawer__facebook svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.nav-drawer__facebook:hover,
.nav-drawer__facebook:focus {
    color: #fff;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--nav-current);
    outline-offset: 2px;
}

/* The two tiers tighten before the layout becomes the compact mobile bar. */
@media (max-width: 1180px) {
    .site-header__utility {
        gap: 1.25rem;
        padding-inline: 1.5rem;
    }

    .site-header__utility-links {
        gap: 0.75rem;
    }

    .nav-bar {
        padding-inline: 1.5rem;
    }

    .nav-bar__link {
        padding: 0 0.4rem 0 0.5rem;
        font-size: 0.9rem;
    }

    .nav-bar__toggle {
        padding: 0 0.4rem 0 0.1rem;
    }

    .nav-bar__toggle--more {
        padding: 0 0.4rem 0 0.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 1040px) {
    .nav-bar__identity small {
        display: none;
    }

    .site-header__utility {
        padding-inline: 1.25rem;
    }

    .site-header__utility-links {
        gap: 0.65rem;
    }

    .nav-bar__cta {
        padding-inline: 0.8rem;
    }
}

@media (max-width: 899px) {
    :root {
        --nav-height: var(--nav-bar-height);
    }

    .site-header__utility,
    .nav-bar__menu,
    .nav-bar__cta {
        display: none;
    }

    .nav-bar {
        gap: 1rem;
        padding-inline: 1.25rem;
    }

    .nav-bar__brand--mobile {
        display: flex;
    }

    .nav-bar__brand--mobile img {
        width: 34px;
        height: 34px;
    }

    .nav-bar__brand--mobile .nav-bar__identity strong {
        max-width: 12ch;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.15;
    }

    .nav-bar__mobile-actions {
        display: flex;
    }

    .site-header__search-toggle--mobile {
        display: inline-flex;
    }

    .nav-bar__burger {
        display: flex;
        margin-left: 0;
    }

    .site-header.is-at-top .nav-bar {
        background: rgba(9, 15, 42, 0.94);
    }
}

@media (max-width: 600px) {
    .site-search-dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        margin: auto 0 0;
    }

    .site-search-dialog__shell {
        padding: 32px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 10px 10px 0 0;
    }

    .site-search-dialog__shell::before {
        left: 20px;
    }

    .site-search-dialog__head {
        gap: 1rem;
        margin-bottom: 24px;
    }
}

@media (max-width: 420px) {
    .nav-bar {
        gap: 0.65rem;
        padding-inline: 0.85rem;
    }

    .nav-bar__brand {
        gap: 0.45rem;
    }

    .nav-bar__brand span {
        max-width: 9ch;
        font-size: 0.82rem;
    }

    .nav-bar__mobile-actions {
        gap: 0.35rem;
    }

    .site-search-dialog__form-row {
        min-height: 54px;
    }

    .site-search-dialog__submit {
        min-width: 88px;
        padding-inline: 16px;
    }
}


/* Breadcrumbs ride along under the bar once the hero has scrolled past. */
.breadcrumbs {
    position: sticky;
    top: var(--nav-bar-height);
    z-index: 500;
    background-color: #f8f9fa;
    box-shadow: 0 1px 6px rgba(13, 18, 54, 0.06);
}

/* The hero crest sits below the bar, which carries its own crest. */
.slideshow-logo-container {
    top: calc(var(--nav-height) + 1.5rem) !important;
}

@media (max-width: 899px) {
    .slideshow-logo-container {
        top: calc(var(--nav-height) + 1rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header * {
        transition: none !important;
    }

    .site-search-dialog__shell {
        animation: none;
    }
}

/* My Zone owns its page chrome: the account shell is the title and navigation. */
.sfr-member-portal-page .site-header .nav-bar {
    background: var(--nav-navy);
    box-shadow: 0 2px 14px rgba(5, 9, 28, 0.28);
}

.sfr-member-portal-page .site-header .nav-bar::after {
    content: none;
}

.sfr-member-portal-page .sfr-account {
    scroll-margin-top: calc(var(--nav-height) + clamp(24px, 4vw, 56px));
}

.sfr-my-zone-page {
    padding: clamp(24px, 4vw, 56px) 20px clamp(48px, 7vw, 92px);
    background:
        linear-gradient(180deg, rgba(30, 58, 138, 0.035), transparent 240px),
        #eeeee9;
}

.sfr-my-zone-page__inner {
    width: min(1380px, 100%);
    margin-inline: auto;
}

.sfr-my-zone-page__inner > :first-child {
    margin-top: 0;
}

.sfr-my-zone-page__inner > :last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    /* On a phone My Zone is the app: it owns the screen from the header to
       the foot, and its own tab bar is the end of the page — so the site
       footer stands down rather than parking a sitemap under the bar. */
    .sfr-my-zone-page {
        display: flex;
        min-height: calc(100svh - var(--nav-height));
        padding: 0;
    }

    .sfr-my-zone-page__inner {
        display: flex;
        flex: 1;
        min-width: 0;
    }

    /* Stretched, so a short panel still leaves the bar at the bottom
       instead of floating it above a field of background. */
    .sfr-member-portal-page .sfr-account {
        flex: 1;
        scroll-margin-top: var(--nav-height);
    }

    .sfr-member-portal-page .site-footer {
        display: none;
    }

    /* The member zone's tab bar owns the foot of a phone screen, and the
       admin shortcut would sit on top of its last tab. */
    .sfr-member-portal-page #sfr-admin-btn {
        bottom: calc(56px + 1.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Error pages use a nautical chart rather than a generic empty-state card.
   The plotted route stops at the missing waypoint: the decoration explains
   the state, while the copy and controls remain plain and practical. */
.error404 .site-header .nav-bar {
    background: var(--nav-navy);
    box-shadow: 0 2px 14px rgba(5, 9, 28, 0.28);
}

.error404 .site-header .nav-bar::after {
    content: none;
}

.error-page {
    display: flex;
    align-items: center;
    padding: clamp(48px, 8vw, 112px) 20px;
    background:
        linear-gradient(120deg, rgba(30, 58, 138, 0.045), transparent 45%),
        #f4f7f7;
}

.error-page__inner {
    width: min(1120px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    align-items: center;
    gap: clamp(48px, 8vw, 104px);
}

.error-page__kicker {
    margin: 0 0 16px;
    color: #d95624;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.error-page__title {
    max-width: 11ch;
    margin: 0 0 22px;
    color: #0b1739;
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    font-weight: 650;
    letter-spacing: -0.06em;
    line-height: 0.97;
}

.error-page__message {
    max-width: 35rem;
    margin: 0 0 28px;
    color: #4a5871;
    font-size: clamp(1rem, 1.7vw, 1.15rem);
}

.error-page__home {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 2px solid #ef6431;
    border-radius: 4px;
    background: #ef6431;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.error-page__home:hover,
.error-page__home:focus {
    border-color: #d95624;
    background: #d95624;
    color: #fff;
}

.error-page__home:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

.error-page__search-row:focus-within {
    border-radius: 4px;
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

.error-page__search input:focus-visible,
.error-page__search button:focus-visible {
    outline: 0;
}

.error-page__search {
    max-width: 35rem;
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid #cbd6de;
}

.error-page__search label {
    display: block;
    margin-bottom: 9px;
    color: #0b1739;
    font-size: 0.86rem;
    font-weight: 700;
}

.error-page__search-row {
    display: flex;
}

.error-page__search input {
    min-width: 0;
    flex: 1;
    height: 48px;
    padding: 10px 13px;
    border: 1px solid #9aa9b6;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: #fff;
    color: #0b1739;
    font: inherit;
}

.error-page__search button {
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid #1e3a8a;
    border-radius: 0 4px 4px 0;
    background: #1e3a8a;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.error-page__search button:hover {
    background: #142c72;
}

.error-page__chart {
    color: #9bbcc5;
}

.error-page__chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.error-page__grid {
    color: rgba(97, 143, 156, 0.18);
}

.error-page__depth {
    fill: none;
    stroke: #77aeba;
    stroke-width: 2;
    opacity: 0.52;
}

.error-page__depth--two {
    opacity: 0.34;
}

.error-page__depth--three {
    opacity: 0.2;
}

.error-page__route {
    fill: none;
    stroke: #1e3a8a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 3 13;
}

.error-page__route-start {
    fill: #1e3a8a;
}

.error-page__waypoint {
    fill: none;
    stroke: #ef6431;
    stroke-width: 3;
}

.error-page__waypoint-ring {
    opacity: 0.75;
}

.error-page__waypoint-core {
    fill: #ef6431;
    stroke: none;
}

.error-page__code {
    fill: #0b1739;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 116px;
    font-weight: 300;
    letter-spacing: 0.12em;
}

.error-page__chart-label,
.error-page__coordinates {
    fill: #4f7580;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
    .error-page__waypoint-ring {
        transform-box: fill-box;
        transform-origin: center;
        animation: error-waypoint 2.4s ease-out infinite;
    }

    @keyframes error-waypoint {
        0%, 35% {
            opacity: 0.75;
            transform: scale(0.72);
        }
        100% {
            opacity: 0;
            transform: scale(1.22);
        }
    }
}

@media (max-width: 760px) {
    .error-page {
        padding-block: 42px 64px;
    }

    .error-page__inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .error-page__chart {
        width: min(460px, 100%);
        grid-row: 1;
        justify-self: center;
    }

    .error-page__title {
        max-width: 13ch;
        font-size: clamp(2.6rem, 13vw, 4.4rem);
    }
}

@media (max-width: 420px) {
    .error-page__search-row {
        display: grid;
        gap: 8px;
    }

    .error-page__search input,
    .error-page__search button {
        border: 1px solid #9aa9b6;
        border-radius: 4px;
    }

    .error-page__search button {
        border-color: #1e3a8a;
    }
}

/* ==========================================================================
   Search — a working chart rather than another slideshow

   Search is a utility page: the query and a second attempt replace the generic
   hero photograph. The chart grid is quiet brand texture; cards carry the
   actual navigational information — content type, excerpt and destination.
   ========================================================================== */
.search-results .site-header .nav-bar,
.search-no-results .site-header .nav-bar {
    background: var(--nav-navy, #0d1236);
    box-shadow: 0 2px 14px rgba(5, 9, 28, 0.28);
}

.search-results .site-header .nav-bar::after,
.search-no-results .site-header .nav-bar::after {
    content: none;
}

.search-page {
    --search-navy: #081735;
    --search-blue: #173d73;
    --search-orange: #ef6431;
    --search-ink: #17253f;
    --search-muted: #607087;
    --search-mist: #f1f6f6;
    --search-line: #cbd8dd;

    padding: 0;
    background: var(--search-mist);
    color: var(--search-ink);
}

.search-page__hero {
    position: relative;
    overflow: hidden;
    background-color: var(--search-navy);
    background-image:
        linear-gradient(rgba(137, 183, 194, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 183, 194, 0.075) 1px, transparent 1px),
        radial-gradient(circle at 82% 35%, rgba(43, 107, 155, 0.34), transparent 30rem);
    background-size: 42px 42px, 42px 42px, auto;
    color: #fff;
}


.search-page__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
    gap: clamp(38px, 6vw, 74px);
    width: min(1160px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: clamp(42px, 5vw, 60px);
}

.search-page__heading {
    min-width: 0;
}

.search-page__eyebrow {
    margin: 0 0 14px;
    color: #ff956b;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.search-page__title {
    max-width: 19ch;
    margin: 0;
    color: #fff;
    font-family: "Iowan Old Style", Baskerville, "Times New Roman", serif;
    font-size: clamp(2.65rem, 4.2vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.search-page__summary {
    margin: 18px 0 0;
    color: rgba(230, 239, 248, 0.82);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.search-page__form {
    align-self: end;
    padding-left: clamp(24px, 4vw, 52px);
    border-left: 1px solid rgba(177, 208, 220, 0.28);
}

.search-page__form label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-page__form-row {
    display: flex;
}

.search-page__form input {
    min-width: 0;
    height: 56px;
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-right: 0;
    border-radius: 2px 0 0 2px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--search-ink);
    font: inherit;
}

.search-page__form button {
    min-height: 56px;
    padding: 12px 21px;
    border: 1px solid var(--search-orange);
    border-radius: 0 2px 2px 0;
    background: var(--search-orange);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.search-page__form button:hover {
    border-color: #d95624;
    background: #d95624;
}

.search-page__form-row:focus-within {
    border-radius: 2px;
    outline: 3px solid #58a8df;
    outline-offset: 3px;
}

.search-page__form input:focus-visible,
.search-page__form button:focus-visible {
    outline: 0;
}

.search-result-card__title a:focus-visible,
.search-result-card__link:focus-visible,
.search-page .nav-links a:focus-visible {
    outline: 3px solid #58a8df;
    outline-offset: 3px;
}

.search-page__body {
    width: min(1160px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: clamp(34px, 4vw, 50px) clamp(64px, 8vw, 104px);
}

.search-page__results-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.search-page__results-heading h2 {
    margin: 0;
    color: var(--search-ink);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.search-page__results-heading::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--search-line);
}

.search-page__results-heading span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--search-line);
    border-radius: 50%;
    color: var(--search-muted);
    font-size: 0.78rem;
    font-weight: 700;
    order: 2;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.search-result-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d7e1e4;
    border-top: 3px solid var(--search-blue);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(17, 42, 66, 0.055);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.search-result-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -3px;
    left: 28px;
    width: 54px;
    height: 3px;
    background: var(--search-orange);
}

.search-result-card:hover {
    border-color: #aebfc6;
    box-shadow: 0 15px 34px rgba(17, 42, 66, 0.11);
    transform: translateY(-3px);
}

.search-result-card__image {
    display: block;
    height: 190px;
    overflow: hidden;
    background: #dce8ea;
}

.search-result-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.search-result-card:hover .search-result-card__image img {
    transform: scale(1.025);
}

.search-result-card__content {
    display: flex;
    min-height: 270px;
    flex: 1;
    flex-direction: column;
    padding: 28px;
}

.search-result-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 22px;
    margin-bottom: 15px;
    color: var(--search-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.search-result-card__type {
    color: var(--search-blue);
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-result-card__meta time::before {
    content: "·";
    margin-right: 12px;
    color: #a9b7bd;
}

.search-result-card__title {
    margin: 0 0 15px;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.18;
}

.search-result-card__title a {
    color: var(--search-ink);
    text-decoration: none;
}

.search-result-card__title a:hover {
    color: var(--search-blue);
}

.search-result-card__excerpt {
    color: #536277;
    font-size: 0.94rem;
    line-height: 1.65;
}

.search-result-card__excerpt p {
    margin: 0 0 18px;
}

.search-result-card__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e3e9eb;
}

.search-result-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--search-blue);
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
}

.search-result-card__link span[aria-hidden] {
    color: var(--search-orange);
    font-size: 1.1rem;
    transition: transform 160ms ease;
}

.search-result-card__link:hover {
    color: var(--search-orange);
}

.search-result-card__link:hover span[aria-hidden] {
    transform: translateX(3px);
}

.search-result-card__path {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: #8a98a9;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-page__empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(26px, 5vw, 56px);
    max-width: 770px;
    padding: clamp(30px, 5vw, 52px);
    border: 1px solid var(--search-line);
    background: rgba(255, 255, 255, 0.68);
}

.search-page__empty h2 {
    margin: 0 0 8px;
    color: var(--search-ink);
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: -0.035em;
}

.search-page__empty p {
    max-width: 41rem;
    margin: 0;
    color: var(--search-muted);
}

.search-page__empty-mark {
    position: relative;
    width: 92px;
    height: 92px;
    border: 1px solid #8fb0ba;
    border-radius: 50%;
}

.search-page__empty-mark::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 2px solid var(--search-orange);
    border-radius: 50%;
}

.search-page__empty-mark::after {
    content: "";
    position: absolute;
    top: 44px;
    left: -10px;
    width: 110px;
    border-top: 1px solid #8fb0ba;
}

.search-page .navigation.pagination {
    margin-top: 38px;
}

.search-page .nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.search-page .page-numbers {
    display: inline-grid;
    min-width: 42px;
    min-height: 42px;
    place-items: center;
    padding: 7px 12px;
    border: 1px solid var(--search-line);
    background: #fff;
    color: var(--search-blue);
    font-weight: 700;
    text-decoration: none;
}

.search-page .page-numbers.current {
    border-color: var(--search-blue);
    background: var(--search-blue);
    color: #fff;
}

.search-page a.page-numbers:hover {
    border-color: var(--search-orange);
    color: var(--search-orange);
}

@media (max-width: 820px) {
    .search-page__hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .search-page__form {
        padding-top: 28px;
        padding-left: 0;
        border-top: 1px solid rgba(177, 208, 220, 0.28);
        border-left: 0;
    }

    .search-page__title {
        max-width: 18ch;
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .search-page__hero-inner,
    .search-page__body {
        width: min(100% - 30px, 1160px);
    }

    .search-page__hero-inner {
        padding-block: 42px 46px;
    }

    .search-page__title {
        font-size: clamp(2.25rem, 12vw, 3.15rem);
    }


    .search-page__results-heading {
        gap: 12px;
    }

    .search-result-card__content {
        min-height: 0;
        padding: 23px 20px;
    }

    .search-result-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .search-result-card__path {
        width: 100%;
        margin-left: 0;
    }

    .search-page__empty {
        grid-template-columns: 1fr;
    }

    .search-page__empty-mark {
        width: 72px;
        height: 72px;
    }

    .search-page__empty-mark::after {
        top: 34px;
        width: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-result-card,
    .search-result-card__image img,
    .search-result-card__link span[aria-hidden] {
        transition: none;
    }

    .search-result-card:hover,
    .search-result-card:hover .search-result-card__image img,
    .search-result-card__link:hover span[aria-hidden] {
        transform: none;
    }
}