/* ==========================================================================
   CSS VARIABLES - HSL-BASED SINGLE BRAND COLOR ARCHITECTURE
   
   HOW TO USE:
   Set these three variables in :root to define your entire color system.
   Every other color on the page derives from them automatically.
   
   --brand-h : Hue        (0–360)   e.g. 220 = blue, 0 = red, 120 = green
   --brand-s : Saturation (0%–100%) e.g. 70% = vivid, 20% = muted
   --brand-l : Lightness  (0%–100%) e.g. 50% = mid, 20% = dark, 80% = light
   
   Example brand colors:
     Royal Blue   → h:220  s:80%  l:50%
     Emerald      → h:152  s:68%  l:40%
     Coral Red    → h:6    s:78%  l:57%
     Deep Purple  → h:270  s:60%  l:35%
     Golden Amber → h:38   s:90%  l:50%
     Near Black   → h:220  s:20%  l:12%
     Near White   → h:220  s:30%  l:92%
   
   NOTE: Button text color (--btn-text) is set automatically by theme.js
   using a lightness threshold — no need to set it manually.
   ========================================================================== */
:root {
  /* ── YOUR ONE BRAND COLOR ─────────────────────────────────────────────── */
  --brand-h: 152;   /* Hue:        0–360  */
  --brand-s: 68%;   /* Saturation: 0–100% */
  --brand-l: 40%;   /* Lightness:  0–100% */

  /* ── LAYOUT TOKENS (unchanged) ────────────────────────────────────────── */
  --max-width: 1200px;
  --section-padding: 6rem 2rem;
  --grid-gap: 4rem;
  --border-radius: 8px;
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

  /* ── DERIVED BRAND COLOR ──────────────────────────────────────────────── */
  /* The full brand color assembled from the three variables above.
     Used for buttons, icons, accents, hover states. */
  --color-brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));

  /* Button text: set by theme.js on load and on theme toggle.
     Will be either #ffffff or #0f172a depending on brand lightness.
     Declared here so CSS can reference it immediately. */
  --btn-text: #ffffff;

  /* ── LIGHT MODE: PAGE BACKGROUNDS ────────────────────────────────────── */
  /* Main background: pure near-white. Never derived from brand so it's
     always safe regardless of brand color. */
  --color-bg-main: #fcfdfe;

  /* Tinted background: a very faint hint of the brand hue at fixed low
     saturation and near-white lightness. Adds warmth without risk. */
  --color-bg-tint: hsl(var(--brand-h), 20%, 96%);

  /* Card background: pure white for max contrast on top of tinted bg. */
  --color-bg-card: #ffffff;

  /* ── LIGHT MODE: TEXT ─────────────────────────────────────────────────── */
  /* Text is always fixed dark/light — never derived from brand — so it
     stays readable regardless of how light or dark the brand color is. */
  --color-text-main:  #0f172a;
  --color-text-muted: #475569;
  --color-logo:       #0f172a;

  /* ── LIGHT MODE: BORDERS ──────────────────────────────────────────────── */
  /* Border uses the brand hue at very low saturation and high lightness,
     giving a subtle branded feel without overwhelming contrast issues. */
  --color-border: hsl(var(--brand-h), 15%, 88%);

  /* ── LIGHT MODE: SHADOWS ──────────────────────────────────────────────── */
  --shadow-opacity: 0.06;

  /* ── LIGHT MODE: CTA SECTION (inverted — dark bg, light text) ─────────── */
  /* In light mode the CTA block flips to a dark background so it stands
     out as a visual anchor. The brand button still appears inside it. */
  --cta-bg:       #0f172a;
  --cta-text:     #f8fafc;
  --cta-muted:    #94a3b8;
  --cta-btn-bg:   var(--color-brand);
  /* CTA button text is also handled by theme.js via --btn-text */
  --cta-btn-text: var(--btn-text);
}

/* ==========================================================================
   DARK MODE — body.dark-theme class toggled by theme.js
   Only color tokens change. All layout, spacing, typography rules stay
   exactly the same as light mode.
   ========================================================================== */
body.dark-theme {

  /* ── DARK MODE: PAGE BACKGROUNDS ─────────────────────────────────────── */
  --color-bg-main: #0b0f19;

  /* Same approach as light mode tint but anchored to a dark base.
     Brand hue peeks through at low opacity. */
  --color-bg-tint: hsl(var(--brand-h), 20%, 11%);

  --color-bg-card: #1e293b;

  /* ── DARK MODE: TEXT (fixed, never derived from brand) ────────────────── */
  --color-text-main:  #f8fafc;
  --color-text-muted: #94a3b8;
  --color-logo:       #ffffff;

  /* ── DARK MODE: BORDERS ───────────────────────────────────────────────── */
  /* Same hue, low saturation, but anchored to a darker lightness value. */
  --color-border: hsl(var(--brand-h), 15%, 25%);

  /* ── DARK MODE: SHADOWS ───────────────────────────────────────────────── */
  --shadow-opacity: 0.3;

  /* ── DARK MODE: CTA SECTION (inverted — light bg, dark text) ─────────── */
  /* In dark mode the rest of the page is dark, so the CTA flips to
     white to create the same visual contrast punch. */
  --cta-bg:       #ffffff;
  --cta-text:     #0f172a;
  --cta-muted:    #475569;
  --cta-btn-bg:   var(--color-brand);
  --cta-btn-text: var(--btn-text);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  line-height: 1.6;
}

html, body, .feature-card, .testimonial-card, .sticky-header, .logo-row, .nav-row {
  transition: var(--theme-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.row-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-brand);
  color: var(--btn-text); /* Set by theme.js — black or white based on brand lightness */
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  width: fit-content;
  transition: opacity 0.2s ease;
  border: 1px solid transparent;
}

.btn:hover {
  opacity: 0.9;
}

.btn-light {
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
}

h1 { font-size: 2.75rem; line-height: 1.2; margin-bottom: 1.5rem; color: var(--color-text-main); }
h2 { font-size: 2.25rem; line-height: 1.3; margin-bottom: 1.5rem; text-align: center; color: var(--color-text-main); }
h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-text-main); }
p { color: var(--color-text-muted); margin-bottom: 1.5rem; }

/* ==========================================================================
   STICKY HEADER
   ========================================================================== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, var(--shadow-opacity));
}

.logo-row {
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}
.logo-container {
  display: flex;
  justify-content: flex-start;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-logo);
}

.footer-1 .logo {
  margin-bottom: 1rem;
}

.logo svg {
  fill: currentColor;
  stroke: currentColor;
}

.nav-row {
  background-color: var(--color-bg-main);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--color-text-main);
}
.nav-link svg {
  color: var(--color-brand);
}

/* ==========================================================================
   SECTIONS & LAYOUT SYSTEMS
   ========================================================================== */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
}

.hero-section {
  background-color: var(--color-bg-tint);
  padding: var(--section-padding);
}

.features-section {
  background-color: var(--color-bg-main);
  padding: var(--section-padding);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--grid-gap);
  margin-top: 3rem;
}
.feature-card {
  text-align: center;
  padding: 2rem;
  background-color: var(--color-bg-card);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, var(--shadow-opacity));
}
.feature-icon-wrapper {
  margin-bottom: 1.5rem;
  color: var(--color-brand);
}

.testimonials-section {
  background-color: var(--color-bg-tint);
  padding: var(--section-padding);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: 3rem;
}
.testimonial-card {
  background-color: var(--color-bg-card);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, var(--shadow-opacity));
}
.testimonial-author {
  font-weight: 600;
  margin-top: 1rem;
  display: block;
  color: var(--color-text-main);
}

.about-section {
  background-color: var(--color-bg-main);
  padding: var(--section-padding);
}

.offerings-section {
  background-color: var(--color-bg-tint);
  padding: var(--section-padding);
}

/* ==========================================================================
   CTA SECTION — INVERTED CONTRAST BLOCK
   
   Light mode: dark background, light text (stands out from white page)
   Dark  mode: white background, dark text (stands out from dark page)
   
   The brand button appears in both modes; its text color is controlled
   by --cta-btn-text which mirrors --btn-text set by theme.js.
   ========================================================================== */
.cta-section {
  background-color: var(--cta-bg);
  padding: var(--section-padding);
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: var(--theme-transition);
}

.cta-section h2 {
  color: var(--cta-text);
}

.cta-section p {
  color: var(--cta-muted);
}

.cta-section .btn {
  margin: 0 auto;
  background-color: var(--cta-btn-bg);
  color: var(--cta-btn-text);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.cta-section .btn:hover {
  opacity: 0.9;
}

/* ==========================================================================
   FOOTER ARCHITECTURE
   ========================================================================== */
.footer-1 {
  background-color: var(--color-bg-tint);
  padding: 4rem 2rem 2rem 2rem;
  border-bottom: 1px solid var(--color-border);
}
.footer-1-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--grid-gap);
}
.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--color-text-main);
}
.footer-links li {
  margin-bottom: 0.75rem;
}
.footer-links a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: var(--color-brand);
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
}

.footer-tagline {
  font-size: 0.95rem;
}

.footer-2 {
  background-color: var(--color-bg-tint);
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.footer-2 p {
  margin: 0;
  font-size: 0.85rem;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
  .footer-1-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 3.5rem 1rem;
    --grid-gap: 2rem;
  }
  .row-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .grid-2col {
    grid-template-columns: 1fr;
  }
  .about-section .grid-2col img {
    grid-row: 1;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .footer-1-grid {
    grid-template-columns: 1fr;
  }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}

/* ==========================================================================
   THEME TOGGLE BUTTON STYLING
   ========================================================================== */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-main);
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
  margin-left: auto;
}

.theme-toggle-btn:hover {
  background-color: var(--color-bg-tint);
}

.theme-toggle-btn .moon-icon { display: none; }
.theme-toggle-btn .sun-icon  { display: block; }

body.dark-theme .theme-toggle-btn .moon-icon { display: block; }
body.dark-theme .theme-toggle-btn .sun-icon  { display: none; }

/* ==========================================================================
   INNER PAGES EXTENSIONS
   ========================================================================== */
.inner-hero {
  background-color: var(--color-bg-tint);
  padding: 3.5rem 2rem;
  text-align: center;
}

.inner-hero h1 {
  margin-bottom: 0.5rem;
}

.breadcrumbs {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.breadcrumbs a:hover {
  color: var(--color-brand);
}

.section-alt {
  background-color: var(--color-bg-tint);
}

@media (min-width: 769px) {
  .grid-reverse div:first-child {
    order: 2;
  }
  .grid-reverse div:last-child {
    order: 1;
  }
}