/* ── Llansannan Community Council — Stylesheet ─────────────────────────────── */
/* Google Fonts is loaded via a <link> in Layout.astro's <head>, not an
   @import here -- an @import inside a stylesheet is a hidden, serial
   dependency the browser can't discover until this whole file has already
   downloaded, adding a full extra round trip to first render. A sibling
   <link> lets the browser fetch both in parallel from the start. */

:root{
  --primary:#3d6e99;--primary-dark:#2b4f72;--primary-light:#5088be;
  --accent:#b07420;--accent-light:#d4944a;
  --text:#2c2c2c;--muted:#5a5a5a;--danger:#c0392b;
  --bg:#edeae5;--white:#ffffff;--border:#d4cfc5;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;color:var(--text);font-size:15px;line-height:1.7;background:var(--bg)}

/* ── LANGUAGE BAR & TOGGLE ──────────────────────────────────────────────────── */
.lang-bar{background:var(--primary-dark);text-align:right;padding:0.25rem 1.5rem;font-size:0.72rem}
.lang-toggle{background:transparent;border:1px solid rgba(255,255,255,0.4);color:rgba(255,255,255,0.85);padding:0.18rem 0.65rem;border-radius:3px;font-size:0.72rem;cursor:pointer;font-family:'Open Sans',sans-serif;letter-spacing:0.05em;transition:all 0.15s}
.lang-toggle:hover{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.7)}

/* ── LANGUAGE DISPLAY ───────────────────────────────────────────────────────── */
html[data-lang="cy"] [lang="en"]{display:none!important}
html:not([data-lang="cy"]) [lang="cy"]{display:none!important}

/* ── NAV ────────────────────────────────────────────────────────────────────── */
/* z-index:1001 -- must beat Leaflet's own controls/panes (the ward map
   uses z-index up to 1000 internally), otherwise the sticky nav gets
   covered by the map instead of scrolling over it. */
.site-nav{background:var(--primary);position:sticky;top:0;z-index:1001;box-shadow:0 2px 10px rgba(0,0,0,0.25)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:stretch;flex-wrap:nowrap}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:0.25rem;padding:0.9rem 0.85rem;color:rgba(255,255,255,0.82);text-decoration:none;font-size:0.78rem;font-weight:500;letter-spacing:0.04em;white-space:nowrap;cursor:pointer;background:none;border:none;border-bottom:3px solid transparent;font-family:'Open Sans',sans-serif;transition:all 0.15s}
.nav-link:hover,.nav-link.active{color:#fff;background:var(--primary-light);border-bottom-color:var(--accent-light)}
.nav-link .arr{font-size:0.6rem;opacity:0.55;margin-left:1px}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--primary-dark);min-width:220px;box-shadow:0 6px 16px rgba(0,0,0,0.3);z-index:200}
.nav-item:hover>.dropdown{display:block}
.dropdown a{display:block;padding:0.6rem 1.1rem;color:rgba(255,255,255,0.78);text-decoration:none;font-size:0.8rem;border-bottom:1px solid rgba(255,255,255,0.07)}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{background:var(--primary);color:#fff}
.hamburger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:0.9rem 1rem;font-size:1.5rem;margin-left:auto;line-height:1}

/* ── MOBILE NAV ─────────────────────────────────────────────────────────────── */
.mob-nav{display:none;background:var(--primary-dark);flex-direction:column;max-height:80vh;overflow-y:auto}
.mob-nav.open{display:flex}
.mob-nav a,.mob-nav button.mob-link{display:block;width:100%;text-align:left;padding:0.75rem 1.5rem;color:rgba(255,255,255,0.82);text-decoration:none;background:none;border:none;font-family:'Open Sans',sans-serif;font-size:0.85rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06)}
.mob-nav button.mob-link:hover{background:var(--primary);color:#fff}
.mob-nav .mob-sub{padding-left:2rem;font-size:0.8rem;color:rgba(255,255,255,0.65)}
.mob-section{padding:0.3rem 1.2rem;font-size:0.68rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.08em;background:rgba(0,0,0,0.15)}

/* ── HERO ───────────────────────────────────────────────────────────────────── */
.hero{position:relative;width:100%;height:440px;background:url('/assets/img/hero.jpg') center 40%/cover no-repeat;background-color:var(--primary-dark);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,25,45,0.30) 0%,rgba(10,25,45,0.72) 100%)}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23edeae5' d='M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") bottom/cover no-repeat;z-index:1}
.hero-title{position:relative;z-index:2;font-family:'Playfair Display',serif;font-size:2.2rem;color:#fff;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,0.5);line-height:1.2}
.hero-sub{position:relative;z-index:2;color:rgba(255,255,255,0.88);font-size:0.9rem;text-align:center;margin-top:0.5rem;text-shadow:0 1px 6px rgba(0,0,0,0.4)}
.hero-btns{position:relative;z-index:2;display:flex;gap:0.75rem;margin-top:1.25rem;flex-wrap:wrap;justify-content:center}
.hero-btn{padding:0.6rem 1.4rem;border-radius:3px;font-size:0.82rem;font-weight:600;cursor:pointer;border:none;font-family:'Open Sans',sans-serif;transition:all 0.15s;text-decoration:none;display:inline-block}
.hero-btn.primary{background:var(--accent);color:#fff}
.hero-btn.primary:hover{background:var(--accent-light)}
.hero-btn.outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.6)}
.hero-btn.outline:hover{background:rgba(255,255,255,0.12)}
/* Inner page banner (smaller hero) */
.page-banner{background:var(--primary);padding:1.5rem 2rem;text-align:center}
.page-banner h1{font-family:'Playfair Display',serif;color:#fff;font-size:1.6rem;line-height:1.2}
.page-banner .cy{display:block;font-size:0.85rem;color:rgba(255,255,255,0.7);font-family:'Open Sans',sans-serif;font-weight:400;margin-top:0.2rem}
/* Breadcrumb */
.breadcrumb{background:#f0ede8;border-bottom:1px solid var(--border);padding:0.5rem 2rem;font-size:0.78rem;color:var(--muted);max-width:1200px;margin:0 auto}
.breadcrumb a{color:var(--primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.site-wrap{background:var(--white);max-width:1200px;margin:0 auto;min-height:60vh}
.content{padding:2.5rem 2rem;max-width:1200px;margin:0 auto}

/* Homepage stacks FOUR separate .site-wrap bands (next-meeting, welcome,
   quick-access, latest-news) for the alternating background effect. The
   60vh min-height above is meant for pages with a single .site-wrap
   wrapping all their content (so a short page doesn't look too sparse
   above the footer) -- applied to each stacked band instead, it forced
   every band to ~60% of viewport height regardless of how little content
   it held, which is what caused the large empty gaps. Cancel it here so
   only real content height drives each band's size on the homepage. */
.page-home .site-wrap{min-height:0}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────── */
.sh{font-family:'Playfair Display',serif;font-size:1.75rem;color:var(--primary);margin-bottom:0.25rem;line-height:1.2}
.sh .cy{display:block;font-size:1rem;color:var(--muted);font-family:'Open Sans',sans-serif;font-weight:400;margin-top:0.15rem}
.sh-rule{border:none;border-top:2px solid var(--accent);width:50px;margin:0.5rem 0 1.5rem}
.sub-sh{font-family:'Playfair Display',serif;color:var(--primary-dark);font-size:1.15rem;margin:1.5rem 0 0.6rem}
p{margin-bottom:0.85rem}
a{color:var(--primary)}

/* ── NOTICE ─────────────────────────────────────────────────────────────────── */
.notice{background:#f0f4f8;border-left:4px solid var(--primary);padding:0.75rem 1rem;margin:0 0 1.25rem;font-size:0.85rem;border-radius:0 4px 4px 0}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:0.55rem 1.2rem;background:var(--primary);color:#fff;border-radius:3px;font-size:0.82rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-family:'Open Sans',sans-serif;transition:background 0.15s}
.btn:hover{background:var(--primary-light)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}

.statue-caption{font-size:0.78rem;color:var(--muted);margin-top:0.4rem;font-style:italic}
.next-meeting{background:var(--primary-dark);color:#fff;border-radius:6px;padding:1.25rem 1.5rem;margin:1.5rem 0}
.next-meeting .label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;opacity:0.7;margin-bottom:0.25rem}
.next-meeting .date{font-family:'Playfair Display',serif;font-size:1.3rem}
.next-meeting .detail{font-size:0.82rem;opacity:0.8;margin-top:0.2rem}

/* ── COUNCILLORS ────────────────────────────────────────────────────────────── */
.cllr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin:1.25rem 0}
.cllr-card{background:#f0f4f8;border-radius:6px;padding:0.85rem;text-align:center;border-top:3px solid var(--primary)}
.cllr-name{font-weight:600;font-size:0.88rem;color:var(--text)}
.cllr-role{font-size:0.75rem;color:var(--muted);margin-top:0.2rem}
.ward-label{font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--primary);margin:1.25rem 0 0.5rem;border-bottom:1px solid var(--border);padding-bottom:0.25rem}
.vacancy-box{background:#fff3cd;border:1px solid #ffc107;border-radius:4px;padding:0.75rem 1rem;font-size:0.83rem;margin:1rem 0}

/* Chair/Clerk leadership cards (top of /councillors/, and reused by the
   Decap "people" collection preview) */
.cllr-leadership{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0 0.5rem}
.cllr-leader-card{background:var(--white);border-top:4px solid var(--accent);border-radius:6px;padding:1.25rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.cllr-leader-role{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);font-weight:700}
.cllr-leader-name{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--primary-dark);margin-top:0.2rem}
.cllr-leader-meta{font-size:0.8rem;color:var(--muted);margin-top:0.3rem}
.cllr-leader-meta a{color:var(--primary)}
.cllr-vacancy{background:#fff3cd;border-top-color:#ffc107;color:#856404}
@media(max-width:600px){.cllr-leadership{grid-template-columns:1fr}}

/* ── WARD STATS ─────────────────────────────────────────────────────────────── */
.ward-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.75rem;margin:1rem 0}
.wstat{background:#f0f4f8;border-radius:4px;padding:0.75rem;font-size:0.83rem}
.wstat span{display:block;color:var(--muted);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.2rem}
.wstat strong{display:block;color:var(--text)}

/* ── MAP ────────────────────────────────────────────────────────────────────── */
#ward-map-leaflet{height:480px;width:100%;border-radius:6px;border:1px solid var(--border)}

/* ── MINUTES LIST ───────────────────────────────────────────────────────────── */
.min-list{display:flex;flex-direction:column;gap:0;margin:0.75rem 0;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.min-row{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;background:#fff;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:background 0.1s}
.min-row:last-child{border-bottom:none}
.min-row:hover{background:#f0f4f8}
.min-left{display:flex;align-items:center;gap:0.75rem}
.min-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);flex-shrink:0}
.min-dot.old{background:var(--muted)}
.min-label{font-weight:600;font-size:0.88rem}
.min-sub{font-size:0.75rem;color:var(--muted);margin-top:0.1rem}
.min-pdf{font-size:0.78rem;color:var(--primary);font-weight:600}
.archive-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin:1.25rem 0 0.5rem;border-top:1px solid var(--border);padding-top:0.75rem}

/* ── MEETINGS TABLE ─────────────────────────────────────────────────────────── */
.mtg-table{width:100%;border-collapse:collapse;font-size:0.88rem;margin:1rem 0}
.mtg-table th{background:var(--primary);color:#fff;padding:0.6rem 0.75rem;text-align:left}
.mtg-table td{padding:0.5rem 0.75rem;border-bottom:1px solid var(--border)}
.mtg-table tr:nth-child(even) td{background:#f9f8f6}
.mtg-table .next td{background:#f0f4f8;font-weight:600}

/* ── DOCUMENTS TABLE ────────────────────────────────────────────────────────── */
.doc-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0}
.doc-table th{background:var(--primary);color:#fff;padding:0.6rem 0.75rem;text-align:left}
.doc-table td{padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);vertical-align:middle}
.doc-table tr:hover td{background:#f5f5f5}
.doc-table .dl{color:var(--primary);font-weight:600;text-decoration:none;font-size:0.78rem}
.doc-table .dl:hover{text-decoration:underline}

/* ── CONTACT CARD ───────────────────────────────────────────────────────────── */
.contact-card{background:#f0f4f8;border-radius:6px;overflow:hidden;margin:1rem 0;border:1px solid var(--border)}
.ccard-head{background:var(--primary);color:#fff;padding:0.75rem 1rem;font-weight:600;font-size:0.88rem}
.crow{display:flex;padding:0.6rem 1rem;border-bottom:1px solid var(--border);font-size:0.85rem}
.crow:last-child{border-bottom:none}
.clabel{color:var(--muted);min-width:130px;flex-shrink:0;font-size:0.8rem}
.cval{color:var(--text)}

/* ── PLANNING ───────────────────────────────────────────────────────────────── */
.planning-intro{font-size:0.88rem;color:var(--muted);margin-bottom:1rem;line-height:1.6}

/* ── NEWS ───────────────────────────────────────────────────────────────────── */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin:1rem 0}
.news-card{background:#f9f8f6;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.news-card-body{padding:1rem}
.news-date{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.3rem}
.news-title{font-weight:700;font-size:0.95rem;color:var(--primary);margin-bottom:0.4rem}
.news-excerpt{font-size:0.83rem;color:var(--text)}

/* ── CALENDAR ───────────────────────────────────────────────────────────────── */
.cal-list{margin:1rem 0}
.cal-item{display:flex;gap:1.25rem;padding:1rem 0;border-bottom:1px solid var(--border);align-items:flex-start}
.cal-item:last-child{border-bottom:none}
.cal-date-box{background:var(--primary);color:#fff;border-radius:4px;padding:0.5rem 0.75rem;text-align:center;min-width:55px;flex-shrink:0}
.cal-day{font-size:1.4rem;font-weight:700;line-height:1}
.cal-month{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;opacity:0.85}
.cal-title{font-weight:600;font-size:0.9rem;margin-bottom:0.2rem}
.cal-detail{font-size:0.8rem;color:var(--muted)}
.cal-desc{font-size:0.82rem;color:var(--text);margin-top:0.35rem}
.cal-date-box-event{background:var(--accent)}

/* One merged feed (meetings + events): a compact, clickable month grid on
   wider screens, falling back automatically to the plain list above on
   narrow ones. Cells are a small fixed height regardless of content, and
   show a short label inline so most days don't need a click to be useful.
   On desktop the grid and the detail panel sit side by side, so clicking
   a day updates the panel in place instead of pushing the page down. */
.cal-layout{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;margin:1rem 0}
.cal-grid-wrap{flex:0 0 300px}
.cal-grid-head{display:flex;align-items:center;justify-content:space-between;font-family:'Playfair Display',serif;color:var(--primary-dark);font-size:0.95rem;margin-bottom:0.5rem}
.cal-grid-month{flex:1;text-align:center}
.cal-nav-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--primary);width:26px;height:26px;line-height:1;font-size:1rem;cursor:pointer;flex-shrink:0}
.cal-nav-btn:hover,.cal-nav-btn:focus-visible{background:var(--primary);color:#fff;border-color:var(--primary);outline:none}
.cal-grid-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.cal-grid-weekdays div{text-align:center;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cell{height:42px;border:1px solid var(--border);border-radius:4px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;overflow:hidden;position:relative;cursor:pointer}
.cal-cell-pad{border-color:transparent;background:transparent;cursor:default}
.cal-cell-num{font-size:0.72rem;color:var(--text);line-height:1}
.cal-cell.has-items{background:#f0f4f8}
.cal-cell:not(.cal-cell-pad):hover,.cal-cell:not(.cal-cell-pad):focus-visible{border-color:var(--primary);outline:none;box-shadow:inset 0 0 0 1px var(--primary)}
.cal-cell.is-selected{border:2px solid var(--primary-dark);background:#e4edf5;box-shadow:0 0 0 1px var(--primary-dark)}
.cal-cell.is-today .cal-cell-num{font-weight:700;color:var(--primary-dark)}
.cal-cell-label{font-size:0.56rem;line-height:1.1;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;color:var(--primary-dark)}
.cal-cell-label-event{color:var(--accent)}
.cal-cell-more{font-size:0.55rem;color:var(--muted)}
.cal-legend{display:flex;gap:1rem;font-size:0.7rem;color:var(--muted);margin-top:0.6rem}
.cal-legend span{display:inline-flex;align-items:center;gap:0.3rem}
.cal-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.cal-dot-meeting{background:var(--primary)}
.cal-dot-event{background:var(--accent)}
.cal-detail-panel{flex:1 1 220px;background:#f0f4f8;border-left:4px solid var(--primary);border-radius:0 4px 4px 0;padding:0.6rem 0.9rem;align-self:flex-start}
.cal-detail-item{display:flex;gap:0.6rem;align-items:flex-start;padding:0.3rem 0}
.cal-detail-item+.cal-detail-item{border-top:1px solid var(--border)}
.cal-detail-dot{width:8px;height:8px;border-radius:50%;margin-top:0.35rem;flex-shrink:0}
.cal-detail-title{font-weight:700;font-size:0.85rem;color:var(--primary-dark)}
.cal-detail-meta{font-size:0.78rem;color:var(--muted)}
.cal-detail-empty{font-size:0.85rem;color:var(--muted);margin:0}
.cal-list-fallback{display:none}
@media (max-width:640px){
  .cal-layout{display:none}
  .cal-list-fallback{display:block}
}

/* ── FINANCE TABLE ──────────────────────────────────────────────────────────── */
.fin-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0}
.fin-table th{background:var(--primary);color:#fff;padding:0.5rem 0.75rem;text-align:left}
.fin-table td{padding:0.4rem 0.75rem;border-bottom:1px solid var(--border)}
.fin-table tr:nth-child(even) td{background:#f9f8f6}
.fin-table td:last-child{text-align:right;font-weight:600}

/* ── NOLAN GRID ─────────────────────────────────────────────────────────────── */
.nolan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1.5rem 0}
.nolan-card{background:#f0f4f8;border-left:4px solid var(--primary);padding:1rem;border-radius:0 4px 4px 0}
.nolan-card strong{display:block;margin-bottom:0.35rem;color:var(--primary-dark)}
.nolan-card p{font-size:0.83rem;margin:0;color:var(--text)}

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
footer{background:var(--primary-dark);color:rgba(255,255,255,0.8);padding:2.5rem 2rem 1.5rem;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;max-width:1200px;margin:0 auto}
.fg-title{font-family:'Playfair Display',serif;color:#fff;font-size:1rem;margin-bottom:0.75rem}
.fg-links{list-style:none}
.fg-links li{margin-bottom:0.35rem}
.fg-links a{color:rgba(255,255,255,0.65);text-decoration:none;font-size:0.82rem}
.fg-links a:hover{color:#fff}
.footer-bottom{max-width:1200px;margin:1.5rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;font-size:0.72rem;color:rgba(255,255,255,0.45)}
.footer-bottom a{color:rgba(255,255,255,0.5);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .hamburger{display:block}
  .nav-inner .nav-item:not(:first-child){display:none}
  .nav-inner .nav-item:first-child .nav-link{display:none}
}
@media(max-width:768px){
  .hero{height:220px}.hero-title{font-size:1.5rem}
  .content{padding:1.5rem 1rem}
  .sh{font-size:1.4rem}
  .cllr-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hero-title{font-size:1.2rem}.hero-sub{font-size:0.78rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ── CONTACT FORM ───────────────────────────────────────────────────────────── */
.contact-form{background:var(--white);border-radius:6px;padding:2rem;border:1px solid var(--border);margin-top:1.5rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cf-field{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:1rem}
.cf-field label{font-size:0.8rem;font-weight:600;color:var(--text)}
.cf-field input,.cf-field textarea,.cf-field select{padding:0.6rem 0.8rem;border:1px solid var(--border);border-radius:4px;font-family:'Open Sans',sans-serif;font-size:0.88rem;background:var(--bg);color:var(--text);width:100%}
.cf-field textarea{resize:vertical;min-height:110px}
.cf-field input:focus,.cf-field textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.cf-submit{background:var(--accent);color:#fff;padding:0.7rem 2rem;border:none;border-radius:4px;font-family:'Open Sans',sans-serif;font-size:0.88rem;font-weight:600;cursor:pointer;transition:background 0.15s}
.cf-submit:hover{background:var(--accent-light)}

/* ── ACCESSIBILITY / LEGAL PAGES ────────────────────────────────────────────── */
.policy-section{margin-bottom:2rem}
.policy-section h3{color:var(--primary);font-size:1.05rem;margin-bottom:0.5rem;font-family:'Playfair Display',serif}
.policy-section p,.policy-section li{font-size:0.9rem;line-height:1.8;color:var(--text)}
.policy-section ul{margin:0.5rem 0 0.5rem 1.5rem}

@media(max-width:680px){
  .cf-row{grid-template-columns:1fr}
}

/* Welcome section responsive */
@media(max-width:680px){
  .welcome-section{grid-template-columns:1fr!important}
  .welcome-section>div:last-child{display:none}
}

/* ── FINAL POLISH ───────────────────────────────────────────────────────────── */
/* Option 2: aerial village photo, statue circle top-centre, frosted title bar at bottom */
.hero{height:520px;background:url('/assets/img/village-aerial.jpg') center 73%/cover no-repeat;flex-direction:column;justify-content:flex-end;align-items:stretch}
.hero-overlay{background:rgba(10,22,40,0.08)}
/* overflow:hidden on the wrap clips the zoomed-in image to the circle
   below without growing the circle itself */
.hero-emblem-wrap{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:3;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 6px 24px rgba(0,0,0,0.30)}
/* translateX listed before scale so the shift is a flat visual offset,
   not scaled up by the zoom -- the circle (.hero-emblem-wrap) itself is
   untouched, only the photo moves/zooms inside it. Small rightward
   nudge to centre the statue figure a little better in the frame. */
.hero-emblem{width:164px;height:164px;border-radius:50%;object-fit:cover;object-position:center center;background:#ede8df;display:block;transform:translateX(8px) scale(1.40)}
.hero-frosted-bar{width:100%;background:rgba(10,22,40,0.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:1.2rem 2rem 1.5rem;z-index:3;text-align:center;box-sizing:border-box}
.hero-frosted-bar .hero-title{font-size:2rem;text-shadow:none;position:static;margin:0;line-height:1.2}
.hero-frosted-bar .hero-btns{margin-top:0.9rem}
@media(max-width:768px){.hero-emblem{width:130px;height:130px}}
@media(max-width:600px){.hero{height:420px}.hero-emblem{width:110px;height:110px}.hero-emblem-wrap{top:16px}.hero-frosted-bar .hero-title{font-size:1.5rem}}

/* ══════════════════════════════════════════════════════════════════════════════
   ASTRO REBUILD — new nav structure + page components
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── NAV LINKS LIST ─────────────────────────────────────────────────────────── */
.nav-links{list-style:none;display:flex;align-items:stretch;margin:0;padding:0;flex:1}
.nav-links>li{position:relative}
.nav-links>li>a.nav-link{display:flex;align-items:center;gap:0.3rem;height:100%}

/* Dropdown — now a ul */
.has-dropdown:hover>ul.dropdown,
.has-dropdown:focus-within>ul.dropdown{display:block}
ul.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--primary-dark);min-width:230px;box-shadow:0 6px 16px rgba(0,0,0,0.3);z-index:200;list-style:none;padding:0;margin:0;border-radius:0 0 4px 4px}
ul.dropdown li a{display:block;padding:0.6rem 1.1rem;color:rgba(255,255,255,0.78);text-decoration:none;font-size:0.8rem;border-bottom:1px solid rgba(255,255,255,0.07)}
ul.dropdown li:last-child a{border-bottom:none}
ul.dropdown li a:hover{background:var(--primary);color:#fff}

/* Search icon in nav */
.nav-search{display:flex;align-items:center;padding:0.9rem 0.75rem;color:rgba(255,255,255,0.75);text-decoration:none;transition:color 0.15s}
.nav-search:hover{color:#fff}

/* Responsive nav — hide links list, show hamburger */
@media(max-width:960px){
  .nav-links{display:none}
  .nav-search{display:none}
  .hamburger{display:flex}
}
@media(min-width:961px){
  .hamburger{display:none}
}

/* ── QUICK ACCESS GRID (small cards -- used on The Council / Llansannan / Documents pages) ── */
.qa-bg{background:linear-gradient(135deg,#f0ede8 0%,#e8e4de 100%);border-top:1px solid var(--border)}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}
.qa-card{display:flex;flex-direction:column;gap:0.4rem;background:var(--white);border-radius:6px;padding:1.25rem 1rem 1rem;border-top:3px solid var(--primary);box-shadow:0 2px 6px rgba(0,0,0,0.06);text-decoration:none;color:var(--text);transition:box-shadow 0.15s,border-color 0.15s}
.qa-card:hover{box-shadow:0 4px 14px rgba(61,110,153,0.18);border-top-color:var(--accent)}
.qa-label{font-family:'Playfair Display',serif;font-size:1rem;color:var(--primary-dark);font-weight:700}
.qa-desc{font-size:0.8rem;color:var(--muted);flex:1;line-height:1.5}
@media(max-width:760px){.qa-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.qa-grid{grid-template-columns:1fr}}

/* ── QUICK ACCESS -- bigger square blocks (home page only) ──────────────────────
   Restored to the original pre-Astro design: the homepage previously used
   this larger, bordered-panel style (.home-actions/.home-action/.ha-btn);
   it was replaced by the smaller .qa-card grid above during the Astro
   rebuild and is brought back here at the user's request. */
/* Cooler blue-grey tone (rather than the warm beige used for the rest of
   the page) so this band reads as clearly its own section */
.quick-access-wrap{background:linear-gradient(135deg,#e6ecf2 0%,#cfdcea 100%);padding:2rem;margin:0 -2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.qa-title{font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--primary-dark);margin-bottom:0.25rem;font-weight:700}
.home-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.5rem;margin:0}
.home-action{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.5rem 1.75rem;background:var(--white);border:1px solid var(--border);border-radius:6px;text-decoration:none;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:box-shadow 0.2s,transform 0.2s}
.home-action:hover{box-shadow:none;border-color:var(--primary);background:var(--white);color:var(--text);transform:none}
.home-action h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--primary-dark);margin-bottom:0.6rem;line-height:1.3}
.home-action p{font-size:0.83rem;color:var(--muted);margin-bottom:1.25rem;flex:1;line-height:1.6}
.ha-btn{display:inline-block;background:var(--primary);border:2px solid var(--primary);color:#fff;padding:0.45rem 1.4rem;border-radius:3px;font-size:0.8rem;font-weight:600;letter-spacing:0.03em;font-family:'Open Sans',sans-serif;transition:all 0.15s}
.home-action:hover .ha-btn{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
@media(max-width:680px){
  .quick-access-wrap{margin:0 -1rem;padding:1.5rem 1rem}
  .home-actions{grid-template-columns:1fr}
}

/* ── WELCOME SECTION (home) ─────────────────────────────────────────────────── */
/* margin/padding/background/border-left/box-shadow explicitly reset here:
   an older, no-longer-used version of .welcome-section higher up this file
   set those, and since this later rule doesn't otherwise touch them they'd
   still apply and both double the gap between homepage sections and add an
   unwanted white box/border look. Spacing between homepage sections is
   handled by .content padding (see index.astro), not by this component. */
.welcome-section{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:center;margin:0;padding:0;background:none;border-left:none;box-shadow:none}
.welcome-text h2{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--primary);margin-bottom:0.75rem}
.welcome-img img{width:100%;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.btn-primary{display:inline-block;margin-top:0.75rem;padding:0.55rem 1.3rem;background:var(--primary);color:#fff;border-radius:3px;font-size:0.82rem;font-weight:600;text-decoration:none;transition:background 0.15s}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
@media(max-width:760px){
  .welcome-section{grid-template-columns:1fr}
  .welcome-img{display:none}
}

/* ── NEXT MEETING BANNER ────────────────────────────────────────────────────── */
.next-meeting{background:var(--primary-dark);color:#fff;border-radius:6px;padding:1.25rem 1.5rem;margin:1.5rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.next-meeting .label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;opacity:0.65;min-width:120px}
.next-meeting .date{font-family:'Playfair Display',serif;font-size:1.15rem;flex:1}
.nm-meta{font-size:0.8rem;opacity:0.75;flex-basis:100%}
.nm-link{margin-left:auto;background:var(--accent);color:#fff;padding:0.4rem 1rem;border-radius:3px;font-size:0.78rem;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0}
.nm-link:hover{background:var(--accent-light);color:#fff}

/* ── MINUTES / DOCUMENTS ────────────────────────────────────────────────────── */
.minutes-list{display:flex;flex-direction:column;gap:1rem;margin:1rem 0}
.minutes-item{background:#f9f8f6;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:0 6px 6px 0;padding:1rem 1.25rem}
.minutes-item h3{font-size:1rem;color:var(--primary-dark);margin-bottom:0.6rem;font-family:'Playfair Display',serif}
.doc-links{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem}
.doc-link{display:inline-flex;align-items:center;gap:0.3rem;padding:0.35rem 0.9rem;border:1px solid var(--border);border-radius:3px;font-size:0.78rem;font-weight:600;color:var(--primary);text-decoration:none;background:#fff;transition:all 0.15s}
.doc-link:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.doc-link.pdf::before{content:'PDF';font-size:0.65rem;background:var(--danger);color:#fff;padding:0.1rem 0.3rem;border-radius:2px}

.upload-note{background:#f0f4f8;border-left:4px solid var(--primary);padding:1rem 1.25rem;border-radius:0 6px 6px 0;margin-top:2rem;font-size:0.85rem}
.upload-note h3{font-size:0.95rem;color:var(--primary-dark);margin-bottom:0.4rem}

/* ── MEETINGS TABLE ─────────────────────────────────────────────────────────── */
.mtg-table tr.next-row td{background:#f0f4f8;font-weight:600;border-left:3px solid var(--accent)}

/* ── FOOTER META ────────────────────────────────────────────────────────────── */
.fg-meta{font-size:0.82rem;color:rgba(255,255,255,0.6);line-height:1.6;margin-top:0.25rem}
.fg-meta a{color:rgba(255,255,255,0.65)}
.fg-meta a:hover{color:#fff}

/* ── ACCESSIBILITY STATEMENT ────────────────────────────────────────────────── */
.a11y-status{display:inline-block;padding:0.25rem 0.75rem;border-radius:3px;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.a11y-status.partial{background:#fff3cd;color:#856404;border:1px solid #ffc107}
.a11y-status.compliant{background:#d1e7dd;color:#0a3622;border:1px solid #badbcc}

/* ── SEARCH PAGE ────────────────────────────────────────────────────────────── */
.search-wrap{max-width:720px;margin:0 auto;padding:2rem 0}

/* ── 404 ────────────────────────────────────────────────────────────────────── */
.page-404{text-align:center;padding:4rem 2rem}
.page-404 h1{font-size:5rem;color:var(--primary);margin-bottom:0.5rem;font-family:'Playfair Display',serif}
.page-404 p{font-size:1rem;color:var(--muted);margin-bottom:1.5rem}

/* ── NEWS CARDS (updated) ───────────────────────────────────────────────────── */
.news-card{background:#f9f8f6;border-radius:6px;padding:1.25rem;border:1px solid var(--border)}
.news-card time{display:block;font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem}
.news-card h3{font-size:1rem;color:var(--primary);margin-bottom:0.5rem;font-family:'Playfair Display',serif}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin:1rem 0}

/* ── DECAP CMS PREVIEW PANE ─────────────────────────────────────────────────── */
/* This stylesheet is loaded into the CMS preview iframe (see the
   registerPreviewStyle call in public/admin/index.html) so the preview
   reuses the site's real classes (.mtg-table, .minutes-item, .cal-item,
   .cllr-card, etc) instead of the CMS's default unstyled field dump. This
   wrapper just gives that content sensible padding/width inside the
   iframe, since there's no .site-wrap/.content around it there. */
.cms-preview{padding:1.5rem;max-width:900px;background:var(--white)}
.cms-preview h2{font-family:'Playfair Display',serif;color:var(--primary-dark);font-size:1.1rem;margin-bottom:1rem}
.cms-preview .minutes-list,.cms-preview .cal-list{margin-top:0.75rem}
.cms-preview .cllr-grid{margin-top:0.75rem}
[hidden]{display:none!important}

/* Homepage welcome: "what you will find" panel */
.welcome-section{align-items:start}
.welcome-text>p{max-width:none}
.welcome-find{background:#fff;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:6px;padding:1.1rem 1.3rem;margin:1.1rem 0 1.4rem}
.welcome-find h3{font-size:1rem;color:var(--primary-dark);margin-bottom:.6rem}
.welcome-find ul{list-style:none;margin:0 0 .8rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem}
.welcome-find li{position:relative;padding-left:1.3rem;font-size:.9rem;line-height:1.45}
.welcome-find li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.welcome-find li a{color:var(--text);text-decoration:none}
.welcome-find li a:hover{color:var(--primary);text-decoration:underline}
.welcome-hint{font-size:.88rem;color:var(--muted);margin:.4rem 0 0}
@media (max-width:760px){.welcome-find ul{grid-template-columns:1fr}}

/* Homepage rhythm: each band is its own white card with a modest gap between
   them; the banner and welcome cards get room underneath their content. */
.page-home .site-wrap{border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
.page-home .site-wrap + .site-wrap{margin-top:1.5rem}
.page-home .site-wrap:last-of-type{margin-bottom:1.5rem}
.page-home #next-meeting-wrap .content,
.page-home .welcome-section{padding-bottom:0}
.page-home #next-meeting-wrap .content{padding-bottom:2rem!important}
.page-home .site-wrap:has(.welcome-section) .content{padding-bottom:2.5rem!important}
.page-home .qa-band{background:#fff}
.page-home .qa-band .content{padding:2rem}
.page-home .qa-band .quick-access-wrap{background:#fff;margin:0;padding:0;border:0;box-shadow:none}
.page-home .qa-band .home-actions{gap:1.25rem}
.page-home .qa-band .home-action{border:1px solid #b9c6d4;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.page-home .qa-band .home-action:hover{border-color:var(--primary-dark);box-shadow:0 3px 10px rgba(0,0,0,0.12)}
@media (max-width:760px){.page-home .site-wrap + .site-wrap{margin-top:1rem}.page-home .qa-band .content{padding:1.25rem 1rem}}