/*
  app.css
  Core site shell styles for Going Fishing Directory.
  Directory component styles have been moved to directory.css.
*/

:root {
    --ink:        #1B2B22;
    --panel:      #233A2B;
    --panel-2:    #2E4A38;
    --cream:      #F2EDE1;
    --mist:       #8A9A87;
    --orange:     #FF8210;
    --gold:       #E2C879;
    --line:       rgba(242,237,225,0.12);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--ink);
    color: var(--cream);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .mono { font-family: 'JetBrains Mono', monospace; }

  /* ===== TOP NAV ===== */
  .topnav {
    display: grid;
    grid-template-columns: auto auto auto minmax(220px, 280px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Logo — the real Going Fishing badge, a transparent PNG. Kept small
     and genuinely discreet: sits directly on the dark navbar with no
     border or background box, since the image's own background outside
     its circle is transparent. */
  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.95;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
  }
  .brand:hover { opacity: 1; text-decoration: none; }
  .brand-logo {
    height: 70px;
    width: 70px;
    display: block;
  }

/* Navbar search — compact and deliberately prominent because search is
   the main action in the public header. The input and button form one
   joined control using the same 5px radius as the rest of the site. */
.nav-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 280px;
}

.nav-search input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 5px 0 0 5px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--cream);
}

.nav-search input::placeholder {
  color: var(--mist);
}

.nav-search input:focus {
  outline: none;
  border-color: var(--orange);
}

.nav-search button {
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 0 5px 5px 0;
  color: var(--ink);
  padding: 8px 13px;
  cursor: pointer;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.nav-search button:hover {
  background: var(--gold);
  border-color: var(--gold);
}


/* Account controls — intentionally quieter than the search action.
   The user name remains plain text, while Login and Logout use compact
   outlined buttons rather than large solid calls to action. */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 13px;
  justify-self: end;
}


.nav-auth-name {
  color: var(--mist);
  white-space: nowrap;
}

.nav-auth-link {
  color: var(--mist);
  text-decoration: none;
}

.nav-auth-link:hover {
  color: var(--cream);
}


/* Shared secondary header button style. These controls match the height
   of the search field without competing with its solid orange button. */
.nav-auth-btn,
.nav-directory-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 34px;
  padding: 7px 11px;

  background: transparent;
  border: 1px solid var(--orange);
  border-radius: 5px;

  color: var(--orange);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.nav-auth-btn:hover,
.nav-directory-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  text-decoration: none;
}

.nav-directory-btn:hover i {
  color: inherit;
}


/* My Directory uses the same compact secondary button treatment as the
   account controls. The icon distinguishes its purpose without making
   the button larger or visually heavier. */
.nav-directory-btn i {
  font-size: 11px;
}

  /* "Hi, {name}" dropdown — the trigger is a plain text button (not the
     orange .nav-auth-btn treatment; Log out keeps that, this is
     navigation, not a call to action). Content is role-aware: only
     admin has a real destination today (the admin dashboard, already
     built); owner and plain user roles show an honest placeholder
     rather than a link to a page that doesn't exist yet. */
  .nav-user-menu {
    position: relative;
  }
  .nav-user-trigger {
    background: none;
    border: none;
    color: var(--mist);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
  }
  .nav-user-trigger:hover { color: var(--cream); }
  .nav-user-trigger i {
    font-size: 10px;
    transition: transform 0.15s ease;
  }
  .nav-user-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
  .nav-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 60;
  }
  .nav-user-dropdown.open { display: block; }
  .nav-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--cream);
    text-decoration: none;
    font-size: 13.5px;
  }
  .nav-user-dropdown-item:hover { background: var(--panel-2); text-decoration: none; }
  .nav-user-dropdown-note {
    padding: 10px 12px;
    color: var(--mist);
    font-size: 13px;
    font-style: italic;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    white-space: nowrap;
  }

.nav-links a:not(.nav-directory-btn) {
    color: var(--cream);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    opacity: 0.9;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.nav-links a:not(.nav-directory-btn):hover {
    color: var(--orange);
    opacity: 1;
}

/* Site footer — a quiet, structured ending to every public page. */
.site-footer {
  margin-top: 64px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--mist);
}

.site-footer__inner {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 16px;
}

.site-footer__intro {
  max-width: 620px;
  margin-bottom: 20px;
}

.site-footer__intro h2 {
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 20px;
  font-weight: 700;
}

.site-footer__intro p {
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 20px;
}

.site-footer__column h3 {
  margin: 0 0 14px;
  color: var(--cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer__column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__column li + li {
  margin-top: 5px;
}

.site-footer__column a {
  color: var(--mist);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__column a:hover {
  color: var(--orange);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__tagline {
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 600;
}

.site-footer__copyright {
  color: var(--mist);
  font-size: 12.5px;
  text-align: right;
}

@media (max-width: 850px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    width: min(100% - 28px, 1200px);
    padding-top: 34px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__copyright {
    text-align: left;
  }
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.page-404{
    max-width:700px;
    margin:60px auto;
    text-align:center;
}

.page-404__icon{
    font-size:64px;
    color:var(--orange);
    margin-bottom:18px;
}

.page-404 h1{
    margin-bottom:12px;
}

.page-404__lead{
    font-size:1.1rem;
    color:var(--cream);
    margin-bottom:12px;
}

.page-404 p{
    max-width:560px;
    margin:0 auto 20px;
    color:var(--mist);
    line-height:1.7;
}

.page-404__search{
    display:flex;
    justify-content:center;
    margin:30px auto;
    max-width:420px;
}

.page-404__search input{
    flex:1;
    border:1px solid var(--line);
    border-right:none;
    border-radius:5px 0 0 5px;
    background:var(--panel);
    color:var(--cream);
    padding:9px 14px;
}

.page-404__search button{
    background:var(--orange);
    border:1px solid var(--orange);
    border-radius:0 5px 5px 0;
    color:var(--ink);
    padding:9px 16px;
    font-weight:700;
    cursor:pointer;
}

.page-404__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.page-404__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 14px;

  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 5px;

  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.page-404__actions a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  text-decoration: none;
}

.page-404__small{
    margin-top:30px;
    font-size:.85rem;
    color:var(--mist);
}

.page-404__explore-title{
    margin:36px 0 14px;
    color:var(--cream);
    font-size:14px;
    font-weight:600;
}

.page-404__countries{
    display:grid;
    grid-template-columns:repeat(2, 170px);
    justify-content:center;
    gap:10px;
}

.page-404__countries a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;

    padding:8px 12px;

    background:transparent;
    border:1px solid var(--line);
    border-radius:5px;

    color:var(--cream);
    text-decoration:none;
    font-size:13px;
    font-weight:600;

    transition:.15s ease;
}

.page-404__countries a:hover{
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(255,145,0,.06);
}

.page-404__countries img{
    width: 18px;
    height: 18px;
    display: block;
}

  /* Public-site flash messages (login errors/confirmations). Same idea
     as the admin ones, themed for this side's dark background instead
     of admin's cream one. */
  .flash {
    max-width: 1080px;
    margin: 16px auto 0;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 14px;
  }
  .flash-success {
    background: rgba(226, 200, 121, 0.12);
    border: 1px solid var(--gold);
    color: var(--gold);
  }
  .flash-error {
    background: rgba(200, 116, 47, 0.12);
    border: 1px solid var(--orange);
    color: var(--orange);
  }

  /* Login form — deliberately styled to match the search bar's own
     language rather than a generic form-card look: same background
     (--panel, not --panel-2 — that mismatch was the previous version's
     actual problem), same 5px radius, same bold/uppercase/letter-spaced
     orange button as .nav-search and .hero-search use. */
  .auth-card {
    max-width: 400px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 32px;
  }
  .auth-field { margin-bottom: 20px; }
  .auth-field label {
    display: block;
    font-size: 13px;
    color: var(--mist);
    margin-bottom: 6px;
  }
  .auth-field input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 13px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--cream);
  }
  .auth-field input::placeholder { color: var(--mist); }
  .auth-field input:focus {
    outline: none;
    border-color: var(--orange);
  }
  .auth-submit {
    width: 100%;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 5px;
    color: var(--ink);
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s ease;
    margin-top: 4px;
  }
  .auth-submit:hover { background: var(--gold); border-color: var(--gold); }

  /* Larger variant used on the search results page itself — same joined
     field, same 5px radius, scaled up since it's the primary action on
     that page rather than a secondary navbar affordance. */
  .hero-search {
    display: flex;
    align-items: stretch;
    max-width: 480px;
    margin-top: 20px;
  }
  .hero-search input {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-right: none;
    border-radius: 5px 0 0 5px;
    padding: 13px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--cream);
  }
  .hero-search input::placeholder { color: var(--mist); }
  .hero-search input:focus {
    outline: none;
    border-color: var(--orange);
  }
  .hero-search button {
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 0 5px 5px 0;
    color: var(--ink);
    padding: 12px 26px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background 0.15s ease;
  }
  .hero-search button:hover { background: var(--gold); }

  /* Breadcrumb styling lives in directory.css (.gf-breadcrumb-wrap etc.)
     — that's the file with the pre-existing rule, now fixed there rather
     than duplicated here (see directory.css for the full explanation). */



  /* ===== RESPONSIVE TOP NAV =====
     Desktop keeps one row. Tablet uses two deliberate rows. Phones use
     four explicit rows. Nothing relies on accidental flex wrapping. */
  @media (max-width: 1100px) {
    .topnav {
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "brand links directory"
        "search search auth";
      gap: 12px 18px;
    }

    .brand { grid-area: brand; }
    .nav-links { grid-area: links; }
    .nav-directory-btn { grid-area: directory; justify-self: end; }
    .nav-search {
      grid-area: search;
      max-width: none;
    }
    .nav-auth {
      grid-area: auth;
      justify-self: end;
    }
  }

  @media (max-width: 760px) {
    .topnav {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand directory"
        "links links"
        "search search"
        "auth auth";
      gap: 12px;
      padding: 12px 16px;
    }

    .brand-logo {
      width: 58px;
      height: 58px;
    }

    .nav-links {
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 18px;
      white-space: normal;
    }

    .nav-search {
      width: 100%;
      max-width: none;
    }

    .nav-auth {
      width: 100%;
      justify-self: stretch;
      justify-content: space-between;
    }
  }

  @media (max-width: 480px) {
    .nav-links {
      gap: 8px 14px;
    }

    .nav-links a {
      font-size: 0.85rem;
    }

    .nav-search input {
      padding-inline: 10px;
      font-size: 13px;
    }

    .nav-search button {
      padding-inline: 10px;
    }

    .nav-user-trigger {
      font-size: 13px;
    }
  }

  /* ===== HERO / TICKET STUB ===== */
  .hero {
    position: relative;
    padding: 56px 28px 40px;
    background:
      radial-gradient(circle at 85% -10%, rgba(200,116,47,0.18), transparent 55%),
      var(--ink);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(242,237,225,0.025) 0px, rgba(242,237,225,0.025) 1px, transparent 1px, transparent 28px),
      repeating-linear-gradient(90deg, rgba(242,237,225,0.025) 0px, rgba(242,237,225,0.025) 1px, transparent 1px, transparent 28px);
    pointer-events: none;
  }
  
  .hero-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }

  .eyebrow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    color: var(--ink);
    background: var(--mist);
  }
  .badge.ticket { background: var(--orange); color: var(--ink); }
  .badge-dot { width:6px; height:6px; border-radius:50%; background: var(--ink); opacity:0.5; }

  h1.venue-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 6vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--cream);
    max-width: 16ch;
  }
  .venue-sub {
    margin-top: 10px;
    color: var(--mist);
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
  }
  .venue-sub a { color: var(--mist); text-decoration: none; border-bottom: 1px solid transparent; }
  .venue-sub a:hover { color: var(--gold); border-color: var(--gold); }

  /* ticket stub stat row */
  .stub {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(46,74,56,0.4);
  }
  .stub-cell {
    padding: 16px 20px;
    border-right: 1px dashed var(--line);
  }
  .stub-cell:last-child { border-right: none; }
  .stub-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mist);
    margin-bottom: 6px;
  }
  .stub-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
  }
  .stub-value small { font-size: 13px; color: var(--cream); font-weight: 500; margin-left: 4px; }

  /* ===== SECTION SHELL ===== */
  .section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 28px;
    border-bottom: 1px solid var(--line);
  }
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--cream);
  }
  .section-note {
    font-size: 14px;
    color: var(--mist);
  }

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