/* ============================================================
   TABLE OF CONTENTS
   1. Font Imports & Font Utility Classes
   2. Heading Styles (H2 / Blog List Titles)
   3. "custom-menu" Gadget — Main Site Navigation
   4. "custom-secondary-menu" Gadget — Unrelated Menu Widget
   5. Hide "Posted By" / Author Profile Links
   6. Mobile Responsiveness — Text & Layout
   7. Mobile — Hide Slideshow/Camera Banner

   NOTE: Sections 3 and 4 style TWO DIFFERENT, UNRELATED Wild
   Apricot menu gadgets — "custom-menu" and
   "custom-secondary-menu". They are NOT a primary/secondary
   pair of the same menu and do not share markup, structure,
   or a parent-child relationship. Each is self-contained;
   treat them as fully independent components.
   ============================================================ */


/* ============================================================
   1. FONT IMPORTS & FONT UTILITY CLASSES
   Loads Alatsi + Merriweather from Google Fonts and defines
   reusable classes (.font-a, .font-b, and bold/all-caps
   variants) that can be applied to any element to force a
   specific typeface.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alatsi&family=Merriweather:wght@400;700&display=swap');

/* Font A — Alatsi (regular) */
.font-a {
    font-family: 'Alatsi', Arial, sans-serif !important;
    font-weight: 400;
}

.font-a,
.font-a * {
    font-family: 'Alatsi', Arial, sans-serif !important;
}

/* Font B — Merriweather (regular) */
.font-b {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 400;
}

.font-b,
.font-b * {
    font-family: 'Merriweather', Georgia, serif !important;
}

/* Font A — Alatsi — Bold & All Caps variant */
.font-a-bc {
    font-family: 'Alatsi', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.font-a-bc,
.font-a-bc * {
    font-family: 'Alatsi', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Font B — Merriweather — Bold & All Caps variant */
.font-b-bc {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.font-b-bc,
.font-b-bc * {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}


/* ============================================================
   2. HEADING STYLES (H2 / BLOG LIST TITLES)
   Sets a consistent Verdana-based style for all H2 elements
   and for blog "state list" widget titles/links.
   ============================================================ */

H2,
.gadgetStyleNone H2,
.WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle,
.WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16pt;
    color: #000000;
}


/* ============================================================
   3. "custom-menu" GADGET — MAIN SITE NAVIGATION
   CSS CLASS: custom-menu
   ⚠️ STANDALONE GADGET — separate from "custom-secondary-menu"
   below (Section 4). This is the primary horizontal nav bar
   and its own dropdown sub-pages; it is unrelated to the
   custom-secondary-menu gadget. Do not mix the two together.

   Renders the main navigation bar with a solid navy background,
   uppercase white links separated by thin dividers, a gold-tan
   hover color, and a horizontally scrollable layout on mobile.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

.custom-menu {
    background: #112e66 !important;
    width: 100% !important;
}

.custom-menu .menuInner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.custom-menu .menuInner ul.firstLevel {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex-wrap: wrap;
}

.custom-menu .menuInner ul.firstLevel > li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.custom-menu .menuInner ul.firstLevel > li > .item {
    text-align: center !important;
}

/* --- Main menu links --- */
.custom-menu .menuInner ul.firstLevel > li > .item > a {
    display: block !important;
    padding: 14px 20px !important;

    font-family: 'Merriweather', Georgia, serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    color: #ffffff !important;
    background: transparent !important;

    border-right: 1px solid rgba(255,255,255,.12) !important;

    white-space: nowrap;
    text-align: center !important;
}

/* --- Remove divider border after the last main menu item --- */
.custom-menu .menuInner ul.firstLevel > li:last-child > .item > a {
    border-right: none !important;
}

/* --- Subpages (2nd/3rd level dropdowns): font + size only --- */
.custom-menu .menuInner ul.secondLevel a,
.custom-menu .menuInner ul.secondLevel a span,
.custom-menu .menuInner ul.thirdLevel a,
.custom-menu .menuInner ul.thirdLevel a span {
    font-family: 'Merriweather', Georgia, serif !important;
    font-size: 12.5px !important;
}

/* --- Hover state — main menu --- */
.custom-menu .menuInner ul.firstLevel > li > .item > a:hover {
    background: #0c1f47 !important;
    color: #e9d3a0 !important;
}

/* --- Mobile: horizontally scrollable menu row --- */
@media (max-width: 880px) {

    .custom-menu .menuInner {
        justify-content: flex-start !important;
    }

    .custom-menu .menuInner ul.firstLevel {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .custom-menu .menuInner ul.firstLevel > li {
        flex: 0 0 auto;
    }

    .custom-menu .menuInner ul.firstLevel > li > .item > a {
        padding: 14px 18px !important;
        font-size: 12px !important;
    }
}



/* ============================================================
   4. "custom-secondary-menu" GADGET — UNRELATED MENU WIDGET
   CSS CLASS: custom-secondary-menu
   ⚠️ STANDALONE GADGET — separate from "custom-menu" above
   (Section 3). This is a completely different menu widget,
   not a sub-level or child of custom-menu. Do not mix the
   two together.

   Renders this menu as a row of pill/button-style links
   (white background, navy text, navy on hover), with
   matching styles for sub-page dropdown levels and a
   horizontally scrollable layout on mobile.
   ============================================================ */

/* ========================================
   SECONDARY MENU
   CSS CLASS: custom-secondary-menu
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');


/* Secondary menu container */

.custom-secondary-menu {
    width: 100% !important;
}


/* Menu list */

.custom-secondary-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Individual menu items */

.custom-secondary-menu li {
    margin: 0 !important;
    padding: 0 !important;
}


/* Buttons */

.custom-secondary-menu a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 16px !important;

    font-family: 'Merriweather', Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    color: #112e66 !important;
    background: #ffffff !important;

    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}


/* Hover */

.custom-secondary-menu a:hover {
    background: #112e66 !important;
    color: #ffffff !important;
    border-color: #112e66 !important;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 880px) {

    .custom-secondary-menu ul {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
    }

    .custom-secondary-menu a {
        padding: 9px 14px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
   5. HIDE "POSTED BY" / AUTHOR PROFILE LINKS
   Removes the "posted by" byline on blog posts/comments and
   disables/hides links to member public profiles.
   ============================================================ */

SPAN.postedByComment {
    display: none;
}

.author-link {
    display: none !important;
}

.author-link {
    pointer-events: none;
    text-decoration: none;
}

.author-link {
    display: none !important;
}

.WaGadgetBlog a[href*="PublicProfile"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none !important;
    color: inherit !important;
}


/* ============================================================
   6. MOBILE RESPONSIVENESS — TEXT & LAYOUT
   Improves readability on small screens (<= 767px): prevents
   text overflow, resizes headings/paragraphs/lists/tables,
   scales images/iframes, and tightens page padding.
   ============================================================ */

@media (max-width: 767px) {

    /* Prevent text from overflowing */
    body,
    p,
    div,
    span,
    li,
    td,
    th {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Main body text */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Headings */
    h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 27px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px;
    }

    h3 {
        font-size: 23px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px;
    }

    /* Paragraphs */
    p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    /* Lists */
    ul,
    ol {
        padding-left: 22px;
    }

    li {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px;
    }

    /* Links */
    a {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Tables */
    table {
        max-width: 100% !important;
    }

    td,
    th {
        font-size: 15px !important;
    }

    /* Images should never push the page wider */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Iframes and embedded content */
    iframe {
        max-width: 100%;
    }
}

/* --- Mobile: tighten page/content padding so text isn't cramped --- */
@media (max-width: 767px) {
    .content-wrapper,
    .zone-content,
    .zone-content-inner,
    .wa-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* ============================================================
   7. MOBILE — HIDE SLIDESHOW / CAMERA BANNER
   Hides the header slideshow (CameraSlideshow / WA slideshow
   widget) on small screens to save vertical space.
   ============================================================ */

@media (max-width: 767px) {
    .camera_wrap,
    .camera_container,
    .waSlideShow {
        display: none !important;
    }
}