/**
 * HVAC Project Cost — Design System
 * Stories 4.5.1, 4.5.2, 4.5.3
 *
 * This stylesheet applies the visual design system to the GeneratePress theme.
 * It is loaded site-wide via WordPress enqueue (not conditional).
 *
 * Existing CSS files it coexists with:
 *   - hvac-calculator.css        (calculator form/results — loaded on estimator page only)
 *   - hvac-pages.min.css         (money-page / city-page content — loaded on those templates)
 *   - GeneratePress core styles  (layout grid, containers, nav structure)
 *
 * Organization:
 *   1. Font Import
 *   2. Design Tokens (CSS Custom Properties)
 *   3. Reset & Base Typography
 *   4. GeneratePress Layout Overrides
 *   5. Navigation & Header
 *   6. Content Typography
 *   7. Links
 *   8. Cost Tables
 *   9. CTA Buttons
 *  10. Callout Boxes (Blockquotes)
 *  11. Cards
 *  12. Footer
 *  13. Accessibility (Focus, Reduced Motion)
 *  14. Responsive — Tablet (max-width: 768px)
 *  15. Responsive — Small (max-width: 640px)
 *  16. Responsive — Extra Small (max-width: 480px)
 */


/* ==========================================================================
   1. FONT IMPORT
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ==========================================================================
   2. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* --- Colors ----------------------------------------------------------- */
  --color-primary:        #1E3A8A;
  --color-primary-light:  #3B82F6;
  --color-primary-dark:   #1E2D5E;
  --color-accent:         #EA580C;
  --color-accent-hover:   #C2410C;
  --color-text:           #1F2937;
  --color-text-secondary: #6B7280;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F8FAFC;
  --color-bg-callout:     #EFF6FF;
  --color-bg-cta:         #FFF7ED;
  --color-border:         #E5E7EB;
  --color-success:        #059669;
  --color-warning:        #D97706;
  --color-danger:         #DC2626;

  /* --- Spacing ---------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* --- Border Radius ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* --- Font Stack -------------------------------------------------------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   3. RESET & BASE TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override GeneratePress body background (default #f7f8f9) */
body.wp-theme-generatepress {
  background-color: var(--color-bg);
}


/* ==========================================================================
   4. GENERATEPRESS LAYOUT OVERRIDES
   ========================================================================== */

/*
 * GeneratePress uses .separate-containers .inside-article for post/page
 * content. We override the background to white so articles stand out.
 * The grid-container and site-content layout remain untouched.
 */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
  background-color: var(--color-bg);
}

/* Ensure grid containers keep their max-width behavior */
.grid-container {
  /* Intentionally left empty — do not override GP grid */
}

/* Content area padding refinement */
.separate-containers .inside-article {
  padding: var(--space-xl) var(--space-xl);
}


/* ==========================================================================
   5. NAVIGATION & HEADER
   ========================================================================== */

/* --- Header container --------------------------------------------------- */

.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

/* --- Site title / branding ---------------------------------------------- */

.main-title a,
.site-branding .main-title a {
  color: var(--color-primary);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-title a:hover,
.site-branding .main-title a:hover {
  color: var(--color-primary-light);
}

/* --- Desktop navigation links ------------------------------------------- */

.main-navigation a,
.main-navigation .menu-item a,
nav#site-navigation a {
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation .menu-item a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--color-primary);
}

/* --- Dropdown submenus -------------------------------------------------- */

.main-navigation .sub-menu {
  background-color: var(--color-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.main-navigation .sub-menu a {
  color: var(--color-text);
  font-size: 14px;
  padding: 10px 16px;
}

.main-navigation .sub-menu a:hover {
  color: var(--color-primary);
  background-color: var(--color-bg-alt);
}

/* --- Mobile nav (GeneratePress slideout / overlay) ---------------------- */

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
  color: var(--color-text);
}

/* Mobile menu panel styling */
.main-navigation .menu-bar-items,
nav#mobile-menu-control-wrapper {
  font-family: var(--font-family);
}

/* Mobile slide-out / overlay panel */
.main-navigation.toggled .main-nav > ul,
.main-navigation.toggled .menu-bar-items {
  background-color: var(--color-bg);
}

.main-navigation.toggled .main-nav > ul a {
  color: var(--color-text);
  font-weight: 500;
  border-bottom-color: var(--color-border);
}

.main-navigation.toggled .main-nav > ul a:hover {
  color: var(--color-primary);
}


/* ==========================================================================
   6. CONTENT TYPOGRAPHY
   ========================================================================== */

/* --- Headings ----------------------------------------------------------- */

h1, .wp-block-heading:where(h1),
h2, .wp-block-heading:where(h2),
h3, .wp-block-heading:where(h3),
h4, .wp-block-heading:where(h4),
h5, h6 {
  font-family: var(--font-family);
  color: var(--color-text);
}

h1,
h1.wp-block-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

h2,
h2.wp-block-heading,
.money-page .entry-content h2,
.city-page .entry-content h2 {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

h3,
h3.wp-block-heading {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

h4,
h4.wp-block-heading {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* --- Body text ---------------------------------------------------------- */

p,
.entry-content p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

/* --- Entry meta (author, date, categories) ------------------------------ */

.entry-meta,
p.entry-meta {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.entry-meta a {
  color: var(--color-text-secondary);
}

.entry-meta a:hover {
  color: var(--color-primary);
}

/* --- Lists -------------------------------------------------------------- */

ul.wp-block-list,
ol.wp-block-list,
.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  line-height: 1.7;
}

.entry-content li {
  margin-bottom: var(--space-xs);
}


/* ==========================================================================
   7. LINKS
   ========================================================================== */

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-light);
}

/* Remove underline from nav links and buttons (they have their own styles) */
.main-navigation a,
a.cta-button,
.main-title a {
  text-decoration: none;
}


/* ==========================================================================
   8. COST TABLES
   ========================================================================== */

/*
 * WordPress block tables use: figure.wp-block-table > table
 * Striped variant adds: figure.wp-block-table.is-style-stripes
 * We style both consistently.
 */

figure.wp-block-table {
  margin: var(--space-lg) 0;
  overflow: visible;
}

/* Table container — rounded corners with overflow hidden */
figure.wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
}

/* --- Header row --------------------------------------------------------- */

figure.wp-block-table table thead th,
figure.wp-block-table.is-style-stripes table thead th {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 16px;
  text-align: left;
  border: none;
  border-bottom: none;
}

/* First header cell — top-left radius */
figure.wp-block-table table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

/* Last header cell — top-right radius */
figure.wp-block-table table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

/* --- Body rows ---------------------------------------------------------- */

figure.wp-block-table table tbody td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-size: 16px;
  color: var(--color-text);
}

/* Last row — no bottom border (the table container border handles it) */
figure.wp-block-table table tbody tr:last-child td {
  border-bottom: none;
}

/* Alternating row colors */
figure.wp-block-table table tbody tr:nth-child(odd) {
  background-color: var(--color-bg);
}

figure.wp-block-table table tbody tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}

/* Override GeneratePress .is-style-stripes defaults */
figure.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) {
  background-color: var(--color-bg);
}

figure.wp-block-table.is-style-stripes table tbody tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}

figure.wp-block-table.is-style-stripes table tbody td {
  border-bottom: 1px solid var(--color-border);
}

figure.wp-block-table.is-style-stripes table tbody tr:last-child td {
  border-bottom: none;
}

/* Price / numeric cells — bold (2nd column onward) */
figure.wp-block-table table td:not(:first-child) {
  font-weight: 600;
}

/* --- Table caption ------------------------------------------------------ */

figure.wp-block-table figcaption {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  text-align: left;
}

/* --- Mobile: horizontal scroll with sticky first column ----------------- */

@media (max-width: 768px) {
  figure.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  figure.wp-block-table table {
    min-width: 500px;
  }

  figure.wp-block-table table thead th:first-child,
  figure.wp-block-table table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
  }

  /* Ensure sticky header cell keeps its color */
  figure.wp-block-table table thead th:first-child {
    background-color: var(--color-primary);
  }

  /* Ensure sticky body cells get the right alternating color */
  figure.wp-block-table table tbody tr:nth-child(odd) td:first-child {
    background-color: var(--color-bg);
  }

  figure.wp-block-table table tbody tr:nth-child(even) td:first-child {
    background-color: var(--color-bg-alt);
  }

  /* Subtle shadow to indicate the column is sticky */
  figure.wp-block-table table thead th:first-child::after,
  figure.wp-block-table table tbody td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
    pointer-events: none;
  }

  figure.wp-block-table table thead th:first-child,
  figure.wp-block-table table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
}


/* ==========================================================================
   9. CTA BUTTONS
   ========================================================================== */

a.cta-button,
.money-page-cta .cta-button,
.sidebar-estimator-cta .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-height: 48px;
  min-width: 200px;
  background-color: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.cta-button:hover,
.money-page-cta .cta-button:hover,
.sidebar-estimator-cta .cta-button:hover {
  background-color: var(--color-accent-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
  text-decoration: none;
}

a.cta-button:active,
.money-page-cta .cta-button:active,
.sidebar-estimator-cta .cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}


/* ==========================================================================
   10. CALLOUT BOXES (Blockquotes)
   ========================================================================== */

/*
 * All blockquote.wp-block-quote elements get the info/methodology style.
 * TL;DR detection is not possible via CSS alone, so all blockquotes share
 * the same visual treatment (blue info callout). If a .callout-cta class
 * is added to a blockquote, it gets the orange CTA variant.
 *
 * We remove GeneratePress default blockquote styling (italic, left margin).
 */

blockquote,
blockquote.wp-block-quote {
  background-color: var(--color-bg-callout);
  border: none;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: var(--space-lg) 0;
  font-style: normal;
  font-size: inherit;
  color: var(--color-text);
}

/* Remove any GP default left margin on blockquotes */
blockquote.wp-block-quote,
.entry-content blockquote {
  margin-left: 0;
  margin-right: 0;
}

/* Blockquote inner paragraphs */
blockquote p,
blockquote.wp-block-quote p {
  margin-bottom: var(--space-sm);
}

blockquote p:last-child,
blockquote.wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* Bold text inside blockquotes (e.g., "TL;DR:", "Note:", "Methodology:") */
blockquote strong {
  color: var(--color-primary);
}

/* CTA callout variant — orange theme */
blockquote.callout-cta,
blockquote.wp-block-quote.callout-cta {
  background-color: var(--color-bg-cta);
  border-left-color: var(--color-accent);
}

blockquote.callout-cta strong {
  color: var(--color-accent);
}

/* Remove any default quote citation styling */
blockquote cite,
blockquote.wp-block-quote cite {
  font-style: normal;
  font-size: 14px;
  color: var(--color-text-secondary);
}


/* ==========================================================================
   11. CARDS
   ========================================================================== */

/*
 * Generic card component for future use (tool links, feature cards, etc.).
 * Not currently in the WordPress content but ready for Epic 5+.
 */

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.card h3 {
  margin-top: 0;
}

.card p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

/* --- Footer container --------------------------------------------------- */

.site-footer {
  background-color: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-family);
  padding: var(--space-3xl) 0 var(--space-lg);
}

/* Override GP's .inside-site-info or similar inner wrapper */
.site-footer .inside-site-info,
.site-footer .grid-container {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Footer links ------------------------------------------------------- */

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #FFFFFF;
}

/* --- Footer widget area (3-column grid on desktop) ---------------------- */

.site-footer .footer-widgets,
.footer-widgets-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.site-footer .footer-widgets .widget-title,
.footer-widgets-container .widget-title {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: var(--space-md);
}

/* --- Copyright bar ------------------------------------------------------ */

.site-footer .copyright-bar,
.site-info {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-md);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.site-info a {
  color: rgba(255, 255, 255, 0.6);
}

.site-info a:hover {
  color: #FFFFFF;
}


/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

/* --- Focus indicators --------------------------------------------------- */

/*
 * Remove browser default outline on :focus (mouse clicks).
 * Show custom outline only on :focus-visible (keyboard navigation).
 */

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Ensure CTA buttons have a visible focus ring */
a.cta-button:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Nav links focus */
.main-navigation a:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Footer links focus — lighter ring for dark background */
.site-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Screen reader only utility ----------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   14. RESPONSIVE — Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  h1,
  h1.wp-block-heading {
    font-size: 32px;
  }

  h2,
  h2.wp-block-heading,
  .money-page .entry-content h2,
  .city-page .entry-content h2 {
    font-size: 24px;
  }

  h3,
  h3.wp-block-heading {
    font-size: 20px;
  }

  /* Reduce section spacing on tablet */
  h2,
  h2.wp-block-heading,
  .money-page .entry-content h2,
  .city-page .entry-content h2 {
    margin-top: var(--space-xl);
  }

  h3,
  h3.wp-block-heading {
    margin-top: var(--space-lg);
  }

  /* Tighten article padding */
  .separate-containers .inside-article {
    padding: var(--space-lg) var(--space-md);
  }

  /* Footer widgets: 2 columns on tablet */
  .site-footer .footer-widgets,
  .footer-widgets-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   15. RESPONSIVE — Small (max-width: 640px)
   ========================================================================== */

@media (max-width: 640px) {
  /* CTA buttons go full-width */
  a.cta-button {
    display: flex;
    width: 100%;
    min-width: unset;
    text-align: center;
  }

  /* Tables: horizontal scroll handled in section 8 (768px breakpoint) */

  /* Footer widgets: single column */
  .site-footer .footer-widgets,
  .footer-widgets-container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Reduce blockquote padding */
  blockquote,
  blockquote.wp-block-quote {
    padding: 16px 20px;
  }
}


/* ==========================================================================
   16. RESPONSIVE — Extra Small (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* Further reduce padding */
  .separate-containers .inside-article {
    padding: var(--space-md) var(--space-sm);
  }

  /* Smaller site title on very small screens */
  .main-title a,
  .site-branding .main-title a {
    font-size: 20px;
  }

  /* Footer padding reduction */
  .site-footer {
    padding: var(--space-2xl) 0 var(--space-md);
  }

  /* Table cells tighter */
  figure.wp-block-table table thead th,
  figure.wp-block-table table tbody td {
    padding: 10px 12px;
    font-size: 14px;
  }

  figure.wp-block-table table thead th {
    font-size: 13px;
  }
}