/* ============================================================
   PGCTC Website - Custom CSS for WildApricot
   Theme: whiteboard_maya_blue.v3.0
   Paste into: WA Admin > Website > CSS
   RULE: Do NOT override theme layout. Colors, fonts, hiding only.
   ============================================================ */

/* --- HIDE ELEMENTS --- */

.WaGadgetNavigationLinks {
    display: none !important;
}

.WaGadgetNavigationTree {
    display: none !important;
}

.WaGadgetBreadcrumbs {
    display: none !important;
}

.WaGadgetSiteSearch {
    display: none !important;
}

/* Hide the "Welcome to..." title gadget in the header — shotgun selectors */
.WaGadgetContentBlock.WaGadgetLast,
.WaGadgetPageTitle,
.WaPlaceHolderHeader1 .WaGadgetContent,
.WaPlaceHolderHeader1 .WaGadgetContentBlock,
#idPageTitle {
    display: none !important;
}

/* --- NAV BAR — COLOR ONLY --- */

.WaGadgetMenuHorizontal {
    background: #1B3A5C !important;
}

/* Nav bar inner background — kills the teal #40b2cf bleed-through */
.WaGadgetMenuHorizontal .menuBackground {
    background: #1B3A5C !important;
    background-color: #1B3A5C !important;
}

/* Nav links — ensure white text (global `a { color: #2D7DD2 }` may override) */
.WaGadgetMenuHorizontal a {
    color: #FFFFFF !important;
}

/* Nav link hover */
.WaGadgetMenuHorizontal a:hover {
    color: #F0C808 !important;
}

/* Active/current page highlight */
.WaGadgetMenuHorizontal .menu-item-act > a {
    color: #F0C808 !important;
}

/* Dropdown menus — override teal #40b2cf background */
.WaGadgetMenuHorizontal ul ul {
    background: #1B3A5C !important;
}

.WaGadgetMenuHorizontal ul ul li > .item:hover > a,
.WaGadgetMenuHorizontal ul ul li > .item > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F0C808 !important;
}

.WaGadgetMenuHorizontal ul ul li.sel > .item > a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F0C808 !important;
}

/* Menu hover/active — override dark teal #07738e with gold */
.WaGadgetMenuHorizontal ul.firstLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal ul.firstLevel > li > .item > a:hover {
    color: #F0C808 !important;
    background: transparent !important;
}

.WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a {
    color: #F0C808 !important;
}

/* --- TYPOGRAPHY --- */

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #1B3A5C !important;
}

a { color: #2D7DD2 !important; }
a:hover { color: #1B3A5C !important; }

/* Override global link color inside dark-background components */
.pgctc-hero a,
.pgctc-hero-image a,
.pgctc-cta-banner a { color: #FFFFFF !important; }
.pgctc-hero a:hover,
.pgctc-hero-image a:hover,
.pgctc-cta-banner a:hover { color: #F0C808 !important; }

/* --- BUTTONS --- */

.primaryButton,
a.primaryButton {
    background-color: #2D7DD2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

input[type="submit"] {
    background-color: #2D7DD2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
}

/* Keep WA's hidden NoScript/disabled fallback buttons hidden */
.WaGadgetMembershipApplication input[disabled],
.navigationContainer input[type="submit"][disabled] {
    display: none !important;
}

.primaryButton:hover,
a.primaryButton:hover,
input[type="submit"]:hover {
    background-color: #1B3A5C !important;
}

/* Form buttons (membership application) */
.WaGadgetMembershipApplication button,
.WaGadgetMembershipApplication input[type="button"],
.WaGadgetMembershipApplication input[type="submit"] {
    background-color: #2D7DD2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.WaGadgetMembershipApplication button:hover,
.WaGadgetMembershipApplication input[type="button"]:hover,
.WaGadgetMembershipApplication input[type="submit"]:hover {
    background-color: #1B3A5C !important;
}

/* --- FOOTER --- */

.zoneFooter1Outer {
    background: #1B3A5C !important;
    background-image: none !important;
}

.zoneFooter1Outer,
.zoneFooter1Outer p,
.zoneFooter1Outer span,
.zoneFooter1Outer .WaGadgetContent,
.zoneFooter1Outer .WaGadgetContent p,
.zoneFooter1Outer .gadgetContentEditableArea,
.zoneFooter1Outer .gadgetContentEditableArea p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.zoneFooter1Outer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.zoneFooter1Outer a:hover {
    color: #F0C808 !important;
}

/* --- CUSTOM PAGE COMPONENTS (for our HTML content) --- */

.pgctc-hero {
    background: linear-gradient(135deg, #1B3A5C 0%, #2D7DD2 100%) !important;
    color: #FFFFFF !important;
    padding: 80px 40px !important;
    text-align: center !important;
}

.pgctc-hero h1 { color: #FFFFFF !important; font-size: 2.8rem !important; }
.pgctc-hero p { color: rgba(255, 255, 255, 0.9) !important; font-size: 1.25rem !important; max-width: 700px !important; margin: 0 auto 1.5em !important; }
.pgctc-hero .hero-buttons { display: flex !important; gap: 16px !important; justify-content: center !important; flex-wrap: wrap !important; }

/* Hero variant with background image (homepage) */
.pgctc-hero-image {
    background: linear-gradient(rgba(27,58,92,0.85), rgba(27,58,92,0.85)),
                url('/resources/Pictures/national-harbor.jpg') center/cover no-repeat;
    background-color: #1B3A5C;
    color: #FFFFFF !important; padding: 100px 40px !important; text-align: center !important;
}
.pgctc-hero-image h1 { color: #FFFFFF !important; font-size: 2.8rem !important; }
.pgctc-hero-image p { color: rgba(255, 255, 255, 0.9) !important; font-size: 1.25rem !important; max-width: 700px !important; margin: 0 auto 1.5em !important; }
.pgctc-hero-image .hero-buttons { display: flex !important; gap: 16px !important; justify-content: center !important; flex-wrap: wrap !important; }

.pgctc-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    padding: 40px 0 !important;
}

.pgctc-card {
    background: #FFFFFF !important;
    border: 1px solid #E8ECF1 !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
    text-align: center !important;
}

.pgctc-card:hover { box-shadow: 0 8px 24px rgba(27, 58, 92, 0.12) !important; }
.pgctc-card h3 { color: #1B3A5C !important; }
.pgctc-card p { color: #4A4A5A !important; font-size: 0.95rem !important; }

.pgctc-paths {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 48px 0 !important;
}

.pgctc-path {
    background: #F5F7FA !important;
    border-radius: 12px !important;
    padding: 40px 32px !important;
    text-align: center !important;
    border-left: 4px solid #2D7DD2 !important;
}

.pgctc-path:nth-child(2) { border-left-color: #F0C808 !important; }

.pgctc-stats {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    background: #1B3A5C !important;
    color: #FFFFFF !important;
    padding: 48px 24px !important;
    text-align: center !important;
}

.pgctc-stat .stat-number { font-size: 2.5rem !important; font-weight: 800 !important; color: #F0C808 !important; display: block !important; }
.pgctc-stat .stat-label { font-size: 0.9rem !important; color: rgba(255, 255, 255, 0.85) !important; text-transform: uppercase !important; }

.pgctc-cta-banner {
    background: linear-gradient(135deg, #2D7DD2 0%, #1B3A5C 100%) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 48px 24px !important;
}

.pgctc-cta-banner h2 { color: #FFFFFF !important; }
.pgctc-cta-banner p { color: rgba(255, 255, 255, 0.9) !important; }

.pgctc-section { padding: 60px 0 !important; }
.pgctc-section h2 { text-align: center !important; margin-bottom: 1em !important; }
.pgctc-section-subtitle { text-align: center !important; color: #6C757D !important; font-size: 1.1rem !important; max-width: 600px !important; margin: -0.5em auto 2em !important; }

/* Accent button class for gold CTAs */
.accentButton, a.accentButton { background-color: #F0C808 !important; color: #1A1A2E !important; border: none !important; border-radius: 8px !important; padding: 12px 28px !important; font-weight: 700 !important; }
.accentButton:hover, a.accentButton:hover { background-color: #D4B007 !important; }

/* Secondary button class */
.secondaryButton, a.secondaryButton { background-color: transparent !important; color: #2D7DD2 !important; border: 2px solid #2D7DD2 !important; border-radius: 8px !important; padding: 10px 26px !important; font-weight: 600 !important; }
.secondaryButton:hover, a.secondaryButton:hover { background-color: #2D7DD2 !important; color: #FFFFFF !important; }

/* White outline button for dark backgrounds */
.outlineButtonWhite, a.outlineButtonWhite {
    border: 2px solid #FFFFFF !important; color: #FFFFFF !important;
    background: transparent !important; border-radius: 8px !important;
    padding: 12px 30px !important; font-weight: 600 !important;
    text-decoration: none !important; display: inline-block !important;
}
.outlineButtonWhite:hover, a.outlineButtonWhite:hover {
    background: rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important;
}

/* --- LOGIN BUTTON --- */

.WaGadgetLoginButton .loginBoxLinkButton {
    background: #2D7DD2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}

.WaGadgetLoginButton .loginBoxLinkButton:hover {
    background: #1B3A5C !important;
}

.WaGadgetLoginButton a {
    color: #2D7DD2 !important;
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
    .WaGadgetMenuHorizontal ul.firstLevel {
        background: #1B3A5C !important;
    }
    .pgctc-hero, .pgctc-hero-image { padding: 48px 20px !important; }
    .pgctc-hero h1, .pgctc-hero-image h1 { font-size: 2rem !important; }
    .pgctc-paths { grid-template-columns: 1fr !important; }
    .pgctc-stats { flex-direction: column !important; gap: 16px !important; }
    .pgctc-card-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .pgctc-hero, .pgctc-hero-image { padding: 32px 16px !important; }
    .pgctc-hero h1, .pgctc-hero-image h1 { font-size: 1.6rem !important; }
    .pgctc-hero .hero-buttons,
    .pgctc-hero-image .hero-buttons { flex-direction: column !important; align-items: center !important; }
}