/* Lees5th.com — faithful static rebuild
   Theme: Montserrat body (#434343), #212121 headings, #3367d6 links,
   dark-overlay image banners. Mirrors the original Google Sites theme. */

:root{
  --text:#434343;
  --heading:#212121;
  --link:#1155cc;
  --accent:#3367d6;
  --header-bg:#ffffff;
  --header-fg:#000000;
  --banner-overlay:rgba(0,0,0,.45);
  --maxw:960px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  border-bottom:1px solid #e8e8e8;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:0 20px;min-height:64px;
}
.brand{
  font-weight:700;font-size:1.15rem;color:var(--header-fg);
  text-decoration:none;white-space:nowrap;margin-right:8px;
}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;
  font-size:1.6rem;cursor:pointer;color:#333;line-height:1;
}
.menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;margin-left:auto;
}
.menu li{position:relative}
.menu a{
  display:block;text-decoration:none;color:var(--header-fg);
  padding:12px 14px;font-size:.92rem;font-weight:500;
  border-radius:4px;
}
.menu a:hover{background:#f2f4f8;color:var(--accent)}
.menu .current>a{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.has-sub>a::after{content:" \25BE";font-size:.7em;opacity:.7}

/* dropdowns */
.submenu{
  list-style:none;margin:0;padding:6px 0;
  position:absolute;left:0;top:100%;min-width:230px;
  background:#fff;border:1px solid #e3e3e3;border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:.14s ease;z-index:60;
}
.menu li:hover>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{padding:9px 18px;font-weight:400;white-space:nowrap}
.submenu .submenu{left:100%;top:-7px}
.has-sub.has-sub>a::after{}

/* ---------- Banner / Hero ---------- */
.banner{
  position:relative;
  /* default: styled gradient (used when no photo was captured) */
  background:linear-gradient(135deg,#3a4d61 0%,#26333f 60%,#1d2730 100%) center/cover no-repeat;
  color:#fff;text-align:center;
  padding:96px 20px;
}
.banner.has-img{ background-color:#2b2b2b; }
/* dark overlay only over photos, for text legibility */
.banner.has-img::before{
  content:"";position:absolute;inset:0;background:var(--banner-overlay);
}
.banner-inner{position:relative;max-width:var(--maxw);margin:0 auto}
.banner h1{
  margin:0;color:#fff;font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;font-size:2.4rem;line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.banner.subbanner{
  background:#455a64;padding:54px 20px;
}
.banner.subbanner::before{background:transparent}
.banner.subbanner h1{font-size:1.7rem;font-weight:600}

/* ---------- Content ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:48px 20px 72px}
.section{margin:0 0 8px}
main h1,main h2,main h3,main h4{
  color:var(--heading);font-family:'Montserrat',Arial,sans-serif;
  line-height:1.3;margin:1.6em 0 .5em;font-weight:600;
}
main h2{font-size:1.6rem}
main h3{font-size:1.3rem}
main p{margin:0 0 1.05em}
main ul,main ol{margin:0 0 1.1em;padding-left:1.4em}
main li{margin:.25em 0}
.content-img{margin:24px auto;border:1px solid #eee;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.img-placeholder{
  margin:24px auto;padding:40px 24px;text-align:center;
  background:repeating-linear-gradient(45deg,#f4f6f8,#f4f6f8 12px,#eef1f4 12px,#eef1f4 24px);
  border:1px dashed #c4ccd4;border-radius:6px;color:#5a6b7b;font-size:.95rem;
}
.img-placeholder span{display:block;font-size:.8rem;color:#8a98a6;margin-top:4px}
.spacer{height:.6em}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin:6px 8px 6px 0;border-radius:50%;
  background:#f2f4f8;color:#26333f;border:1px solid #e0e4e9;
  transition:.15s;vertical-align:middle;
}
.social-icon:hover{background:var(--accent);color:#fff}
.social-icon svg{fill:currentColor}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid #e8e8e8;background:#fafafa;
  color:#777;font-size:.82rem;text-align:center;
  padding:26px 20px;
}
.site-footer a{color:#777}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .nav-toggle{display:block}
  .menu{
    display:none;flex-direction:column;align-items:stretch;
    width:100%;margin:0;padding:6px 0 12px;
  }
  .menu.open{display:flex}
  .nav-inner{flex-wrap:wrap;align-items:center}
  .menu a{padding:11px 8px;border-radius:0}
  .menu .current>a{box-shadow:inset 3px 0 0 var(--accent)}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid #eee;
    margin:0 0 4px 14px;padding:0;min-width:0;background:transparent;
  }
  .submenu .submenu{margin-left:14px}
  .has-sub>a::after{content:""}
  .banner{padding:64px 18px}
  .banner h1{font-size:1.8rem}
}