/* cmsms stylesheet: Becket2026 modified: 06/20/26 08:30:21 */
/* ==========================================================================
   BECKET SITE STYLES (2026)
   Consolidated styles for BecketHome2026 and BecketPage2026 templates
   ========================================================================== */

/* --- 1. LAYOUT & STRUCTURE --- */
.page-container {
    max-width: 1280px;
    background-color: #ece6f2;
    margin: 0 auto;
    padding: 0 15px; /* Adds breathing room on mobile */
}

/* Pulls the header and nav outward to absorb the container padding */
header, 
.custom-nav-bar {
    margin-left: -15px;
    margin-right: -15px;
}

.header-banner {
    width: 100%;
    object-fit: contain; /* Ensures the image covers the area without distorting */
}


/* --- 2. GLOBAL HYPERLINKS --- */
/* Applies to all links in the main content area */
main a {
    /* color: #1434A4; Standard Becket blue */
    color: #0066ff; 
    text-decoration: none; 
    transition: color 0.2s ease-in-out;
}

main a:hover, 
main a:focus {
    color: red;
    text-decoration: none;
}

/* Makes transparent toggle buttons act exactly like hyperlinks */
main button.toggle-collections-btn {
    color: #1434A4;
    transition: color 0.2s ease-in-out;
}

main button.toggle-collections-btn:hover {
    color: red;
    text-decoration: none;
}


/* --- 3. CUSTOM NAVIGATION STYLES --- */
/* Main Navigation Bar Background */
.custom-nav-bar,
.custom-nav-bar .dropdown.menu {
    background-color: #1434A4; 
}

/* Top-level menu items */
.custom-nav-bar .dropdown.menu > li > a {
    color: white;
    background-color: #1434A4;
}

/* Top-level menu items - Hover & Active State */
.custom-nav-bar .dropdown.menu > li > a:hover,
.custom-nav-bar .dropdown.menu > li > a:focus,
.custom-nav-bar .dropdown.menu > li.is-active > a {
    background-color: darkred;
    color: white;
}

/* Submenu (Dropdown) Container */
.custom-nav-bar .dropdown.menu .is-dropdown-submenu {
    background-color: white;
    border: 1px solid #ccc;
    z-index: 99; /* Elevates the dropdown above page content */
}

/* Submenu items */
.custom-nav-bar .dropdown.menu .is-dropdown-submenu > li > a {
    color: darkblue;
    background-color: white;
}

/* Submenu items - Hover State */
.custom-nav-bar .dropdown.menu .is-dropdown-submenu > li > a:hover {
    color: red;
    background-color: #f9f9f9; 
}


/* --- 4. CONTENT BOXES --- */
.content-box {
    background: #fefefe;
    border: 1px solid #c0c0f0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

/* Ribbon Title for Content Box */
.content-box-title {
    background-color: #24046c;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Pulls flush to top, left, right */
    padding: 0.4rem 1.5rem; /* Inner spacing */
    border-radius: 3px 3px 0 0; /* Matches content-box 4px radius minus 1px border */
}


/* --- 5. SLIDESHOW COMPONENT --- */
/* Container using CSS Grid to stack images in the exact same space */
.slideshow-container {
    /*margin-top: -15px; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0; 
    overflow: hidden;
}

/* Base style for all slides */
.slide {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures images scale proportionally */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 0.5s fade transition */
    z-index: 0;
}

/* Style for the visible slide */
.slide.active {
    opacity: 1;
    z-index: 1;
}

/* --- 6. MOBILE SPECIFIC TYPOGRAPHY --- */
/* Target screens 639px and smaller (Foundation's 'small' breakpoint) */
@media screen and (max-width: 39.9375em) {
    .mobile-bold {
        font-weight: bold !important;
    }
    .content-box {
        background: #fefefe;
        border: 1px solid #c0c0f0;
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        border-radius: 4px;
    }
}