/* =====================================================================
   The Local Link Ayrshire — brand styles
   Four-colour palette:
     Navy Blue  #0A2342 — primary brand, backgrounds, headers
     Orange     #FF7A00 — accent, highlights, CTAs
     White      #FFFFFF — text, contrast, clean space
     Dark Grey  #1A1A1A — secondary backgrounds, body text
   Supporting tints (--navy-deep / --orange-deep) are derived for hover
   states and gradients; they're not part of the canonical palette but
   stay tonally consistent with the four core colours.
   ===================================================================== */

:root{
  --navy:#0A2342;
  --navy-deep:#061830;            /* darker navy for gradients / button hover */
  --navy-700:#15355e;             /* mid-navy for subtle layered effects */
  --orange:#FF7A00;
  --orange-deep:#cc5d00;          /* darker orange for button hover */
  --dark:#1A1A1A;                 /* body text, secondary backgrounds */
  --surface:#f1f5f9;              /* light tile/placeholder background (replaces dropped cream) */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  font-family:'Figtree','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container-x{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.container-x{padding:0 32px}}

/* ---- Typography ---- */
.h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.h2{font-size:clamp(1.6rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-.01em}
.text-orange{color:var(--orange)}
.text-navy{color:var(--navy)}
.text-dark{color:var(--dark)}
.uppercase-label{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:8px;padding:.8rem 1.6rem;font-weight:700;font-size:.92rem;
  letter-spacing:.02em;cursor:pointer;border:2px solid transparent;transition:.18s;text-align:center}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,122,0,.3)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-outline{border-color:var(--orange);color:var(--orange);background:transparent}
.btn-outline:hover{background:var(--orange);color:#fff}
.btn-sm{padding:.5rem 1.1rem;font-size:.8rem}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---- Backgrounds ---- */
.bg-navy{background:var(--navy)}
.bg-navy-deep{background:var(--navy-deep)}
/* .bg-cream was deprecated; use .bg-white (default) or .bg-dark instead. */
.bg-cream{background:#fff}
.bg-white{background:#fff}
.bg-dark{background:var(--dark);color:#fff}
.bg-hero{
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(255,122,0,.13), transparent 60%),
    radial-gradient(900px 600px at -10% 50%, rgba(21,53,94,.4), transparent 60%),
    linear-gradient(180deg,#0A2342 0%,#061830 100%);
}
.bg-grid{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:36px 36px;
}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:80;background:var(--navy);transition:.3s}
.site-header.scrolled{background:rgba(6,24,48,.92);backdrop-filter:blur(8px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.nav-link{color:rgba(255,255,255,.85);font-weight:500;font-size:.92rem;transition:.15s}
.nav-link:hover,.nav-link.active{color:var(--orange)}
.logo-img{height:38px;width:auto}
@media(min-width:640px){.logo-img{height:44px}}

/* ---- Forms ---- */
.label{display:block;margin-bottom:.35rem;font-size:.85rem;font-weight:600;color:var(--navy)}
.input{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:.7rem .9rem;
  font:inherit;color:var(--dark);background:#fff;transition:.15s}
.input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,122,0,.15)}
textarea.input{resize:vertical;min-height:90px}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid #e6ebf2;border-radius:18px}
.card-pad{padding:1.5rem}
.shadow-soft{box-shadow:0 10px 30px -12px rgba(10,35,66,.22)}

/* ---- Badges / chips ---- */
.chip{display:inline-block;border-radius:999px;padding:.25rem .6rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.chip-orange{background:rgba(255,122,0,.12);color:var(--orange-deep)}
.chip-green{background:#dcfce7;color:#15803d}
.chip-red{background:#fee2e2;color:#b91c1c}
.chip-grey{background:#eef2f7;color:#64748b}

/* ---- Flash messages ---- */
.flash{border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem}
.flash-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.flash-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.flash-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}

/* ---- Category grid ---- */
.cat-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;
  border:2px solid rgba(255,122,0,.35);border-radius:14px;padding:1rem;
  background:#fff;transition:.18s;color:var(--navy)}
.cat-card:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 10px 30px -12px rgba(10,35,66,.22)}
.cat-card:hover .cat-icon{color:var(--orange)}
/* Event cards: subtle hover so the image/title clickability reads */
.ev-card{transition:.18s}
.ev-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(10,35,66,.22)}
.ev-card a:hover h3{color:var(--orange)}
.cat-icon{color:var(--navy);transition:.18s}
.cat-name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--orange);text-align:center}
.social-btn{display:grid;place-items:center;height:40px;width:40px;border-radius:999px;background:rgba(255,122,0,.1);color:var(--orange);transition:.15s}
.social-btn:hover{background:var(--orange);color:#fff}
/* Admin icon/image picker tiles: the radio is a transparent full-tile overlay
   so a click always toggles it (no display:none label-association quirk), and
   the selected state is shown with pure CSS — no inline onchange (CSP-safe). */
.iconpick{position:relative;cursor:pointer;display:grid;place-items:center;aspect-ratio:1;border-radius:8px;border:2px solid transparent;color:var(--navy)}
.iconpick > input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.iconpick:has(> input:checked){background:rgba(255,122,0,.16);border-color:var(--orange);color:var(--orange)}
/* Featured-episode title link (homepage): inherits colour, turns orange on hover */
.ep-link{color:inherit;text-decoration:none}
.ep-link:hover{color:var(--orange)}

/* ---- Carousel ---- */
.carousel{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.5rem;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel-card{scroll-snap-align:start;flex:0 0 auto;width:80%;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:640px){.carousel-card{width:46%}}
@media(min-width:768px){.carousel-card{width:32%}}
@media(min-width:1024px){.carousel-card{width:23%}}
.biz-name{color:var(--navy);font-weight:800;text-decoration:none;line-height:1.25}
.biz-name:hover{color:var(--orange)}
.social-ico{display:grid;place-items:center;height:36px;width:36px;border-radius:999px;color:var(--navy);transition:.15s}
.social-ico:hover{background:var(--orange);color:#fff}

/* ---- How it works ---- */
.step-num{display:grid;place-items:center;height:56px;width:56px;border-radius:999px;
  background:var(--orange);color:#fff;font-weight:700;font-size:1.1rem;box-shadow:0 0 0 4px rgba(255,122,0,.18)}

/* ---- Admin ---- */
.admin-shell{display:flex;min-height:100vh;background:#f4f6f9}
.admin-side{width:260px;background:var(--navy);color:#fff;flex-shrink:0;display:flex;flex-direction:column}
.admin-main{flex:1;padding:2rem;max-width:100%;overflow-x:auto}
.admin-nav a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.65rem .8rem;border-radius:12px;color:rgba(255,255,255,.82);font-size:.9rem;margin:.15rem .5rem;transition:.15s}
.admin-nav a:hover{background:rgba(255,255,255,.06)}
.admin-nav a.active{background:var(--orange);color:#fff}
.admin-badge{background:#fff;color:var(--orange-deep);border-radius:999px;font-size:.7rem;font-weight:700;padding:.05rem .45rem;min-width:20px;text-align:center}
.table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.table th{background:#f8fafc;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#475569;padding:.7rem .9rem;font-weight:700}
.table td{padding:.7rem .9rem;border-top:1px solid #eef2f7}
.table tr.unread{background:rgba(255,122,0,.06)}
.icon-btn{display:inline-grid;place-items:center;height:34px;width:34px;border-radius:999px;border:none;background:transparent;cursor:pointer;color:#475569}
.icon-btn:hover{background:#eef2f7}
.icon-btn.danger{color:#dc2626}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(10,35,66,.6);display:grid;place-items:center;z-index:80;padding:1rem}
.modal{background:#fff;border-radius:18px;max-width:540px;width:100%;padding:1.5rem;max-height:90vh;overflow-y:auto}
.drawer-overlay{position:fixed;inset:0;background:rgba(10,35,66,.6);display:flex;justify-content:flex-end;z-index:80}
.drawer{background:#fff;width:100%;max-width:600px;height:100%;overflow-y:auto}

/* Utility */
.hidden{display:none!important}
.muted{color:#64748b}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}