/* Premier League inspired theme for fr_fpl */
/* Font: Josefin Sans */
:root {
  /* Base palette (approx Premier League branding) */
  --pl-primary:#37003c; /* deep purple */
  --pl-primary-accent:#45004b;
  --pl-secondary:#05f0ff; /* cyan accent */
  --pl-secondary-alt:#00b8c8;
  --pl-pink:#ff2882; /* hot pink accent */
  --pl-bg:#0d0010; /* near black with purple tint */
  --pl-surface:#1d0022;
  --pl-surface-alt:#27002d;
  --pl-border:#3d0a45;
  --pl-text:#ffffff;
  --pl-text-dim:#c9b9ce;
  --focus:#05f0ff;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --transition:150ms cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
  --gradient-accent:linear-gradient(135deg,var(--pl-pink),var(--pl-secondary));
}

html { box-sizing:border-box; }
*,*::before,*::after { box-sizing:inherit; }
body {
  margin:0;
  font-family: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 25% 15%,#42004a 0%, var(--pl-bg) 55% 100%);
  color:var(--pl-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-header {
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:.9rem 1.5rem;
  background:linear-gradient(90deg,var(--pl-primary),var(--pl-primary-accent));
  box-shadow:var(--shadow-sm);
  position:sticky; top:0; z-index:40;
}
.brand {
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.5px;
  text-decoration:none;
  color:var(--pl-text);
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  background-clip:text; /* standard */
  color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.main-nav { display:flex; flex-wrap:wrap; gap:.4rem; }
.nav-link {
  --pad-x:.85rem;
  position:relative;
  display:inline-block;
  padding:.45rem var(--pad-x);
  text-decoration:none;
  font-weight:500;
  font-size:.9rem;
  color:var(--pl-text);
  border-radius:var(--radius-sm);
  transition:var(--transition);
}
.nav-link:hover, .nav-link:focus { color:var(--pl-text); background:var(--pl-surface-alt); }
.nav-link:visited { color:var(--pl-text); }
.nav-link.active { color:var(--pl-text); background:var(--pl-pink); }

/* Mobile nav */
.nav-toggle { display:none; background:none; border:1px solid var(--pl-border); border-radius:var(--radius-sm); padding:.45rem .55rem; cursor:pointer; position:relative; }
.nav-toggle .bar { display:block; width:22px; height:2px; background:var(--pl-text); margin:4px 0; transition:var(--transition); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .main-nav { position:absolute; top:100%; left:0; right:0; background:var(--pl-primary-accent); padding:.75rem .85rem 1rem; flex-direction:column; gap:.15rem; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transform:translateY(-6px); transition:var(--transition); }
  .main-nav.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle { display:inline-block; }
  .nav-link { width:100%; border-radius:var(--radius-sm); }
}

.content { flex:1; width:100%; max-width:1180px; margin:1.6rem auto 3rem; padding:0 1.5rem; }

h1,h2,h3 { font-weight:600; line-height:1.15; }
 h1 { font-size:clamp(2rem,3vw,2.75rem); margin:.2rem 0 1.1rem; }
 h2 { font-size:clamp(1.35rem,2.2vw,1.7rem); margin:1.5rem 0 .75rem; }
 p { line-height:1.55; }

ul { padding-left:1.1rem; }

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

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
thead th { background:var(--pl-surface-alt); color:var(--pl-text); font-weight:600; }
th,td { padding:.55rem .75rem; border-bottom:1px solid var(--pl-border); text-align:left; }
tbody tr:hover { background:var(--pl-surface-alt); }

/* Forms */
form.auth, form.inline-grid { display:grid; gap:.8rem; }
form.auth { max-width:360px; }
input,select,button,textarea { font:inherit; }
input[type=text],input[type=password],input[type=search] {
  width:100%;
  background:var(--pl-surface);
  color:var(--pl-text);
  border:1px solid var(--pl-border);
  border-radius:var(--radius-sm);
  padding:.55rem .65rem;
  transition:var(--transition);
}
input:focus { outline:2px solid var(--focus); outline-offset:1px; }
button, .button {
  cursor:pointer;
  border:none;
  background:var(--gradient-accent);
  color:#fff;
  font-weight:600;
  padding:.55rem 1rem;
  border-radius:var(--radius-sm);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  position:relative;
  overflow:hidden;
  transition:var(--transition);
}
button::before, .button::before {
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,0)); opacity:0; transition:var(--transition);
}
button:hover::before, .button:hover::before { opacity:1; }
button:active, .button:active { transform:translateY(1px); }

/* Grid helpers */
.grid { display:grid; gap:1.2rem; }
.grid.cols-2 { grid-template-columns:1fr; }
@media (min-width:800px){ .grid.cols-2 { grid-template-columns:1fr 1fr; } }

/* Compare table highlight */
.compare-results table tbody tr:nth-child(odd){ background:var(--pl-surface); }

/* Footer */
.site-footer { text-align:center; font-size:.75rem; padding:2.5rem 0 4rem; color:var(--pl-text-dim); }
.site-footer a { color:var(--pl-secondary); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* Animations */
.fade-in { animation:fade .5s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0); } }

/* Utility */
.muted { color:var(--pl-text-dim); }
.text-accent { color:var(--pl-pink); }
.badge { display:inline-block; background:var(--pl-pink); padding:.25rem .55rem; border-radius:999px; font-size:.65rem; letter-spacing:.5px; font-weight:600; }

/* Links */
a { color:var(--pl-secondary); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--pl-text); text-decoration:underline; }
a:visited { color:var(--pl-secondary-alt); }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--pl-bg); }
::-webkit-scrollbar-thumb { background:var(--pl-surface-alt); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--pl-pink); }

/* Search Box Styles */
.search-container {
  position: relative;
  flex: 1;
  max-width: 500px;
  margin: 0 1rem;
}

.search-form {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  background: var(--pl-surface);
  border: 2px solid var(--pl-border);
  border-radius: var(--radius-sm);
  color: var(--pl-text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--pl-secondary);
  background: var(--pl-surface-alt);
}

.search-input::placeholder {
  color: var(--pl-text-dim);
}

.search-submit {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--pl-text-dim);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.search-submit:hover {
  color: var(--pl-secondary);
}

.search-submit::before {
  display: none;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--pl-surface);
  border: 2px solid var(--pl-border);
  border-radius: var(--radius-sm);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: var(--shadow-lg);
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--pl-border);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--pl-surface-alt);
  color: var(--pl-secondary);
}

.autocomplete-item-type {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--pl-primary-accent);
  color: var(--pl-secondary);
  text-transform: uppercase;
}

.autocomplete-item-label {
  flex: 1;
  color: var(--pl-text);
}

.autocomplete-loading {
  padding: 1rem;
  text-align: center;
  color: var(--pl-text-dim);
  font-style: italic;
}

.autocomplete-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--pl-text-dim);
  font-style: italic;
}

/* Responsive Search */
@media (max-width: 1024px) {
  .search-container {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0 0 0;
  }
  
  .site-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .search-container {
    margin: 0.5rem 0;
  }

  .search-input {
    font-size: 0.85rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
  }

  /* Tighter spacing for all content on mobile */
  .content {
    margin: 1rem auto 1.5rem;
    padding: 0 1rem;
  }

  h1 {
    font-size: 1.5rem;
    margin: 0.2rem 0 0.75rem;
  }

  h2 {
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem;
  }

  h3 {
    font-size: 1.05rem;
    margin: 0.75rem 0 0.4rem;
  }

  /* Tighter table spacing globally */
  table {
    font-size: 0.75rem;
  }

  th, td {
    padding: 0.25rem 0.15rem;
  }

  /* Cards and surfaces */
  .card {
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.75rem;
  }

  /* Badges */
  .badge {
    padding: 0.15rem 0.35rem;
    font-size: 0.6rem;
  }

  /* Grid spacing */
  .grid {
    gap: 0.75rem;
  }
}