/* Custom overrides for the ultra premium redesign
   This stylesheet defines new components and tweaks to elevate
   the overall look and feel of the site while retaining the
   underlying colour tokens from the existing theme.  Each rule
   is appended rather than overriding the minified styles to
   ensure maintainability. */

/* Import premium fonts for headings and body text */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Lora:wght@400;600&display=swap');

/* Global typography tweaks */
body {
  font-family: 'Lora', serif;
  line-height: 1.6;
  font-size: 1rem;
}

h1, h2, h3, .nav, .brand-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Refined header styling */
.site-header.premium {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

.site-header .nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
}

.site-header .nav {
  display: flex;
  gap: 0.4rem;
}

.site-header .nav a {
  color: var(--fg);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-header .nav a:hover {
  background: var(--bg-soft);
}

/* Hero improvements */
.hero-home {
  padding: 3rem 0 2rem;
}
.hero-home .kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.hero-home h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.hero-home .lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}
.hero-home .footer-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Features section enhancements */
.features .grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.features .feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.features .feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.features .feature .icon {
  font-size: 1.8rem;
  line-height: 1;
  background: var(--bg-soft);
  padding: 0.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.features .feature .title {
  font-weight: 600;
  font-size: 1.2rem;
}
.features .feature .desc {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Article listing card enhancements */
.grid3 a.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.grid3 a.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}
.grid3 a.card .kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
  letter-spacing: 0.05em;
}
.grid3 a.card h3 {
  font-size: 1.35rem;
  margin: 0 0 0.45rem 0;
  line-height: 1.25;
}
.grid3 a.card .small {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Consistent card hover for generic cards */
.card:hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

/* Footer improvements */
.site-footer.premium {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 2rem 0 1.2rem;
  text-align: center;
}
.site-footer.premium .sub {
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Highlight the latest article on the homepage */
.fresh-section {
  padding: 2rem 0;
}

.fresh-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.fresh-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 360px;
}

.fresh-card .content {
  padding: 1.25rem;
}

.fresh-card .kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.fresh-card h3 {
  font-size: 1.5rem;
  margin: 0.2rem 0 0.4rem 0;
}

.fresh-card p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.fresh-card .btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #0b1220;
  font-weight: 600;
  text-decoration: none;
}

.fresh-card .btn:hover {
  opacity: 0.9;
}

/* Article hero section */
.article-hero {
  margin: 2rem 0 1.5rem;
  text-align: center;
}

.article-hero img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 1rem;
}

.article-hero h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0.5rem 0 0.4rem 0;
}

.article-hero .meta {
  color: var(--muted);
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.article-hero .lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 70ch;
  margin: 0 auto 1.2rem;
}

/* Table of contents */
.toc {
  margin: 2rem 0;
  border-left: 3px solid var(--border);
  padding-left: 1.5rem;
}

.toc h2 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.toc ol {
  list-style: decimal;
  padding-left: 1rem;
}

.toc li {
  margin: 0.4rem 0;
}

.toc a {
  color: var(--accent);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Back to top link */
.back-to-top {
  text-align: right;
  margin-top: 2rem;
}

.back-to-top a {
  color: var(--accent);
  font-size: 0.9rem;
  text-decoration: none;
}

.back-to-top a:hover {
  text-decoration: underline;
}

/* Dark mode toggle button styling */
#darkModeToggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.25);
  color: var(--fg);
  z-index: 10000;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Dark mode variation for toggle */
:root.dark #darkModeToggle {
  background: rgba(0,0,0,0.25);
  border-color: var(--border);
  color: var(--fg);
}

#darkModeToggle:hover {
  background: rgba(255,255,255,0.4);
}

:root.dark #darkModeToggle:hover {
  background: rgba(0,0,0,0.4);
}

/* In-page ad styling improvements */
.ad-container {
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 16px;
  margin: 1.5rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Consent bar styling tweak */
.consent {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}