/* FlyFright — Casper-inspired theme (Ghost's Casper, ported to Astro) with
   FlyFright branding: navy→sky cover, sky accent, amber highlights.
   System-sans UI + Georgia reading, the signature Casper typography. */
:root {
  --navy: #10273f;
  --navy-2: #17324f;
  --sky: #2f7dc4;         /* accent (Casper's --blue role) */
  --sky-deep: #1e5d97;
  --amber: #eb9d3a;
  --darkgrey: #15171a;
  --midgrey: #738a94;
  --lightgrey: #c5d2d9;
  --whitegrey: #e5eff5;
  --bg: #f4f8fb;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--darkgrey);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); line-height: 1.15; color: var(--darkgrey); font-weight: 700; }
a { color: var(--sky-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 1000; border-radius: 6px; }

/* Layout blocks */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { z-index: 100; flex-grow: 1; }
.outer { position: relative; padding: 0 4vw; }
.inner { margin: 0 auto; max-width: 1040px; width: 100%; }

/* ---- Cover header (home) ---- */
.site-header {
  color: #fff;
  background: radial-gradient(1200px 480px at 72% -12%, rgba(47,125,196,.5) 0, transparent 60%),
              linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 52%, var(--sky-deep) 135%);
}
.site-header .inner { position: relative; }
.site-header-content {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8vw 4vw 9vw; min-height: 220px; max-height: 460px; text-align: center;
}
.site-title { margin: 0; font-size: 5rem; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.site-title strong { color: #fff; }
.site-title .brand-mark { color: var(--amber); margin-right: .3rem; display: inline-block; transform: rotate(-14deg); }
.site-description { margin: .4rem 0 0; font-size: 2.1rem; font-weight: 300; line-height: 1.4; max-width: 44ch; opacity: .82; }

/* ---- Nav (shared) ---- */
.site-nav { position: relative; z-index: 300; display: flex; align-items: center; height: 64px; font-size: 1.5rem; }
.site-nav-left { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
.site-nav-left a { display: block; padding: 10px 12px; color: #fff; opacity: .85; font-weight: 500; }
.site-nav-left a:hover { opacity: 1; text-decoration: none; }
.site-nav-logo { flex-shrink: 0; margin-right: 12px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.5px; }
.site-nav-logo .brand-mark { color: var(--amber); display: inline-block; transform: rotate(-14deg); }
.site-nav-logo strong { color: #fff; }

/* Non-home dark nav bar */
.site-nav-bar {
  background: var(--navy);
  background-image: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 120%);
  position: sticky; top: 0; z-index: 500;
}

/* ---- Post feed ---- */
.post-feed { position: relative; display: flex; flex-wrap: wrap; margin: 0 -20px; padding: 50px 0 0; }
.home-template .post-feed { margin-top: -46px; }
.post-card {
  flex: 1 1 300px; display: flex; flex-direction: column; overflow: hidden;
  margin: 0 20px 40px; min-height: 220px; background: #fff; border-radius: 5px;
  box-shadow: rgba(39,44,49,.06) 8px 14px 38px, rgba(39,44,49,.03) 1px 3px 8px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.post-card:hover { transform: translate3d(0,-2px,0); box-shadow: 0 0 1px rgba(39,44,49,.1), 0 8px 28px rgba(39,44,49,.12); }
.post-card-image-link { display: block; overflow: hidden; border-radius: 5px 5px 0 0; }
.post-card-image { height: 200px; background: var(--lightgrey) no-repeat center center; background-size: cover; }
.post-card-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.post-card-content-link { display: block; padding: 25px 25px 0; color: var(--darkgrey); }
.post-card-content-link:hover { text-decoration: none; }
.post-card-tags { display: block; margin-bottom: 6px; color: var(--sky-deep); font-size: 1.2rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.post-card-title { margin: 0; font-size: 2rem; line-height: 1.2; }
.post-card-excerpt { margin-top: 10px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.55em; color: #3a4a58; }
.post-card-excerpt p { margin: 0; }
.post-card-meta { display: flex; align-items: center; padding: 0 25px 22px; margin-top: 14px; }
.post-card-date { color: var(--midgrey); font-size: 1.3rem; font-weight: 500; letter-spacing: .3px; }

/* First (most recent) card spans full width on desktop — the Casper hero card */
@media (min-width: 795px) {
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) { flex: 1 1 100%; flex-direction: row; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link { flex: 1 1 auto; border-radius: 5px 0 0 5px; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image { width: 100%; height: 100%; min-height: 340px; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content { flex: 0 1 400px; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-title { font-size: 2.9rem; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-excerpt { font-size: 1.9rem; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link { padding: 30px 40px 0; }
  .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta { padding: 0 40px 30px; }
}
@media (max-width: 650px) {
  .post-feed { padding-top: 5vw; margin: 0; }
  .post-card { margin: 0 0 5vw; }
  .home-template .post-feed { margin-top: 5vw; }
}

/* ---- Hub section (FlyFright guide navigation) ---- */
.hub-section { padding: 30px 0 60px; }
.hub-heading { font-size: 2.4rem; margin: 0 0 20px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.hub-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #fff;
  border-radius: 5px; border-left: 4px solid var(--sky);
  box-shadow: rgba(39,44,49,.06) 8px 14px 38px, rgba(39,44,49,.03) 1px 3px 8px;
  transition: transform .3s ease, box-shadow .3s ease; color: var(--darkgrey);
}
.hub-tile:hover { transform: translate3d(0,-2px,0); box-shadow: 0 8px 28px rgba(39,44,49,.12); text-decoration: none; }
.hub-tile strong { font-size: 1.8rem; color: var(--navy); }
.hub-tile span { font-family: var(--serif); font-size: 1.55rem; line-height: 1.5; color: #4a5a68; }

/* ---- Blog intro ---- */
.page-intro { max-width: 720px; margin: 0 auto; padding: 4vw 0 0; text-align: center; }
.page-intro h1 { font-size: 3.4rem; margin: 0 0 .3em; }
.page-intro p { font-family: var(--serif); font-size: 1.9rem; line-height: 1.5; color: #4a5a68; margin: 0; }

/* ---- Single post / page ---- */
.post-full { position: relative; z-index: 50; }
.post-full-header { margin: 0 auto; padding: 6vw 3vw 3vw; max-width: 820px; text-align: center; }
.post-full-meta { display: flex; justify-content: center; align-items: center; color: var(--midgrey); font-size: 1.4rem; font-weight: 600; text-transform: uppercase; }
.post-full-meta-date { color: var(--sky-deep); }
.post-full-title { margin: 0; font-size: clamp(3.2rem, 5vw, 5rem); color: var(--navy); }
.post-full-content { position: relative; margin: 0 auto; padding: 40px 0 0; max-width: 720px; }
.post-content { font-family: var(--serif); font-size: 2rem; line-height: 1.65em; color: #2b3a47; }
.post-content > *:first-child { margin-top: 0; }
.post-content > * { margin-top: 1.15em; }
.post-content h2, .post-content h3, .post-content h4 { font-family: var(--sans); color: var(--navy); line-height: 1.2; scroll-margin-top: 80px; }
.post-content h2 { font-size: 3rem; margin-top: 1.6em; }
.post-content h3 { font-size: 2.4rem; margin-top: 1.4em; }
.post-content h4 { font-size: 2rem; }
.post-content a { color: #000; box-shadow: var(--sky) 0 -1px 0 inset; }
.post-content a:hover { color: var(--sky-deep); text-decoration: none; box-shadow: var(--sky) 0 -2px 0 inset; }
.post-content strong, .post-content em { color: #0d0f12; }
.post-content ul, .post-content ol { padding-left: 1.5em; }
.post-content li { margin-top: .5em; word-break: break-word; }
.post-content img { display: block; margin: 1.6em auto; border-radius: 5px; }
.post-content blockquote {
  margin: 1.6em 0; padding: .4em 1.4rem; border-left: 4px solid var(--sky);
  background: #fff; border-radius: 0 5px 5px 0; color: var(--navy); font-style: italic;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-family: var(--sans); font-size: 1.5rem; }
.post-content th, .post-content td { border: 1px solid var(--whitegrey); padding: .6rem .8rem; text-align: left; }
.post-content thead th { background: var(--whitegrey); color: var(--navy); }
.post-content tbody tr:nth-child(even) { background: #f8fbfd; }
.post-content hr { border: 0; border-top: 1px solid var(--lightgrey); margin: 2.4em 0; }
@media (max-width: 800px) { .post-content { font-size: 1.8rem; } }

/* ---- Footer ---- */
.site-footer { position: relative; padding-top: 20px; padding-bottom: 60px; color: #fff; background: var(--navy); margin-top: 40px; }
.site-footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: rgba(255,255,255,.7); font-size: 1.3rem; }
.site-footer-content a { color: rgba(255,255,255,.75); }
.site-footer-content a:hover { color: #fff; text-decoration: none; }
.copyright strong { color: var(--amber); }
.site-footer-nav { display: flex; flex-wrap: wrap; }
.site-footer-nav a { position: relative; margin-left: 20px; }
.site-footer-nav a:before { content: ""; position: absolute; top: 8px; left: -11px; width: 2px; height: 2px; background: #fff; border-radius: 100%; }
.site-footer-nav a:first-of-type:before { display: none; }
@media (max-width: 650px) {
  .site-footer-content { flex-direction: column; gap: 12px; }
  .site-footer-nav a:first-child { margin-left: 0; }
  .site-title { font-size: 3.4rem; }
  .site-description { font-size: 1.7rem; }
  .site-nav { height: auto; padding: 8px 0; }
}