@charset "UTF-8";

/* ============================================================
   1. BASE LAYOUT & TYPOGRAPHY
   ============================================================ */

body {
    /* space for fixed header (rows 1–2) – overridden in media queries */
    padding-top: 190px;
    background-color: #F5F7FA;        /* light gray page background */
    color: #222222;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-family: "Georgia", serif;
    color: #0A4B4A;
}

/* Main content area as white card */
#main-container,
#content-container,
#content-wrapper,
#content {
    background-color: #FFFFFF;
}

/* Links */
a {
    color: #0A4B4A;
}
a:hover {
    color: #0C5C5B;
}

/* Paragraphs under banner / main body copy */
#content p {
    font-size: 16px;
    line-height: 1.6;
}

/* Logo images */
.company-logo img,
.companyLogo img,
#header_row1_column1 img {
    max-height: 70px !important;
    width: auto !important;
}

/* Wider main content column (10/12 width, centered) */
.i4a_main_content_row .i4a_page_content {
    flex: 0 0 83.3333% !important;
    max-width: 83.3333% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Hide legacy nav arrows */
.sub-arrow {
    display: none !important;
}

/* ============================================================
   2. HEADER & NAVIGATION
   ============================================================ */

/* Fixed header (rows 1–2) */
.seac-header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    z-index: 1030;
}

/* Header rows */
.i4a_header_row1,
.i4a_header_row2 {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E3E6EA !important;
}

.i4a_header_row1 {
    padding-top: 12px;
    padding-bottom: 8px;
}

/* Row 3 (banner row) scrolls with page */
.i4a_header_row3 {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E3E6EA !important;
    position: static !important;
}

/* Push logo slightly off the left edge */
#header_row1_column1 {
    padding-left: 20px !important;
}

/* Nav bar */
nav.mainNavigation,
#mainNavbar,
.navbar {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E3E6EA !important;
    border-bottom: 1px solid #E3E6EA !important;
    box-shadow: none !important;
}

/* Top-level nav links */
#mainNavbar > ul > li > a,
.navbar-nav > li > a {
    color: #22313F !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    text-transform: none !important;
    background: transparent !important;
}

/* Hover / active nav links */
#mainNavbar > ul > li > a:hover,
.navbar-nav > li > a:hover,
#mainNavbar > ul > li.active > a,
.navbar-nav > li.active > a {
    color: #0A4B4A !important;
    background-color: transparent !important;
}

/* Dropdown menus */
.navbar-nav > li > .dropdown-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #E3E6EA !important;
}
.navbar-nav > li > .dropdown-menu > li > a {
    color: #22313F !important;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
    background-color: #F5F7FA !important;
    color: #0A4B4A !important;
}

/* ============================================================
   3. PAGE TITLE & SIDEBAR
   ============================================================ */

.pageTitle {
    text-align: left !important;
    padding-left: 30px !important;
    height: 72px !important;
    line-height: 72px !important;
    background-color: #0A1A2F !important;
    color: #FFFFFF !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    margin-bottom: 25px;
    border-radius: 8px;
}

/* Left sidebar (dark strip) */
.i4a_left_sidebar {
    background-color: #0A1A2F !important;
    border-top: 4px solid #456079 !important;
    min-height: 300px !important;
}

/* ============================================================
   4. BUTTONS (TEAL PILL STYLE)
   ============================================================ */

.btn,
.btn-primary,
.btn-default,
.btn-danger,
input[type="submit"],
button {
    background-color: #0A4B4A !important;
    border-color: #0A4B4A !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;   /* pill shape */
    font-weight: 600 !important;
    padding: 8px 20px !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-default:hover,
.btn-danger:hover,
input[type="submit"]:hover,
button:hover {
    background-color: #0C5C5B !important;
    border-color: #0C5C5B !important;
}

/* ============================================================
   5. HERO BANNER (ROW 3)
   ============================================================ */

/* Container used by i4a widget (single-image banner) */
.seac-hero-banner {
    max-width: 1100px;
    margin: 20px auto 40px;
}

/* Beige background panel */
.seac-hero-bg {
    background-color: #F5EEE3;
    border-radius: 10px;
    padding: 0;
}

/* Two-column layout when using .seac-hero-row + left/right */
.banner-wrapper,
.menu-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.banner-wrapper.seac-hero-row {
    display: flex;
    align-items: stretch;
    background-color: #F5EEE3;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto 20px auto;
    padding: 0;
}

/* Left side image */
.seac-hero-left {
    flex: 0 0 60%;
    max-width: 60%;
}
.seac-hero-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right side text */
.seac-hero-right {
    flex: 0 0 40%;
    max-width: 40%;
    padding: 30px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.seac-hero-right h1,
.seac-hero-right h2,
.seac-hero-right h3 {
    font-family: Georgia, serif;
    color: #0A4B4A;
    margin-bottom: 12px;
}
.seac-hero-right p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Right-hand text widget (if “Upcoming Meeting” lives there) */
#header_row3_column2,
#header_row3_column2 * {
    color: #222222;
    font-family: "Georgia", serif;
}
#header_row3_column2 h2,
#header_row3_column2 h3 {
    color: #0A4B4A;
}

/* Keep banner height under control */
#header_row3_column1,
.banner-wrapper {
    max-height: 250px;
    overflow: hidden;
}

/* ============================================================
   6. FOOTER – 2 COLUMNS + BOTTOM BAR
   ============================================================ */

#footer-container {
    background-color: #F5F7FA !important;
    border-top: 2px solid #E3E6EA !important;
    padding: 0 !important;
}

/* White box around the two columns */
.footer-top.row {
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    margin: 20px auto !important;
    padding: 20px 0 20px 0 !important;
}

/* Remove gap — no extra background or padding on wrapper */
#footer-wrapper {
    background-color: transparent !important;
    border-top: none !important;
    padding: 0 25px !important;
    margin: 0 auto !important;
    max-width: 1100px !important;
}

/* Override Bootstrap row */
.footer-top.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    max-width: 1100px !important;
    padding: 20px 0 !important;
}

/* Override Bootstrap col-md-4 on both columns */
#extra-a,
#extra-c {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
    box-sizing: border-box;
    padding: 20px 25px;
    font-size: 80%;
}

#extra-a {
    border-right: 1px solid #E3E6EA;
}

/* Footer headings */
#extra-a h1, #extra-a h2, #extra-a h3,
#extra-c h1, #extra-c h2, #extra-c h3 {
    font-family: "Georgia", serif;
    font-weight: 700;
    color: #0A4B4A;
    margin-bottom: 10px;
}

/* Footer text + links */
#extra-a p, #extra-a li, #extra-a div,
#extra-c p, #extra-c li, #extra-c div {
    color: #222222;
    line-height: 1.4;
}

#extra-a a, #extra-c a {
    color: #0A4B4A;
    text-decoration: none;
}

#extra-a a:hover, #extra-c a:hover {
    text-decoration: underline;
}

/* Bottom bar */
#footer {
    background-color: #FFFFFF;
    color: #222222;
    border-top: 1px solid #E3E6EA;
    padding: 10px 25px;
    width: 100%;
}

/* Stack on small screens */
@media (max-width: 768px) {
    #extra-a, #extra-c {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-right: none;
    }
}
/* ============================================================
   7. RESPONSIVE HEADER PADDING
   ============================================================ */

/* Desktop & large tablets */
@media (min-width: 992px) {
    body { padding-top: 150px !important; }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991px) {
    body { padding-top: 210px !important; }
}

/* Phones / small screens */
@media (max-width: 767px) {
    body { padding-top: 230px !important; }
}
