/* Réjaumont.net — clean reconstruction of the yt_sunblogger "blue" village theme (2008-2012 era) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;font-family:"Trebuchet MS","Segoe UI",Verdana,Arial,sans-serif;
  font-size:16px;line-height:1.6;color:#2b2b2b;background:#e9eef3;
  background-image:linear-gradient(#dbe4ec,#eef2f6 220px);overflow-x:hidden;
}
a{color:#1e5b9c;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.wrap{max-width:980px;margin:0 auto;background:#fff;box-shadow:0 0 18px rgba(0,40,80,.12)}

/* ---------- Header ---------- */
header.site{
  background:#1f6bb0;
  background-image:linear-gradient(#2a7cc7,#1a5a99);
  color:#fff;position:relative;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:1.05}
.brand:hover{text-decoration:none}
.brand .logo{font-size:34px;font-weight:700;letter-spacing:.5px;
  font-family:"Trebuchet MS",Georgia,serif;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.brand .logo b{color:#ffd24d}
.brand .tag{font-size:12.5px;color:#d6e8f7;margin-top:3px;text-transform:uppercase;letter-spacing:1.5px}
.header-date{background:rgba(255,255,255,.14);border-radius:6px;text-align:center;
  padding:6px 12px;min-width:70px;line-height:1.15}
.header-date .m{font-size:12px;text-transform:capitalize}
.header-date .d{font-size:26px;font-weight:700}
.header-date .y{font-size:12px;opacity:.85}

/* ---------- Top nav ---------- */
nav.top{background:#16487a;border-top:1px solid rgba(255,255,255,.15)}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav.top li{margin:0}
nav.top a{display:block;color:#eaf3fb;padding:12px 18px;font-size:15px;font-weight:600;
  border-right:1px solid rgba(255,255,255,.08)}
nav.top a:hover,nav.top a.active{background:#0f3a64;color:#fff;text-decoration:none}

/* hamburger (mobile) */
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;
  cursor:pointer;padding:8px 14px;min-height:44px;min-width:44px}

/* ---------- Layout ---------- */
.layout{display:flex;gap:0;align-items:flex-start}
aside.side{width:230px;flex:0 0 230px;background:#f1f5f9;border-right:1px solid #d6dee6;
  padding:14px 0}
main.content{flex:1 1 auto;padding:22px 26px;min-width:0}

/* ---------- Sidebar accordion menu ---------- */
.submenu{margin:0 0 18px}
.submenu .grp{margin:0}
.submenu .grp>.grp-t{display:block;background:#1f6bb0;color:#fff;font-weight:700;
  font-size:14px;padding:9px 14px;margin-top:2px;letter-spacing:.3px}
.submenu ul{list-style:none;margin:0;padding:0;background:#fff}
.submenu ul li a{display:block;padding:8px 14px 8px 22px;font-size:14px;color:#2c5d8a;
  border-bottom:1px solid #eef2f5}
.submenu ul li a:hover{background:#e8f1fa;text-decoration:none}

.side-box{margin:0 12px 18px;background:#fff;border:1px solid #dde5ec;border-radius:4px;
  overflow:hidden}
.side-box h3{margin:0;background:#e3edf6;color:#16487a;font-size:13.5px;
  padding:8px 12px;border-bottom:1px solid #d6dee6;text-transform:uppercase;letter-spacing:.5px}
.side-box .bd{padding:10px 12px;font-size:13.5px}
.side-box ul{list-style:none;margin:0;padding:0}
.side-box li{padding:5px 0;border-bottom:1px dotted #e1e8ef;line-height:1.35}
.side-box li:last-child{border-bottom:0}
.side-box .meta{color:#7a8794;font-size:11.5px}

/* ---------- Content ---------- */
.breadcrumb{font-size:12.5px;color:#7a8794;margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid #e6ebf0}
.breadcrumb a{color:#3a78ad}
h1{font-size:26px;color:#16487a;margin:0 0 14px;line-height:1.25;
  border-bottom:3px solid #f0c419;padding-bottom:8px;display:inline-block}
h2{font-size:20px;color:#1f6bb0;margin:26px 0 10px}
h3{font-size:16px;color:#2c5d8a;margin:20px 0 8px}
.content p{margin:0 0 14px}
.content img{border:4px solid #fff;box-shadow:0 1px 5px rgba(0,40,80,.18);margin:4px 0}
.modifydate{font-size:12px;color:#9aa6b2;font-style:italic;margin-top:18px;
  border-top:1px solid #eef2f5;padding-top:8px}

/* article cards in category/listing */
.article{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid #eaeff4}
.article:last-child{border-bottom:0}
.article h2{margin-top:0}
.article .more{display:inline-block;margin-top:6px;font-weight:600;font-size:14px}

/* listing of links */
.listing{list-style:none;padding:0;margin:0}
.listing li{padding:11px 0;border-bottom:1px solid #eef2f5}
.listing li a{font-size:16px;font-weight:600}
.listing li .meta{display:block;font-size:12.5px;color:#8893a0;margin-top:2px}

/* photo gallery grid */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:18px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:140px;object-fit:cover;border:4px solid #fff;
  box-shadow:0 1px 5px rgba(0,40,80,.18)}
.gallery figcaption{font-size:12px;color:#7a8794;margin-top:4px;text-align:center}

/* hero on homepage */
.hero{position:relative;margin:0 0 22px;border-radius:4px;overflow:hidden}
.hero img{width:100%;height:260px;object-fit:cover;display:block;border:0;box-shadow:none}
.hero .cap{position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(transparent,rgba(8,30,52,.78));color:#fff;
  padding:24px 18px 14px;font-size:15px}
.hero .cap b{display:block;font-size:20px;margin-bottom:2px}

.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.infocard{background:#f4f8fb;border:1px solid #dde7ef;border-radius:5px;padding:14px 16px}
.infocard h3{margin-top:0;color:#16487a}

/* ---------- Footer ---------- */
footer.site{background:#16487a;color:#cfe0ef;text-align:center;
  padding:18px 16px;font-size:13px;line-height:1.5}
footer.site a{color:#ffd24d}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .nav-toggle{display:block}
  nav.top ul{display:none;flex-direction:column}
  nav.top ul.open{display:flex}
  nav.top a{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);min-height:44px}
  .layout{flex-direction:column}
  aside.side{width:100%;flex:none;border-right:0;border-bottom:1px solid #d6dee6}
  main.content{padding:18px}
  .hero img{height:190px}
  h1{font-size:22px}
  .brand .logo{font-size:28px}
}

/* responsive tables (village calendars etc) */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;max-width:100%}
.content table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
.content table td,.content table th{border:1px solid #d6dee6;padding:6px 9px;text-align:left}
.content table th{background:#e3edf6;color:#16487a}
