/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

:root{
  --bg:#0b1220;
  --panel:#111a2e;
  --panel2:#0f1730;
  --text:#e9eefc;
  --muted:#b7c2e2;
  --brand:#7cc5ff;
  --accent:#7dffb2;
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:16px;
  --max:1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1100px 800px at 20% 10%, rgba(124,197,255,.18), transparent 55%),
radial-gradient(900px 700px at 90% 30%, rgba(125,255,178,.12), transparent 60%),
var(--bg);color:var(--text);font-family:var(--font);}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:20px}
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background:rgba(11,18,32,.55);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:999px}
.navlinks{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.navlinks a{font-weight:650;color:var(--text);opacity:.9}
.navlinks a:hover{opacity:1}

.hero{
  padding:26px 0 6px 0;
}
.heroCard{
  background:linear-gradient(180deg, rgba(17,26,46,.95), rgba(15,23,48,.90));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  display:grid;
  gap:12px;
}
.h1{font-size:30px;line-height:1.15;margin:0;font-weight:900}
.sub{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:750;
}
.btn:hover{background:rgba(255,255,255,.10);text-decoration:none}
.btnPrimary{
  border-color:rgba(124,197,255,.35);
  background:rgba(124,197,255,.14);
}
.btnPrimary:hover{background:rgba(124,197,255,.20)}
.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  margin-top:16px;
}
@media (max-width: 880px){
  .grid{grid-template-columns:1fr}
  .h1{font-size:26px}
}

.panel{
  background:rgba(17,26,46,.75);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.panelTitle{margin:0 0 10px 0;font-size:16px;font-weight:850}
.filters{
  display:grid;
  gap:10px;
}
.row{display:grid;gap:8px}
.label{font-size:13px;color:var(--muted);font-weight:700}
.input, .select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.input::placeholder{color:rgba(233,238,252,.55)}
.select option{background:#0b1220}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.chip.active{
  border-color:rgba(125,255,178,.40);
  background:rgba(125,255,178,.12);
}

.resultsMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.small{color:var(--muted);font-size:13px}
.cards{display:grid;gap:12px}
.card{
  border:1px solid var(--border);
  background:rgba(15,23,48,.65);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.cardTop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cardName{margin:0;font-size:16px;font-weight:900}
.rating{font-weight:900;color:var(--accent)}
.cardBody{margin-top:8px;display:grid;gap:8px}
.kv{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.tag{border:1px solid var(--border);padding:4px 8px;border-radius:999px;color:var(--text);font-size:12px;font-weight:750;background:rgba(255,255,255,.05)}
.cardActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cardActions a{font-weight:850}

.footer{
  margin-top:22px;
  padding:18px 0 26px 0;
  color:var(--muted);
  font-size:13px;
}
.footerGrid{display:grid;gap:10px}
.inlineLinks{display:flex;gap:12px;flex-wrap:wrap}
.hr{height:1px;background:var(--border);margin:14px 0}

.content{margin-top:16px}
.content h2{margin:0 0 8px 0;font-size:18px}
.content p{margin:0 0 10px 0;color:var(--muted);line-height:1.6}
.content ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}