/* ── Site Variables ── */
:root {
  --accent: #19212B;
  --accent-light: #2d3a4a;
  --text: #1a1a1a;
  --text-muted: #666;
  --bg: #ffffff;
  --bg-soft: #f8f8f8;
  --border: #e8e8e8;
  --max-width: 1100px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ── */
.site-header {
  background: var(--accent);
  color: #fff;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.site-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.site-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
  display: flex;
  align-items: center;
}
.site-logo:hover { text-decoration: none; opacity: .9; }
.logo-img { height: 38px; width: auto; display: block; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a { color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 500; }
.site-nav a:hover { color: #fff; text-decoration: none; }

/* ── Hero banner (index page) ── */
.site-hero {
  /* background-image injected inline per-site; fallback = accent color */
  background-color: var(--accent);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 5.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-hero-overlay {
  /* Dark gradient overlay — ensures text is always readable over the photo */
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,20,35,.72) 0%,
    rgba(10,20,35,.60) 50%,
    rgba(10,20,35,.75) 100%);
  pointer-events: none;
}
.site-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
.site-hero h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: .75rem; color: #fff !important; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
.site-hero p { color: rgba(255,255,255,.95) !important; max-width: 580px; margin: 0 auto 1.5rem; font-size: 1.1rem; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.site-hero .hero-cta {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  padding: .65rem 1.75rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .15s;
}
.site-hero .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); text-decoration: none; }

/* ── Main content wrapper ── */
.site-main {
  max-width: var(--max-width);
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

/* ── Article grid (index) ── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.article-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  transition: box-shadow .2s, transform .2s;
}
.article-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.article-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.article-card-body { padding: 1.25rem; }
.article-card-body h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.article-card-body h2 a { color: var(--text); }
.article-card-body h2 a:hover { color: var(--accent); text-decoration: none; }
.article-card-body p {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-meta { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .5rem 1.1rem;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.btn:hover { background: var(--accent-light); text-decoration: none; }

/* ── Pagination ── */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.pagination a, .pagination span {
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .9rem;
  color: var(--accent);
}
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Affiliate disclosure banner ── */
.disclosure-banner {
  background: #fffbea;
  border: 1px solid #f0d060;
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: #7a6000;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.disclosure-banner a { color: #5a4400; font-weight: 600; }

/* ── Article page ── */
.article-hero-img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.article-header { margin-bottom: 1.5rem; }
.article-header h1 { font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: .5rem; }
.article-meta { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.article-body { max-width: 860px; }
.article-body p { margin-bottom: 1.25rem; font-size: 1.05rem; line-height: 1.75; }
.article-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
.article-body h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.5rem; }
.article-body li { margin-bottom: .4rem; font-size: 1.05rem; }
/* Contextual inline affiliate links — subtle dotted underline, not spammy */
.inline-aff { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.inline-aff:hover { text-decoration-style: solid; color: var(--accent); }
.toc-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.toc-box h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .75rem; }
.toc-box ul { margin-left: 1rem; }
.toc-box li { font-size: .95rem; margin-bottom: .3rem; }

/* ── Black Tie styles (embedded in articles) ── */
.btie-style-short a,.btie-style-reviews a{box-shadow:none!important;color:black!important}.btie-style-short a:hover,.btie-style-reviews a:hover{box-shadow:none!important;color:black!important}.btie-style-short{counter-reset:totalReview;max-width:850px;border:none}.btie-style-short h2{text-transform:uppercase;margin-bottom:50px}.btie-style-short:after{border-bottom:1px solid #E9E9E9;content:"";width:100%;display:block}table.btie-style-short{border-collapse:collapse;width:100%;height:100%}.btie-style-short tbody{height:100%}.btie-style-short tr{background-color:#FFF;margin-bottom:40px;display:grid!important;position:relative;grid-template-columns:1fr minmax(0,2fr) 1fr;column-gap:10px;row-gap:2px;padding:50px 25px 25px;box-shadow:0 15px 40px rgb(166 172 201/.2);border-radius:5px;place-items:start start;counter-increment:totalReview}.btie-style-short tr td{border:none}.btie-style-short .toc-img{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:10;align-self:center;padding-right:15px;line-height:0}.btie-style-short .toc-img a{display:block}.btie-style-short .toc-img img{object-fit:cover;width:100%;max-width:185px;max-height:185px;margin-top:15px;margin-bottom:15px}.btie-style-short .toc-det{grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:2;font-size:24px;line-height:24px;font-weight:700;place-self:start start;width:100%}.btie-style-short .toc-det a{text-decoration:none!important;color:black;box-shadow:none}.btie-style-short .toc-det a:hover{text-decoration:underline!important;text-decoration-color:black!important;box-shadow:none}.btie-style-short .toc-tag{position:absolute;top:-14px;left:-12px;display:inline-block;background-color:#19212B;color:#FFF;z-index:500;font-weight:700;padding:11px 20px;font-size:16px;line-height:19px;text-transform:uppercase;box-shadow:2px 2px 2px 0 rgb(0 0 0/.14);width:auto;text-align:left}.btie-style-short .toc-tag::after{content:" ";display:block;position:absolute;left:-10px;bottom:-8px;border-color:#fff0 rgb(25 33 43/.40) #fff0 #fff0;border-style:inset solid inset inset;border-width:0 12px 8px 10px;filter:brightness(50%);z-index:1}.btie-style-short td.toc-pro1::before,.btie-style-short td.toc-pro2::before,.btie-style-short td.toc-pro3::before{content:'\2713';font-size:12px;color:#19212B;margin-right:5px;display:inline-block;width:16px;text-align:center;font-weight:700}.btie-style-short .toc-pro1,.btie-style-short .toc-pro2,.btie-style-short .toc-pro3{font-size:16px;line-height:22px;padding:0;padding-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;width:100%}.btie-style-short .toc-pro1{grid-column-start:2;grid-column-end:3;grid-row-start:4;grid-row-end:5;align-self:start}.btie-style-short .toc-pro2{grid-column-start:2;grid-column-end:3;grid-row-start:5;grid-row-end:6;align-self:start}.btie-style-short .toc-pro3{grid-column-start:2;grid-column-end:3;grid-row-start:6;grid-row-end:7;align-self:start}.btie-style-short .toc-but{grid-column-start:3;grid-column-end:4;grid-row-start:4;grid-row-end:6;display:flex;align-self:center;justify-self:center;text-align:center;padding:10px 20px;font-size:15px;line-height:22px;text-transform:uppercase;font-weight:700;border-radius:5px;color:#FAF9F9;background-color:#19212B;box-shadow:0 15px 40px rgb(166 172 201/.2)}.btie-style-short .toc-but a{color:#FFF!important;text-decoration:none;box-shadow:none;align-self:center}.btie-style-short .toc-rev{grid-column-start:3;grid-column-end:4;grid-row-start:6;grid-row-end:7;align-self:start;justify-self:center;font-size:15px;text-decoration:underline;padding-left:0;padding-right:0;text-align:center;line-height:20px}
.btie-style-reviews-pre{text-transform:uppercase;letter-spacing:-1px;font-size:38px;font-weight:700;display:block;margin-top:50px;margin-bottom:0;text-align:center;line-height:36px}ol.btie-style-reviews{width:100%;list-style-position:inside;padding-left:0;list-style-type:none;counter-reset:currentReview;margin-left:0;margin-right:0}.btie-style-reviews>li{margin-bottom:25px;display:flex;flex-direction:column}.btie-style-reviews h2{font-size:35px;margin-bottom:0;margin-top:25px;width:auto;background:#FFF;padding:35px 25px 0;text-align:center;position:relative;box-shadow:0 -25px 10px -4px rgb(166 172 201/.056);z-index:1;border-radius:3px 3px 0 0}.btie-style-reviews h2:before{position:absolute;top:-14px;left:-12px;display:inline-block;background-color:#19212B;color:#FAF9F9;z-index:500;font-weight:700;padding:14px;font-size:16px;line-height:12px;text-transform:uppercase;box-shadow:2px 2px 2px 0 rgb(0 0 0/.14);width:auto;text-align:left;content:counter(currentReview)" / "counter(totalReview)" ";counter-increment:currentReview}.btie-style-box{background-color:#FFF;margin-bottom:15px;display:grid;position:relative;grid-template-columns:1fr 1fr;column-gap:25px;row-gap:25px;padding:25px;box-shadow:0 25px 10px -4px rgb(166 172 201/.056);place-items:center center;z-index:1;border-radius:0 0 3px 3px}.btie-style-box-image{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;width:100%;text-align:center}.btie-style-box-image img{max-width:200px;width:100%}.btie-style-box img{max-width:200px;max-height:200px}.btie-style-box:after{border-right:1px solid #19212C;content:" ";height:75%;position:absolute;margin-left:50%;margin-right:50%}.btie-style-box p{grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;place-items:center center;font-weight:600;font-size:35px;line-height:38px;text-transform:uppercase;padding:0;margin:0;letter-spacing:-1px;text-align:center}.btie-style-box p:before{content:"Our Verdict:";display:block;font-size:20px}a.btie-style-box-button{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3;place-items:center center;text-align:center;padding:12px 15px;font-size:18px;line-height:22px;text-transform:uppercase;border-radius:5px;font-weight:700;min-width:212px;color:#FAF9F9!important;background-color:#19212B;box-shadow:0 15px 40px rgb(166 172 201/.2);text-decoration:none}a.btie-style-box-button:hover,a.btie-style-box-button:active{text-decoration:underline!important;text-decoration-color:#FAF9F9;color:#FFF!important;transform:matrix(1.02,0,0,1.02,0,0);box-shadow:0 20px 35px rgb(160 164 183/.417)}

/* ── Legal pages ── */
.legal-page { max-width: 800px; }
.legal-page h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.legal-page h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
.legal-page p, .legal-page li { font-size: 1rem; margin-bottom: .75rem; color: #333; }
.legal-page ul { margin-left: 1.5rem; margin-bottom: 1rem; }
.legal-page .last-updated { color: var(--text-muted); font-size: .85rem; margin-bottom: 2rem; }

/* ── About page ── */
.about-page { max-width: 800px; }
.about-page h1 { font-size: 1.8rem; margin-bottom: 1rem; }
.about-page p { font-size: 1.05rem; margin-bottom: 1.25rem; line-height: 1.75; }

/* ── Footer ── */
.site-footer {
  background: var(--accent);
  color: rgba(255,255,255,.75);
  margin-top: 4rem;
  padding: 2.5rem 1.5rem;
}
.site-footer .inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-bottom: 1rem;
}
.footer-links a { color: rgba(255,255,255,.75); font-size: .85rem; }
.footer-links a:hover { color: #fff; text-decoration: none; }
.footer-disclosure {
  font-size: .8rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* ── Featured Section (homepage) ── */
.featured-section {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 3.5rem;
  padding: 0 1.5rem;
}
.featured-hero {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 16/10;
  background: #111;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: box-shadow .2s ease;
}
.featured-hero:hover { box-shadow: 0 8px 32px rgba(0,0,0,.22); }
.featured-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .2s ease, transform .3s ease;
}
.featured-hero:hover img { opacity: .75; transform: scale(1.02); }
.featured-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.8rem 1.8rem;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
  color: #fff;
}
.featured-label {
  display: inline-block;
  background: var(--accent, #2C5F8A);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 3px;
  margin-bottom: .6rem;
}
.featured-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 .5rem;
  color: #fff;
}
.featured-excerpt {
  font-size: .9rem;
  opacity: .88;
  margin: 0 0 .8rem;
  line-height: 1.5;
}
.featured-cta {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid var(--accent, #2C5F8A);
  padding-bottom: 1px;
}

/* Right column: 2 spotlight cards */
.featured-secondary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.spotlight-card {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: box-shadow .2s ease, transform .18s ease;
  flex: 1;
}
.spotlight-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
  transform: translateY(-2px);
}
.spotlight-card img {
  width: 42%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.spotlight-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
}
.spotlight-type {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent, #2C5F8A);
}
.spotlight-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: #1a1a1a;
}
.spotlight-excerpt {
  font-size: .82rem;
  color: #555;
  margin: 0;
  line-height: 1.45;
}

/* ── Similar Posts ── */
.related-posts {
  background: var(--bg-alt, #f4f4f4);
  padding: 3rem 1.5rem;
  margin-top: 3rem;
}
.related-inner {
  max-width: 900px;
  margin: 0 auto;
}
.related-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-dark, #1a1a1a);
  border-bottom: 3px solid var(--accent, #2C5F8A);
  padding-bottom: .5rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.related-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.13);
}
.related-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.related-no-img {
  width: 100%;
  height: 160px;
  background: var(--accent, #2C5F8A);
  opacity: .15;
}
.related-card-body {
  padding: .9rem 1rem 1rem;
  flex: 1;
}
.related-type {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent, #2C5F8A);
  display: block;
  margin-bottom: .3rem;
}
.related-card-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .featured-section { grid-template-columns: 1fr; }
  .featured-secondary { flex-direction: row; }
  .spotlight-card { flex: 1; }
}
@media (max-width: 768px) {
  .site-hero h1 { font-size: 1.6rem; }
  .site-hero p { font-size: 1rem; }
  .article-grid { grid-template-columns: 1fr; }
  .article-header h1 { font-size: 1.5rem; }
  .site-nav { gap: 1rem; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .featured-secondary { flex-direction: column; }
  .featured-title { font-size: 1.2rem; }
  .spotlight-card img { width: 38%; }
}
@media (max-width: 480px) {
  .featured-section { padding: 0 1rem; }
  .spotlight-card { flex-direction: column; }
  .spotlight-card img { width: 100%; height: 160px; }
}
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .site-nav a:not(:first-child) { display: none; }
  .site-nav a:first-child { display: inline; }
}