/* /srv/webapps/clients/cuyahogaterravita.com/frontend/style.css */
/* Global styles only - component-specific styles are inline in component HTML files */

/* ======================================
   Base Reset & Variables
   ====================================== */

* {
  box-sizing: border-box;
}

:root {
  --page-bg: #f6f5f1;        /* overall background */
  --deep-green: #122019;     /* hero background / dark areas */
  --mid-green: #1f2c23;      /* header text / dark UI */
  --accent-green: #a6d48a;   /* CTA buttons & lines */
  --soft-cream: #e7f1e7;     /* pale green/cream sections */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--mid-green);
  line-height: 1.6;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ======================================
   Layout Helpers
   ====================================== */

.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}

.content-area {
  background: var(--page-bg);
}

.content-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* Generic vertical section spacing */
.section-block {
  padding: 56px 0;
}

/* Main content section directly under hero */
.section-block.main {
  padding-top: 24px;
}

/* Different section background variants */
.section-block.set-in {
  background: var(--page-bg);
}

.section-block.charcoal-set-in {
  background: var(--mid-green);
  color: #f5f5f5;
}

.section-block.green-set-in {
  background: var(--soft-cream);
  color: var(--mid-green);
}

.detail-link {
  color: var(--accent-green);
  font-weight: 700;
}

/* ======================================
   Responsive Adjustments
   ====================================== */

/* Large tablets / narrow desktop */
@media (max-width: 1100px) {
  .header-search {
    flex: 1 1 220px;
  }

  .weather-container {
    grid-template-columns: 1fr !important;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .header-main-row {
    flex-wrap: wrap;
  }

  .header-title-group {
    order: 3;
    width: 100%;
  }

  .header-search {
    flex: 1 1 100%;
    order: 4;
  }

  .hero-content.container {
    padding: 60px 24px;
  }

  .weather-meta {
    grid-template-columns: 1fr !important;
  }

  .content-inner {
    padding-bottom: 60px;
  }
}

/* Phones */
@media (max-width: 600px) {
  /* Make hero a bit shorter and edge-to-edge on phones */
  .hero {
    min-height: 420px !important;
    border-radius: 0 !important;
  }

  .hero-content.container {
    padding: 48px 20px !important;
  }

  /* Force one column stacks for all card grids */
  .hero-footer-section,
  .short-set-in-float,
  .long-set-in-float {
    grid-template-columns: 1fr !important;
  }

  /* Weather hourly tiles stack instead of tiny columns */
  .weather-hourly {
    grid-template-columns: 1fr !important;
  }

  /* Slightly tighter vertical spacing on mobile content sections */
  .section-block {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Keep header short even after the mobile section override */
  .page-header.section-block {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}