/* ===============================
   Normalize box model and font rendering across browsers
   =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Homepage banner - Verdana body text */
#banner {or
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  /* default desktop size (~15px) */
  line-height: 1.4;
}

/* Banner text heading */
#banner h2 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.5rem;
  /* slightly smaller than H1 */
  font-weight: normal;
  /* softer than bold H1 */
  color: #8e9f6f;

  /* soft pale yellow for readability on dark background */
  line-height: 1.3;
}


/* Button inside banner */
#banner .button-large {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  /* match banner text */
  padding: 0.5em 1em;
  line-height: 1.3;
}

/* Paragraph spacing inside banner */
#banner .col-6.col-12-medium p {
  margin-bottom: 1em;
}

/* ===================== */
/* Mobile adjustments */
@media (max-width: 600px) {
  #banner {
    font-size: 0.85rem;
    /* slightly smaller on phones */
  }

  #banner .button-large {
    font-size: 0.85rem;
    /* match banner text */
    padding: 0.4em 0.8em;
  }

  #banner .col-6.col-12-medium p {
    margin-bottom: 0.8em;
  }
}

/* Subtle banner paragraph text */
#banner .col-6.col-12-medium p {
  font-size: 1rem;
  /* normal body size */
  font-weight: normal;
  /* not bold */
  line-height: 1.6;
  /* airy, easy to read */
  color: #8e9f6f;
  /* slightly muted for less emphasis */
  margin-bottom: 1em;
}

/* Mobile adjustment */
@media (max-width: 600px) {
  #banner .col-6.col-12-medium p {
    font-size: 0.9rem;
    /* slightly smaller for small screens */
    line-height: 1.5;
  }
}


/* Mobile banner paragraph text */
@media (max-width: 600px) {
  #banner .col-6.col-12-medium p {
    font-size: 0.9rem;
    /* slightly smaller for mobile */
    line-height: 1.4;
  }
}



html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Standard */
::placeholder {
    font-family: Verdana; /* or whatever you want */
    font-size: 12px;
    font-weight: normal; /* fixes bold issue */
    color: #666; /* optional, lighter grey */
}

/* Firefox */
::-moz-placeholder {
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

/* Microsoft Edge */
::-ms-input-placeholder {
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

/* ===============================
   Navbar font normalization site-wide
   =============================== */
#nav,
#nav * {
  font-family: 'Yanone Kaffeesatz', sans-serif !important;
}

/* Navbar link styles - unified and cleaned */
#nav {
  display: flex;
  gap: 0.9rem;
  /* controls space between links */
}

#nav a {
  display: inline-block;
  padding: 0 0.3rem;
  font-weight: 200 !important;
  color: #fff !important;
  text-decoration: none;
  letter-spacing: normal;
  white-space: nowrap;
  margin: 0 !important;
}

#nav a {
  text-decoration: none !important;
  /* kill browser underline */
  border-bottom: 1px solid #fff;
  /* controlled underline */
  padding-bottom: 2px;
  font-weight: 200;
  /* not bold normally */
  transition: border-bottom-width 0.3s ease, border-bottom-color 0.3s ease, font-weight 0.3s ease;
}

#nav a:hover {
  border-bottom-width: 2px;
  /* thicker on hover */
  border-bottom-color: #00aaff;
  /* hover color */
  font-weight: 700;
  /* bold text on hover */
}

/* ===============================
   Page & Content Styling
   =============================== */

/* Subpage body background */
body.subpage {
  background-color: #eaeaea;
  margin: 0;
  padding: 0;
}

/* Container for main content */
.container.main-content {
  background-color: #ffffff;
  padding: 2em;
  margin: 2em auto;
  max-width: 1200px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Banner container */
.banner-container {
  text-align: center;
  margin-bottom: 2em;
  margin-top: 0;
  padding-top: 0;
}

.banner-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Apply Verdana ONLY to visible main content (not navbar) */
.main-content,
.main-content p,
.main-content h1,
.main-content h2,
.main-content h3,
.main-content li,
.main-content table,
.main-content blockquote,
.main-content a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* Features section text - smaller and subtle */
#features h2,
#features h2 a {
  font-size: 0.75rem;
  /* smaller heading size */
  font-weight: normal;
  /* not bold, so it doesn’t compete with image */
  line-height: 1.2;
  /* tighter spacing */
}

#features p {
  font-size: 0.65rem;
  /* small, subtle paragraph text */
  line-height: 1.3;
  color: #ccc;
  /* soft dark grey for readability */
}

/* Optional: adjust links */
#features a {
  font-size: 0.75rem;
  text-decoration: underline;
  color: #ccc;
}

#features a:hover,
#features a:focus {
  color: #145080;
}

/* Mobile adjustments */
@media (max-width: 600px) {

  #features h2,
  #features h2 a {
    font-size: 0.9rem;
  }

  #features p {
    font-size: 0.8rem;
  }
}



/* ===============================
   Typography – Senior Friendly
   =============================== */

/* Base font size and line height */
body,
.main-content {
  font-size: 1rem;
  /* ~14px */
  line-height: 1.6;
  color: #111;
  background-color: #ffffff;
}

/* Paragraph spacing */
.main-content p {
  margin-bottom: 1em;
}

/* Headings - unified h1 style here */
.main-content h1 {
  font-size: 1.75rem !important;
  /* smaller but clear */
  font-weight: 600 !important;
  /* less bold */
  color: #003366 !important;
  font-family: Verdana, sans-serif;
  margin: 0.5em 0;
}

.main-content h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.main-content h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #003366;
}

.main-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #96a9b5;
}

/* Ordered Lists (OL) */
.main-content ol {
  list-style: decimal !important;
  margin-left: 1.5em;
  padding-left: 0.5em;
  list-style-position: outside !important;
}

.main-content ol ol {
  list-style: lower-alpha !important;
  margin-left: 1.5em;
}

.main-content ol ol ol {
  list-style: lower-roman !important;
  margin-left: 1.5em;
}

/* Unordered Lists (UL) */
.main-content ul {
  list-style: disc !important;
  margin-left: 1.5em;
  padding-left: 0.5em;
  list-style-position: outside !important;
}

.main-content ul ul {
  list-style: circle !important;
  margin-left: 1.5em;
}

.main-content ul ul ul {
  list-style: square !important;
  margin-left: 1.5em;
}


/* Blockquotes */
.main-content blockquote {
  font-style: italic;
  border-left: 4px solid #000080;
  padding: 0.5em 1em;
  margin: 1em 0;
  background-color: #f9f9f9;
}

/* Strong/bold text */
strong,
.bold-text,
b {
  font-weight: bold;
}
.italic-text {
  font-style: italic;
}

em {
    font-style: italic;
}

/* Tables - base styles */
.main-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.main-content td,
.main-content th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.main-content tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Remove extra spacing at the top of main content */
.main-content>*:first-child {
  margin-top: 0;
}

/* Content images */
.main-content img.bordered-feature-image {
  margin-top: 0;
  display: block;
}

/* Space between sections */
.main-content section {
  margin-bottom: 2rem;
}
/* cards-2025 */
.whats-new-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin: 2rem auto;
}

.whats-card {
  flex: 1 1 280px;
  max-width: 420px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.whats-card h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.whats-card p {
  margin-bottom: 0;
  font-size: 0.9rem;
}


/* ===============================
   Navbar Logo Styling
   =============================== */

.navbar h1,
.site-header h1,
.logo h1 {
  all: unset;
  font-size: 2.2rem;
  /* 40px approx */
  font-weight: 200;
  /* lighter, easier on eyes */
  font-family: 'Yanone Kaffeesatz', sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0.3em 0.6em;
  display: inline-block;
  white-space: nowrap;
  max-height: 3.5rem;
  /* constrain height */
  overflow: hidden;
  /* clip overflow */
}

/* Optional constrain height */
.navbar h1 {
  max-height: 2.2rem;
  overflow: hidden;
}

/* Logo container */
#logo-container {
  display: inline-block;
  margin-right: 1rem;
}
butto
#logo {
  padding-bottom: 2px;
  /* just enough space for a neat underline */
  border-bottom: 1px solid transparent;
  /* reserve space for underline */
  transition: border-color 0.3s ease;
}

#logo:hover {
  border-color: #00aaff;
  /* nice blue underline on hover */
}


/* Header container flexbox */
#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Navbar links - horizontal and spaced (redundant removed) */
#nav {
  display: flex;
  gap: 0.9rem;
}

/* Navbar link base styles handled above */

/* ===============================
   Buttons
   =============================== */

.navy-button {
  background-color: #003366;
  color: white !important;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none !important;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
}

.navy-button:hover,
.navy-button:focus {
  background-color: #003366;
  outline: none;
}
/* dec2025 */
.start-here-btn {
  display: inline-block;
  background-color: #142038; 
  color: #ffffff;
  padding: 6px 20px;
  font-family: Verdana, sans-serif;
  font-size: 0.95em;
  text-decoration: underline; /* remove underline on button */
  border-radius: 6px;
  margin-bottom: 6px;
}

.start-here-btn:visited,
.start-here-btn:active,
.start-here-btn:hover {
  color: #ffffff;
}

.start-here-btn:hover {
  background-color: #1a2b4c; /* navy */
}

.start-here-tagline {
  display: block;
  font-family:Yanone Kaffeesatz;
  font-size: 0.95em;
  color: #ffffff;
}

/* ===============================
   Content Images
   =============================== */

#content>img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  display: block;
}

/* ===============================
   Universal H1 style override removed (handled above) 
   =============================== */

/* ===============================
   Main content link colors (red links)
   =============================== */
.main-content a {
  color: red;
}

/* ===============================
   Block section styling
   =============================== */

.block-section {
  font-family: Verdana, Arial, sans-serif;
  background-color: #ffffff;
  border: 1px solid #d3dce3;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.block-section:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Content area */
.content-area {
  font-family: Verdana, sans-serif;
}

.content-area h3 {
  color: #96a9b5;
}

/* ===============================
   Responsive adjustments
   =============================== */

@media (max-width: 600px) {
  .navbar h1 {
    font-size: 1.25rem;
  }
}

/* ===============================
   Scrollable Tables (new wrapper for all tables that need horizontal scroll)
   =============================== */

/* Wrapper div for tables to enable horizontal scrolling */
.table-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* smooth scroll on iOS */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* auto-hide scrollbars in IE/Edge */
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: #888 #f1f1f1;
  /* Firefox */
  border: 1px solid #ccc;
  padding: 0.5em;
  box-sizing: border-box;
  margin: 0 auto;
  /* center */
}

/* Scrollbar styling for WebKit */
.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Tables inside scroll wrapper */
.table-wrapper table {
  min-width: 600px;
  /* Minimum width so columns don't shrink */
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  /* Prevent max width restriction */
  margin: 0 auto;
}

/* Table header styling */
.table-wrapper table th {
  background-color: #003366 !important;
  color: white !important;
  padding: 8px;
  white-space: nowrap;
}

/* ===============================
   Unlock overflow for flex/grid containers to allow scroll on mobile
   =============================== */

#content,
#content>div,
#content>div>div,
#content>div>div>div,
.row,
.col-12-medium {
  overflow-x: visible !important;
  min-width: 0 !important;
}

/* ===============================
   Page scroll control
   =============================== */
html,
body {
  overflow-x: hidden;
  /* no horizontal scrollbar */
  overflow-y: auto;
  /* single vertical scrollbar */
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ===============================
  Google Ad styles (contained, responsive)
  =============================== */
.google-ad {
  /* BACKGROUND: Consistent background */
  background-color: #fff; 
  
  /* SPACING: External breathing room (2em = 2x the font size) */
  margin: .5em 0; 
  
  /* PADDING: Internal space around the ad */
  padding:0 0; 
  
  /* ALIGNMENT: Centers the ad unit inside this container */
  text-align: center; 
  
  /* MAX SIZE: Optional: sets a max height for very tall ads (300x600) */
  max-height: 600px; 
}

/* Centers ad ins element and makes responsive */
.google-ad ins.adsbygoogle {
  /* DISPLAY: Helps with centering */
  display: inline-block; 
  
  /* ALIGNMENT: Works with text-align: center on the parent */
  margin: 0 auto; 
  
  /* RESPONSIVENESS: Ensures it doesn't spill out horizontally */
  max-width: 100%; 
}

/* ===============================
   Page scroll control
   =============================== */
html,
body {
  overflow-x: hidden;
  /* no horizontal scrollbar */
  overflow-y: auto;
  /* single vertical scrollbar */
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ===============================
   Page wrapper for sticky footer
   =============================== */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* ensures footer sticks at bottom */
}

#content {
  flex: 1;
  /* content grows to fill remaining space */
}

footer {
  flex-shrink: 0;
  /* footer won’t shrink or get pushed */
}

/* ===============================
   Extra containment for injected ad divs/iframes
   =============================== */
.google-ad>div,
.google-ad>iframe {
  max-height: 100%;
  overflow: hidden;
}

/* ===============================
   Page wrapper for sticky footer
   =============================== */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* ensures footer sticks at bottom */
}

#content {
  flex: 1;
  /* content grows to fill remaining space */
}

footer {
  flex-shrink: 0;
  /* footer won’t shrink or get pushed */
}

/* ===============================
   Extra containment for injected ad divs/iframes
   =============================== */
.google-ad>div,
.google-ad>iframe {
  max-height: 100%;
  overflow: hidden;
}


/* ===============================
   Page scroll control
   =============================== */
html,
body {
  overflow-x: hidden;
  /* no horizontal scrollbar */
  overflow-y: auto;
  /* single vertical scrollbar */
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ===============================
   Page wrapper for sticky footer
   =============================== */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* ensures footer sticks at bottom */
}

#content {
  flex: 1;
  /* content grows to fill remaining space */
}

footer {
  flex-shrink: 0;
  /* footer won’t shrink or get pushed */
}

/* ===============================
   Extra containment for injected ad divs/iframes
   =============================== */
.google-ad>div,
.google-ad>iframe {
  max-height: 100%;
  overflow: hidden;
}



/* ===============================
   Page scroll control
   =============================== */
html,
body {
  overflow-x: hidden;
  /* prevent horizontal scrollbar */
  overflow-y: auto;
  /* single vertical scrollbar */
  height: 100%;
  /* full viewport height */
  margin: 0;
  padding: 0;
}

/* ===============================
   Page wrapper for sticky footer
   =============================== */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* ensures footer sticks to bottom */
}

#content {
  flex: 1;
  /* grows to fill remaining space */
}

footer {
  flex-shrink: 0;
  /* footer won’t shrink or get pushed */
}

/* ===============================
   Optional: extra containment for any injected ad divs
   =============================== */
.google-ad>div,
.google-ad>iframe {
  max-height: 100%;
  overflow: hidden;
}


/* ===============================
   Details/Summary styling
   =============================== */

details {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1em;
  padding: 0.5em 1em;
}

summary {
  font-weight: bold;
  cursor: pointer;
}

/* === HEADER ALIGNMENT FIX (FORCE CENTER) === */
#header .container .row .col-12 {
  display: flex !important;
  align-items: center !important;
  /* vertical centering */
  justify-content: space-between !important;
  /* space logo/nav */
}

/* Force logo to not be bold */
#logo {
  font-size: 2.0rem;
  line-height: 1;
  font-weight: 300 !important;
  /* normal weight */
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  /* centers text vertically in its box */
}

/* Nav alignment */
#nav {
  display: flex;
  align-items: center;
  /* match vertical centering */
  gap: 1.2rem;
}

#nav a {
  padding: 0.2rem 0;
}

#nav {
  display: flex;
  align-items: center;
  /* align with logo */
  gap: 1.2rem;
}

#nav a {
  display: flex;
  align-items: center;
  /* vertical center text inside link */
  font-weight: 300 !important;
  /* normal weight for better readability */
  line-height: 1.2 !important;
  padding: 0.2rem 0 !important;
}

/* === NAVBAR HEIGHT FIX === */
#logo-container,
#nav {
  padding-top: 0.0em !important;
  padding-bottom: 0.0em !important;
}

#nav a {
  padding-top: 0.0em !important;
  padding-bottom: 0.1em !important;
}

/* Hero Section H1 - darker navy */
/* Hero Section H1 - darker navy */
.hero h1 {
  font-size: 1.8em;
  line-height: 1.2;
  color: #003366;
  /* darker navy blue */
  margin-bottom: 0.5em;
}

.hero-banner {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.hero-banner img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;


/* Tips Section - keep accent consistent */
.tips {
  background-color: #f9f9f9;
  padding: 1.2em;
  border-left: 4px solid #003366;
  /* match darker navy */
  margin-bottom: 1.5em;
  border-radius: 4px;
}

/* Ensure body and main content don’t overflow */}
.hero img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(60%);
}

.hero {
  margin-bottom: 20px;
}
body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* prevent horizontal scroll */
}

/* Make footer content responsive */
footer#footer {
  width: 100%;
  box-sizing: border-box;
  /* ensures padding doesn’t create extra width */
}

/* Container inside footer */
footer#footer .container {
  max-width: 1200px;
  /* optional: same as main container */
  margin: 0 auto;
  padding: 1em;
}

/* Footer links */
footer#footer ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

footer#footer li {
  margin-bottom: 0.5em;
}

/* Make images inside footer scale properly */
footer#footer img {
  max-width: 100%;
  height: auto;
}

.container.content-area {
  max-width: 1200px;
  /* increase width */
  margin: 0 auto;
  /* keep centered */
  padding: 0 1.5em;
  /* balance left/right spacing */
}

.content-area {
  background: #fff;
  padding: 20px;
}

.banner img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  height: auto;
}

.hero {
  margin-bottom: 20px;
}

.date-updated {
  font-size: 0.9rem;
  color: #666;
  margin-top: 20px;
}

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

.content-area,
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Fix gap below navbar and remove rounded corners */
main,
#content .container {
  margin-top: 0;
  padding-top: 0;
}

.content-area {
  border-radius: 0 !important;
}

.container,
.content-area,
section {
  border-radius: 0 !important;
}

#content>.container>.row>.col-12>img {
  margin-top: 30px;
  /* adjust as needed */
}

/* Section background & padding */
#tools-seasonal {
  background: #fff;
  padding: 2.6em 0;
}

/* Flex container for the two cards */
#tools-seasonal .two-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
}

/* Card styling */
.highlight-card {
  flex: 1 1 300px;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.hero-image {
  position: relative;
  width: 100%;
  height: 400px;
  /* adjust for all your text/blocks */
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image .overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.hero-image .blocks {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.hero-image .block {
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  border-radius: 8px;
}

/* Card section */
#soil-amendments-cards {
  margin-bottom: 3rem;
  /* space below the section */
  padding: 1rem;
  /* padding inside the section */
  background-color: #ffffff;
  /* white background behind the cards */
  border-radius: 8px;
  /* optional: round corners */
  box-sizing: border-box;
}

/* Card grid container */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  /* space between cards */
  margin: 0;
  /* remove default margin */
}

/* Individual cards */
.card {
  flex: 1 1 200px;
  /* grow, shrink, min width 200px */
  background-color: #ffffff;
  padding: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Card links */
.card a {
  text-decoration: underline;
  color: inherit;
}

.card h2 {
  margin-top: 0;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .card-grid {
    flex-direction: column;
  }
}

.card-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
}

.table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.95rem;
  border: 1px solid #0b2545;
  /* navy border around table */
}

.table-wrap th,
.table-wrap td {
  border: 1px solid #0b2545;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

/* Navy header with white text */
.table-wrap thead th {
  background-color: #0b2545;
  color: #ffffff;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Alternate row shading */
.table-wrap tbody tr:nth-child(even) {
  background-color: #f3f4f6;
}

/* Scroll wrapper for mobile */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
}

/* Responsive table container */
.table-container {
  overflow-x: auto;
  margin: 1.5rem 0;
}

/* Table base style */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Table borders */
.responsive-table th,
.responsive-table td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Header row: navy background, white text */
.responsive-table thead th {
  background-color: #00274d;
  /* your site navy */
  color: #fff;
  font-weight: bold;
}

/* Zebra striping for rows */
.responsive-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.hero-image {
  position: relative;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-image img {
  width: 100%;
  display: block;
  filter: brightness(60%);
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 1rem;
  width: 90%;
}

.overlay h1 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000000;
  /*color: #0b2545;*/
  /* navy */
}

.overlay p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.block {
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  border-radius: 12px;
  flex: 1 1 200px;
  min-width: 180px;
  font-size: 1rem;
  line-height: 1.4;
}

.block.peat {
  border-left: 4px solid #0b2545;
}

.block.coir {
  border-left: 4px solid #15616d;
}

@media(max-width: 600px) {
  .blocks {
    flex-direction: column;
  }

  .overlay h1 {
    font-size: 1.8rem;
  }

  .overlay p {
    font-size: 1rem;
  }
}

.soil-nugget {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}

.soil-nugget h3 {
  color: #083b74;
  /* your navy blue headers */
  margin-bottom: 0.5rem;
}

.soil-nugget p {
  line-height: 1.5;
  margin: 0.3rem 0;
}

.content-area {
  font-family: Verdana, sans-serif;
}

.content-area h3 {
  color: #96a9b5;
}

.navy-button {
  background-color: #003366;
  color: white !important;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none !important;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
}

.navy-button:hover,
.navy-button:focus {
  background-color: #003366;
  outline: none;
}

#content>img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  display: block;
}

/* Button style for <a class="button"> links */
a.button {
  display: inline-block;
  background-color: #2c3e50;
  color: #fff !important;
  padding: 0.6em 1.2em;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

a.button:hover {
  background-color: #1e2a35;
}

/* Optional smaller size */
a.button.small {
  font-size: 0.9rem;
  padding: 0.4em 1em;
}

.content-area {
  font-family: Verdana, sans-serif;
}

.content-area h3 {
  color: #96a9b5;
}

.navy-button {
  background-color: #003366;
  color: white !important;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none !important;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
}

.navy-button:hover,
.navy-button:focus {
  background-color: #003366;
  outline: none;
}

#content>img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  display: block;
}

p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.875em;
  /* 14px/16=0.875em */
}

h2 {
  display: block;
  font-size: 1.875em;
  /* 30px/16=1.875em */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: 0.83em;
  margin-bottom: 0.33em;
  margin-left: 0;
  margin-right: 0;
}

h3 {
  display: block;
  font-size: 1.5em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: 1em;
  margin-bottom: 0.13em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

img {
  width: 100%;
  height: auto;
}

b {
  font-weight: bold;
}

/* Responsive video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Force flexbox columns in this row, no floats */
#content .row.duo-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2rem;
  /* space between columns */
}

#content .row.duo-flex>.col-6 {
  float: none !important;
  /* stop Halcyonic float */
  margin: 0 !important;
  /* remove float margins */
  width: auto !important;
  /* let flex control size */
  flex: 1 1 480px;
  /* two columns, shrink on mobile */
  max-width: 100%;
}

/* Give both column cards a consistent background */
.column-card {
  background: #1c1c1c;
  /* dark grey to match site theme */
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  height: 100%;
  /* stretch to equal height in flexbox */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Responsive 16:9 video container */
.video-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 ratio */
  background: #ffffff;
  /* fallback background behind video */
  border-radius: 8px;
  overflow: hidden;
}

.video-16x9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Make content row flex and equal height columns */
#content .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2em;
  /* optional spacing between columns */
}

/* Left column boxes */
#tools-seasonal .inner-box {
  flex: 1 1 300px;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Video container responsive */
.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* keeps 16:9 ratio */
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Optional: adjust column widths for medium and small screens */
@media (max-width: 960px) {
  #content .col-6 {
    flex: 1 1 100%;
  }
}

/* Parent row: make left & right columns equal height */
#content .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: stretch;
  /* stretch children to same height */
}

/* Left column inner container */
#tools-seasonal .container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  /* fill the col-6 height */
}

/* Individual boxes stretch equally */
#tools-seasonal .inner-box {
  flex: 1;
  /* fill remaining space */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1em;
  /* space between stacked boxes if needed */
}

/* Make left column boxes side by side */
#tools-seasonal .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}

/* Individual boxes */
#tools-seasonal .inner-box {
  flex: 1 1 300px;
  /* grow/shrink, min-width 300px */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Container for both columns */
#content .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: stretch;
  /* make children equal height */
}

/* Left column: Tools & Seasonal Highlights */
#tools-seasonal {
  flex: 1 1 45%;
  /* grow/shrink, almost half page */
  background: #ffffff;
  padding: 2.6em 1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Individual boxes inside left column */
#tools-seasonal .container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

#tools-seasonal .inner-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Right column: Video */
#content .video-column {
  flex: 1 1 45%;
  /* grow/shrink, almost half page */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Make video responsive */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ensure the row is a flex container */
.two-column-layout {
  display: flex;
  gap: 2em;
  align-items: stretch;
  /* make left column match video height */
  flex-wrap: wrap;
  /* responsive for small screens */
}

/* Left column */
#tools-seasonal {
  flex: 1 1 300px;
  /* flexible but min width 300px */
  max-width: 500px;
  /* adjust as needed */
  background: #ffffff;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2em;
}

/* Inner boxes inside left column */
#tools-seasonal .inner-box {
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Right column: video */
.video-column {
  flex: 2 1 460px;
  /* take more space than left column */
  max-width: 700px;
  /* optional max width */
  display: flex;
  flex-direction: column;
}

/* Video container responsive */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Garden popup styling */
#garden-popup {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #ffffff;
  color: #2f2f2f;
  border: 2px solid rgb(11, 11, 118);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  padding: 16px 24px;
  max-width: 420px;
  z-index: 9999;
  font-family: Georgia, serif;
  display: none;
}

.popup-button {
  background: #2c3e50;
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
  margin-top: 10px;
  font-size: 1rem;
}

#popup-close {
  background: none;
  border: none;
  font-size: 1.2em;
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  color: #666;
}

/* Tip of the Month Banner */
#monthly-tip-banner {
  z-index: 1000;
  background: #000000;
  color: #ffffc0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 1.0em 1em;
  text-align: left;
  border-bottom: 2px solid #ffffc0;
  border-top: 2px solid #ffffc0;
  box-sizing: border-box;
  width: 100%;
}

#monthly-tip-banner .inner {
  padding-top: 1em;
}

#monthly-tip-banner a {
  color: #ffffff;
  text-decoration: underline;
}

#monthly-tip-banner a:hover,
#monthly-tip-banner a:focus {
  color: #ffffff;
}

/* Optional inner wrapper for centered content */
#monthly-tip-banner .inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Force cards & video to take full width on small screens */
@media (max-width: 768px) {

  #tools-seasonal,
  .video-column,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    /* center nicely */
  }

  /* Make video responsive */
  .video-container iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    /* keeps nice proportions */
  }
}

/* Responsive video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Garden popup styling */
#garden-popup {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #ffffff;
  color: #2f2f2f;
  border: 2px solid rgb(11, 11, 118);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  padding: 16px 24px;
  max-width: 420px;
  z-index: 9999;
  font-family: Georgia, serif;
  display: none;
}

.popup-button {
  background: #2c3e50;
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
  margin-top: 10px;
  font-size: 1rem;
}

#popup-close {
  background: none;
  border: none;
  font-size: 1.2em;
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  color: #666;
}

/* Tip of the Month Banner */
#monthly-tip-banner {
  z-index: 1000;
  background: #000000;
  color: #ffffc0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0em 1em;
  text-align: left;
  border-bottom: 2px solid #ffffc0;
  border-top: 2px solid #ffffc0;
  box-sizing: border-box;
  width: 100%;
}

#monthly-tip-banner .inner {
  padding-top: 0em;
}

#monthly-tip-banner a {
  color: #ffffff;
  text-decoration: underline;
}

#monthly-tip-banner a:hover,
#monthly-tip-banner a:focus {
  color: #ffffff;
}

/* Optional inner wrapper for centered content */
#monthly-tip-banner .inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Body text below banner */
#content,
#content p,
#content h2,
#content h3,
#content li {
  font-family: Verdana, Arial, sans-serif;
  /* consistent readable font */
  color: #2c2c2c;
  /* dark grey instead of bright white */
  line-height: 1.5;
}

/* Optional: slightly smaller for mobile */
@media (max-width: 600px) {

  #content,
  #content p,
  #content h2,
  #content h3,
  #content li {
    font-size: 0.95rem;
  }
}

/* Outer container */
.content-container {
  display: flex;
  gap: 2em;
  align-items: stretch;
  /* make both columns same height */
  margin: 2em 0;
  flex-wrap: wrap;
  /* stack on small screens */
}

/* Columns */
.content-column {
  flex: 1 1 300px;
  /* grow/shrink, min 300px */
  box-sizing: border-box;
  padding: 1em;
}

/* Left column: white background */
.left-column {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* Cards inside left column */
.left-column .card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Right column: dark background */
.right-column {
  background: #2c2c2c;
  color: #ffffff;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically center video */
}

/* Video container responsive */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video column headings and links */
.video-column h2 {
  color: #8ebf4f !important;
  /* your green */
}

.video-column a {
  color: #a3d977 !important;
  /* lighter green */
  text-decoration: underline !important;
}

.left-column p {
  font-size: 0.9rem;
}

/* On small screens, stack columns */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }
}

.white-wrapper {
  background: #ffffff;
  padding: 2em;
}

/* Flex container: side-by-side columns */
.content-container {
  display: flex;
  gap: 2em;
  align-items: stretch;
  /* make columns same height */
  flex-wrap: wrap;
  /* responsive stacking on small screens */
}

/* Left Column */
.left-column {
  flex: 1 1 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.left-column .card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.left-column .card h2 {
  font-size: 1.2rem;
  /* smaller */
  margin-bottom: 0.5em;
}

.left-column .card a {
  color: #cc0000;
  /* red links */
  text-decoration: underline;
}

/* Right Column */
.right-column {
  flex: 2 1 500px;
  background: #222222;
  /* dark background */
  color: #ffffff;
  padding: 1em;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.right-column h2 {
  font-size: 1.5rem;
  font-color: #8e9f6f;
  /* smaller than before */
  margin-bottom: 1em;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 ratio */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-container {
  display: flex;
  gap: 2em;
  align-items: stretch;
  /* same height */
  flex-wrap: wrap;
}

/* Make both columns equal width */
.left-column,
.right-column {
  flex: 1 1 0;
  /* equal width */
  max-width: 50%;
  /* optional, ensures side-by-side on large screens */
}

/* Reduce spacing between cards */
.left-column .card {
  margin-bottom: 0.8em;
  /* was likely 1.5–2em before */
  padding: 0.8em 1em;
  /* tighten internal spacing */
}

/* Keep card headings neat */
.left-column .card h2 {
  font-size: 1.2em;
  /* shrink slightly */
  margin-bottom: 0.4em;
}

.left-column .card p {
  font-size: 0.95em;
  margin: 0;
}

/* Right column video container */
.right-column .video-container {
  width: 100%;
  aspect-ratio: 16/9;
  /* keeps proper video ratio */
  background: #222;
  /* fallback if video doesn't load */
  border-radius: 8px;
  overflow: hidden;
}

.right-column h2 {
  font-size: 1.3em;
  line-height: 1.4;
  margin-bottom: 0.8em;
}

/* Make the two columns flex nicely */
.content-container {
  display: flex;
  gap: 1.5em;
  /* space between columns */
  align-items: flex-start;
}

/* Desktop: 2 equal columns */
.left-column,
.right-column {
  flex: 1;
  min-width: 0;
  /* prevents overflow */
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .left-column,
  .right-column {
    width: 100%;
  }

  .right-column .video-container {
    aspect-ratio: 16/9;
    /* keeps video looking right */
    height: auto;
  }
}

/* --- Option 1: Simple extra space under video --- */
.video-container {
  margin-bottom: 20px;
  /* adjust this number until it feels balanced */
}

/* --- Option 2: Equal column heights using flex --- */
.content-container {
  display: flex;
  align-items: stretch;
  /* makes left + right columns same height */
}

/* Make sure columns don’t break on small screens */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
    /* stacks nicely on phones */
  }
}
/* Make sure columns don’t break on small screens */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
    /* stacks nicely on phones */
  }

  /* Ensure logo stays in place and properly visible */
  #index-logo {
    order: 0;  /* Keep logo at the top */
    margin: 0 auto; /* Optional: center the logo */
  }

  #logo-img {
    width: 100px;  /* Adjust logo size on mobile */
    max-width: 100%;  /* Ensure logo is responsive */
    height: auto; /* Maintain aspect ratio */
  }
}


.card {
  display: block !important;
  flex: unset !important;
}

#banner h2 {
  text-shadow: none !important;
  color: #ffffc0;
  /* or whatever contrasts with your background */
}

.card h2 {
  text-shadow: none !important;
  color: #222;
  /* crisp dark text */
}

#banner p,
.card p {
  text-shadow: none !important;
  color: #333;
  /* adjust for contrast */
}

/*#monthly-tip-banner a:hover,*/
/*#monthly-tip-banner a:focus {*/
/*   color: #ffffff;*/
/*}*/

/* Wrapper to isolate this section from other layouts */
.cg-safe-wrapper {
  width: 100%;
  padding: 2em 1em;
  box-sizing: border-box;
}

/* Flex row for side-by-side layout */
.cg-safe-wrapper .cg-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
  max-width: 1200px;
  /* centers & prevents super wide stretch */
  margin: 0 auto;
}

/* Columns: each takes half on desktop */
.cg-safe-wrapper .cg-column {
  flex: 1 1 45%;
  min-width: 300px;
}

/* Card styling */
.cg-safe-wrapper .cg-card {
  background-color: #fff;
  padding: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5em;
}

/* Responsive video */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
  .cg-safe-wrapper .cg-row {
    flex-direction: column;
  }

  .cg-safe-wrapper .cg-column {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==============================
   Cards + Video Section Fixes
============================== */
/* --- Fixes for Cards + Video Wrapper --- */
.cg-safe-wrapper {
  background-color: #ffffff !important;
  /* no black background */
  color: #000000;
  /* ensure text readable */
}

/* Crisp text rendering */
.cg-safe-wrapper,
.cg-safe-wrapper .cg-card {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Card links - red, underlined */
.cg-safe-wrapper .cg-card a {
  color: #cc0000 !important;
  /* red links */
  text-decoration: underline !important;
  font-weight: bold;
}
/* WHAT'S NEW – card layout */
.whats-new-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin: 2em auto;
  max-width: 1200px;
}

.whats-card {
  flex: 1 1 300px;
  max-width: 420px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.2em;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.06);
}

.whats-card h2 {
  margin-top: 0;
}

.cg-safe-wrapper .cg-card a:hover {
  color: #990000;
  /* darker red on hover */
}

/* Reset card text to be clean and readable */
.cg-card {
  font-weight: normal !important;
  text-shadow: none !important;
  color: #333 !important;
  /* softer black for easier reading */
}

/* Links inside cards */
.cg-card a {
  color: red !important;
  text-decoration: underline;
  /* keep accessibility underline */
  font-weight: normal !important;
  text-shadow: none !important;
}

/* Keep card <h2> headings smaller than site <h1> */
.cg-card h2 {
  font-size: 1rem !important;
  /* adjust as needed */
  /*font-weight: bold;*/
  color: red !important;
  /* matches your link color */
  margin-bottom: 0.5em;
  text-shadow: none !important;
}

/* Flex row for two columns (cards + video) */
.cg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* spacing between columns */
  align-items: flex-start;
}

/* Each column should share available space */
.cg-column {
  flex: 1 1 50%;
  /* 50% width on desktop, flexible */
  min-width: 300px;
  /* ensures they don’t shrink too small */
  box-sizing: border-box;
}

/* Cards styling */
.cg-card {
  background: #fff;
  padding: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .cg-row {
    flex-direction: column;
  }
}

/* Row with two columns */
.cg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* Columns side by side */
.cg-column {
  flex: 1 1 50%;
  min-width: 300px;
  box-sizing: border-box;
}

/* Cards */
.cg-card {
  background: #fff;
  padding: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Responsive video */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .cg-row {
    flex-direction: column;
  }
}

/* Row with two columns */
.cg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* Columns side by side */
.cg-column {
  flex: 1 1 50%;
  min-width: 300px;
  box-sizing: border-box;
}

/* Cards */
.cg-card {
  background: #fff;
  padding: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Responsive video */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .cg-row {
    flex-direction: column;
  }
}

.video-column header h2 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.2rem;
  /* smaller */
  font-weight: normal;
  /* no bold */
  /*color: #8e9f6f;*/
  /* plain readable color */
  text-shadow: none;
  /* removes any theme shadow */
  margin-bottom: 0.5em;
}

.banner-link {
  color: #ffffc0 !important;
  text-decoration: underline;
  font-weight: normal;
}

.banner-link:hover,
.banner-link:focus {
  color: #ff6666 !important;
}

#tip-text a {
  color: #ffffc0 !important;
  /* Light yellow for dark background */
  text-decoration: underline;
  font-weight: normal;
}

#tip-text a:hover,
#tip-text a:focus {
  color: #ff6666 !important;
  /* Light red on hover */
}

#season-banner {
  border: 1px solid #ccc;
  /* soft grey border */
  border-radius: 4px;
  /* optional, for rounded edges */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* subtle depth */
}
/* ==============================
   Universal responsive table
   ============================== */
.table-forcing {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    margin: 1em 0;
    background-color: #ffffff;
    font-family: Verdana, sans-serif;
    overflow-x: auto;
    display: block; /* allows horizontal scroll on small screens */
}

/* Table headers */
.table-forcing th {
    border: 1px solid #ccc;
    padding: 0.5em;
    text-align: left;
    background-color: #001f4d; /* navy */
    color: #ffffff;             /* white text */
    font-weight: bold;
}

/* Table cells */
.table-forcing td {
    border: 1px solid #ccc;
    padding: 0.5em;
    word-wrap: break-word;
    transition: background-color 0.2s ease; /* smooth hover effect */
}

/* Alternate row colors */
.table-forcing tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover effect */
.table-forcing tr:hover td {
    background-color: #e6f0ff; /* subtle light blue on hover */
}
/* ================================
   Call to Action Button Styling
   ================================ */

    .cta-button {
      display: inline-block;
      background-color: #002d5d;
      /* Deep navy blue */
      color: #ffffff !important;
      /* Force white text */
      padding: 0.75em 1.5em;
      font-size: 1.125rem;
      /* ~18px */
      text-align: center;
      text-decoration: underline !important;
      border-radius: 8px;
      font-family: 'Verdana', sans-serif;
      transition: background-color 0.3s ease, transform 0.2s ease;
      border: none;
      cursor: pointer;
    }

    /* Apply to all link states to prevent red/white issues */
    .cta-button:link,
    .cta-button:visited,
    .cta-button:hover,
    .cta-button:focus,
    .cta-button:active {
      background-color: #2c3e50;
      /* Slightly lighter navy on hover/focus */
      color: #ffffff !important;
      /* Always white text */
      text-decoration: underline !important;
      outline: none;
      transform: translateY(-2px);
    }

    .accordion-item {
      border-bottom: 1px solid #ccc;
      margin-bottom: 0.5em;
    }

    .accordion-item input[type="checkbox"] {
      display: none;
    }

    .accordion-item label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1em;
      font-weight: ;
      background: #ccc;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid #ccc;
      text-decoration: underline;
      font-size: 1.1em;
      color: #0645ad;
      /* common link blue */
    }

    .accordion-item label::after {
      content: "▼";
      font-size: 1em;
      margin-left: 0.5em;
      color: #0645ad;
      transition: transform 0.3s ease;
    }

    /* When expanded: change arrow to up or rotate */
    .accordion-item input[type="checkbox"]:checked~label::after {
      content: "▲";
    }

    /* Hover effect: underline stays, background changes */
    .accordion-item label:hover {
      background-color: #d4e1f0;
      text-decoration: underline;
    }

    /* Accordion content panel */
    .accordion-item .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 1em;
      background: #fafafa;
    }

    /* Show content when checkbox is checked */
    .accordion-item input[type="checkbox"]:checked~.content {
      max-height: 1000px;
      padding: 1em;
    }

    /* Responsive table wrapper */
    .responsive-table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1em;
    }

    .accordion-item label {
      color: black;
      /* black link text */
      text-decoration: underline;
    }

    .accordion-item label::after {
      color: black;
      /* black arrow */
    }

    .content-area {
      font-family: Verdana, sans-serif;
    }

    .content-area h3 {
      color: #96a9b5;
    }

    #logo-container {
      /* Optional: to mimic spacing or block display */
      display: inline-block;
      margin-right: 1rem;
      /* spacing between logo and nav */
    }

    #logo {
      font-family: 'Yanone Kaffeesatz', sans-serif;
      font-weight: 200;
      /* or 200/400 as preferred */
      font-size: 2.2em;
      /* logo size */
      color: #ffffff;
      /* brand color */
      text-decoration: none;
      padding: 0.5em 0.5em;
      display: inline-block;
    }

    #logo:hover {
      color: #00aaff;
      text-decoration: underline;
    }

/* Desktop logo spacing fix */
/* Desktop logo vertical alignment with navbar links */
@media screen and (min-width: 769px) {
    #header #logo {
        display: inline-block;
        vertical-align: middle;
        padding: 1.2em 0 0 0; /* push down from top */
        margin: 0;
    }

    #header #logo a {
        line-height: normal;
        font-size: 2.2rem;
        color: #ffffff;
        font-weight: 200;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        text-decoration: none;
    }
}

    /* Make header container a flexbox */
    #header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* logo left, nav right */
      flex-wrap: wrap;
      /* wrap on small screens */
    }

    /* Make nav links horizontal and tighten spacing */
    #nav {
      display: flex;
      gap: 0;
      /* remove gap, rely on padding */
    }

    #nav a {
      display: inline-block;
      padding: 0 0.15rem;
      /* tighter left/right padding */
      font-weight: 200;
      color: #ffffff;
      text-decoration: none;
      letter-spacing: 0.08em;
      /* tighten letters */
      white-space: nowrap;
      /* prevent wrapping */
      margin: 0 !important;
      /* remove any margin */
    }

    #nav {
      display: flex;
      gap: 0.9rem;
      /* controls space between links */
    }

    #nav a {
      padding: 0 0.3rem;
      /* space inside each link */
      margin: 0;
      /* make sure no extra margin */
      letter-spacing: normal;
      /* reset letter spacing */
    }

    #nav a:hover {
      text-decoration: underline;
    }

    .main-content h1 {
      font-size: 1.8rem !important;
      font-weight: 600 !important;
      margin: 0.5em 0 !important;
      color: #003366 !important;
    }

    .navy-button {
      background-color: #003366;
      color: white !important;
      padding: 0.6em 1.2em;
      border-radius: 4px;
      text-decoration: none !important;
      display: inline-block;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: none;
    }

    .navy-button:hover,
    .navy-button:focus {
      background-color: #003366;
      outline: none;
    }

    #content>img {
      width: 100%;
      height: auto;
      max-height: 350px;
      object-fit: cover;
      display: block;
    }

    /* === UNIVERSAL H1 STYLE OVERRIDE === */
    h1 {
      font-size: 1.8em !important;
      font-weight: 200 !important;
      margin: 0.5em 0 !important;
      color: #003366 !important;
      font-family: Verdana, sans-serif;
      /* match your body font */
    }

    .main-content a {
      color: red;
    }

    .block-section {
      font-family: Verdana, Arial, sans-serif;
      /* lock in readable font */
      background-color: #ffffff;
      border: 1px solid #d3dce3;
      border-radius: 8px;
      padding: 1.5rem 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.3s ease;
    }

    .block-section:hover {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;
      cursor: pointer;
      /* Optional: hints it's interactive */
    }
	/* ==== cg-accordion UNIVERSAL ====  */
/* Accordion header styling */
.cg-accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #888;   /* visible border */
    background-color: #f9f9f9;
    margin-bottom: 5px;        /* space between header and content */
    font-size: 1em;
}

.cg-accordion-header::after {
    content: "►";
    font-size: 0.9em;
}

.cg-accordion-header.active::after {
    content: "▼";
}

.cg-accordion-content {
    display: none;
    padding: 10px 15px;
    border: 1px solid #ccc;  /* optional, for a “boxed” look */
    margin-bottom: 10px;
}
/* == accordion == changes */
.cg-accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #888;
    background-color: #f9f9f9;
    margin-bottom: 5px;
    font-size: 1em;
}

/* Arrow stays the same */
.cg-accordion-header::after {
    content: "►";
}

.cg-accordion-header.active::after {
    content: "▼";
}


	
/* ==============================
   Responsive / Mobile /table forcing - resize
   ============================== */
@media screen and (max-width: 768px) {
    .table-forcing thead {
        display: none; /* hide headers */
    }
    .table-forcing tr {
        display: block;
        margin-bottom: 1em;
        border-bottom: 2px solid #001f4d;
    }
    .table-forcing td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        padding-left: 50%;
    }
    .table-forcing td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 0.5em;
        font-weight: bold;
        text-align: left;
        color: #001f4d; /* navy for labels */
    }
	/* Table forcing - responsive for 4 columns */
.table-forcing {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.table-forcing th,
.table-forcing td {
    border: 1px solid #555;
    padding: 0.5em 0.75em;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .table-forcing thead {
        display: none; /* hide headers on small screens */
    }

    .table-forcing tr {
        display: block;
        margin-bottom: 1em;
        border-bottom: 2px solid #001f4d;
    }

    .table-forcing td {
        display: block;
        text-align: left;
        border: none;
        border-bottom: 1px solid #ccc;
        padding-left: 0.5em;
        position: relative;
    }

    /* Add labels for stacked cells */
    .table-forcing td::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 40%;
        color: #001f4d;
    }

	
/* =====================================
   Fix for "Menu" visibility and placement
   ===================================== */

/* Hide "Menu" on desktop */
.navPanelToggle {
  display: none;
}

/* ==============================
   5. CHECKLIST / PRINT STYLES
   ============================== */
.print-btn {
    background-color: #003366;
    color: #fff;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
}

@media print {
    button.print-btn {
        display: none;
    }
    #printable-section {
        display: block;
    }

/* Show it only on mobile, centered below logo */
@media screen and (max-width: 768px) {
  .navPanelToggle {
    display: block;
    position: relative;
    margin: 0.75em auto;
    text-align: center;
    font-family: Verdana, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: #ffffff;
    background: #003366;
    padding: 0.4em 1em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }

  .navPanelToggle:hover {
    background: #005599;
  }
}
/* Bold text */
.container.main-content strong,
.container.main-content b {
  font-weight: bold;
}

/* Lists */
.container.main-content ul,
.container.main-content ol {
  margin-left: 1.5em;
  padding-left: 1.5em;
}

/* Nested lists */
.container.main-content ul ul,
.container.main-content ul ol,
.container.main-content ol ul,
.container.main-content ol ol {
  margin-left: 1.5em;
  padding-left: 1.5em;
}

/* Bullet style */
.container.main-content ul {
  list-style: disc inside;
}

/* Number style */
.container.main-content ol {
  list-style: decimal inside;
}

/* Blockquotes */
.container.main-content blockquote {
  margin-left: 2em;
  margin-right: 0;
  padding-left: 1em;
  border-left: 4px solid #000040;
  color: #555;
  font-style: italic;
}
/* --- Print-specific styles for canadian-gardening.ca --- */
@media print {

    /* Make body and html fully visible */
    html, body {
        overflow: visible !important;
        height: auto !important;
        width: auto !important;
        background: #fff !important;
        color: #000 !important;
        font-family: Verdana, sans-serif !important;
    }

    /* Headers, footers, and fixed elements */
    header, footer, nav, .sidebar, .menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide non-essential or interactive elements */
    .slider, .carousel, .popup, .interactive-element, .ads, iframe {
        display: none !important;
    }

    /* Ensure main content spans the page */
    main, .content, .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Remove background images for print */
    * {
        background: none !important;
        box-shadow: none !important;
    }

    /* Force images to fit page width */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables and text formatting */
    table {
        page-break-inside: avoid !important;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
    }

    /* Remove unnecessary spacing/margins */
    .container, .wrapper, .grid {
        margin: 0 !important;
        padding: 0 !important;
    }
/* --- Full Site Print-Ready CSS for canadian-gardening.ca --- */
@media print {

    /* Make the page fully flowable */
    html, body {
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
        font-family: Verdana, sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Expand main content containers */
    .page-wrapper, main, .content, .container, .wrapper, .grid, .section {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide headers, footers, menus, sidebars, and interactive elements */
    header, footer, nav, .menu, .sidebar, .slider, .carousel, .popup, .ads, iframe, button {
        display: none !important;
    }

    /* Ensure images scale to page width */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Remove backgrounds and shadows */
    * {
        background: none !important;
        box-shadow: none !important;
    }

    /* Tables, headings, paragraphs, and lists */
    table {
        page-break-inside: avoid !important;
    }
    h1, h2, h3, h4, h5, h6, p, li, ul, ol {
        color: #000 !important;
        break-inside: avoid !important;
        page-break-inside: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show link URLs */
    a:after {
        content: " (" attr(href) ")" !important;
    }
	/* Force homepage logo to be smaller */
#header h1,
#header h1 #logo,
#logo {
    font-family: "Yanone Kaffeesatz", sans-serif !important;
    font-size: 2.2rem !important;   /* Adjust as needed */
    font-weight: 200 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Restore native radio buttons for quiz */
#toolQuiz input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    display: inline-block;
    opacity: 1;
    position: static;
    margin-right: 6px;
}

}