/*
Theme Name: Flightlight
Theme URI: https://flightydeals.com
Description: Ultra-light, fast, 2026 editorial-minimal theme built for flight-deal pages. The destination photo is the hero, the deal data is the substance. Renders self-contained inline-styled deal HTML perfectly and does nothing else. PHP 8.x clean, no framework, no page builder, no JavaScript dependencies.
Author: flightydeals
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flightlight
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --fl-ink: #16181d;
  --fl-muted: #6b7280;
  --fl-line: #e8e9ec;
  --fl-bg: #ffffff;
  --fl-soft: #f6f7f9;
  --fl-accent: #0b6bcb;       /* travel blue - links, header */
  --fl-deal: #1a8a4a;         /* green - the one "this is cheap" signal */
  --fl-radius: 12px;
  --fl-maxw: 760px;
  --fl-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
}

/* ============================================================
   RESET-ISH / BASE
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fl-bg);
  color: var(--fl-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fl-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.fl-wrap { max-width: var(--fl-maxw); margin: 0 auto; padding: 0 20px; }

/* ============================================================
   HEADER
   ============================================================ */
.fl-site-header {
  border-bottom: 1px solid var(--fl-line);
  background: var(--fl-bg);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
}
.fl-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; max-width: var(--fl-maxw); margin: 0 auto;
}
.fl-brand {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--fl-ink); text-decoration: none; white-space: nowrap;
}
.fl-brand:hover { text-decoration: none; }
.fl-brand .fl-dot { color: var(--fl-deal); }
.fl-nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.fl-nav a { color: var(--fl-muted); font-size: .95rem; font-weight: 500; }
.fl-nav a:hover { color: var(--fl-ink); text-decoration: none; }

/* ============================================================
   MAIN / ARTICLE
   ============================================================ */
.fl-main { padding: 28px 0 56px; }
.fl-article-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.02em;
  margin: 6px 0 18px;
}

/* destination hero — shorter, with depth, a price badge + readable label */
.fl-hero {
  position: relative; width: 100%; aspect-ratio: 12 / 5;
  border-radius: var(--fl-radius); overflow: hidden;
  margin: 0 0 22px;
  background: radial-gradient(120% 130% at 12% 8%, #34b0cc 0%, #0b6bcb 42%, #0a4ea0 72%, #1a8a4a 128%);
  box-shadow: var(--fl-shadow);
  display: flex; align-items: flex-end;
}
.fl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-hero::before {                 /* scrim for label readability + depth */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.38), transparent 55%);
}
.fl-hero-label {
  position: relative; z-index: 2; padding: 16px 18px;
  color: #fff; font-weight: 600; font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  line-height: 1.1; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  font-family: "Fraunces", Georgia, serif;
}
.fl-hero-price {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  background: #fff; color: var(--fl-deal);
  font-weight: 800; font-size: 1.1rem; padding: 7px 15px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.20);
  font-variant-numeric: tabular-nums;
}
.fl-hero--gradient::after {        /* faint plane only when no real photo */
  content: "\2708"; position: absolute; right: 8px; bottom: -30px; z-index: 1;
  font-size: 150px; color: #fff; opacity: .10; transform: rotate(-18deg);
  pointer-events: none; line-height: 1;
}

/* the deal content the script injects is mostly self-styled (inline).
   we only add gentle polish around the new 2026 UX bits below. */
.fl-content { font-size: 1rem; }
.fl-content h3 { font-family: "Fraunces", Georgia, serif; }

/* ---- context strip (the moat made visible) ---- */
.fl-content .deal-context-strip,
.deal-context-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 20px; padding: 12px 16px;
  background: var(--fl-soft); border: 1px solid var(--fl-line);
  border-radius: 10px; font-size: .98rem; color: var(--fl-muted);
}
.deal-context-strip strong { color: var(--fl-ink); font-weight: 600; }
.deal-context-strip .ctx-floor { color: var(--fl-deal); font-weight: 700; }

/* ---- native <details> month accordions ---- */
.fl-content details, .deal-month {
  border: 1px solid var(--fl-line);
  border-radius: 10px; margin: 0 0 10px; overflow: hidden;
  background: var(--fl-bg);
}
.fl-content details[open], .deal-month[open] { box-shadow: var(--fl-shadow); }
.fl-content summary, .deal-month > summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; color: var(--fl-ink);
  background: var(--fl-soft);
  -webkit-tap-highlight-color: transparent;
}
.fl-content summary::-webkit-details-marker,
.deal-month > summary::-webkit-details-marker { display: none; }
.fl-content summary::after, .deal-month > summary::after {
  content: "▾"; color: var(--fl-muted); font-size: .9em;
  transition: transform .18s ease; flex: none;
}
.fl-content details[open] > summary::after,
.deal-month[open] > summary::after { transform: rotate(180deg); }
.deal-month > summary .dm-meta { color: var(--fl-muted); font-weight: 500; font-size: .92em; }
.fl-content details > ul, .deal-month > ul { margin: 0; padding: 8px 12px 12px; list-style: none; }

/* tabular numbers so prices align - small touch that reads as 'designed' */
.fl-content, .deal-context-strip, .deal-month { font-variant-numeric: tabular-nums; }

/* ============================================================
   FRONT PAGE: destination grid
   ============================================================ */
.fl-home-hero {
  text-align: center; padding: 40px 0 28px;
}
.fl-home-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.02em; margin: 0 0 10px;
}
.fl-home-hero p { color: var(--fl-muted); font-size: 1.1rem; margin: 0 auto; max-width: 520px; }

.fl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; padding: 8px 0 40px;
}
.fl-card {
  display: block; border-radius: var(--fl-radius); overflow: hidden;
  border: 1px solid var(--fl-line); background: var(--fl-bg);
  box-shadow: var(--fl-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.fl-card:hover { transform: translateY(-3px); text-decoration: none;
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 14px 34px rgba(16,24,40,.10); }
.fl-card-img {
  aspect-ratio: 3 / 2; background:
    linear-gradient(120deg, #0b6bcb 0%, #2aa6c4 55%, #1a8a4a 100%);
}
.fl-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fl-card-body { padding: 12px 14px 14px; }
.fl-card-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--fl-ink); font-size: 1.1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.fl-site-footer {
  border-top: 1px solid var(--fl-line); background: var(--fl-soft);
  padding: 28px 0; margin-top: 40px;
  color: var(--fl-muted); font-size: .9rem;
}
.fl-footer-inner { max-width: var(--fl-maxw); margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.fl-site-footer a { color: var(--fl-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .fl-nav { display: none; }            /* keep header dead simple on phones */
  .fl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ============================================================
   DEAL ROW POLISH (engagement layer over the inline-styled rows)
   The script ships clean inline styles; this adds the interactive
   feel: a soft hover wash, a sliding "go" chevron, tidy dividers.
   ============================================================ */
.fl-content li { transition: background .13s ease; }
.fl-content li:hover { background: var(--fl-soft); }
.fl-content .deal-month li:last-child { border-bottom-color: transparent !important; }

/* sliding chevron affordance at the end of each clickable row */
.fl-content li > a { transition: color .13s ease; }
.fl-content li > a::after {
  content: "\203A";                 /* › */
  flex: none; color: #cbd5e1; font-size: 1.2em; line-height: 1;
  margin-left: 2px; transition: transform .13s ease, color .13s ease;
}
.fl-content li > a:hover::after { color: var(--fl-accent); transform: translateX(3px); }

/* summary (month bar) hover */
.fl-content .deal-month > summary { transition: background .13s ease; }
.fl-content .deal-month > summary:hover { background: #eef0f3; }

/* the cheapest-tier green price pill gets a gentle pop on row hover */
.fl-content li:hover [style*="background:#e7f6ed"] { box-shadow: 0 0 0 3px rgba(26,138,74,.10); }