:root {
    --color-bg: #050814; 
    --color-surface: #101522; 
    --alternative-surface-color: #252e46; /*gradient on card*/
    --color-accent: #4f46e5; /* RSVP pill color and other uses too */
    --color-accent-soft: rgba(79, 70, 229, 0.12); 

    --color-border: #565d70; 
    --color-text: #f9fafb; 
    --color-text-muted: #9ca3af; 

    /*corners for cards*/
    --radius-lg: 16px; 
    --radius-xl: 24px; /* Noteto self: add a large radius for map container */

    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.4); 

    --space-xs: 0.5rem; 
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-sd: 4rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    }

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

    body {
        margin: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: radial-gradient(circle at top, #111827 0, #020617 45%, #000 80%);
        color: var(--color-text);
      }

    .site-header{
      border-bottom: 0.5px solid var(--color-accent-soft);
      background: rgba(19, 1, 41, 0.95);
      backdrop-filter: blur(10px);
      padding: var(--space-sm) 0;
      position: sticky;
      position: -webkit-sticky; /* iOS/Safari */
      top: 0;
      z-index: 10000;
      width: 100%;
    }
    @supports not ((position: sticky) or (position: -webkit-sticky)) {
      .site-header { position: fixed; top: 0; left: 0; right: 0; }
      .page { padding-top: 64px; }
    }

    .site-title{
      margin: 0;
      font-size:var(--space-lg);
      color: var(--color-text);
    }
    .site-title__link{ color: var(--color-text); text-decoration: none; }
    .site-title__link:link{ color: var(--color-text); }
    .site-title__link:visited{ color: var(--color-text); }
    .site-title__link:hover{ text-decoration: none; }

    .nav{
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
      display: flex;
      gap: var(--space-sm);
      align-items: center;
    }

    .nav__link{
      display: inline-block;
      padding: var(--space-sm);
      border-radius: 999px;
      font-size: 1rem;
      color: var(--color-text);
      border: 1px solid var(--color--border);
      background: rgba(20, 23,40, 0.9);
    }
    
    .container {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 var(--space-md);
      }

      /*Adding this for header, main and footer to stack nicely */
    .page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

    html { scroll-behavior: smooth; }
    .hero {
        padding: var(--space-xl) 0 var(--space-lg);
        scroll-margin-top: 72px; /* ensure anchor link not hidden behind sticky header */
      }
    #login { scroll-margin-top: 72px; }

    .hero__content { 
      font-size: 2.4rem; 
      margin-bottom: var(--space-sm); 
    }
    .hero__subtitle { 
      max-width: 36rem; 
      color: var(--color-text-muted); 
      margin-bottom: var(--space-md); 
    }
    .hero__actions { 
      display:flex; 
      gap:var(--space-sm); 
      flex-wrap:wrap; 
    }


    .main { 
      flex: 1; 
      padding-bottom: var(--space-xl); 
    }

    .section__title { 
      margin: 0 0 var(--space-xs); 
      font-size: 1.4rem 
    }
    .section__subtitle { 
      margin: 0; 
      color: var(--color-text-muted); 
      font-size: 0.95rem 
    }

    .cards-grid { 
      display: grid; 
      gap: var(--space-lg); 
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 

      margin-top: var(--space-sd);
      margin-bottom: var(--space-sd);
    }

    .section--map .map-wrapper 
    { 
        margin-top: var(--space-md);
        border-radius: var(--radius-xl);
        overflow: hidden; 
        border:1px solid var(--color-border); 
        box-shadow: var(--shadow-soft); 
    }
      
    .wide-box__frame { 
        width: 100%; 
        height: 420px; 
        border: 0; 
        display: block;
    }

    /* Make filters look like pills */
    .filters { 
        display: flex; 
        flex-wrap: wrap; 
        gap:var(--space-sm); 
    }
      
    .filters__select, .filters__search { 
      background: var(--color-surface); 
      border-radius: 999px; 
      border: 1px solid var(--color-border); 
      padding: 0.5rem 0.9rem; 
      color: var(--color-text); 
      min-width: 150px }
      
    .filters__search { 
      flex:1 
    }

    /* Buttons*/
    .btn { 
      border-radius:999px; 
      padding: 0.55rem 1.25rem; 
      border: 1px solid transparent; 
      cursor: pointer; 
      transition:transform .08s ease 
    }

    .btn--primary { 
      background:var(--color-accent); 
      color:#fff; 
      box-shadow:var(--shadow-soft); 
    }
    .btn--ghost { 
      background:transparent; 
      color: var(--color-text); 
      border-color: var(--color-border) }

      /* Carda */
      .card {
        background: linear-gradient(135deg, var(--color-surface), var(--alternative-surface-color));
        border-radius:var(--radius-lg);
        padding:var(--space-md);
        border:1px solid var(--color-border);
        box-shadow:var(--shadow-soft);
        display:flex;
        flex-direction:column;
        gap:var(--space-sm)
    }
      .card--clickable {
        cursor: pointer;
        transition: all 0.2s ease;
    }
      .card--clickable:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        background: linear-gradient(135deg, #2a2f3a, #323844);
        border-color: #4a5568;
    }
      .card--clickable:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
      .card--clickable:focus-visible {
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
    }
      .card__header { 
        display:flex; 
        justify-content:space-between; 
        align-items:center; 
        gap:var(--space-sm) 
    }
      .card__meta { 
        font-size:0.85rem; 
        color:var(--color-text-muted); 
        display:flex; 
        flex-direction:column; 
        gap:0.15rem 
    }
      .card__footer { 
        margin-top:auto; 
        display:flex; 
        gap:var(--space-xs) 
    }

      /* Club names */
      .chip { 
        display:inline-flex; 
        align-items:center; 
        border-radius:999px; 
        padding:0.2rem 0.6rem; 
        font-size:0.75rem; 
        border:1px solid var(--color-border); 
        background:var(--color-accent-soft) 
    }
      .chip--club { 
        text-transform:uppercase; 
        letter-spacing:0.04em 
    }
      .chip--user { 
        gap: 0.35rem; 
        background: var(--color-accent-soft); 
        color: var(--color-text);
      }
      .btn--chip {
        padding: 0.1rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.2;
      }

      /* Event Links */
      .event-links {
        display: flex;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
      }