/* ============================================================
   PGCTC Website - Custom CSS Overrides for WildApricot
   Paste into: WA Admin > Website > CSS
   Note: !important is required to override theme specificity
   ============================================================ */

/* --- COLOR PALETTE ---
   Primary:    #1B3A5C (deep navy - authority, tech)
   Secondary:  #2D7DD2 (bright blue - energy, innovation)
   Accent:     #F0C808 (gold - PG County, warmth)
   Light BG:   #F5F7FA (subtle gray background)
   Dark Text:  #1A1A2E (near-black for readability)
   White:      #FFFFFF
   Success:    #28A745
   Muted:      #6C757D
   ------------------------------------------------------------ */

/* --- HIDE THE TREE NAVIGATION --- */
/* Showcase theme shows a redundant tree nav (WaGadgetNavigationLinks) */

.WaGadgetNavigationLinks {
    display: none !important;
}

/* Hide the breadcrumb trail */
.WaGadgetBreadcrumbs {
    display: none !important;
}

/* Hide the search bar in the header */
.WaGadgetSiteSearch {
    display: none !important;
}

/* --- RESTYLE THE HORIZONTAL NAVIGATION BAR --- */
/* Showcase uses WaGadgetMenuHorizontal with als-* classes */

.WaGadgetMenuHorizontal {
    background: #1B3A5C !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: center !important;
    overflow: visible !important;
    height: auto !important;
}

.WaGadgetMenuHorizontal .als-container {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

.WaGadgetMenuHorizontal .als-viewport {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.WaGadgetMenuHorizontal .als-wrapper {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.WaGadgetMenuHorizontal .als-item {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    position: static !important;
    left: auto !important;
}

.WaGadgetMenuHorizontal .als-item a {
    color: #FFFFFF !important;
    padding: 12px 14px !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
}

.WaGadgetMenuHorizontal .als-item a:hover,
.WaGadgetMenuHorizontal .als-item.menu-item-act a {
    color: #F0C808 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
}

/* Remove dotted/dashed borders from nav items */
.WaGadgetMenuHorizontal .als-item,
.WaGadgetMenuHorizontal .als-item a,
.WaGadgetMenuHorizontal .als-wrapper,
.WaGadgetMenuHorizontal .als-item .als-item-wrap {
    border: none !important;
    outline: none !important;
    background-image: none !important;
}

/* Hide the scroll arrows on nav */
.WaGadgetMenuHorizontal .als-prev-wrap,
.WaGadgetMenuHorizontal .als-next-wrap {
    display: none !important;
}

/* --- COMPACT THE HEADER / LOGO AREA --- */

.zoneHeader1Outer,
.zoneHeader1 {
    background-color: #FFFFFF !important;
    background-image: none !important;
    padding: 8px 0 !important;
}

.WaPlaceHolderHeader1 {
    padding: 0 !important;
}

/* Shrink the logo image in the header */
.WaPlaceHolderHeader1 img {
    max-height: 70px !important;
    width: auto !important;
    margin: 8px auto !important;
    display: block !important;
}

/* Hide the "Welcome to..." title gadget in the header */
/* It's the second (WaGadgetLast) content gadget in the header placeholder */
.WaPlaceHolderHeader1 .WaGadgetLast {
    display: none !important;
}

/* --- KILL THE BACKGROUND IMAGE --- */

body,
#idPageBody,
.containerNormal,
.pageBody,
#contentContainer,
.contentArea {
    background-image: none !important;
    background-color: #FFFFFF !important;
}

/* Ensure the main content area has a clean white background */
#idContentContainer,
.contentContainer,
#idPageContent,
.pageContent,
.WaGadgetContainer {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* --- TYPOGRAPHY --- */

body,
.contentBlock,
.WaGadgetContent,
#idPageBody,
.containerNormal p,
.WaGadgetContent p {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1A1A2E !important;
}

h1, h2, h3, h4, h5, h6,
.WaGadgetContent h1,
.WaGadgetContent h2,
.WaGadgetContent h3,
.WaGadgetContent h4,
.contentBlock h1,
.contentBlock h2,
.contentBlock h3,
.contentBlock h4 {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    color: #1B3A5C !important;
    line-height: 1.3 !important;
}

h1, .WaGadgetContent h1 { font-size: 2.5rem !important; margin-bottom: 0.5em !important; }
h2, .WaGadgetContent h2 { font-size: 2rem !important; margin-bottom: 0.4em !important; }
h3, .WaGadgetContent h3 { font-size: 1.5rem !important; margin-bottom: 0.3em !important; }
h4, .WaGadgetContent h4 { font-size: 1.25rem !important; margin-bottom: 0.3em !important; }

a,
.WaGadgetContent a,
.contentBlock a { color: #2D7DD2 !important; text-decoration: none !important; }
a:hover,
.WaGadgetContent a:hover,
.contentBlock a:hover { color: #1B3A5C !important; text-decoration: underline !important; }

/* --- BUTTONS & CTAs --- */

.primaryButton,
a.primaryButton,
input[type="submit"],
.WaGadgetEventRegistration input[type="submit"],
.membershipJoinButton,
.WaGadgetMembershipApplication input[type="submit"] {
    background-color: #2D7DD2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

.primaryButton:hover,
a.primaryButton:hover,
input[type="submit"]:hover,
.membershipJoinButton:hover {
    background-color: #1B3A5C !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Secondary / outline button */
.secondaryButton,
a.secondaryButton {
    background-color: transparent !important;
    color: #2D7DD2 !important;
    border: 2px solid #2D7DD2 !important;
    border-radius: 8px !important;
    padding: 10px 26px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.secondaryButton:hover,
a.secondaryButton:hover {
    background-color: #2D7DD2 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Accent / highlight button */
.accentButton,
a.accentButton {
    background-color: #F0C808 !important;
    color: #1A1A2E !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.accentButton:hover,
a.accentButton:hover {
    background-color: #D4B007 !important;
    color: #1A1A2E !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* --- HEADER / TOP BAR --- */

#idHeaderContainer,
.headerContainer,
.headerTop {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* --- NAVIGATION OVERRIDES --- */

#idTopMenu,
.menuContainer,
.WaGadgetNavigationMenu,
.WaGadgetNavigationMenu ul,
.WaGadgetNavigationMenu li,
.WaGadgetNavigationMenu a {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.WaGadgetNavigationMenu a,
#idTopMenu a {
    color: #1B3A5C !important;
}

.WaGadgetNavigationMenu a:hover,
#idTopMenu a:hover {
    color: #2D7DD2 !important;
}

/* --- HERO SECTION (for custom pages) --- */

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

.pgctc-hero h1 {
    color: #FFFFFF !important;
    font-size: 2.8rem !important;
    margin-bottom: 0.4em !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;
}

/* --- CARD GRID (for value props, programs, events) --- */

.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;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.pgctc-card:hover {
    box-shadow: 0 8px 24px rgba(27, 58, 92, 0.12) !important;
    transform: translateY(-2px);
}

.pgctc-card h3 {
    color: #1B3A5C !important;
    margin-bottom: 0.5em !important;
}

.pgctc-card p {
    color: #4A4A5A !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* --- AUDIENCE PATHS (two-column) --- */

.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-path h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5em !important;
}

/* --- IMPACT STATS --- */

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

.pgctc-stat {
    flex: 1 !important;
    min-width: 150px !important;
    padding: 16px !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;
    letter-spacing: 0.08em !important;
}

/* --- PARTNER LOGOS --- */

.pgctc-partners {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    padding: 48px 24px !important;
    background: #F5F7FA !important;
}

.pgctc-partners img {
    max-height: 50px !important;
    width: auto !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
    filter: grayscale(100%) !important;
}

.pgctc-partners img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
}

/* --- CTA BANNER --- */

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

.pgctc-cta-banner h2 {
    color: #FFFFFF !important;
    font-size: 1.8rem !important;
    margin-bottom: 0.5em !important;
}

.pgctc-cta-banner p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 1.5em !important;
}

/* --- SECTION SPACING --- */

.pgctc-section {
    padding: 60px 0 !important;
}

.pgctc-section-light {
    background: #F5F7FA !important;
    padding: 60px 24px !important;
    margin: 0 -15px !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;
}

/* --- FORMS --- */

.WaGadgetMembershipApplication input[type="text"],
.WaGadgetMembershipApplication input[type="email"],
.WaGadgetMembershipApplication input[type="tel"],
.WaGadgetMembershipApplication select,
.WaGadgetMembershipApplication textarea,
.WaGadgetEventRegistration input[type="text"],
.WaGadgetEventRegistration select {
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.WaGadgetMembershipApplication input:focus,
.WaGadgetMembershipApplication select:focus,
.WaGadgetEventRegistration input:focus,
.WaGadgetEventRegistration select:focus {
    border-color: #2D7DD2 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15) !important;
}

/* --- FOOTER OVERRIDES --- */

#idFooterContainer,
.footerContainer,
#idFooter,
.footer {
    background: #1B3A5C !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 48px 24px 24px !important;
    background-image: none !important;
}

#idFooterContainer a,
.footerContainer a,
#idFooter a,
.footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

#idFooterContainer a:hover,
.footerContainer a:hover,
#idFooter a:hover,
.footer a:hover {
    color: #F0C808 !important;
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
    .pgctc-hero { padding: 48px 20px !important; }
    .pgctc-hero h1 { font-size: 2rem !important; }
    .pgctc-hero p { font-size: 1.05rem !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; }
    h1, .WaGadgetContent h1 { font-size: 2rem !important; }
    h2, .WaGadgetContent h2 { font-size: 1.5rem !important; }
}

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