/* Naples North Rotary - page body styles carried over from the previous template
   (home, events, outreach, contact, forms). Header, navigation and footer now come from the
   club template. These sections will be replaced by club components in later builds. */

:root {
    --white: #ffffff;
    --off-white: #fefefa;
    --black: #000;
    --grey: #c0c0c0;
    --dark-grey: #4d4d4d;
    --charcoal: #54565b;
    --dark-grey-line: #666666;
    --grey-darker: #848484;
    --light-grey: #f2f2f2;
    --light-grey-border: #ddd;
    --light-grey-bg: #ebebeb;
    --gold: #f6a81c;
    --rotary-gold: #faa41a;
    --light-yellow: #fefdee;
    --bright-yellow: #f9f8c9;
    --royal-blue: #16478e;
    --azure-blue: #006ab6;
    --blue-transition: #b9e1ff;
    --purple: #703fdd;
    --sky-blue: #00a2e1;
    --powder-blue: #b8d9ee;
    --featured-bg: #7f94cc;
    --light-lavender: #f2daf9;
    --bright-blue: #ebe5ff;
    --bright-yellow: #fffd5f;
    --buff-yellow: #ffffbb;
    --buff-gold: #fff9da;
    --lime-green: #8dfa5d;
    --light-blue: #edf1fe;
    --slate: #66819a;
    --green: #0d9648;
    --dark-green: #1c890a;
    --violet: #8e288f;
    --lavender: #c6bbd1;
    --cranberry: #d41a69;
    --cardinal: #e22626;
    --turquoise: #00acbb;
    --orange: #f47621;
    --mist: #9ba4b4;
    --moss: #a8ada1;
    --taupe: #d8c79d;
    --storm: #7a6e66;
    --light-sand: #f4eee7;
    --ash: #978c83;
    --platinum: #bfb7af;
    --cloud: #d6d1cb;
    --footer-cloud-bg: #e6faff;
    --error-red: #c71717;
    --dark-red: #7D2300;
    --error-bg: #f7ddea;
    --error-txt: #d70047;
    --success-bg: #eef9e1;
    --success-txt: #3d6d03;
    --notice-bg: #fffee0;
    --notice-txt: #db0c4b;
    --sans-regular: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --serif-regular: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --md-width: 40rem;
    --lg-width: 64rem;
    --xlg-width: 75rem;
    --xlg-width-flexed: 76rem;
    --xlg-width-flexed-plus: 77rem;
    --xxlg-width: 90rem;
}


/* --- Main Content --- */

#main-content .featured-image-container{ padding: 0 0 0 0; position: relative; }
#main-content .featured-image-container.homepage{ background: var(--rotary-gold); border: none;}
#main-content .featured-image-container.homepage .featured-image{ border: none; }
#main-content .featured-image{ margin: 0 auto; max-width: var( --xxlg-width ); }
#main-content .featured-image img{ display: table; width: 100%; height: auto; }
#main-content .page-section{ margin: 0 0 0 0; padding: 0 0 0 0; }



#main-content .page-section.page-content{ padding: 1rem 0 1rem 0; line-height: 1.333; font-weight: 200; text-align: left; }
h2.section-title{ font-size: 1.333rem; font-weight: 400; text-align: center; text-transform: uppercase; margin: 2rem 0 2rem 0; padding: 1rem 0 1rem 0; }
#main-content .page-media .media-item .thumbnail-caption{ text-align: center; padding: 3px 0 3px 0; margin: 0 0 2rem 0; }
#main-content .theme-banner{ border-top: 2px solid var( --powder-blue ); width: 100%; }
#main-content .theme-banner .banner-inner{ padding: 2rem 1rem 0 1rem;  text-align: center; max-width: 1024px; margin: 0px auto; }
#main-content .featured-image-container .featured-image{ position:relative; border: 1px solid var( --light-grey-border ); max-width: 720px; margin: 0px auto; }
#main-content .featured-image-desktop{ display: none; }
#main-content .featured-video{ position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
#main-content .featured-video iframe{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
@media( min-width: 1024px ){
    #main-content .theme-banner .banner-inner{ padding: 2rem 0 0 0; }
    #main-content .featured-image-mobile{ display: none; }
    #main-content .featured-image-desktop{ display: block; }
    h2.section-title{ font-size: 1.777rem; font-weight: 600; margin: 4rem 0 4rem 0; padding: 2rem 0 2rem 0; }
    #main-content .page-media{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; }
    #main-content .page-media .media-item .thumbnail-container{ position: relative; width: 100%; height: auto; }
    #main-content .page-media .media-item .thumbnail-caption{ margin: 0 0 0 0; }
    #main-content .page-media .media-item .thumbnail-container img{ width: 100%; height: 100%; object-fit: cover; }
}

.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; }
.overlay .popup{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var( --white ); padding: 1rem; }




/* ---  Page Section Defs --- */

#main-content .page-section.page-content.page-content-home{ padding: 2.66rem 1rem 2.66rem 1rem;}
#main-content .page-section.section-scheduled-events{  padding: 1rem 0 1rem 0; }
#main-content .page-section.section-charities{ background-color: var( --light-sand ); padding: 1rem 0 1rem 0; }

/* --- Events --- */

#main-content .page-section.section-contact-form .form-container{ max-width: 1024px; margin: 0px auto; }
.page-section.section-scheduled-events h2.section-title{ margin: 1rem 0 1rem 0; color: var( --royal-blue ); text-decoration: underline; }
.scheduled-events .event-container .event-item,
.charities .charity-container .charity-item{ padding: .5rem; text-align: center; margin: 1.333rem 0 1.333rem 0; }
.scheduled-events .event-container .event-item .event-thumbnail img{ border: 1px solid var( --royal-blue ); }
.charities .charity-container .charity-item .charity-thumbnail-container img{ clip-path: circle(50%);}
.scheduled-events .event-container .event-item .event-name, 
.charities .charity-container .charity-item .charity-name{ font-size: 1.618rem; font-weight: 600; text-transform: uppercase; }
.scheduled-events .event-container .event-item .date{ font-size: 1.314rem; }
.scheduled-events .event-container .event-item .event-excerpt, 
.charities .charity-container .charity-item .charity-excerpt{ line-height: 1.222; font-weight: 200; text-align: justify; }
.charities .charity-container .charity-item .charity-thumbnail-container{ display: table; margin: 0px auto; max-width: 220px; width: 100%; }
.charities .charity-container .charity-item .links a{ display: table; margin: 1rem auto; text-decoration: none; color: var( --royal-blue ); border: 1px solid var( --royal-blue ); text-transform: uppercase; font-size: .888rem; font-weight: 600; border-radius: 1rem; padding: 0 1rem 0 1rem; }
.scheduled-events .event-container .event-item .details-button{ margin: .5rem 0 .5rem 0; }
.scheduled-events .event-container .event-item .details-button a{ display: table; margin: 0px auto; }
.scheduled-events .event-container .event-item .details-button a.btn{ font-size: 1rem; padding: .33rem 1rem .33rem 1rem; background-color: var( --gold ); color: var( --dark-red ); }
#main-content .page-section.section-after-events{ padding: 4rem 0 4rem 0; text-align: center; font-size: 2rem; }
.page-section.section-after-events a.btn{ background-color: var( --azure-blue ); color: var( --white ); display: table; margin: 1rem auto; }
.buttons-container{ display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1rem 0; }
@media( min-width: 1024px ){
    .scheduled-events{ display: flex; flex-wrap: wrap; }
    .scheduled-events.three-up .event-container{ flex: 1 1 33%; }
    .scheduled-events.single-column .event-container .event-item{ display: flex; }
    .scheduled-events.single-column .event-container .event-item .event-thumbnail{ flex: 1 1 40%; }
    .scheduled-events.single-column .event-container .event-item .event-details{ flex: 1 1 60%; }
    .scheduled-events.single-column .event-container .event-item{ text-align: left; }
    .scheduled-events.single-column .event-container .event-item .details-button{ display: table; }
    .scheduled-events.single-column .event-container .event-item .event-details .event-details-container{ padding: .333rem 0 .0 1rem; }
    .scheduled-events.single-column .event-container .event-item .event-excerpt{ padding: .666rem 1.333rem .66rem 0; }
    .scheduled-events .event-container .event-item .details-button a.btn{ font-size: 1.333rem; padding: .666rem 1.333rem .66rem 1.333rem; }
    .scheduled-events.events-1{ display: block; margin: 0px auto; }
    .scheduled-events.events-1 .event-container{ flex: none; }
    .scheduled-events.events-1 .event-container .event-item .event-name{ font-size: 2.333rem; }
    .scheduled-events .event-container .event-item .date{ font-size: 2rem;  }
    .charities{ display: flex; flex-wrap: wrap; }
    .charities .charity-container{ flex: 1 1 33%; }
    .charities .charity-container .charity-item{ height: 100%; position: relative; padding: 0 .666rem 0 .666rem; }
    .charities .charity-container .charity-item .charity-excerpt{ margin: .666rem 0 0 0; font-size: 1.333rem; text-align: left; }
    .charities .charity-container .charity-item .charity-details .charity-details-container{ padding: .5rem 0 0 0; }
    .charities .charity-container .charity-item .links{  padding: .333rem 0 .333rem 0; }

}


    body.home #main-content .page-section.section-member-events{ background-color: var( --light-sand ); text-align: center; padding: 1.333rem 0 1.333rem 0; }
    body.home #main-content .page-section.section-member-events .container{ padding: 1rem 1rem 1rem 1rem; }
    body.home #main-content .page-section.section-member-events .member-event{ margin: .333rem 0 0.333rem 0; }
    body.home #main-content .page-section.section-member-events .member-event .event-name{ font-weight: 600; }
    body.home #main-content .page-section.section-member-events h2.section-title{ margin: 0 0 0 0; padding: 0 0 1.333rem 0; }
    body.home #main-content .page-section.section-scheduled-events{ padding: 0 0 2.5rem 0; border-bottom: 2px solid var( --azure-blue ); }
    @media( min-width: 1024px ){
     body.home #main-content .page-section.section-member-events .member-event{ font-size: 1.444rem; line-height: 1.666; }
    }

/* Public events: 2-up cards (home page) */
body.home #main-content .page-section.section-public-events{ background-color: var( --club-bg-alt ); padding: var( --club-space-5 ) 0; }
body.home #main-content .section-public-events .public-events{ display: grid; gap: var( --club-space-4 ); max-width: var( --club-width ); margin: 0 auto; padding: 0 var( --club-space-3 ); }
body.home #main-content .section-public-events .event-container{ display: flex; padding: 0; text-align: center; }
body.home #main-content .section-public-events .event-item{ display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; overflow: hidden; background: var( --club-bg ); border: 1px solid var( --club-border ); border-radius: var( --club-radius ); box-shadow: var( --club-shadow ); font-size: 1rem; }
body.home #main-content .section-public-events .event-thumbnail-container{ aspect-ratio: 3 / 2; overflow: hidden; background: var( --club-bg-alt ); }
body.home #main-content .section-public-events .event-thumbnail-container a{ display: block; height: 100%; }
body.home #main-content .section-public-events .event-thumbnail-container img{ display: block; width: 100%; height: 100%; object-fit: cover; }
body.home #main-content .section-public-events .event-details{ display: flex; flex: 1; padding: var( --club-space-4 ); }
body.home #main-content .section-public-events .event-details-container{ display: flex; flex-direction: column; width: 100%; }
body.home #main-content .section-public-events .event-name{ font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var( --club-text ); }
body.home #main-content .section-public-events .date{ margin: var( --club-space-1 ) 0 var( --club-space-2 ); color: var( --club-text-muted ); font-weight: 600; }
body.home #main-content .section-public-events .event-excerpt{ font-size: 1rem; line-height: 1.5; }
body.home #main-content .section-public-events .details-button{ margin: auto auto 0; padding-top: var( --club-space-3 ); display: table; }
@media( min-width: 40rem ){
    body.home #main-content .section-public-events .public-events{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}


       

body.events #main-content .page-section.section-scheduled-events{ padding: 2rem 0 2rem 0; }

/* --- Forms --- */

h3.form-title{ font-size: 1.25rem; padding: 1rem 0 0 0; margin: 0 0 1rem 0; }
.form-section.float-label .form-field{ margin: 0 0 .5rem 0px; position: relative; }
.form-section.float-label .form-field input[type="text"], 
.form-section.float-label .form-field input[type="email"],
.form-section.float-label .form-field input[type="tel"],
.form-section.float-label .form-field input[type="password"]{ display: block; width: 100%; font-family: var( --sans-regular ); font-weight: 400; font-size: 1.333rem; box-sizing: border-box; border: none; border-radius: 0px; padding: 1.333rem 15px 8px 8px; }
.form-section.float-label .form-field select{ display: block; width: 100%; box-sizing: border-box; border: none; border-radius: 0px; padding: 19px 15px 8px 8px; }
.form-section .form-field.textarea textarea{ border: none; border-radius: 0px; }
.form-section.float-label .form-field input[type="text"].hidden, 
.form-section.float-label .form-field input[type="email"].hidden,
.form-section.float-label .form-field input[type="password"].hidden{ display: none; }
.form-section.float-label .form-field label{ font-size: .88rem; color: var( --dark-grey ); font-weight: 400; position: absolute; top: 0px; left: 8px; opacity: 1; padding: 0 0 0 0; }
.form-section .form-field.block label,
.form-section.float-label .form-field.block label{ display: block; position: relative; top: 0px; left: 0px; margin: 0 0px 5px 0; }
.form-section.float-label .form-field.label-hidden label{ display: none; }
.form-section.float-label .form-field.textarea label,
.form-section.float-label .form-field.radio label,
.form-section.float-label .form-field.checkbox label{ position: relative; font-weight: 800; font-size: 1rem; top: auto; left: auto; }
.form-section.float-label .form-field.checkbox .checkbox-container,
.form-section.float-label .form-field.radio .radio-container,
.form-section.float-label .form-field.textarea .textarea-container{ margin: 5px 0 0 0; }
.form-section.float-label .form-field.textarea .textarea-container textarea{ display: block; box-sizing: border-box; width: 100%; height: 120px; font-size: 1rem; padding: 7px; }

input{ border-radius: 0px; border: 1px solid var( --grey ); padding: 7px 7px; }
input[type="text"], input[type="email"], input[type="tel"], 
input[type="password"]{ width: 100%;  border-radius: 0px; }
.form-group { margin-bottom: 1rem; }
.form-field .form-field-error{ display: inline-block; padding: 4px 8px; font-size: .85rem; background-color: var( --error-bg ); color: var( --error-txt ); }
#formContactSubmitMessage{ display: none; }
#formContactSubmitMessage .form-field-success{ margin: 1rem 0 1rem 0; padding: 1rem; border: 1px solid var( --green ); }
#formContactSubmitMessage.active{ display: table; }
.ajax-loader{ display: flex; justify-content: left; align-items: center; }
.ajax-loader .loader-icon{ flex: 0 0 15px; padding: 5px 5px 0 0; }


/* --- Misc. --- */
.recaptcha-disclaimer{ font-size: .8125rem; }
.grecaptcha-badge{ opacity:0; }


        

/* --- Rotary color scheme (matches rotary.org: navy header, pill buttons, royal blue and gold) --- */

:root{
    --club-text: #2b3a4f;
    --club-bg-alt: #f8f9fb;
    --club-header-bg: #1f2b44;
    --club-header-text: #ffffff;
    --club-header-border: #1f2b44;
    --club-header-hover-bg: rgba( 255, 255, 255, .1 );
    --club-header-hover-text: #ffffff;
    --club-nav-active-text: #ffffff;
    --club-nav-active: #f7a81b;
    --club-btn-radius: 999px;
    --club-cta-bg: #c5f0fd;
    --club-cta-text: #17458f;
    --club-footer-bg: #212c42;
    --club-footer-text: #ffffff;
    --club-footer-muted: #b8d9ee;
    --club-footer-border: rgba( 255, 255, 255, .18 );
    --club-footer-link: #c5f0fd;
    --club-footer-link-hover: var( --rotary-gold );
    --club-footer-bottom-text: #c9ced6;
}
a{ color: #17458f; }
a:hover{ color: #0c2d63; }
h1.page-title{ color: var( --club-text ); }
a.club-btn{ background-color: #17458f; }
a.club-btn:hover{ background-color: #0c2d63; }
.btn.btn-primary,
button.btn-primary{ background-color: #17458f; color: #ffffff; border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; }
.club-footer h2{ text-transform: none; letter-spacing: 0; color: #ffffff; font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.club-footer, .club-footer li, .club-footer p{ font-size: 1.05rem; }
.club-footer-name{ font-size: 1.25rem; }

/* --- Outreach: charities grid and cards --- */

#main-content .page-section.section-charities{ background-color: var( --club-bg ); padding: var( --club-space-5 ) 0 var( --club-space-6 ); }
#main-content .page-section.section-charities .flex-container{ max-width: var( --club-width ); margin: 0 auto; padding: 0 var( --club-space-3 ); }
#main-content .charities{ display: grid; grid-template-columns: minmax( 0, 1fr ); gap: var( --club-space-4 ); }
#main-content .charities .charity-container{ display: flex; flex: none; margin: 0; padding: 0; }
#main-content .charities .charity-item{ --card-bg: #f1f5fb; display: flex; flex-direction: column; width: 100%; height: auto; margin: 0; padding: var( --club-space-4 ); text-align: center; background: var( --card-bg ); border: 1px solid var( --club-border ); border-radius: var( --club-radius ); box-shadow: var( --club-shadow ); }
#main-content .charities .charity-container:nth-child(4n+2) .charity-item{ --card-bg: #fdf5e4; }
#main-content .charities .charity-container:nth-child(4n+3) .charity-item{ --card-bg: #eaf6fa; }
#main-content .charities .charity-container:nth-child(4n+4) .charity-item{ --card-bg: #f3f4f7; }
#main-content .charities .charity-thumbnail-container{ display: block; width: 11rem; height: 11rem; overflow: hidden; margin: 0 auto var( --club-space-3 ); }
#main-content .charities .charity-thumbnail-container img{ display: block; width: 100%; height: 100%; object-fit: cover; }
#main-content .charities .charity-name{ font-size: 1.15rem; line-height: 1.25; font-weight: 700; text-transform: none; color: var( --club-text ); }
#main-content .charities .charity-details{ flex: 1; }
#main-content .charities .charity-details .charity-details-container{ padding: var( --club-space-2 ) 0 0; }
#main-content .charities .charity-excerpt{ margin: var( --club-space-2 ) 0 0; font-size: 1rem; line-height: 1.55; font-weight: 400; text-align: left; }
#main-content .charities .links{ margin-top: auto; padding: var( --club-space-3 ) 0 0; }
#main-content .charities .links a{ margin: 0 auto; }
@media( min-width: 40rem ){
    #main-content .charities{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media( min-width: 64rem ){
    #main-content .charities{ grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

/* Outreach intro line: equal space above (page header) and below (cards) */
body.outreach #main-content .page-section.page-content{ padding: var( --club-space-5 ) 0 0; text-align: center; }
body.outreach #main-content .page-section.page-content p{ margin: 0; }