/* Mercury Generator — Base Styles */
/* This file is deployed to wp-content/mercury-styles.css on target WordPress sites */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Typography Scale */
:root {
  --brand-primary: #FFD700;
  --brand-secondary: #1a1a2e;
  --brand-accent: #e94560;
  --brand-bg: #0f0f23;
  --brand-surface: #16213e;
  --brand-text: #ffffff;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

body {
  font-family: var(--font-body);
  color: var(--brand-text);
  background-color: var(--brand-bg);
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

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

a:hover {
  color: color-mix(in srgb, var(--brand-primary) 80%, white);
}

/* Section base */
.mercury-section {
  padding: var(--spacing-xl) var(--spacing-md);
}

.mercury-section:nth-child(even) {
  background-color: var(--brand-surface);
}

/* Container */
.mercury-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Button styles */
.mercury-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mercury-btn-primary {
  background-color: var(--brand-primary);
  color: var(--brand-bg);
}

.mercury-btn-primary:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 85%, white);
  transform: translateY(-1px);
}

.mercury-btn-secondary {
  background-color: var(--brand-secondary);
  color: var(--brand-text);
  border: 1px solid color-mix(in srgb, var(--brand-text) 20%, transparent);
}

/* Card styles */
.mercury-card {
  background-color: var(--brand-surface);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
}

/* Grid */
.mercury-grid {
  display: grid;
  gap: var(--spacing-md);
}

.mercury-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mercury-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mercury-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .mercury-grid-2,
  .mercury-grid-3,
  .mercury-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Rating */
.mercury-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--brand-primary);
  font-weight: 700;
}

/* Badge */
.mercury-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  color: var(--brand-primary);
}

/* FAQ Accordion */
.mercury-faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
}

.mercury-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
}

.mercury-faq-answer {
  padding: 0 0 var(--spacing-md) 0;
  color: color-mix(in srgb, var(--brand-text) 80%, transparent);
  display: none;
}

.mercury-faq-item.active .mercury-faq-answer {
  display: block;
}

/* Hero */
.mercury-hero {
  position: relative;
  padding: var(--spacing-xl) var(--spacing-md);
  min-height: 400px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.mercury-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-bg) 90%, transparent), color-mix(in srgb, var(--brand-bg) 60%, transparent));
}

.mercury-hero > * {
  position: relative;
  z-index: 1;
}

/* Header language switcher (populated by mercury-scripts.js from window.__mcLangs / hreflang) */
.mc-langsw { position: relative; display: inline-flex; }
.mc-langsw[hidden] { display: none; }
.mc-langsw__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1;
  color: var(--mc-text, var(--brand-text, #fff));
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid var(--mc-hairline, rgba(255, 255, 255, 0.2));
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mc-langsw__btn:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-color: var(--mc-primary, var(--brand-primary, #FFD700));
}
.mc-langsw__caret { transition: transform 0.2s ease; }
.mc-langsw.is-open .mc-langsw__caret { transform: rotate(180deg); }
.mc-langsw__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  min-width: 176px; margin: 0; padding: 6px; list-style: none;
  background: var(--mc-secondary, var(--brand-surface, #16213e));
  border: 1px solid var(--mc-hairline, rgba(255, 255, 255, 0.16));
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.mc-langsw.is-open .mc-langsw__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Footer placement: the switcher sits at the page bottom, so open the dropdown UPWARD and flip
   the caret to hint the direction. */
.mc-langsw--footer { margin-top: 16px; }
/* The footer switcher sits at the TRAILING end of the footer bar, so the menu is pinned to that
   same edge and grows inward — pinning it to the leading edge instead pushed it past the far
   side of the viewport and caused a ~55px horizontal page scroll. Wins over the mobile media
   rule via specificity.
   Written with inset-inline-* so it reads "outer edge / inner edge" rather than "right / left":
   under RTL the whole footer mirrors and the menu has to follow the button, not stay right. */
.mc-langsw--footer .mc-langsw__menu { top: auto; bottom: calc(100% + 8px); inset-inline-end: 0; inset-inline-start: auto; transform: translateY(6px); }
.mc-langsw--footer.is-open .mc-langsw__menu { transform: translateY(0); }
.mc-langsw--footer .mc-langsw__caret { transform: rotate(180deg); }
.mc-langsw--footer.is-open .mc-langsw__caret { transform: rotate(0deg); }
.mc-langsw__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  color: var(--mc-text, var(--brand-text, #fff)); font-size: 0.9rem; text-transform: capitalize;
  transition: background 0.15s ease, color 0.15s ease;
}
.mc-langsw__opt:hover { background: color-mix(in srgb, var(--mc-primary, #FFD700) 16%, transparent); }
.mc-langsw__opt.is-active { color: var(--mc-primary, var(--brand-primary, #FFD700)); font-weight: 700; }
.mc-langsw__code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 2px 6px; border-radius: 5px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
@media (max-width: 860px) {
  .mc-langsw__menu { inset-inline-end: auto; inset-inline-start: 0; }
  /* On mobile the footer row wraps and the switcher drops back to the LEADING end (the flex:1
     copyright only pushes it to the trailing end on wide screens), so the desktop trailing-pinned
     dropdown spilled off the leading edge and clipped the language names. Pin it to the leading
     edge here instead, capped to the viewport width so it can never overflow either side. */
  .mc-langsw--footer .mc-langsw__menu { inset-inline-end: auto; inset-inline-start: 0; max-width: min(240px, calc(100vw - 40px)); }
}

/* Table of Contents accordion (Home) — render-time <details>, fixed mc-toc classes */
.mc-toc {
  margin: 24px 0; border-radius: 10px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mc-text, #333) 14%, transparent);
  background: color-mix(in srgb, var(--mc-secondary, #f6f6f8) 55%, transparent);
}
.mc-toc__summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-weight: 700; font-size: 1.05rem; color: var(--mc-text, #222);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mc-toc__summary::-webkit-details-marker { display: none; }
.mc-toc__summary::after {
  content: "\25be"; color: var(--mc-primary, #FFD700); transition: transform .2s ease;
}
.mc-toc[open] .mc-toc__summary::after { transform: rotate(180deg); }
.mc-toc__list { margin: 0; padding: 2px 18px 16px; list-style: none; display: grid; gap: 8px; }
.mc-toc__item { margin: 0; }
.mc-toc__link {
  color: var(--mc-primary, var(--brand-primary, #b8891f));
  text-decoration: none; font-weight: 600;
}
.mc-toc__link:hover { text-decoration: underline; }
/* Anchor scroll offset so a fixed/sticky header doesn't cover the target section */
section[id] { scroll-margin-top: 90px; }