/* XO Platforms - club template foundation
   Loaded after the default template styles; brand colors are set per site
   (--club-brand, --club-brand-dark, --club-accent) in common/head.php. */

:root{
    /* color */
    --club-text: #2b2d31;
    --club-text-muted: #5f6368;
    --club-bg: #ffffff;
    --club-bg-alt: #f5f6f7;
    --club-border: #dfe1e5;
    /* type */
    --club-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --club-font-heading: var( --club-font-body );
    /* space */
    --club-space-1: .25rem;
    --club-space-2: .5rem;
    --club-space-3: 1rem;
    --club-space-4: 1.5rem;
    --club-space-5: 2.5rem;
    --club-space-6: 4rem;
    --club-space-7: 6rem;
    /* layout */
    --club-width: 72rem;
    --club-width-narrow: 48rem;
    --club-radius: 6px;
    --club-shadow: 0 1px 3px rgba( 0, 0, 0, .12 );
    --club-nav-height: 4.5rem;
    /* footer (sites may override) */
    --club-footer-bg: var( --club-bg-alt );
    --club-footer-text: var( --club-text );
    --club-footer-muted: var( --club-text-muted );
    --club-footer-border: var( --club-border );
    --club-footer-link: var( --club-brand );
    --club-footer-link-hover: var( --club-brand-dark );
    --club-footer-bottom-text: var( --club-footer-muted );
    /* active nav underline */
    --club-nav-active: var( --club-brand );
    /* header (sites may override) */
    --club-header-bg: var( --club-bg );
    --club-header-text: var( --club-text );
    --club-header-border: var( --club-border );
    --club-header-hover-bg: var( --club-bg-alt );
    --club-header-hover-text: var( --club-brand );
    --club-nav-active-text: var( --club-brand );
    --club-sub-bg: var( --club-bg );
    /* buttons and nav call-to-action */
    --club-btn-radius: var( --club-radius );
    --club-cta-bg: var( --club-brand );
    --club-cta-text: #ffffff;
    --club-cta2-bg: var( --club-brand-dark );
    --club-cta2-text: #ffffff;
}

/* --- Base --- */

body{ background-color: var( --club-bg ); color: var( --club-text ); font-family: var( --club-font-body ); line-height: 1.6; }
h1, h2, h3, h4{ font-family: var( --club-font-heading ); color: var( --club-text ); line-height: 1.2; font-weight: 700; }
h1{ font-size: 2rem; }
h2{ font-size: 1.5rem; margin: var( --club-space-4 ) 0 var( --club-space-2 ) 0; }
a{ color: var( --club-brand ); font-weight: 500; }
a:hover{ color: var( --club-brand-dark ); }
:focus-visible{ outline: 3px solid var( --club-accent ); outline-offset: 2px; }
img{ max-width: 100%; }

.club-container{ max-width: var( --club-width ); margin: 0 auto; padding: 0 var( --club-space-3 ); }
.club-container-narrow{ max-width: var( --club-width-narrow ); }
.club-section{ padding: var( --club-space-5 ) 0; }
.club-section-alt{ background-color: var( --club-bg-alt ); }
.club-visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; }
.club-skip-link{ position: absolute; left: var( --club-space-3 ); top: -4rem; z-index: 2000; background: var( --club-brand ); color: #fff; padding: var( --club-space-2 ) var( --club-space-3 ); border-radius: var( --club-radius ); }
.club-skip-link:focus{ top: var( --club-space-2 ); color: #fff; }

a.club-btn,
button.club-btn{ display: inline-block; padding: .7rem 1.4rem; background-color: var( --club-brand ); color: #fff; border-radius: var( --club-btn-radius ); font-weight: 600; text-decoration: none; text-transform: none; }
a.club-btn:hover,
button.club-btn:hover{ background-color: var( --club-brand-dark ); color: #fff; }
a.club-btn-outline{ background-color: transparent; color: var( --club-brand ); box-shadow: inset 0 0 0 2px var( --club-brand ); }
a.club-btn-outline:hover{ background-color: var( --club-brand ); }

/* --- Header --- */

#header.club-header{ background-color: var( --club-header-bg ); border-bottom: 1px solid var( --club-header-border ); min-height: var( --club-nav-height ); }
#header.top.club-header{ box-shadow: var( --club-shadow ); }
#header.club-header .club-header-inner{ display: flex; align-items: center; justify-content: space-between; padding-top: var( --club-space-2 ); padding-bottom: var( --club-space-2 ); }
#header.club-header .club-logo{ display: block; width: 11rem; flex: 0 0 auto; }
#header.club-header .club-logo img{ display: block; width: 100%; height: auto; }

/* desktop nav */
#header.club-header .club-nav{ display: none; }
.club-menu{ list-style: none; margin: 0; padding: 0; }
.club-nav .club-menu{ display: flex; align-items: center; gap: var( --club-space-1 ); }
.club-nav .club-menu > li{ position: relative; }
.club-nav a{ display: block; padding: .6rem .8rem; color: var( --club-header-text ); text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: var( --club-radius ); }
.club-nav a:hover{ color: var( --club-header-hover-text ); background-color: var( --club-header-hover-bg ); }
.club-nav li.active > a{ color: var( --club-nav-active-text ); box-shadow: inset 0 -3px 0 var( --club-nav-active ); border-radius: 0; }
.club-nav .sub a{ color: var( --club-text ); }
.club-nav .sub a:hover{ color: var( --club-brand ); background-color: var( --club-bg-alt ); }
.club-nav li.club-nav-cta > a,
.club-nav li.club-nav-cta.active > a{ background-color: var( --club-cta-bg ); color: var( --club-cta-text ); border-radius: 999px; padding: .6rem 1.4rem; font-weight: 700; box-shadow: none; }
.club-nav li.club-nav-cta2 > a,
.club-nav li.club-nav-cta2.active > a{ background-color: var( --club-cta2-bg ); color: var( --club-cta2-text ); border-radius: 999px; padding: .6rem 1.4rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .35 ); }
.club-nav li.club-nav-cta2 > a:hover{ background-color: var( --club-cta2-bg ); color: var( --club-cta2-text ); filter: brightness( 1.15 ); }
.club-nav li.club-nav-cta > a:hover{ background-color: var( --club-cta-bg ); color: var( --club-cta-text ); filter: brightness( .95 ); }
.club-nav .sub{ display: none; position: absolute; top: 100%; left: 0; min-width: 14rem; margin: 0; padding: var( --club-space-2 ) 0; list-style: none; background: var( --club-sub-bg ); border: 1px solid var( --club-border ); border-radius: var( --club-radius ); box-shadow: var( --club-shadow ); z-index: 1100; }
.club-nav li.has-dropdown:hover > .sub,
.club-nav li.has-dropdown:focus-within > .sub{ display: block; }

/* mobile nav (markup/classes shared with the default page_bottom script) */
#nav-mobile .mobile-toggle{ position: static; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; order: 2; border-radius: var( --club-radius ); }
/* Sticky header in CSS. The default page_bottom script also toggles #header.top (position: fixed)
   and sets an inline margin-top on #main; both are overridden so scrolling back up leaves no gap. */
#header.club-header,
#header.top.club-header{ position: sticky; top: 0; width: auto; z-index: 1001; }
#main{ margin-top: 0 !important; }
#header.club-header #nav-mobile{ position: absolute; top: 0; right: var( --club-space-3 ); height: var( --club-nav-height ); display: flex; align-items: center; }
.club-burger, .club-burger::before, .club-burger::after{ display: block; width: 1.5rem; height: 2px; background: var( --club-header-text ); content: ""; }
.club-burger{ position: relative; }
.club-burger::before{ position: absolute; top: -7px; }
.club-burger::after{ position: absolute; top: 7px; }
#mobile-menu{ position: fixed; top: 0; right: 0; left: auto; bottom: 0; width: min( 20rem, 86vw ); min-width: 0; padding: 4.5rem var( --club-space-3 ) var( --club-space-4 ); background: var( --club-bg ); overflow-y: auto; z-index: 1200; box-shadow: -4px 0 12px rgba( 0, 0, 0, .15 ); }
.menu-mobile .club-menu > li{ margin: 0; border-bottom: 1px solid var( --club-border ); position: relative; }
.menu-mobile ul li a{ padding: .8rem .25rem; color: var( --club-text ); font-weight: 500; }
.menu-mobile li.active > a{ color: var( --club-brand ); }
.menu-mobile ul.sub{ margin: 0; padding: 0 0 var( --club-space-2 ) var( --club-space-3 ); background: transparent; }
.menu-mobile ul.sub a{ color: var( --club-text-muted ); font-weight: 400; }
.menu-mobile .club-menu > li.club-nav-cta,
.menu-mobile .club-menu > li.club-nav-cta2{ border-bottom: 0; padding-top: var( --club-space-3 ); }
.menu-mobile li.club-nav-cta > a{ background: var( --club-cta-bg ); color: var( --club-cta-text ); border-radius: 999px; text-align: center; font-weight: 700; }
.menu-mobile li.club-nav-cta2 > a{ background: var( --club-cta2-bg ); color: var( --club-cta2-text ); border-radius: 999px; text-align: center; font-weight: 700; }
.menu-mobile .dropdown-toggle{ position: absolute; top: .35rem; right: 0; width: 2.5rem; height: 2.5rem; }
.menu-mobile .dropdown-toggle::after{ content: ""; display: block; width: .5rem; height: .5rem; margin: 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( 45deg ); transition: transform .2s; }
.menu-mobile li.open > .dropdown-toggle::after{ transform: rotate( -135deg ); }
#nav-mobile .mobile-close{ position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 2rem; line-height: 1; color: var( --club-text ); z-index: 1300; }
.nav-mobile-overlay{ z-index: 1150; }

@media( min-width: 1024px ){
    #header.club-header .club-nav{ display: block; }
    #header.club-header #nav-mobile{ display: none; }
    #header.club-header .club-logo{ width: 13rem; }
}

/* --- Confirmation dialog (external links) --- */

.club-dialog{ border: 0; border-radius: var( --club-radius ); padding: var( --club-space-4 ); max-width: 30rem; width: calc( 100% - 2rem ); color: var( --club-text ); box-shadow: 0 10px 40px rgba( 0, 0, 0, .3 ); }
.club-dialog::backdrop{ background: rgba( 15, 25, 45, .6 ); }
.club-dialog h2{ margin: 0 0 var( --club-space-2 ); font-size: 1.35rem; }
.club-dialog p{ margin: 0 0 var( --club-space-2 ); }
.club-dialog-host{ font-weight: 600; word-break: break-all; }
.club-dialog-actions{ display: flex; flex-wrap: wrap; gap: var( --club-space-2 ); margin-top: var( --club-space-3 ); }
.club-dialog .club-btn{ cursor: pointer; text-align: center; }
.club-dialog button.club-btn-outline{ background: transparent; color: var( --club-brand ); box-shadow: inset 0 0 0 2px var( --club-brand ); }

/* --- Page header and content --- */

#main-content{ background-color: var( --club-bg ); }
#main-content .page-section.section-page-title{ background-color: var( --club-bg-alt ); padding: var( --club-space-5 ) 0 var( --club-space-4 ); border-bottom: 1px solid var( --club-border ); }
#main-content .section-page-title .container,
#main-content .section-page-content .container{ max-width: var( --club-width ); padding: 0 var( --club-space-3 ); }
h1.page-title{ text-transform: none; text-align: left; color: var( --club-text ); font-weight: 700; margin: 0; font-size: 2rem; }
h2.page-subtitle{ font-family: var( --club-font-body ); text-align: left; font-size: 1.15rem; font-weight: 400; color: var( --club-text-muted ); margin: var( --club-space-2 ) 0 0 0; }
/* Page title placed beneath the featured image: smaller and centered */
#main-content .page-section.section-page-title.club-title-below{ padding: var( --club-space-5 ) 0 0; background: var( --club-bg-alt ); border-bottom: 0; text-align: center; }
#main-content .club-title-below h1.page-title{ font-size: 1.5rem; text-align: center; }
#main-content .club-title-below h2.page-subtitle{ text-align: center; font-size: 1.05rem; }

#main-content .page-section.section-page-content{ padding: var( --club-space-5 ) 0 var( --club-space-6 ); }
#main-content .section-page-content .container-inner{ max-width: var( --club-width-narrow ); margin: 0; }
@media( min-width: 1024px ){
    h1.page-title{ font-size: 2.5rem; }
}

/* --- Contact: details left, form right (stacked on mobile) --- */

.club-contact{ padding: var( --club-space-5 ) 0 var( --club-space-6 ); }
.club-contact-layout{ display: grid; gap: var( --club-space-5 ); }
.club-contact .page-section{ margin: 0; padding: 0; background: none; color: inherit; }
.club-contact .page-section .container,
.club-contact .grid-container,
.club-contact .form-container{ max-width: none; margin: 0; padding: 0; display: block; }
.club-contact .contact-form{ margin: 0; }
.club-contact .form-section.float-label .form-field input[type="text"],
.club-contact .form-section.float-label .form-field input[type="email"],
.club-contact .form-section.float-label .form-field input[type="tel"],
.club-contact .form-section .form-field.textarea textarea{ background: var( --club-bg ); border: 1px solid var( --club-border ); border-radius: var( --club-radius ); font-size: 1rem; color: var( --club-text ); }
.club-contact .form-section.float-label .form-field input[type="text"],
.club-contact .form-section.float-label .form-field input[type="email"],
.club-contact .form-section.float-label .form-field input[type="tel"]{ padding: 1.1rem .75rem .45rem; }
.club-contact .form-section.float-label .form-field.textarea label,
.club-contact .form-section.float-label .form-field label{ color: var( --club-text-muted ); }
.club-contact .form-section.float-label .form-field.textarea label{ font-weight: 600; }
.club-contact .recaptcha-disclaimer{ color: var( --club-text-muted ); }
@media( min-width: 64rem ){
    .club-contact-layout{ grid-template-columns: minmax( 0, 16rem ) minmax( 0, 26rem ); gap: var( --club-space-6 ); justify-content: start; align-items: start; }
}

/* --- Footer --- */

#footer.club-footer{ background-color: var( --club-footer-bg ); border-top: 1px solid var( --club-footer-border ); color: var( --club-footer-text ); }
.club-footer-main{ display: grid; gap: var( --club-space-4 ); padding-top: var( --club-space-5 ); padding-bottom: var( --club-space-5 ); }
.club-footer h2{ font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var( --club-footer-muted ); margin: 0 0 var( --club-space-2 ); }
.club-footer p{ margin: 0 0 var( --club-space-2 ); }
.club-footer-name{ font-weight: 700; font-size: 1.1rem; }
.club-footer ul{ list-style: none; margin: 0; padding: 0; }
.club-footer li{ margin: 0 0 var( --club-space-2 ); }
.club-footer a{ text-decoration: none; color: var( --club-footer-link ); font-weight: 400; }
.club-footer a:hover{ text-decoration: underline; color: var( --club-footer-link-hover ); }
.club-footer-bottom{ border-top: 1px solid var( --club-footer-border ); padding: var( --club-space-3 ) 0; font-size: .85rem; color: var( --club-footer-bottom-text ); }
.club-footer-bottom .club-container{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var( --club-space-2 ); }
@media( min-width: 48rem ){
    .club-footer-main{ grid-template-columns: repeat( 2, 1fr ); }
}
@media( min-width: 64rem ){
    .club-footer-main{ grid-template-columns: repeat( 4, 1fr ); }
}

@media( prefers-reduced-motion: reduce ){
    *{ transition: none !important; scroll-behavior: auto !important; }
}