/* assets/css/site.css */

/* ---------------------------
   Design tokens / theme
---------------------------- */
:root{
    /* Warm, friendly palette */
    --bg: #FBF7F2;          /* warm off-white */
    --surface: #FFFFFF;
    --surface-2: #F3EEE7;   /* warm light panel */
  
    --text: #1F2937;        /* softer than near-black */
    --muted: #6B7280;
    --border: #E7DED4;      /* warm border */
  
    --primary: #2C7A7B;     /* friendly teal */
    --primary-2: #225E5F;   /* deeper teal */
    --accent: #F59E0B;      /* warm amber */
  
    --danger: #DC2626;
    --success: #16A34A;
  
    /* Softer, warmer shadows */
    --shadow: 0 12px 34px rgba(31, 41, 55, 0.10);
    --shadow-sm: 0 8px 20px rgba(31, 41, 55, 0.08);
  
    --radius: 18px;
    --radius-sm: 14px;
  
    --container: 1100px;
  
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  }
  

/* ---------------------------
   Base / reset
---------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main{
  flex: 1; /* this pushes the footer down */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
input, select, textarea { color: var(--text); }

:focus-visible{
  outline: 3px solid rgba(245, 158, 11, 0.45);
  outline-offset: 2px;
}

/* ---------------------------
   Layout helpers
---------------------------- */
.container{
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.stack > * + *{ margin-top: 14px; }

.grid{
  display: grid;
  gap: 16px;
}

.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 860px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.main{
  padding: 28px 0 44px;
}

.page-header{
  padding: 24px 0 16px;
}
.page-title{
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.page-subtitle{
  margin: 0;
  color: var(--muted);
}

.hero{
    background: linear-gradient(180deg, rgba(245,158,11,0.12), rgba(255,255,255,0));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
  }
  

/* ---------------------------
   Cards / surfaces
---------------------------- */
.card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
  }
  

.card-title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

.badge--primary{
  background: rgba(15,118,110,0.10);
  border-color: rgba(15,118,110,0.25);
  color: var(--primary-2);
}

.badge--accent{
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.28);
  color: #8A5A00;
}

/* ---------------------------
   Buttons
---------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select: none;
  white-space: nowrap;
}

.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover{ background: var(--primary-2); }

.btn--ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{
  background: var(--surface-2);
}

.btn--accent{
  background: var(--accent);
  color: #1f2937;
}
.btn--accent:hover{ opacity: .92; }

.btn--danger{
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover{ opacity: .92; }

/*.btn--sm{ padding: 7px 9px; border-radius: 10px; font-weight: 600; } */
.btn--sm{ padding: 7px 9px; }


/* ---------------------------
   Forms
---------------------------- */
.form{
  display: grid;
  gap: 14px;
}

.field label{
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
  margin: 0 0 6px;
}

.control{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.control::placeholder{ color: #94A3B8; }

.control:focus{
  border-color: rgba(15,118,110,0.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,0.12);
  outline: none;
}

.help{
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 6px;
}

.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------------------------
   Alerts
---------------------------- */
.alert{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 14px;
}

.alert--success{
  border-color: rgba(22,163,74,0.25);
  background: rgba(22,163,74,0.08);
}
.alert--danger{
  border-color: rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.08);
}

/* ---------------------------
   Top navigation
---------------------------- */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.navbar__inner{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* was space-between */
    gap: 8px;
    padding: 12px 0;
  }
  

.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-right: 6px; /* fine-tune brand → nav spacing */
}
/*
.brand__logo{
  width: 38px;
  height: 32px;
  border-radius: 10px;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.22);
  color: #8A5A00;  
  display: grid;
  place-items: center;
  color: var(--primary-2);
  font-weight: 900;
}
*/
.brand__img{
    height: 48px;
  }
  

.nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    margin-right: 6px; /* fine-tune brand → nav spacing */
  }
  
  .nav::-webkit-scrollbar {
    display: none;
  }
  
  .nav a {
    padding: 6px 2px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 650;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }

.nav a:hover{
  background: var(--surface-2);
  color: var(--text);
}

.nav a[aria-current="page"]{
  background: rgba(15,118,110,0.10);
  color: var(--primary-2);
  border: 1px solid rgba(15,118,110,0.18);
}

.navbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Mobile menu button */
.nav-toggle{
  display: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
}



/* Responsive nav collapse */
@media (max-width: 860px){
    .nav-toggle{
      display: inline-flex;
    }
  
    .navbar__inner{
      position: relative;
      flex-wrap: wrap; /* allows nav to sit on its own row */
    }
  
    .nav {
      display: none;
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      background: rgba(255,255,255,0.96);
      border: 1px solid var(--border);
      border-radius: 14px;
  
      /* mobile-only scrolling (merged from 900px rule) */
      overflow-x: auto;
      scrollbar-width: none;
    }
  
    .nav::-webkit-scrollbar{
      display: none;
    }
  
    .nav.is-open{
      display: grid;
      gap: 8px;
    }
  
    .navbar__right{
      margin-left: auto;
    }
  }
  
  .nav-sep {
    color: var(--muted);
  }
  
  @media (max-width: 860px) {
    .nav-sep {
      display: none;
    }
  }
  

/* ---------------------------
   Footer
---------------------------- */
.footer{
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 22px 0;
}

.footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__links{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 650;
}

.footer__links a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__meta{
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------------------------
   Results list (Pub cards)
---------------------------- */
.results{
    display: grid;
    gap: 10px;
  }
  
  .pub-card{
    display: grid;
    gap: 8px;
    padding: 18px;
    border-left: 4px solid rgba(44,122,123,0.15);
  }
  
  .pub-card__top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  
  .pub-card__title{
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }
  
  .pub-card__meta{
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
  }  
  
  .pub-card__badges{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }
  
  .chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 650;
    font-size: 0.82rem;
  }
  
  
  .chip--quiz{
    background: rgba(44,122,123,0.10);
    border-color: rgba(44,122,123,0.22);
    color: var(--primary-2);
  }
  
  .pub-card__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .pub-card__actions .btn{
    flex: 1;
  }
  
  @media (min-width: 860px){
    .pub-card{
      grid-template-columns: 1fr auto;
      align-items: center;
    }
    .pub-card__actions .btn{
      flex: initial;
    }
  }
  
  /* ---------------------------
   Venue image
---------------------------- */
.venue-hero{
    display: grid;
    gap: 14px;
  }
  
  .venue-image{
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 16 / 9;
    max-height: 280px;
  }
  
  .venue-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  @media (max-width: 860px){
    .venue-image{
      max-height: 200px;
    }
  }
  
  .venue-image--placeholder{
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--muted);
    text-align: center;
  }
  
  .venue-image--placeholder strong{
    color: var(--text);
  }
  
  @media (min-width: 860px){
    .venue-hero{
      grid-template-columns: 1.2fr 1fr; /* image + info */
      align-items: start;
    }
  }
  
/* ---------------------------
   Upload field + preview
---------------------------- */
.upload{
    border: 1px dashed var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px;
  }
  
  .upload-row{
    display: grid;
    gap: 10px;
  }
  
  .upload small{
    color: var(--muted);
  }
  
  .preview{
    display: none;
    margin-top: 10px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  
  .preview img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }
  
  @media (min-width: 860px){
    .preview img{
      height: 220px;
    }
  }
  
  /* ---------------------------
   Results thumbnail
---------------------------- */
.pub-thumb{
    width: 72px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    flex: 0 0 auto;
  }
  
  .pub-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
 
    /* ---------------------------
Maps
---------------------------- */

  .leaflet-map{
    height: 70vh;
    min-height: 420px;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  
  .map-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  
  .map-actions{
    display:flex;
    align-items: center; /* this is the key line */
    gap:10px;
    flex-wrap:wrap;
  }

  .view-indicator {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1;        /* prevent baseline weirdness */
    display: inline-flex;  /* match button behaviour */
    align-items: center;
    white-space: nowrap;
  }
  
  .quiz-pin__dot{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    display:block;
  }
  
    /* ---------------------------
Map legend
---------------------------- */
  .map-legend{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 10px;
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    line-height: 1.25;
  }
  
  .map-legend__title{
    font-weight: 700;
    margin-bottom: 8px;
  }
  
  .map-legend__row{
    display:flex;
    align-items:center;
    gap:8px;
    margin: 6px 0;
    white-space: nowrap;
  }
  
  .map-legend__swatch{
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
  }
  /* Map picker on edit venue */
.location-map{
    height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
  }
  
  .location-help{
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 8px;
  }
  
  .location-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  @media (max-width: 720px){
    .location-row{ grid-template-columns: 1fr; }
  }
  


  /* Prize chip (yellow) */
.chip--prize{
    background: #fef3c7;          /* amber-100 */
    border-color: #fcd34d;        /* amber-300 */
    color: #92400e;               /* amber-800 */
    font-weight: 600;
  }
  
  .chip--prize .chip__icon{
    margin-right: 6px;
  }
  
  /* Entry fee chip */
  .chip--fee{
    background: #e0f2fe;          /* sky-100 */
    border-color: #7dd3fc;        /* sky-300 */
    color: #075985;               /* sky-800 */
    font-weight: 600;
  }
  


  .venue-row {
    display: grid;
    gap: 16px;
    margin-top: 16px;
  }
  
  .venue-row--media {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  
  .venue-row--details {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  
  .venue-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
  }
  
  .venue-image--placeholder {
    width: 100%;
    border-radius: 10px;
    padding: 40px 16px;
    text-align: center;
    opacity: 0.7;
  }
  
  .map-box {
    width: 100%;
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  /* Quiz cards (optional) */
  .quiz-card {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .quiz-card__title { font-weight: 600; }
  .quiz-card__meta { opacity: 0.8; margin-top: 4px; }
  
  /* Buttons (optional) */
  .btn {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    margin: 6px 0;
  }
  
  .btn--secondary { opacity: 0.9; }
  
  /* Responsive */
  @media (max-width: 900px) {
    .venue-row--media,
    .venue-row--details {
      grid-template-columns: 1fr;
    }
  
    .map-box {
      min-height: 280px;
    }
  }
  

  .venue-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
  }
  
  .venue-link:hover {
    text-decoration-style: solid;
  }
  

  .quiz-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
  }
  
  .quiz-row__title {
    font-weight: 700;
  }
  
  .quiz-row__dot {
    color: var(--muted);
    font-weight: 400;
  }
  
  .quiz-row__meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .quiz-row__notes {
    margin-top: 8px;
    color: var(--muted);
  }
  
  .quiz-row__actions {
    flex: 0 0 auto;
  }
  
  /* Optional: muted chip for Prize TBC */
  .chip--muted {
    opacity: 0.7;
  }




  /* One venue result = table-like grid */
.venue-result {
    padding: 14px;
  }
  
  .venue-grid {
    display: grid;
    grid-template-columns: 2.2fr 0.8fr 0.8fr 0.9fr 1.1fr 0.8fr; /* Name | Day | Time | Entry | Prize | Dist */
    column-gap: 14px;
    row-gap: 8px;
    align-items: start; /* critical: avoid vertical centering */
  }
  
  /* Left merged cell */
  .venue-cell--venue {
    grid-column: 1;
    align-self: start;
  }
  
  .venue-name {
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    display: inline-block;
  }
  
  .venue-address {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.9rem;
  }
  
  /* Right merged cell */
  .venue-cell--distance {
    grid-column: 6;
    align-self: start;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: right;
  }
  
  /* Quiz row cells */
  .venue-cell--day    { grid-column: 2; }
  .venue-cell--time   { grid-column: 3; }
  .venue-cell--entry  { grid-column: 4; }
  .venue-cell--prize  { grid-column: 5; }
  
  .quiz-row-label {
    font-weight: 600;
  }
  
  /* Optional: subtle column headers inside each venue block */
  .venue-grid__head {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  
  /* Mobile: stack sensibly */
  @media (max-width: 720px) {
    .venue-grid {
      grid-template-columns: 1fr 1fr; /* compact */
    }
  
    .venue-cell--venue { grid-column: 1 / -1; }

  
    .venue-cell--day   { grid-column: 1; }
    .venue-cell--time  { grid-column: 2; }
    .venue-cell--entry { grid-column: 1; }
    .venue-cell--prize { grid-column: 2; }
  }
  
  .chip--distance {
    opacity: 0.8;
  }

  .chip--time {
    font-weight: 500;
  }
  
  .chip--day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
  
    padding: 4px 8px;
  }
  
  /* Sun */
.chip--dow-0 {
    color: #8b5cf6;
    background-color: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
  }
  
  /* Mon */
  .chip--dow-1 {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
  }
  
  /* Tue */
  .chip--dow-2 {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
  }
  
  /* Wed */
  .chip--dow-3 {
    color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  
  /* Thu */
  .chip--dow-4 {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
  }
  
  /* Fri */
  .chip--dow-5 {
    color: #ec4899;
    background-color: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.35);
  }
  
  /* Sat */
  .chip--dow-6 {
    color: #14b8a6;
    background-color: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.35);
  }
  
  .quiz-pin__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .quiz-pin__label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
    user-select: none;
    pointer-events: none;
  }
  


  .venue-website-inline {
    font-size: 0.9rem;        /* same as address */
    font-weight: 400;
    color: var(--muted);      /* same colour as address */
    margin-left: 6px;
    white-space: nowrap;
  }
  
  .venue-website-inline a {
    color: inherit;           /* inherit muted colour */
  }
  

  .footer-support {
    margin-top: 0px;
    padding: 2px 14px;
    background: rgba(245, 158, 11, 0.12); /* warm beer-ish tint */
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    text-align: center;
  }
  
  .footer-support a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
  }
  
  .footer-support a:hover {
    text-decoration: underline;
  }