/* static/site.css */

/* ---------- Design tokens ---------- */
:root{
  --primary-dark:#1a1a1a;
  --primary-mid:#2d2d2d;
  --accent-gold:#c9a961;
  --text-light:#f5f5f5;
  --text-gray:#666;
  --border-light:#e0e0e0;
  --page-max:1200px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Base reset ---------- */
    * {
      box-sizing:border-box
    }

    html,body {
      height:100%
    }

    body {
      margin:0;
      font-family:var(--font-body);
      color:var(--primary-dark);
      line-height:1.6;
      background:#fff;
    }

    h1,h2,h3,h4,h5,h6,.navbar-brand {
      font-family:var(--font-display);
    }

/* ---------- Creators Cards ------------- */
    header {
      margin-bottom:1.5rem
    }

    a {
      color:var(--accent);
      text-decoration:none
    }

    a:hover {
      text-decoration:underline
    }

    .container {
      max-width:900px;margin-inline:auto
    }

    .cards {
      list-style:none;
      padding:0;
      display:grid;
      gap:12px;
      grid-template-columns:repeat(auto-fill,minmax(240px,1fr))
    }

    .card {
      border:1px solid #eee;
      border-radius:8px;
      padding:12px
    }

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

    .badge {
      display:inline-block;
      background:#000;
      color:#fff;
      border-radius:999px;
      padding:.15rem .5rem;
      font-size:.75rem;
      margin-top:.25rem
    }

    input[type="search"]{
      width:100%;
      padding:.6rem;
      border:1px solid #ddd;
      border-radius:8px;
      margin:8px 0
    }

/* ---------- Container helpers ---------- */
    .page-wrap {
      max-width:var(--page-max);
      margin:0 auto;
      padding:0 2rem}

/* ---------- Navbar (brand seam: dark bg, light links, gold hover) ---------- */
    .site-navbar {
      background:var(--primary-dark) !important;
      border-bottom:1px solid rgba(201,169,97,.25);
      padding:1rem 0;
      box-shadow:0 1px 3px rgba(0,0,0,.2);
    }

    .navbar .container-fluid {
      max-width:var(--page-max);
      margin:0 auto;
      padding:0 2rem
    }

    .navbar-brand {
      font-size:1.5rem;
      font-weight:300;
      letter-spacing:.05em;
      color:var(--text-light)!important;
      text-transform:uppercase;
    }

    .brand-name::after {
      content: "™";
      font-size: 0.6em;
      vertical-align: super;
      margin-left: 0.15em;
      opacity: 0.9;
    }

    .site-navbar .navbar-toggler {
      border-color:rgba(245,245,245,.3);
    }

    .site-navbar .navbar-toggler-icon {
      filter:invert(1) grayscale(100%) brightness(200%);
    }

    .navbar-nav .nav-link,.navbar-nav a {
      color:rgba(245,245,245,.85)!important;
      font-size:.95rem;
      font-weight:400;
      padding:.5rem 1rem!important;
      text-decoration:none;
      transition:color .3s ease;
    }

    .navbar-nav .nav-link:hover,.navbar-nav a:hover {
      color:var(--accent-gold)!important
    }

    .dropdown-menu {
      background:#fff;
      border:1px solid var(--border-light);
      box-shadow:0 4px 12px rgba(0,0,0,.15);
      border-radius:0
    }

    .dropdown-menu .nav-link,.dropdown-menu a {
      color:var(--text-gray)!important;
    }

    .dropdown-item {
      color:var(--text-gray);
      padding:.75rem 1.5rem;
      font-size:.9rem
    }

    .dropdown-item:hover {
      background:#f9f9f9;color:var(--accent-gold)
    }

    .dropdown-divider {
      border-color:var(--border-light)
    }

/* Buttons */
    .btn-outline-secondary {
      border-color:var(--text-gray)!important;
      color:var(--text-gray)!important;b
      ackground:transparent;
      padding:.5rem 1.5rem;
      font-size:.9rem;t
      ext-transform:uppercase;
      letter-spacing:.05em;
      border-radius:0;
      transition:all .3s ease;
    }

    .btn-outline-secondary:hover {
      border-color:var(--primary-dark)!important;
      color:var(--primary-dark)!important
    }

    .btn-primary {
      background:var(--accent-gold)!important;
      border-color:var(--accent-gold)!important;
      color:var(--primary-dark)!important;
      padding:.5rem 1.5rem;font-size:.9rem;
      text-transform:uppercase;
      letter-spacing:.05em;
      border-radius:0;
      transition:all .3s ease;
    }

    .btn-primary:hover {
      background:var(--primary-dark)!important;
      border-color:var(--primary-dark)!important;
      color:var(--text-light)!important
    }

    .btn-link {
      color:var(--text-gray)!important;
      text-decoration:none;
      padding:0;
      font-size:.9rem
    }

.btn-link:hover{color:var(--accent-gold)!important}

    .text-link {
        color: var(--accent-gold);
        text-decoration: underline;
      }

    .text-link:hover {
      color: var(--text-light);
    }

/* ---------- App home (thin dashboard / anon landing) ---------- */
    .app-home {
      padding: 4rem 0;
      min-height: calc(100vh - 300px);
    }

    .app-home--anon {
      display: flex;
      align-items: center;
      min-height: calc(100vh - 300px);
    }

    .app-home-wordmark {
      font-size: 2.5rem;
      font-weight: 300;
      letter-spacing: .05em;
      color: var(--primary-dark);
      margin-bottom: .5rem;
    }

    .app-home-tagline {
      font-size: 1.1rem;
      color: var(--text-gray);
      margin-bottom: 2rem;
    }

    .app-home-greeting {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: 2rem;
    }

    .app-home-stats {
      display: flex;
      gap: 2.5rem;
      margin-bottom: 2rem;
    }

    .app-home-stat {
      display: flex;
      flex-direction: column;
    }

    .app-home-stat-value {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 500;
      color: var(--primary-dark);
      line-height: 1;
    }

    .app-home-stat-label {
      font-size: .85rem;
      color: var(--text-gray);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-top: .25rem;
    }

    .app-home-recent {
      margin-bottom: 2.5rem;
    }

    .app-home-recent-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .6rem 0;
      border-bottom: 1px solid var(--border-light);
    }

    .app-home-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
    }

    /* ---------- Footer ---------- */
    footer {
      background:var(--primary-dark);
      color:rgba(245,245,245,.7);
      padding:3rem 0 2rem;
      margin-top:5rem
    }

    .footer-content {
      max-width:var(--page-max);
      margin:0 auto;
      padding:0 2rem;
      text-align:center
    }

    .footer-content p {
      margin:.5rem 0;
      font-size:.9rem
    }

    .footer-links {
      margin-top:1.5rem
    }

    .footer-links a {
      color:rgba(245,245,245,.7);
      text-decoration:none;
      margin:0 1rem;
      font-size:.85rem;
      transition:color .3s ease
    }

    .footer-links a:hover {
      color:var(--accent-gold)
    }

/* Auth page */
    .auth-wrap {
      min-height: calc(100vh - 200px);
    } /* keep footer offscreen */

    .auth-card {
      max-width: 520px;
      width: 100%;
      border-top: 3px solid var(--accent-gold);
    }

    .auth-links a {
      text-decoration: none;
    }

    .auth-links a:hover {
      color: var(--accent-gold);
    }

    /* Page hero (short variant) */
    .page-hero {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-mid));
      color: var(--text-light);
      padding: 3rem 0;
      margin-bottom: 1.5rem;
    }
    .page-hero--sm { padding: 2.25rem 0; }
    .text-hero-muted { color: rgba(245,245,245,.8); }

    /* Search bar and discipline filter alignment - force exact match */
    .search-bar .form-control,
    #discipline-filter {
      border-radius: 0 !important;
      border: 1px solid var(--border-light) !important;
      border-width: 1px !important;
      padding: 0.5rem 0.75rem !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      line-height: 1.5 !important;
      box-sizing: border-box !important;
      font-size: 1rem !important;
      font-family: inherit !important;
      vertical-align: middle !important;
      display: flex !important;
      align-items: center !important;
      margin: 0 !important;
      align-self: flex-end !important;
    }

    .search-bar .form-control:focus,
    #discipline-filter:focus {
      border-color: var(--accent-gold) !important;
      box-shadow: none !important;
    }

    /* Force override all Bootstrap lg and select styles */
    #discipline-filter.form-select,
    #discipline-filter.form-select-lg {
      padding: 0.5rem 0.75rem !important;
      padding-right: 2rem !important; /* Space for dropdown arrow */
      font-size: 1rem !important;
      height: 48px !important;
      line-height: 1.5 !important;
      background-position: right 0.75rem center !important;
    }

    .search-bar .form-control-lg {
      padding: 0.5rem 0.75rem !important;
      font-size: 1rem !important;
      height: 48px !important;
      line-height: 1.5 !important;
    }

    /* Creator grid/cards */
    .creator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1.25rem;
    }
    .creator-card {
      transition: transform .15s ease, box-shadow .15s ease;
      border-top: 3px solid var(--accent-gold);
    }
    .creator-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0,0,0,.06);
    }

        /* ==== Creator cards (scoped so Bootstrap .card doesn't interfere) ==== */
    .cards {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    .cards .card {
      /* override Bootstrap's .card only inside .cards */
      background: #fff;
      border: 1px solid var(--border-light);
      border-top: 3px solid var(--accent-gold);
      border-radius: 0;
      padding: 1.25rem 1.25rem 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      min-height: 160px;
    }

    .cards .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .cards .card strong {
      display: block;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--primary-dark);
      line-height: 1.25;
    }

    .cards .muted {
      color: var(--text-gray);
      font-size: .92rem;
    }

    .cards a {
      align-self: flex-start;
      text-decoration: none;
      font-weight: 600;
      border: 1px solid var(--accent-gold);
      padding: .5rem .85rem;
      border-radius: 0;
      color: var(--primary-dark);
      background: var(--accent-gold);
      margin-top: auto;
      transition: all .15s ease;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }

    .cards a::after {
      content: '→';
      font-size: 1rem;
      transition: transform .15s ease;
    }

    .cards a:hover,
    .cards a:focus-visible {
      border-color: var(--primary-dark);
      background: var(--primary-dark);
      color: var(--text-light);
      outline: none;
      transform: translateX(2px);
    }

    .cards a:hover::after {
      transform: translateX(3px);
    }

    .cards .card > div:last-of-type {
      margin-top: auto;
    }

    .cards .badge {
      background: var(--accent-gold);
      color: var(--primary-dark);
      border-radius: 999px;
      padding: .3rem .55rem;
      font-size: .75rem;
      font-weight: 600;
      align-self: flex-start;
    }

    .form-row-compact .form-label {
      margin-bottom: .375rem;
    } /* tighter label space */

    .form-row-compact .form-select, .form-row-compact .form-control {
       margin-bottom: 0;
    }

/* Optional: disabled selects can render with lower opacity */
    .form-select:disabled {
      opacity: 1;
    }

/* Discipline grouping */
    .discipline-group {
      margin-bottom: 3rem;
    }

    .discipline-heading {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--primary-dark);
      margin-bottom: 1.25rem;
      padding-bottom: .5rem;
      border-bottom: 2px solid var(--accent-gold);
      display: flex;
      align-items: baseline;
      gap: .5rem;
    }

    .discipline-heading .text-muted {
      font-size: 1rem;
      font-weight: 400;
    }

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .cards .card { transition: none; }
  .cards .card:hover { transform: none; }
}
/* ---------- Responsive ---------- */
@media (max-width:991px){
    .navbar .container-fluid {
      padding:0 1rem
    }

    .navbar-collapse {
      margin-top:1rem;
      padding-top:1rem;
      border-top:1px solid var(--border-light)
    }

}
@media (max-width:768px){
    .app-home-wordmark {
      font-size:2rem
    }

    .app-home-stats {
      gap:1.5rem
    }
}