/*
Theme Name: Bathh
Theme URI: https://bathh.com
Author: SB Creative
Author URI: https://bathh.com
Description: Custom WordPress theme for Bathh.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bathh
Tags: custom-theme
*/

/* ============================================================
   GLOBAL RESET
   ============================================================ */

/* Override Bootstrap 5 CSS variables that drive link decoration */
:root {
    --bs-link-decoration:       none;
    --bs-link-hover-decoration: none;
}

/* Belt-and-braces rule with !important for anything Bootstrap sets inline */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --bathh-teal:      #1a6b7c;
    --bathh-teal-dark: #155a68;
    --bathh-text:      #3d3d3d;
    --bathh-nav-gap:   0.1rem;
}

/* ============================================================
   TOP ACCENT BAR
   ============================================================ */
.bathh-top-bar {
    background-color: var(--bathh-teal);
    height: 6px;
    width: 100%;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
    background: #fff;
    position: relative;
    z-index: 100;
    overflow: visible;
}

/*
 * Shadow is on ::after (z-index 2) instead of .site-header itself.
 * This lets the logo (z-index 10) stack explicitly above the shadow
 * within .site-header's stacking context, including the overhanging portion.
 * Putting box-shadow on the element itself gives no guaranteed paint order
 * over overflowing children across compositing layers in all browsers.
 */
.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    z-index: 2;
    pointer-events: none;
}

/*
 * height (not min-height) caps the bar at exactly 90px.
 * min-height allowed the logo's box to expand the container — height does not.
 * overflow: visible lets the logo bleed below without clipping.
 */
.site-header .navbar {
    height: 90px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    overflow: visible;
}

/* Collapse inherits center alignment for the nav links */
.site-header .navbar-collapse {
    align-items: center;
}

/* Logo — text fallback (no custom logo set) */
.site-header .navbar-brand {
    padding: 0;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    line-height: 1;
}

.site-header .custom-logo-link {
    display: block;
    flex-shrink: 0;
    align-self: flex-start;
    margin-right: 2rem;
    line-height: 1;
    position: relative;
    top: 48px;
    z-index: 10;
}

/* WordPress hard-codes width/height HTML attrs from the full-size upload — override both */
.site-header .custom-logo-link img,
.site-header img.custom-logo {
    height: 132px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */
.site-header .nav-link {
    color: var(--bathh-text);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.5rem var(--bathh-nav-gap);
    margin: 0 0.45rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--bathh-teal);
}

.site-header .nav-link.active,
.site-header .nav-item.current-menu-item > .nav-link {
    color: var(--bathh-teal);
    font-weight: 500;
}

/* Remove Bootstrap's default dropdown caret */
.site-header .dropdown-toggle::after {
    display: none;
}

/*
 * Dropdown toggle button — sits beside the parent nav-link.
 * Carries data-bs-toggle so Bootstrap JS handles tap-to-open on mobile.
 * Hidden on desktop (hover handles that); visible on mobile.
 */
.site-header .nav-item.dropdown {
    display: flex;
    align-items: center;
    position: relative; /* anchor for the absolutely-positioned dropdown-menu */
}

.bathh-dropdown-toggle {
    background: none;
    border: none;
    padding: 0.15rem 0.35rem;
    color: var(--bathh-text);
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
}

.bathh-dropdown-toggle:hover,
.bathh-dropdown-toggle:focus {
    color: var(--bathh-teal);
    outline: none;
}

/* ============================================================
   DROPDOWN MENU
   ============================================================ */
.site-header .dropdown-menu {
    /* Bootstrap 5 removes top/left from CSS and lets Popper set them at runtime.
       We show via CSS hover (no Popper), so we must declare them explicitly. */
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09);
    padding: 0.4rem 0;
    min-width: 230px;
}

.site-header .dropdown-item {
    color: var(--bathh-text);
    font-size: 0.875rem;
    padding: 0.55rem 1.25rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    background-color: #f4f9fa;
    color: var(--bathh-teal);
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    background-color: #f4f9fa;
    color: var(--bathh-teal);
    font-weight: 600;
}

/* ============================================================
   DESKTOP HOVER DROPDOWNS (≥ 992px)
   ============================================================ */
@media ( min-width: 992px ) {
    /* Open on hover — no click needed */
    .site-header .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* The toggle button is mobile-only — hide it on desktop */
    .bathh-dropdown-toggle {
        display: none;
    }
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media ( max-width: 991.98px ) {
    /* Allow the navbar to grow when the mobile menu is open */
    .site-header .navbar {
        height: auto;
        min-height: 90px;
    }

    /* Reset logo overhang — sits normally inside the header on mobile */
    .site-header .custom-logo-link {
        top: 0;
        align-self: center;
    }

    .site-header .custom-logo-link img,
    .site-header img.custom-logo {
        height: 60px !important;
    }

    .site-header .navbar-nav {
        padding: 1rem 0;
        align-items: center !important;
    }

    /* All top-level items span the full column width so links can center within them */
    .site-header .navbar-nav > .nav-item {
        width: 100%;
    }

    .site-header .nav-link {
        margin: 0;
        padding: 0.5rem 0;
        text-align: center;
    }

    /* flex-wrap allows the dropdown-menu to wrap below the link+button row */
    .site-header .nav-item.dropdown {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .site-header .dropdown-menu {
        /* !important overrides Bootstrap JS inline styles set by Popper */
        position: static !important;
        float: none !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        /* flex-basis: 100% forces it to its own line inside the flex parent */
        flex-basis: 100%;
        border: none;
        border-radius: 0;
        padding: 0.25rem 0;
    }

    /* Submenu items: centered, slightly smaller than top-level to show hierarchy */
    .site-header .dropdown-item {
        padding: 0.35rem 0;
        text-align: center;
        color: var(--bathh-text);
        font-size: 0.8rem;
        background: none;
    }

    .site-header .dropdown-item:hover,
    .site-header .dropdown-item:focus {
        background: none;
        color: var(--bathh-teal);
    }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
    background-color: var(--bathh-teal);
    color: #fff;
    position: relative;
}

/* Left — copyright */
.footer-copyright {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Centre — RCCM */
.footer-rccm-logo {
    display: block;
    margin: 0 auto 0.65rem;
    max-height: 80px;
    width: auto;
}

.footer-rccm-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* Right — partner logos */
.footer-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-partner-logo {
    max-height: 44px;
    width: auto;
    display: block;
}

/* Scroll-to-top button */
.footer-scroll-top {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 0;
    line-height: 1;
}

.footer-scroll-top:hover,
.footer-scroll-top:focus {
    background-color: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.55);
    outline: none;
}

/* Mobile: stack footer columns, hide absolute scroll button */
@media ( max-width: 767.98px ) {
    .site-footer .text-center {
        text-align: center !important;
    }

    .footer-copyright {
        text-align: center;
    }

    .footer-scroll-top {
        position: static;
        transform: none;
        margin: 0.5rem auto 0;
        display: flex;
    }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    /* background-image set via inline style in template (needs PHP get_template_directory_uri) */
    background-size: cover;
    background-repeat: no-repeat;
    /*
     * Position the image so the dandelion (right two-thirds of the source)
     * stays visible on the right while the clear left half holds the text.
     */
    background-position: right center;
    background-color: #e6f3f7; /* light-blue fallback matching the image */
    min-height: 330px;
    display: flex;
    align-items: center;
    /*
     * padding-top clears the logo overhang (≈90px below the header bar)
     * so the text starts below the logo circle, matching the design.
     */
    padding-top: 6rem;
    padding-bottom: 2.5rem;
}

.hero-text {
    margin: 0;
    color: var(--bathh-teal);
    font-size: clamp( 1.15rem, 2.2vw, 1.6rem );
    font-weight: 300;
    line-height: 1.55;
    text-align: center;
}

/* ---- Hero responsive ---- */
@media ( max-width: 767.98px ) {
    .hero-section {
        min-height: 220px;
        padding-top: 5rem;
        padding-bottom: 1.5rem;
        /*
         * On narrow screens shift the focal point left so some of the
         * dandelion is still visible without crushing the text.
         */
        background-position: 75% center;
    }

    .hero-text {
        font-size: 1.05rem;
    }
}

/* ============================================================
   WELCOME SECTION
   ============================================================ */
.welcome-section {
    padding: 3.5rem 0 4rem;
    text-align: center;
}

/* JOIN HERE button */
.btn-join {
    display: inline-block;
    background-color: #1cb5c4;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7rem 2rem;
    border-radius: 3px;
    margin-bottom: 2rem;
    transition: background-color 0.2s ease;
}

.btn-join:hover,
.btn-join:focus {
    background-color: #17a0ae;
    color: #fff;
}

/* ALL NEWS button — same base style as .btn-join */
.btn-all-news {
    display: inline-block;
    background-color: #1cb5c4;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.7rem 2rem;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-all-news:hover,
.btn-all-news:focus {
    background-color: #17a0ae;
    color: #fff;
}

/* Heading */
.welcome-heading {
    font-size: clamp( 1.6rem, 3vw, 2.2rem );
    font-weight: 400;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Body paragraphs */
.welcome-body {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Sub-heading */
.welcome-subheading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* ============================================================
   NEWEST MEMBERS BANNER
   ============================================================ */
.newest-members-banner {
    background-color: #9e9e9e;
    text-align: center;
    padding: 1.6rem 1rem;
    width: 100%;
}

.newest-members-heading {
    margin: 0;
    color: #fff;
    font-size: clamp( 1.2rem, 2.5vw, 1.75rem );
    font-weight: 400;
}

/* Responsive YouTube embed */
.welcome-video-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
    background-color: #fff;
    padding: 3rem 0;
}

.feature-heading {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.feature-heading a {
    color: #1a8a9e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.feature-heading a:hover,
.feature-heading a:focus {
    color: var(--bathh-teal-dark);
    text-decoration: underline;
}

.feature-body {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   OUR MEMBERS SECTION
   ============================================================ */
.our-members-section {
    background-color: #f2f2f2;
    padding: 3rem 0;
    text-align: center;
}

.our-members-heading {
    font-size: clamp( 1.5rem, 2.8vw, 2rem );
    font-weight: 400;
    color: #333;
    margin-bottom: 1.25rem;
}

.our-members-body {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 760px;
    margin: 0 auto;
}

.our-members-link {
    color: #1a8a9e;
    text-decoration: none;
    font-weight: 500;
}

.our-members-link:hover,
.our-members-link:focus {
    color: var(--bathh-teal-dark);
    text-decoration: underline;
}

/* ============================================================
   BOARD MEMBERS SECTION (heading + card grid on shared teal bg)
   ============================================================ */
.board-members-section {
    background-color: #92c5cd;
    padding-bottom: 3rem;
}

.board-members-heading {
    margin: 0;
    color: #333;
    font-size: clamp( 1.5rem, 2.8vw, 2rem );
    font-weight: 400;
    text-align: center;
    padding: 1.6rem 1rem;
}

/* Card shell — centered, airy */
.board-member-card {
    background: #fff;
    border: 1px solid #dde9eb;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem 1.5rem;
}

/* Name — bold teal */
.board-member-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bathh-teal);
    margin: 0 0 1.1rem;
    line-height: 1.3;
    width: 100%;
}

/* Featured image — contained portrait, framed with border + inner padding */
.board-member-img {
    flex-shrink: 0;
    margin-bottom: 1.1rem;
    border: 1px solid #ccc;
    padding: 5px;
    display: inline-flex;
}

.board-member-img img {
    width: 140px;
    height: auto;
    display: block;
    object-fit: unset;
}

/* Designation — bold black */
.board-member-designation {
    font-size: 0.85rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
}

/* Excerpt — centered gray text */
.board-member-excerpt {
    font-size: 0.82rem;
    color: #777;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
    width: 100%;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.section-divider {
    border: none;
    border-top: 2px solid #007c98;
    width: 100%;
    margin: 40px 0;
}

/* ============================================================
   RECENT NEWS SECTION
   ============================================================ */
.recent-news-section {
    padding: 3rem 0;
    background-color: #fff;
}

.recent-news-heading {
    font-size: clamp( 1.5rem, 2.8vw, 2rem );
    font-weight: 400;
    color: #333;
    text-align: center;
    margin: 0 0 2rem;
}

/* ---- News cards ---- */
.news-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image — full card width, fixed height, cropped to fill */
.news-card-img-link {
    display: block;
    overflow: hidden;
}

.news-card-img {
    overflow: hidden;
}

.news-card-img img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.news-card-img-link:hover .news-card-img img {
    transform: scale( 1.03 );
}

/* Body */
.news-card-body {
    padding: 1.4rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Title — dark teal, links cleanly */
.news-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.75rem;
}

.news-card-title a {
    color: var(--bathh-teal);
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-card-title a:hover,
.news-card-title a:focus {
    color: var(--bathh-teal-dark);
    text-decoration: underline;
}

/* Excerpt */
.news-card-excerpt {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    flex-grow: 1;
}

/* "Find out more →" CTA */
.news-card-cta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bathh-teal);
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: auto;
}

.news-card-cta:hover,
.news-card-cta:focus {
    color: var(--bathh-teal-dark);
    text-decoration: underline;
}

/*
 * Reusable top clearance for inner page templates.
 * Pushes content below the overhanging logo (~90px below header bar).
 * Add class="page-top-clearance" to <main> on any non-home page template.
 * Do NOT add to the home template — the hero intentionally sits flush.
 */
.page-top-clearance {
    padding-top: 6.5rem; /* ~104px: clears 90px logo overhang + breathing room */
}

@media ( max-width: 991.98px ) {
    /* On mobile the logo doesn't overhang, so less clearance needed */
    .page-top-clearance {
        padding-top: 2rem;
    }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-container {
    padding-top: 0;        /* clearance handled by .page-top-clearance on <main> */
    padding-bottom: 4rem;
}

/* Intro text */
.contact-intro {
    margin-bottom: 2.5rem;
}

.contact-intro p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

.contact-email-link {
    color: var(--bathh-teal);
    font-weight: 500;
}

.contact-email-link:hover,
.contact-email-link:focus {
    color: var(--bathh-teal-dark);
}

/* CF7 form field styles */
.contact-page .wpcf7-form p {
    margin-bottom: 1rem;
}

.contact-page .wpcf7-form input[type="text"],
.contact-page .wpcf7-form input[type="email"],
.contact-page .wpcf7-form textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease;
}

.contact-page .wpcf7-form input[type="text"]:focus,
.contact-page .wpcf7-form input[type="email"]:focus,
.contact-page .wpcf7-form textarea:focus {
    border-color: var(--bathh-teal);
    outline: none;
}

.contact-page .wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Submit button */
.contact-page .wpcf7-form input[type="submit"],
.contact-page .wpcf7-submit {
    background-color: #1cb5c4;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 3px;
    padding: 0.65rem 2rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contact-page .wpcf7-form input[type="submit"]:hover,
.contact-page .wpcf7-submit:hover {
    background-color: #17a0ae;
}

/* Right sidebar */
.contact-sidebar-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.contact-pr-name {
    font-weight: 700;
    color: #555;
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.contact-pr-email {
    display: inline-block;
    font-size: 0.9rem;
}

/* ============================================================
   ENTRY CONTENT — Full Width template
   ============================================================ */

/* Body/content text — medium gray */
.entry-content p,
.entry-content li {
    color: #888;
}

/* Inline content links — teal.
 * Covers .entry-content (full-width / training-videos templates) and
 * .single-news-content (single-news, single-blog, single-journals).
 * !important overrides Bootstrap's CSS-variable-driven default blue. */
.entry-content a,
.single-news-content a {
    color: #007c98 !important;
}

.entry-content a:hover,
.entry-content a:focus,
.single-news-content a:hover,
.single-news-content a:focus {
    color: #005a6e !important;
}

/* Teal bullet markers — only the dot, not the text */
.entry-content ul li::marker {
    color: #007c98;
}

/* ============================================================
   PAGE TITLE (full-width template and other inner pages)
   ============================================================ */
.page-title {
    font-size: clamp( 1.6rem, 3vw, 2.2rem );
    font-weight: 400;
    color: #007c98;
    text-align: center;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e8e8e8;
}

/* ============================================================
   TRAINING VIDEOS PAGE
   ============================================================ */
.training-videos-grid {
    margin-top: 2rem;
}

/* Card border and internal spacing */
.training-video-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.25rem;
    height: 100%;
}

/* Embed — fills the col width at 16:9 via Bootstrap .ratio */
.training-video-embed {
    margin-bottom: 1rem;
}

/* ACF oEmbed outputs an <iframe>; make it fill the ratio container */
.training-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Title */
.training-video-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #007c98;
    margin: 0 0 0.6rem;
}

/* Editor text */
.training-video-text p {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* Empty state */
.training-videos-empty {
    color: #888;
    text-align: center;
    padding: 2rem 0;
}

/* ============================================================
   ARCHIVE PAGINATION & EMPTY STATE
   ============================================================ */
.archive-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.archive-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid #007c98;
    color: #007c98;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers:focus {
    background-color: #007c98;
    color: #fff;
}

.archive-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    color: #888;
}

.archive-empty {
    color: #888;
    text-align: center;
    padding: 2rem 0;
}

/* ============================================================
   NEWS ARCHIVE — post list (left column)
   ============================================================ */
.news-list-item {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e8e8e8;
}

.news-list-item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.news-list-img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 1rem;
}

.news-list-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.news-list-img-link:hover .news-list-img {
    transform: scale( 1.02 );
}

.news-list-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    line-height: 1.35;
}

.news-list-title a {
    color: #333;
    transition: color 0.2s ease;
}

.news-list-title a:hover,
.news-list-title a:focus {
    color: #007c98;
}

.news-list-excerpt {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.news-list-more {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #007c98;
}

.news-list-more:hover,
.news-list-more:focus {
    color: #005f78;
}

/* ============================================================
   NEWS ARCHIVE — category sidebar (right column)
   ============================================================ */
.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.news-cat-btn {
    display: block;
    background-color: #007c98;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.65rem 1rem;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.news-cat-btn:hover,
.news-cat-btn:focus,
.news-cat-btn--active {
    background-color: #005f78;
    color: #fff;
}

/* ============================================================
   SINGLE NEWS POST
   ============================================================ */
.single-news-title {
    font-size: clamp( 1.3rem, 2.5vw, 1.75rem );
    font-weight: 400;
    color: #333;
    margin: 1rem 0 1.25rem;
    line-height: 1.4;
}

.single-news-img {
    margin-bottom: 1.5rem;
}

.single-news-img img {
    width: 100%;
    height: auto;
    display: block;
}

.single-news-content {
    margin-bottom: 1.75rem;
}

.single-news-content p {
    color: #888;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* ============================================================
   BOARD MEMBERS PAGE — horizontal list cards
   (separate from the homepage grid; do not share classes)
   ============================================================ */
.bm-list-card {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    border: 1px solid #e0e0e0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Portrait image with framed border */
.bm-list-img {
    flex-shrink: 0;
    border: 1px solid #ccc;
    padding: 4px;
    display: inline-flex;
}

.bm-list-img img {
    width: 150px;
    height: auto;
    display: block;
}

/* Text column */
.bm-list-body {
    flex: 1;
    min-width: 0;
}

.bm-list-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #007c98;
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

.bm-list-designation {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bm-list-content p {
    color: #888;
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 0.6rem;
}

/* Mobile: stack image above text */
@media ( max-width: 575.98px ) {
    .bm-list-card {
        flex-direction: column;
        gap: 1rem;
    }
}