/* ===== CSS RESET & NORMALIZE ===== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{
 margin:0;
 padding:0;
 border:0;
 font-size:100%;
 font:inherit;
 vertical-align:baseline;
 box-sizing:border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{
 display:block;
}
body{
 line-height:1.6;
 background:#FEF4DC;
 color:#2E2E2E;
 font-family:'Open Sans', Arial, Helvetica, sans-serif;
}
a{
 color:inherit;
 text-decoration:none;
 transition:color 0.2s;
}
ul, ol{
 list-style:none;
}
img{
 max-width:100%;
 display:block;
 border:none;
}
button{
 background:none;
 border:none;
 font-family:inherit;
 font-size:inherit;
 cursor:pointer;
}
input,textarea,select{
 font-family:inherit;
 font-size:inherit;
 outline:none;
}

/* ====== VINTAGE RETRO THEME: COLORS, FONTS, PATTERNS ====== */
:root{
 --brand-primary:#253A87;
 --brand-secondary:#F3B706;
 --brand-accent:#EDEDED;
 --vintage-brown:#B87D4B;
 --vintage-red:#E94C4A;
 --vintage-olive:#A7A77C;
 --vintage-light:#FEF4DC;
 --vintage-navy:#22273C;
 --white:#fff;
 --black:#191919;
}

body{
 background:var(--vintage-light);
}

.container{
 width:100%;
 max-width:1100px;
 margin:0 auto;
 padding:0 16px;
}

/* Typography */
h1,h2,h3,h4,.cta.primary,header .main-nav a,footer .footer-nav a{
 font-family:'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif;
 letter-spacing:0.03em;
}
h1{
 font-size:2.25rem;
 font-weight:800;
 line-height:1.12;
 margin-bottom:24px;
 color:var(--brand-primary);
 text-shadow:1px 1px 0 #fff,2px 2px 0 var(--brand-secondary),0 0 1px rgba(0,0,0,0.01);
}
h2{
 font-size:1.5rem;
 font-weight:700;
 margin-bottom:18px;
 color:var(--vintage-brown);
 text-shadow:1px 1px 0 #fff;
}
h3{
 font-size:1.18rem;
 font-weight:700;
 margin-bottom:12px;
 color:var(--vintage-navy);
}
.section h1,.section h2{
 margin-bottom:16px;
}
p,li,blockquote{
 font-size:1rem;
 margin-bottom:10px;
 color:var(--black);
}
blockquote{
 font-family:'Montserrat', serif;
 font-style:italic;
 color:var(--vintage-red);
 margin:0 0 8px 0;
 padding-left:16px;
 border-left:4px solid var(--brand-secondary);
}
strong{
 font-weight:700;
 color:var(--brand-primary);
}
.text-section{
 margin-bottom:24px;
}

/* Spacing & Pattern Section */
.section{
 margin-bottom:60px;
 padding:40px 20px;
 background:#fff7e0;
 box-shadow:0 6px 36px rgba(40,20,0,.06);
 border-radius:20px;
 border:3px double var(--brand-accent);
 position:relative;
}

/* Flex Layout Patterns (NO GRID) */
.card-container{
 display:flex;
 flex-wrap:wrap;
 gap:24px;
}
.card{
 background:var(--white);
 border-radius:16px;
 box-shadow:0 2px 16px 0 rgba(38,46,68,0.08);
 padding:24px;
 margin-bottom:20px;
 position:relative;
 border:2px solid var(--vintage-olive);
 transition:box-shadow 0.2s,transform 0.15s;
}
.card:hover{
 box-shadow:0 6px 28px 0 rgba(38,46,68,0.16);
 transform:translateY(-2px) scale(1.015);
}
.content-grid{
 display:flex;
 flex-wrap:wrap;
 gap:20px;
 justify-content:space-between;
}
.text-image-section{
 display:flex;
 align-items:center;
 gap:30px;
 flex-wrap:wrap;
}
.testimonial-card{
 display:flex;
 align-items:center;
 gap:20px;
 padding:20px;
 background:var(--brand-accent);
 border-radius:18px;
 border-left:6px solid var(--brand-secondary);
 margin-bottom:24px;
 box-shadow:0 2px 20px 0 rgba(100,80,40,0.09);
 font-size:1.1rem;
}
.testimonial-card p, .testimonial-card blockquote{
 color:#333;
}
.feature-item{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:15px;
 background:var(--white);
 border-radius:16px;
 box-shadow:0 2px 12px 0 rgba(38,46,68,0.04);
 padding:19px 20px 17px 20px;
 border:1.5px dashed var(--vintage-brown);
 min-width:190px;
 flex:1 1 200px;
}

/* =============== HEADER & NAVIGATION =============== */
header{
 background:var(--brand-primary);
 color:var(--white);
 border-bottom:8px solid var(--brand-secondary);
 position:relative;
}
header .container{
 display:flex;
 align-items:center;
 justify-content:space-between;
 height:74px;
}
header img{
 height:54px;
 width:auto;
 margin-right:20px;
}
.main-nav{
 display:flex;
 gap:26px;
 align-items:center;
}
.main-nav a{
 color:var(--brand-secondary);
 font-family:'Montserrat',sans-serif;
 font-weight:600;
 font-size:1rem;
 letter-spacing:0.06em;
 padding:0 2px;
 position:relative;
 transition:color 0.18s;
}
.main-nav a:hover,
.main-nav a:focus{
 color:var(--brand-accent);
}

header .cta.primary{
 margin-left:16px;
 background:var(--brand-secondary);
 color:var(--brand-primary);
 padding:10px 28px;
 font-weight:800;
 border-radius:38px;
 box-shadow:0 2px 12px 0 rgba(223,178,6,.11);
 font-size:1.12rem;
 letter-spacing:0.04em;
 border:2px solid var(--brand-accent);
 text-shadow:1px 1px 0 #fff;
 transition:background 0.18s,color 0.18s,box-shadow 0.19s;
}
header .cta.primary:hover,
header .cta.primary:focus{
 background:var(--vintage-red);
 color:var(--white);
 box-shadow:0 4px 20px 0 rgba(200,20,8,0.12);
}

/* Mobile Nav */
.mobile-menu-toggle{
 display:none;
 position:absolute;
 right:18px;
 top:22px;
 background:var(--brand-secondary);
 color:var(--brand-primary);
 border-radius:50%;
 width:44px;
 height:44px;
 font-size:1.35rem;
 z-index:201;
 border:3px solid var(--brand-accent);
 box-shadow:0 2px 9px 0 rgba(223,178,6,.09);
 transition:background 0.18s,color 0.18s;
}
.mobile-menu-toggle:active{
 background:var(--brand-primary);
 color:var(--brand-secondary);
}
.mobile-menu{
 position:fixed;
 left:0; top:0; right:0; bottom:0;
 width:100vw;
 height:100vh;
 background:rgba(36,35,32,0.97);
 z-index:3000;
 transform:translateX(-100%);
 transition:transform 0.33s cubic-bezier(.87,-0.10,.22,1.18);
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-start;
 padding:32px 0 0 0;
}
.mobile-menu.open{
 transform:translateX(0);
}
.mobile-menu-close{
 align-self:flex-end;
 margin-right:32px;
 margin-bottom:40px;
 background:var(--vintage-red);
 color:#fff;
 font-size:2rem;
 border-radius:50%;
 width:46px;
 height:46px;
 border:2px solid #fff;
 transition:background 0.14s;
 z-index:31;
}
.mobile-menu-close:hover{
 background:#fff;
 color:var(--vintage-red);
}
.mobile-nav{
 display:flex;
 flex-direction:column;
 gap:28px;
 width:100vw;
 align-items:center;
}
.mobile-nav a{
 font-family:'Montserrat',sans-serif;
 font-size:1.25rem;
 color:var(--brand-secondary);
 font-weight:700;
 letter-spacing:0.06em;
 padding:18px 0;
 width:100%;
 text-align:center;
 border-bottom:1px solid rgba(255,233,136,0.07);
 transition:color 0.16s,background 0.14s;
}
.mobile-nav a:hover, .mobile-nav a:focus{
 background:var(--vintage-red);
 color:#fff !important;
}

/* ===== HERO/INTRO SECTION ===== */
section:first-of-type{
 background:var(--brand-accent);
 min-height:260px;
 box-shadow:0 10px 60px 0 rgba(40,30,16,.10);
 border-bottom:8px double var(--brand-secondary);
}

.content-wrapper{
 width:100%;
 display:flex;
 flex-direction:column;
 gap:24px;
}

.cta{
 cursor:pointer;
 font-family:'Montserrat',sans-serif;
 font-weight:700;
 border:none;
 position:relative;
 display:inline-block;
 text-align:center;
 transition:background 0.19s,color 0.14s,transform 0.08s;
}
.cta.primary{
 background:var(--brand-secondary);
 color:var(--brand-primary);
 border-radius:38px;
 padding:10px 28px;
 font-size:1.14rem;
 border:2px solid var(--brand-accent);
 margin-top:8px;
 box-shadow:0 2px 10px 0 rgba(223,178,6,.13);
}
.cta.primary:hover, .cta.primary:focus{
 background:var(--vintage-red);
 color:#fff;
}
.cta.secondary{
 background:var(--brand-primary);
 color:var(--brand-secondary);
 border-radius:36px;
 padding:9px 24px;
 font-size:1.03rem;
 border:2px solid var(--brand-secondary);
 margin-top:8px;
 margin-bottom:0;
 box-shadow:0 2px 10px 0 rgba(38,58,135,.09);
 transition:background 0.16s,color 0.14s;
}
.cta.secondary:hover,.cta.secondary:focus{
 background:var(--vintage-brown);
 color:var(--white);
}

/* ==== CLUBS & EVENTS CARDS ==== */
.club-listings, .event-listing-teaser, .event-cards, .membership-options{
 display:flex;
 flex-wrap:wrap;
 gap:24px;
 margin-bottom:24px;
}
.club-card, .event-card, .option-card{
 background:var(--white);
 border-radius:16px;
 border:2.5px solid var(--vintage-olive);
 box-shadow:0 2px 18px 0 rgba(38,46,68,0.08);
 padding:22px 21px 19px 21px;
 flex:1 1 270px;
 margin-bottom:20px;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:10px;
 position:relative;
 transition:box-shadow 0.18s,transform 0.13s;
}
.club-card:hover,.event-card:hover,.option-card:hover{
 box-shadow:0 6px 28px 0 rgba(38,46,68,0.17);
 transform:translateY(-3px) scale(1.019);
 border-color:var(--brand-primary);
}

.filter-bar, .filter-controls{
 display:flex;
 flex-wrap:wrap;
 gap:14px;
 align-items:center;
 background:var(--brand-accent);
 border-radius:22px;
 padding:11px 16px 6px 16px;
 margin-bottom:20px;
 border:1.5px dashed var(--vintage-brown);
}
.search-bar{
 display:flex;
 align-items:center;
 gap:8px;
 margin:18px 0 4px 0;
}
.search-bar input{
 border-radius:30px;
 border:1.5px solid var(--brand-primary);
 font-size:1rem;
 padding:8px 16px;
 width:220px;
 margin-right:7px;
 background:var(--brand-accent);
 color:var(--brand-primary);
 font-family:inherit;
 transition:border 0.18s;
}
.search-bar input:focus{
 border:2.5px solid var(--vintage-red);
 background:#fff;
}

/* Membership Cards */
.membership-options{
 gap:24px;
}
.option-card{
 border:2px dashed var(--brand-secondary);
 background:var(--vintage-olive);
 color:#222;
}
.option-card h3{
 color:var(--brand-primary);
 font-size:1.18rem;
 margin-bottom:6px;
}

/* ======= CONTACT ======= */
.contact-details{
 display:flex;
 flex-direction:column;
 gap:10px;
 margin-bottom:28px;
}
.contact-details img{
 margin-right:8px;
 vertical-align:middle;
 height:21px;
 display:inline;
}
.map-embed{
 margin:18px 0 0 0;
 display:flex;
 flex-direction:row;
 align-items:center;
 gap:18px;
}
@media(max-width:599px){
  .map-embed{
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
  }
}

.social-links{
 display:flex;
 flex-direction:row;
 gap:16px;
 margin-top:8px;
}
.social-links a{
 width:40px; height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--brand-accent);
 border-radius:50%;
 box-shadow:0 1px 7px 0 rgba(34,34,34,0.07);
 border:1.5px solid var(--vintage-brown);
 transition:background 0.18s,transform 0.10s;
}
.social-links a:hover{
 background:var(--brand-secondary);
 transform:scale(1.08);
}
.social-links img{
 width:22px;
}

/* ======= FOOTER ======= */
footer{
 padding:38px 0 22px 0;
 background:#ede6d3;
 color:var(--vintage-navy);
 border-top:6px solid var(--brand-secondary);
}
.footer-nav{
 display:flex;
 flex-wrap:wrap;
 gap:20px;
 margin-bottom:10px;
}
.footer-nav a{
 color:var(--brand-primary);
 font-family:'Montserrat',sans-serif;
 font-weight:600;
 letter-spacing:0.02em;
 font-size:1rem;
 transition:color 0.21s;
}
.footer-nav a:hover{
 color:var(--vintage-red);
}
.footer-contact p{
 font-size:0.98rem;
 color:var(--black);
 letter-spacing:0.01em;
}

/* ========== COOKIE CONSENT BANNER ========== */
.cookie-banner{
 position:fixed;
 left:0; right:0; bottom:0;
 width:100vw;
 background:var(--brand-primary);
 color:var(--brand-secondary);
 z-index:4000;
 display:flex;
 flex-direction:row;
 align-items:center;
 justify-content:center;
 padding:20px 14px;
 box-shadow:0 -2px 22px 0 rgba(38,58,135,0.13);
 font-family:'Open Sans',sans-serif;
 font-size:1.08rem;
 animation:cookieBannerIn 0.6s cubic-bezier(.48,.81,.46,1.24);
 gap:20px;
}
@keyframes cookieBannerIn{
  from{transform:translateY(100%); opacity:0;}
  to{transform:translateY(0); opacity:1;}
}
.cookie-banner .cookie-actions{
 display:flex;
 flex-direction:row;
 gap:13px;
 margin-left:16px;
}
.cookie-banner button{
 padding:8px 18px;
 font-size:1rem;
 border-radius:27px;
 margin:0 2px;
 font-family:'Montserrat',sans-serif;
 font-weight:600;
 border:2px solid var(--brand-accent);
}
.cookie-accept{
 background:var(--brand-secondary);
 color:var(--brand-primary);
 box-shadow:0 1px 5px 0 rgba(223,178,6,.11);
}
.cookie-reject{
 background:var(--vintage-red);
 color:#fff;
 border:2px solid #fff;
}
.cookie-settings{
 background:var(--brand-accent);
 color:var(--brand-primary);
}
.cookie-banner button:hover{
 filter:brightness(0.93) contrast(1.04);
}

.cookie-modal-backdrop{
 position:fixed;
 left:0;top:0;right:0;bottom:0;
 z-index:4100;
 background:rgba(41,39,36,0.65);
}
.cookie-modal{
 position:fixed;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 background:var(--brand-accent);
 color:var(--brand-primary);
 border-radius:24px;
 box-shadow:0 4px 60px 0 rgba(30,26,10,.23);
 width:96vw; max-width:410px;
 z-index:4110;
 padding:36px 32px 30px 32px;
 animation:cookieModalIn 0.43s cubic-bezier(.45,.86,.38,1.23);
}
@keyframes cookieModalIn{from{opacity:0;transform:translate(-50%,-40%);} to{opacity:1;transform:translate(-50%,-50%);}}
.cookie-modal h3{
 font-family:'Montserrat',sans-serif;
 font-size:1.2rem;
 margin-bottom:15px;
}
.cookie-cat{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-bottom:13px;
}
.cookie-cat span{
 font-size:1.05rem;
}
.toggle-switch{
 width:40px; height:22px;
 background:#ccc;
 border-radius:11px;
 position:relative;
 display:inline-block;
}
.toggle-switch input{
 opacity:0;
 width:0; height:0;
}
.toggle-slider{
 position:absolute;
 left:3px; top:3px;
 width:16px; height:16px;
 border-radius:50%;
 background:#fff;
 transition:transform 0.19s, background 0.19s;
}
.toggle-switch input:checked + .toggle-slider{
 background:var(--brand-secondary);
 transform:translateX(15px);
}
.cookie-modal-footer{
 display:flex;
 gap:15px;
 margin-top:19px;
 justify-content:flex-end;
}
.cookie-modal button{
 border-radius:22px;
 padding:7px 17px;
 font-weight:700;
 border:2px solid var(--vintage-brown);
 background:var(--brand-secondary);
 color:var(--brand-primary);
}
.cookie-modal button:hover{
 background:var(--vintage-red);
 color:#fff;
 border-color:var(--brand-secondary);
}

/* ======== RESPONSIVE ======== */
@media(max-width:1260px){
  .container{max-width:96vw;}
}
@media(max-width:1024px){
  .main-nav{gap:14px;}
  .container{max-width:95vw;}
  .card-container,.content-grid,.club-listings,.event-listing-teaser,.event-cards,.membership-options{gap:13px;}
}
@media(max-width:900px){
  .content-wrapper{gap:18px;}
  .section{padding:27px 8px;}
  h1{font-size:1.7rem;}
  h2{font-size:1.2rem;}
}
@media(max-width:768px){
  .main-nav,.header .cta.primary{display:none;}
  .mobile-menu-toggle{display:block;}
  header .container{height:64px;}
  .club-listings,.event-listing-teaser,.event-cards,.membership-options{
    flex-direction:column;
    gap:17px;
    align-items:stretch;
  }
  .content-grid,.feature-grid{
    flex-direction:column;
    gap:15px;
  }
  .text-image-section{
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
  }
  .footer-nav{
    gap:10px;
    flex-direction:column;
  }
  .section{
    margin-bottom:32px;
    padding:22px 6px;
  }
  .testimonial-card{
    padding:13px 7px 12px 13px;
    border-radius:11px;
  }
  .filter-bar, .filter-controls{
    flex-direction:column;
    gap:6px;
    padding:7px 8px 4px 8px;
  }
}
@media(max-width:519px){
  h1{font-size:1.25rem;}
  h2{font-size:1.07rem;}
  p,li,blockquote{font-size:0.95rem;}
  .cta.primary,.cta.secondary{font-size:1rem;}
  .testimonial-card,.feature-item,.club-card,.event-card{padding:7px 8px;}
}

/* ==== MICRO-INTERACTIONS ==== */
.club-card,.event-card,.option-card,.feature-item,.cta, .footer-nav a{
  transition:box-shadow 0.23s,transform 0.13s,background 0.14s,color 0.12s,border 0.15s;
}
.footer-nav a:active, .main-nav a:active, .mobile-nav a:active{
  filter:brightness(0.93) contrast(1.03);
}

/* ========== UTILITIES & OVERRIDES ========== */
::-webkit-scrollbar{
  width:9px; background:#f7e8ac;
}
::-webkit-scrollbar-thumb{
  background:var(--vintage-brown);
  border-radius:5px;
}
::selection{
  background:var(--brand-secondary);
  color:var(--brand-primary);
}

/* Pattern backgrounds for retro look */
.section:nth-child(even){
  background:repeating-linear-gradient(135deg,#fff7e0 0 20px,#fde6ba 20px 40px);
  border-radius:23px;
  border:2.5px solid var(--vintage-olive);
}
.feature-item::before{
  content:'';
  display:block;
  width:36px;height:7px;
  background:var(--brand-secondary);
  border-radius:8px;
  margin:0 0 9px 0;
}

/* Decorative Dots for vintage accent */
.section:after{
  content:'';
  display:block;
  width:24px; height:24px;
  border-radius:50%;
  position:absolute;
  right:18px; top:10px;
  background:radial-gradient(ellipse at center, var(--vintage-red) 90%, transparent 100%);
  opacity:.11;
  z-index:1;
}
@media(max-width:600px){.section:after{display:none;}}

/* ========== END OF FILE ========== */