/* ==========================================================================
   BANNOCKBURN LETHBRIDGE SCOUT GROUP - one stylesheet for the whole site.
   Change a colour here and every page updates.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Open+Sans:wght@400;600&display=swap');
:root{
  --navy:#002F48; --navy2:#003C78; --blue:#0060A8;
  --red:#E41824; --coral:#E46048; --orange:#F0A818;
  --ink:#1E1E1E; --grey:#F4F4F4; --line:#E2E6EA;
  --cub:#FAC828; --scout:#00A050; --vent:#961432; --rover:#DC281E;
  --rad:10px; --max:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Open Sans',Segoe UI,Arial,sans-serif;color:var(--ink);
  font-size:16px;line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Poppins',Segoe UI,Arial,sans-serif;line-height:1.15;margin:0 0 .5em;}
h1{font-size:clamp(2rem,5vw,3.4rem);} h2{font-size:clamp(1.5rem,3.2vw,2.3rem);} h3{font-size:1.2rem;}
p{margin:0 0 1em;}
a{color:var(--blue);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;z-index:999;background:var(--orange);color:#000;padding:12px 18px;border-radius:6px;}

/* --- IMAGE SAFETY: images never distort anywhere on this site --- */
img{max-width:100%;height:auto;object-fit:contain;}

/* ---------- header + navigation ---------- */
.site-head{position:sticky;top:0;z-index:100;background:#fff;border-bottom:3px solid var(--orange);
  box-shadow:0 2px 10px rgba(0,0,0,.06);}
.head-inner{max-width:var(--max);margin:0 auto;padding:10px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.brand img{height:56px;width:auto;display:block;flex:0 0 auto;}
.navtoggle{display:none;}
.burger{display:none;font-size:1.7rem;line-height:1;cursor:pointer;padding:8px 12px;
  color:var(--navy);border:2px solid var(--line);border-radius:8px;user-select:none;}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;}
.nav a{display:block;padding:12px 13px;text-decoration:none;color:var(--ink);font-weight:600;
  font-size:.94rem;border-radius:8px;white-space:nowrap;}
.nav a:hover,.nav a:focus{background:var(--grey);color:var(--navy);}
.nav a.active{color:var(--red);}
.nav a.cta{background:var(--red);color:#fff;}
.nav a.cta:hover{background:var(--coral);color:#fff;}
.has-sub{position:relative;}
.has-sub>a::after{content:" \25BE";font-size:.8em;}
.sub{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.13);padding:8px;display:none;flex-direction:column;}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex;}
.sub a{padding:11px 14px;font-weight:400;white-space:normal;}
.sub a span{display:block;font-size:.82rem;color:#6A6A6A;}
@media(max-width:1080px){
  .burger{display:block;}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:3px solid var(--orange);
    display:none;box-shadow:0 12px 24px rgba(0,0,0,.12);}
  .navtoggle:checked ~ .nav{display:block;}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:12px;}
  .nav a{padding:14px 16px;}
  .sub{position:static;display:flex;box-shadow:none;border:0;padding:0 0 0 18px;}
  .has-sub>a::after{content:"";}
}

/* ---------- sections ---------- */
.sec{padding:64px 0;}
.sec--grey{background:var(--grey);}
.sec--navy{background:var(--navy);color:#fff;}
.sec--navy h2,.sec--navy h3{color:#fff;}
.rule{width:80px;height:5px;background:var(--red);border-radius:3px;margin:0 0 24px;}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:16px 30px;border-radius:8px;font-weight:600;text-decoration:none;
  border:2px solid transparent;margin:0 12px 12px 0;transition:.15s;}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{background:var(--coral);}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy2);}
.btn--ghost{border-color:#fff;color:#fff;}
.btn--ghost:hover{background:#fff;color:var(--navy);}
.btn--outline{border-color:var(--navy);color:var(--navy);}
.btn--outline:hover{background:var(--navy);color:#fff;}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy) url('../images/hero-desktop.jpg') center/cover no-repeat;
  color:#fff;padding:104px 0 92px;}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,26,46,.55);}
.hero .wrap{position:relative;}
.hero h1{color:#fff;max-width:16em;}
.hero p{font-size:1.15rem;max-width:44em;color:#E4EDF4;}
.hero--sub{padding:76px 0 62px;}
@media(max-width:700px){.hero{background-image:url('../images/hero-mobile.jpg');padding:66px 0 58px;}}
.banner img{display:block;width:100%;height:auto;}

/* ---------- grids ---------- */
.grid{display:grid;gap:24px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:980px){.g4,.g3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr;}}

/* ---------- unit cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-3px);}
.card__bar{height:10px;flex:0 0 auto;}
.card__body{padding:24px;display:flex;flex-direction:column;flex:1;}
/* === THE SQUISHED-LOGO FIX =============================================
   Inside a flex column, images default to align-items:stretch, which was
   forcing the logo to the full card width while the height stayed fixed.
   align-self:flex-start stops the sideways stretch, flex:0 0 auto stops
   vertical squashing, and object-fit guarantees the aspect ratio.
   ====================================================================== */
.card__logo{height:132px;width:auto;max-width:100%;margin:0 0 18px;
  align-self:flex-start;flex:0 0 auto;object-fit:contain;object-position:left center;}
.card h3{margin-bottom:4px;}
.card__ages{font-weight:600;margin:0 0 12px;}
.card__meta{font-size:.92rem;color:#5A5A5A;margin:0 0 6px;}
.card .btn{margin-top:auto;align-self:flex-start;}
.bar-cubs{background:var(--cub);} .bar-scouts{background:var(--scout);}
.bar-venturers{background:var(--vent);} .bar-rovers{background:var(--rover);}
.t-cubs{color:#8A6A00;} .t-scouts{color:var(--scout);}
.t-venturers{color:var(--vent);} .t-rovers{color:var(--rover);}

/* ---------- feature blocks ---------- */
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:28px;}
.feat h3{margin-bottom:8px;}
.sec--navy .feat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#E4EDF4;}

/* ---------- numbered steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;}
.steps li{counter-increment:s;position:relative;padding:0 0 28px 68px;}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:46px;height:46px;
  background:var(--red);color:#fff;border-radius:50%;font-weight:700;font-family:'Poppins',sans-serif;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.steps h3{margin-bottom:4px;}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{width:100%;border-collapse:collapse;min-width:560px;background:#fff;}
table.data th,table.data td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);}
table.data th{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:.95rem;}
table.data tbody tr:nth-child(even){background:#FAFBFC;}

/* ---------- callouts ---------- */
.note{border-left:6px solid var(--orange);background:#FFF8E8;padding:20px 24px;
  border-radius:0 8px 8px 0;margin:0 0 24px;}
.note--red{border-color:var(--red);background:#FDECEE;}
.note h3{margin-top:0;}

/* ---------- download box (term programs, welcome packs) ---------- */
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:20px;background:#fff;
  border:1px solid var(--line);border-left:6px solid var(--navy);
  border-radius:0 var(--rad) var(--rad) 0;padding:24px 26px;margin-bottom:16px;}
.dl__icon{flex:0 0 auto;width:56px;height:56px;border-radius:10px;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
  font-family:'Poppins',sans-serif;letter-spacing:.5px;}
.dl__text{flex:1 1 280px;}
.dl__text h3{margin:0 0 4px;}
.dl__text p{margin:0;font-size:.94rem;color:#5A5A5A;}
.dl .btn{margin:0;}

/* ---------- accordion ---------- */
details.acc{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;background:#fff;}
details.acc summary{cursor:pointer;padding:18px 22px;font-weight:600;
  font-family:'Poppins',sans-serif;list-style:none;}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary::after{content:"+";float:right;color:var(--red);font-size:1.3rem;line-height:1;}
details.acc[open] summary::after{content:"\2013";}
.acc__body{padding:0 22px 20px;}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--navy) url('../images/band-wide.jpg') center/cover no-repeat;
  color:#fff;padding:62px 0;}
.cta::before{content:"";position:absolute;inset:0;background:rgba(0,26,46,.6);}
.cta .wrap{position:relative;}
.cta h2{color:#fff;margin-bottom:8px;}
.lead{font-size:1.15rem;}
.img{width:100%;height:auto;border-radius:var(--rad);display:block;}
.cap{font-size:.85rem;color:#6A6A6A;margin-top:8px;}

/* ---------- embeds ---------- */
.embed{width:100%;background:var(--grey);border-radius:var(--rad);overflow:hidden;}
.embed iframe{display:block;width:100%;border:0;min-height:780px;}
@media(max-width:700px){.embed iframe{min-height:620px;}}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:#C6D8E6;padding:56px 0 26px;font-size:.95rem;}
.site-foot h3{color:#fff;font-size:1.05rem;margin-bottom:14px;}
.site-foot a{color:#C6D8E6;text-decoration:none;}
.site-foot a:hover{color:#fff;text-decoration:underline;}
/* === THE FOOTER LOGO FIX ==============================================
   Locked aspect ratio and a real block box, so the surrounding grid can
   never stretch or squash it. The image file itself was also rebuilt so
   the white wordmark has proper anti-aliasing instead of a dark fringe.
   ===================================================================== */
.flogo{display:block;height:56px;width:auto;max-width:100%;margin:0 0 18px;
  object-fit:contain;object-position:left center;}
.site-foot ul{list-style:none;padding:0;margin:0;}
.site-foot li{margin-bottom:8px;}
.ack{font-size:.85rem;color:#8FAEC6;margin-top:24px;font-style:italic;}
.foot-bar{border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:20px;
  font-size:.85rem;color:#8FAEC6;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;}
.sponsor{display:flex;align-items:center;gap:10px;font-size:.8rem;}
.sponsor img{height:34px;width:auto;}
@media print{.site-head,.nav,.cta,.btn{display:none!important;} body{font-size:11pt;} .sec{padding:12px 0;}}