/*
============================================================
Backyard Chicken Planner
Master Stylesheet
File: bcp-style.css
Version: 1.0
============================================================
*/

/* ===========================
   RESET / GLOBAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    margin:0;
    background:#f7f9fb;
}

/* ===========================
   HEADER / HERO
=========================== */

header{
    background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("../images/hero-chickens.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:white;
    padding:110px 20px;
    text-align:center;
    box-shadow:0 3px 12px rgba(0,0,0,.25);
}

header h1{
    font-size:46px;
    margin-bottom:12px;
}

header p{
    font-size:20px;
    max-width:800px;
    margin:auto;
}

.hero{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:center;
    margin-bottom:50px;
}

.hero-text h2{
    font-size:40px;
    margin-bottom:20px;
    color:#1B5E20;
}

.hero-text p{
    font-size:19px;
    margin-bottom:25px;
}

.hero-box{
    background:white;
    padding:30px;
    border-radius:14px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.hero-box h3{
    margin-bottom:15px;
    color:#1B5E20;
}

.hero-box ul{
    padding-left:20px;
}

.hero-box li{
    margin-bottom:12px;
}

/* ===========================
   NAVIGATION
=========================== */

nav{
    background:#145A32;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

nav a{
    color:white;
    text-decoration:none;
    padding:18px 24px;
    font-weight:bold;
    transition:.25s;
}

nav a:hover{
    background:#2E7D32;
}

/* ===========================
   LAYOUT
=========================== */

.container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

/* ===========================
   BUTTONS
=========================== */

.button{
    display:inline-block;
    padding:15px 28px;
    background:#2E7D32;
    color:white;
    border-radius:8px;
    font-weight:bold;
    text-decoration:none;
    transition:.3s;
}

.button:hover{
    background:#1B5E20;
}

/* ===========================
   SECTION TITLES / ARTICLES
=========================== */

.section-title{
    text-align:center;
    font-size:34px;
    margin:50px 0 30px;
    color:#1B5E20;
}

.section{
    background:#ffffff;
    padding:35px;
    margin:35px 0;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.section h2{
    color:#1B5E20;
    margin-bottom:18px;
    font-size:34px;
}

.section p{
    line-height:1.7;
    margin-bottom:18px;
    font-size:18px;
}

/* ===========================
   CARDS
=========================== */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    margin-bottom:50px;
}

.card{
    background:white;
    padding:30px;
    border-radius:14px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:.25s;
}

.card:hover{
    transform:translateY(-6px);
}

.card h3{
    margin-bottom:15px;
    color:#1B5E20;
}

.card p{
    margin-bottom:20px;
}

.card a{
    display:inline-block;
    padding:10px 18px;
    background:#2E7D32;
    color:white;
    text-decoration:none;
    border-radius:6px;
    font-weight:bold;
}

.card a:hover{
    background:#1B5E20;
}

/* ===========================
   NOTICES / TIP BOXES / CALLOUTS
=========================== */

.notice{
    background:white;
    padding:35px;
    border-left:8px solid #2E7D32;
    margin-bottom:50px;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.notice h2{
    margin-bottom:20px;
    color:#1B5E20;
}

.tip-box{
    background:#F4FAEE;
    border-left:6px solid #4CAF50;
    padding:22px;
    margin:40px 0;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.tip-box h3{
    margin-top:0;
    color:#2E7D32;
    font-size:24px;
}

.tip-box p{
    margin-bottom:0;
    font-size:18px;
    line-height:1.7;
}

.callout{
    background:#fff8e1;
    border-left:7px solid #fbc02d;
    padding:24px;
    border-radius:10px;
    margin:30px 0;
}

.callout h3{
    color:#1B5E20;
    margin-bottom:10px;
}

/* ===========================
   FEATURE BADGES
=========================== */

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin:20px 0 45px;
}

.feature{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:.25s;
}

.feature:hover{
    transform:translateY(-5px);
}

.feature-icon{
    font-size:42px;
    margin-bottom:12px;
}

.feature h3{
    color:#1B5E20;
    margin-bottom:10px;
    font-size:22px;
}

.feature p{
    font-size:15px;
    color:#555;
}

/* ===========================
   PROJECT HERO / SUMMARY
=========================== */

.project-hero{
    background:white;
    padding:35px;
    border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    margin:35px 0;
    text-align:center;
}

.project-label{
    display:inline-block;
    background:#145A32;
    color:white;
    padding:8px 16px;
    border-radius:30px;
    font-weight:bold;
    margin-bottom:18px;
}

.project-subtitle{
    font-size:22px;
    color:#555;
    max-width:850px;
    margin:15px auto 0;
}

.project-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin:30px 0;
}

.summary-box{
    background:#f4f9f4;
    border-left:6px solid #2E7D32;
    padding:20px;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.summary-box strong{
    display:block;
    color:#1B5E20;
    font-size:18px;
    margin-bottom:6px;
}

/* ===========================
   PROJECT STEP CARDS
=========================== */

.step-card{
    background:white;
    border-radius:16px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    margin:35px 0;
    overflow:hidden;
    border:1px solid #e2e8e2;
}

.step-header{
    background:#145A32;
    color:white;
    padding:22px 28px;
}

.step-header h3{
    margin:0;
    font-size:28px;
}

.step-meta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:12px;
    font-size:15px;
}

.step-meta span{
    background:rgba(255,255,255,.18);
    padding:6px 12px;
    border-radius:20px;
}

.step-body{
    padding:30px;
}

.step-body p{
    line-height:1.7;
    font-size:18px;
    margin-bottom:18px;
}

.step-tip{
    background:#fff8e1;
    border-left:6px solid #fbc02d;
    padding:18px;
    border-radius:10px;
    margin:22px 0;
}

.step-tip strong{
    color:#1B5E20;
}

.step-warning{
    background:#fdecea;
    border-left:6px solid #c62828;
    padding:18px;
    border-radius:10px;
    margin:22px 0;
}

.check-work{
    background:#f4f9f4;
    border-left:6px solid #2E7D32;
    padding:18px;
    border-radius:10px;
    margin-top:22px;
}

.check-work ul{
    margin:10px 0 0 20px;
}

.check-work li{
    margin-bottom:8px;
}

/* ===========================
   PHOTO / VIDEO PLACEHOLDERS
=========================== */

.photo-placeholder,
.video-placeholder{
    background:#eef3ee;
    border:2px dashed #9ab69a;
    border-radius:14px;
    padding:45px 20px;
    text-align:center;
    color:#456;
    margin:25px 0;
}

.photo-placeholder h3,
.video-placeholder h3{
    color:#1B5E20;
    margin-bottom:10px;
}

/* ===========================
   TABLES / CHECKLISTS
=========================== */

.project-table{
    width:100%;
    border-collapse:collapse;
    margin:25px 0;
    background:white;
}

.project-table th,
.project-table td{
    border:1px solid #ddd;
    padding:14px;
    text-align:left;
}

.project-table th{
    background:#145A32;
    color:white;
}

.checklist{
    columns:2;
    column-gap:40px;
}

.checklist li{
    break-inside:avoid;
    margin-bottom:10px;
}

/* ===========================
   AFFILIATE / PRODUCT CARDS
=========================== */

/* ===========================
   AFFILIATE / PRODUCT CARDS
=========================== */

.affiliate-card{
    background:#ffffff;
    border:2px solid #e6e6e6;
    border-radius:16px;
    padding:26px;
    margin:30px 0;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.affiliate-card h3{
    color:#1B5E20;
    margin-bottom:12px;
    font-size:26px;
}

.affiliate-card p{
    font-size:18px;
    line-height:1.7;
    margin-bottom:16px;
}

.affiliate-card ul{
    margin:15px 0 22px 22px;
}

.affiliate-card li{
    margin-bottom:8px;
}

.affiliate-badge{
    display:inline-block;
    background:#f4f9f4;
    color:#1B5E20;
    border:1px solid #b8d8b8;
    padding:7px 12px;
    border-radius:20px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:14px;
}

.affiliate-note{
    font-size:14px;
    color:#666;
    margin-top:12px;
}

.affiliate-button{
    display:inline-block;
    background:#ff9900;
    color:white;
    padding:14px 26px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.25s;
}

.affiliate-button:hover{
    background:#e48a00;
    transform:translateY(-2px);
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:700px){
    .checklist{
        columns:1;
    }

    header h1{
        font-size:34px;
    }

    header{
        padding:80px 18px;
    }

    .hero{
        grid-template-columns:1fr;
    }

    .section h2{
        font-size:28px;
    }
}

/* Premium Footer */

.site-footer-pro {
  margin-top: 70px;
  background: linear-gradient(135deg, #1f2b1d, #33442b);
  color: #f8f3e8;
  padding: 55px 20px 28px;
}

.footer-pro-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.footer-pro-brand {
  text-align: center;
  margin-bottom: 42px;
}

.footer-pro-brand h2 {
  color: #ffffff;
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.footer-pro-brand p {
  max-width: 760px;
  margin: 0 auto;
  color: #eadfca;
  line-height: 1.7;
  font-size: 1rem;
}

.footer-pro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 28px;
  margin-bottom: 42px;
}

.footer-pro-column {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px 18px;
}

.footer-pro-column h3 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.footer-pro-column a {
  display: block;
  color: #eadfca;
  text-decoration: none;
  font-size: 0.94rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.footer-pro-column a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-pro-feature {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 32px;
}

.footer-pro-feature h3 {
  color: #ffffff;
  margin-bottom: 8px;
}

.footer-pro-feature p {
  color: #eadfca;
  margin: 0;
  line-height: 1.6;
}

.footer-pro-feature a {
  flex-shrink: 0;
  background: #f2c078;
  color: #263322;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.footer-pro-feature a:hover {
  background: #ffd493;
}

.footer-pro-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 20px;
  color: #d9cfbd;
  font-size: 0.9rem;
}

.footer-pro-bottom p {
  margin: 6px 0;
}

@media (max-width: 700px) {
  .footer-pro-feature {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-pro-feature a {
    width: 100%;
    text-align: center;
  }
}

/* Health Disclaimer */

.health-disclaimer {
  background: #fff7e8;
  border-left: 6px solid #d78b00;
  padding: 22px;
  margin: 28px 0;
  border-radius: 12px;
}

.health-disclaimer h2 {
  margin-top: 0;
  color: #9b5d00;
}

.health-disclaimer p {
  line-height: 1.7;
}

/* Rotating Footer Message */

.footer-message {
  max-width: 900px;
  margin: 0 auto 34px;
  padding: 18px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
}

.footer-message p {
  margin: 0;
  color: #f2c078;
  font-size: 1rem;
  line-height: 1.6;
  font-style: italic;
  font-weight: 700;
}

/* Internal guide buttons */

.guide-button {
  display: inline-block;
  margin-top: 12px;
  padding: 11px 18px;
  background: #f2c078;
  color: #263322;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.guide-button:hover {
  background: #ffd493;
}

/* ==================================================
   SHARED CALCULATOR DESIGN
   Used across Backyard Chicken Planner calculators
================================================== */

.calculator-shell {
  position: relative;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(242, 192, 120, 0.16), transparent 35%),
    linear-gradient(145deg, #ffffff, #f8fbf7);
  border: 1px solid rgba(29, 105, 52, 0.18);
  border-radius: 24px;
  box-shadow:
    0 22px 55px rgba(24, 65, 34, 0.13),
    0 6px 18px rgba(24, 65, 34, 0.08);
}

.calculator-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border-top: 5px solid #1f6b35;
}

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.calc-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(29, 105, 52, 0.15);
  border-radius: 20px;
  box-shadow:
    0 14px 34px rgba(30, 70, 40, 0.09),
    0 4px 12px rgba(30, 70, 40, 0.06);
}

.calc-panel > h2 {
  margin: 0;
  padding: 22px 24px;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1.25;
  background:
    linear-gradient(135deg, #175c2d, #287a3f);
  border-bottom: 4px solid #f2c078;
}

.calc-body {
  padding: 24px;
}

.calc-field {
  margin-bottom: 21px;
}

.calc-field label {
  display: block;
  margin-bottom: 8px;
  color: #163e22;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
}

.calc-field input,
.calc-field select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: #243128;
  font: inherit;
  font-size: 1rem;
  background: #fbfdfb;
  border: 1px solid #b9cbbb;
  border-radius: 10px;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.calc-field input:hover,
.calc-field select:hover {
  border-color: #6c9c75;
  background: #ffffff;
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  background: #ffffff;
  border-color: #1f6b35;
  box-shadow: 0 0 0 4px rgba(31, 107, 53, 0.14);
}

.calc-help {
  margin-top: 7px;
  color: #647269;
  font-size: 0.88rem;
  line-height: 1.45;
}

.calc-button {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 8px 0 20px;
  padding: 14px 20px;
  color: #ffffff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.15px;
  cursor: pointer;
  background:
    linear-gradient(135deg, #1d7438, #15592b);
  border: 0;
  border-radius: 12px;
  box-shadow:
    0 10px 20px rgba(22, 95, 45, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.calc-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 25px rgba(22, 95, 45, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.calc-button:active {
  transform: translateY(0);
  box-shadow:
    0 6px 12px rgba(22, 95, 45, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.18);
}

.calc-note {
  padding: 16px 18px;
  color: #4c412d;
  line-height: 1.55;
  background: #fff8e9;
  border: 1px solid #ecd4a6;
  border-left: 5px solid #d99b35;
  border-radius: 12px;
}

.calc-note a {
  color: #196232;
  font-weight: 750;
}

.result-card {
  position: relative;
  margin-bottom: 17px;
  padding: 19px 20px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #ffffff, #f5faf5);
  border: 1px solid #d9e6da;
  border-radius: 15px;
  box-shadow:
    0 8px 20px rgba(38, 78, 46, 0.07);
}

.result-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(#267b40, #e0a54c);
}

.result-card h3 {
  margin: 0 0 8px;
  color: #184d29;
  font-size: 1.05rem;
}

.result-number {
  margin: 4px 0 7px;
  color: #1d6d37;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 850;
  line-height: 1.15;
}

.result-card p {
  margin: 0;
  color: #617067;
  font-size: 0.92rem;
  line-height: 1.5;
}

#nextStepsCard {
  padding: 22px;
  background:
    linear-gradient(145deg, #eef8ef, #ffffff);
  border-color: #b9d6bc;
}

#nextStepsCard h3 {
  font-size: 1.2rem;
}

#nextStepsCard ul {
  margin: 16px 0 0;
  padding-left: 21px;
}

#nextStepsCard li {
  margin-bottom: 12px;
  line-height: 1.55;
}

#nextStepsCard a {
  color: #17632f;
  font-weight: 750;
}

/* Make the results side visually distinct */

.calculator-grid .calc-panel:nth-child(2) {
  background:
    linear-gradient(180deg, #f7fbf7, #ffffff);
}

.calculator-grid .calc-panel:nth-child(2) > h2 {
  background:
    linear-gradient(135deg, #244d2f, #3e7650);
}

/* Calculator tip box refinement */

.tip-box {
  margin: 30px 0;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, #fff8e8, #fffdf7);
  border: 1px solid #ead3a3;
  border-left: 6px solid #d99b35;
  border-radius: 15px;
  box-shadow: 0 9px 24px rgba(95, 72, 28, 0.08);
}

.tip-box h3 {
  margin-top: 0;
  color: #775014;
}

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

/* Mobile calculator layout */

@media (max-width: 760px) {
  .calculator-shell {
    padding: 16px;
    border-radius: 18px;
  }

  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .calc-panel {
    border-radius: 16px;
  }

  .calc-panel > h2 {
    padding: 18px;
    font-size: 1.3rem;
  }

  .calc-body {
    padding: 18px;
  }

  .calc-field input,
  .calc-field select {
    min-height: 50px;
    font-size: 16px;
  }

  .result-card {
    padding: 17px 18px;
  }
}

/* Egg Profit Calculator result states */

.result-card.profit-positive {
  background: linear-gradient(145deg, #eef9ef, #ffffff);
  border-color: #9fc9a4;
}

.result-card.profit-positive::before {
  background: linear-gradient(#1f7a3b, #66a96f);
}

.result-card.profit-positive .result-number {
  color: #176631;
}

.result-card.profit-negative {
  background: linear-gradient(145deg, #fff3f1, #ffffff);
  border-color: #dfb3aa;
}

.result-card.profit-negative::before {
  background: linear-gradient(#b84834, #d77a66);
}

.result-card.profit-negative .result-number {
  color: #a63a29;
}

/* ==================================================
   CALCULATOR RESULT ANIMATIONS
================================================== */

.calculator-result-animated {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.calculator-result-animated.calculator-result-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion accessibility settings */

@media (prefers-reduced-motion: reduce) {
  .calculator-result-animated {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
  ==================================================
  Footer Link Cards
  ==================================================
*/

.footer-pro-grid {
  align-items:
    stretch;
}

.footer-pro-column {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;
}

.footer-pro-column h3 {
  display:
    flex;

  gap:
    7px;

  align-items:
    center;

  margin:
    0 0 11px;
}

.footer-link-card {
  display:
    flex;

  height:
    100%;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    13px;

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.footer-link-card a {
  display:
    grid;

  grid-template-columns:
    25px minmax(
      0,
      1fr
    );

  gap:
    7px;

  align-items:
    center;

  min-height:
    38px;

  padding:
    7px 8px;

  border-radius:
    8px;

  line-height:
    1.3;

  text-decoration:
    none;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.footer-link-card a span {
  display:
    inline-grid;

  width:
    24px;

  height:
    24px;

  place-items:
    center;

  font-size:
    1rem;

  line-height:
    1;
}

.footer-link-card a:hover,
.footer-link-card a:focus-visible {
  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  transform:
    translateX(
      2px
    );
}

.footer-link-card a:focus-visible {
  outline:
    2px solid
    rgba(
      255,
      226,
      145,
      0.7
    );

  outline-offset:
    2px;
}

@media
(max-width: 700px) {

  .footer-link-card {
    height:
      auto;
  }

}

/*
  ==================================================
  Shared Card-Style Navigation
  ==================================================
*/

#navigation {
  padding:
    14px 12px;

  background:
    linear-gradient(
      135deg,
      #1d5b34,
      #347c49
    );

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.12
    );

  box-shadow:
    0 8px 20px
    rgba(
      24,
      74,
      42,
      0.14
    );
}

/*
  Remove any older styling from the inner nav.
*/

#navigation nav {
  display:
    flex;

  flex-wrap:
    nowrap;

  gap:
    9px;

  align-items:
    stretch;

  justify-content:
    center;

  width:
    min(
      1360px,
      100%
    );

  margin:
    0 auto;

  padding:
    0;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

/*
  Navigation buttons
*/

#navigation nav a {
  display:
    inline-flex;

  min-width:
    0;

  min-height:
    52px;

  flex:
    0 1 auto;

  gap:
    7px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 12px;

  color:
    #21432a;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.82
    );

  border-radius:
    12px;

  box-shadow:
    0 5px 14px
    rgba(
      0,
      0,
      0,
      0.13
    );

  font-size:
    0.84rem;

  font-weight:
    800;

  line-height:
    1.2;

  text-align:
    center;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

#navigation nav a:hover,
#navigation nav a:focus-visible {
  color:
    #173f25;

  background:
    #f7fbf7;

  border-color:
    #d0e0d2;

  box-shadow:
    0 10px 22px
    rgba(
      0,
      0,
      0,
      0.17
    );

  transform:
    translateY(
      -3px
    );
}

/*
  Circular icon badges
*/

#navigation .nav-icon {
  display:
    inline-grid;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 auto;

  place-items:
    center;

  background:
    #e9f4eb;

  border:
    1px solid
    #d0e2d3;

  border-radius:
    50%;

  font-size:
    0.94rem;

  line-height:
    1;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

#navigation nav a:hover
.nav-icon,
#navigation nav a:focus-visible
.nav-icon {
  background:
    #dceddf;

  border-color:
    #bcd4c1;

  transform:
    scale(
      1.1
    );
}

#navigation .nav-label {
  display:
    inline-block;
}

/*
  Featured Crop Planner button

  It keeps the same white background as the other
  buttons, but uses a gold border and icon badge.
*/

#navigation nav a.nav-featured {
  color:
    #21432a;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border:
    2px solid
    #d6a83e;

  box-shadow:
    0 6px 16px
    rgba(
      112,
      74,
      5,
      0.16
    );
}

#navigation nav a.nav-featured
.nav-icon {
  background:
    #fff0bd;

  border-color:
    #e4c35e;
}

#navigation nav a.nav-featured:hover,
#navigation nav a.nav-featured:focus-visible {
  color:
    #173f25;

  background:
    #fffaf0;

  border-color:
    #c89222;

  box-shadow:
    0 10px 22px
    rgba(
      112,
      74,
      5,
      0.2
    );
}

#navigation nav a.nav-featured:hover
.nav-icon,
#navigation nav a.nav-featured:focus-visible
.nav-icon {
  background:
    #ffe59b;

  border-color:
    #d9a835;
}

/*
  Keyboard focus
*/

#navigation nav a:focus-visible {
  outline:
    3px solid
    rgba(
      255,
      225,
      137,
      0.82
    );

  outline-offset:
    3px;
}

/*
  Tablet

  Allow wrapping only once the screen becomes narrow
  enough that eight buttons no longer fit comfortably.
*/

@media
(max-width: 900px) {

  #navigation nav {
    flex-wrap:
      wrap;

    gap:
      9px;
  }

  #navigation nav a {
    flex:
      1 1 150px;

    max-width:
      210px;

    white-space:
      normal;
  }

}

/*
  Mobile
*/

@media
(max-width: 560px) {

  #navigation {
    padding:
      12px;
  }

  #navigation nav {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      9px;
  }

  #navigation nav a {
    width:
      100%;

    max-width:
      none;

    min-height:
      54px;

    padding:
      8px 9px;

    font-size:
      0.82rem;

    white-space:
      normal;
  }

  #navigation .nav-icon {
    width:
      29px;

    height:
      29px;

    font-size:
      0.94rem;
  }

}

/*
  Very small screens
*/

@media
(max-width: 340px) {

  #navigation nav {
    grid-template-columns:
      1fr;
  }

}

/*
  ==================================================
  Compact Shared Site Header
  ==================================================

  Keeps the existing chicken background image and
  dark overlay, but gives the page content much more
  room above the fold.

  These selectors intentionally use .site-header so
  they do not affect article headers or other future
  header elements.
*/

.site-header {
  position:
    relative;

  display:
    flex;

  min-height:
    190px;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    40px 20px;

  overflow:
    hidden;

  color:
    #ffffff;

  background:
    linear-gradient(
      rgba(
        0,
        0,
        0,
        0.56
      ),
      rgba(
        0,
        0,
        0,
        0.56
      )
    ),
    url("../images/hero-chickens.jpg");

  background-size:
    cover;

  background-position:
    center 44%;

  background-repeat:
    no-repeat;

  text-align:
    center;

  box-shadow:
    0 3px 12px
    rgba(
      0,
      0,
      0,
      0.25
    );
}

.site-header::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(
        20,
        74,
        42,
        0.08
      ),
      rgba(
        20,
        74,
        42,
        0.18
      )
    );
}

.site-header h1,
.site-header p {
  position:
    relative;

  z-index:
    1;
}

.site-header h1 {
  margin:
    0 0 8px;

  color:
    #ffffff;

  font-size:
    clamp(
      2rem,
      4vw,
      2.65rem
    );

  line-height:
    1.1;

  text-shadow:
    0 3px 12px
    rgba(
      0,
      0,
      0,
      0.48
    );
}

.site-header p {
  max-width:
    760px;

  margin:
    0 auto;

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  font-size:
    1rem;

  line-height:
    1.5;

  text-shadow:
    0 2px 8px
    rgba(
      0,
      0,
      0,
      0.46
    );
}

/*
  Tablet
*/

@media
(max-width: 760px) {

  .site-header {
    min-height:
      165px;

    padding:
      30px 18px;

    background-position:
      center;
  }

  .site-header h1 {
    font-size:
      clamp(
        1.8rem,
        7vw,
        2.25rem
      );
  }

  .site-header p {
    max-width:
      620px;

    font-size:
      0.93rem;

    line-height:
      1.45;
  }

}

/*
  Mobile
*/

@media
(max-width: 480px) {

  .site-header {
    min-height:
      145px;

    padding:
      25px 15px;
  }

  .site-header h1 {
    margin-bottom:
      6px;

    font-size:
      1.75rem;
  }

  .site-header p {
    font-size:
      0.85rem;

    line-height:
      1.4;
  }

}

/*
  ==================================================
  Crop Guide Planner Callout
  ==================================================
*/

.crop-planner-guide-callout {
  display:
    grid;

  grid-template-columns:
    auto minmax(
      0,
      1fr
    );

  gap:
    18px;

  align-items:
    start;

  margin:
    26px 0;

  padding:
    22px;

  background:
    linear-gradient(
      135deg,
      #edf7ee,
      #ffffff
    );

  border:
    1px solid
    #c9ddcc;

  border-left:
    6px solid
    #2f7444;

  border-radius:
    15px;

  box-shadow:
    0 8px 22px
    rgba(
      35,
      82,
      45,
      0.08
    );
}

.crop-planner-guide-icon {
  display:
    grid;

  width:
    52px;

  height:
    52px;

  place-items:
    center;

  background:
    #dceddf;

  border:
    1px solid
    #bfd6c3;

  border-radius:
    14px;

  font-size:
    1.75rem;
}

.crop-planner-guide-kicker {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #9a6712;

  font-size:
    0.74rem;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.crop-planner-guide-content h2 {
  margin:
    0 0 8px;

  color:
    #194f2a;

  font-size:
    1.35rem;
}

.crop-planner-guide-content p {
  margin:
    0 0 14px;

  color:
    #5b685f;

  font-size:
    0.94rem;

  line-height:
    1.6;
}

.crop-planner-guide-button {
  display:
    inline-flex;

  min-height:
    44px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px 16px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #2f7444,
      #1e5b33
    );

  border-radius:
    10px;

  font-weight:
    850;

  text-decoration:
    none;

  box-shadow:
    0 7px 16px
    rgba(
      35,
      103,
      56,
      0.2
    );

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.crop-planner-guide-button:hover,
.crop-planner-guide-button:focus-visible {
  transform:
    translateY(
      -2px
    );

  box-shadow:
    0 10px 20px
    rgba(
      35,
      103,
      56,
      0.26
    );
}

@media
(max-width: 560px) {

  .crop-planner-guide-callout {
    grid-template-columns:
      1fr;

    padding:
      19px;
  }

  .crop-planner-guide-button {
    width:
      100%;
  }

}

/*
  ==================================================
  Compact Premium Footer
  ==================================================
*/

.site-footer-pro.site-footer-compact {
  margin-top:
    42px;

  padding:
    32px 18px 20px;

  color:
    #f8f3e8;

  background:
    linear-gradient(
      135deg,
      #1f2b1d,
      #33442b
    );
}

.site-footer-compact
.footer-pro-inner {
  width:
    min(
      1120px,
      100%
    );

  margin:
    0 auto;
}

/*
  ==================================================
  Compact Top Row
  ==================================================
*/

.footer-compact-top {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      310px,
      0.75fr
    );

  gap:
    18px;

  align-items:
    stretch;

  margin-bottom:
    20px;
}

.footer-compact-brand {
  padding:
    18px 20px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    14px;
}

.footer-compact-brand h2 {
  margin:
    0 0 6px;

  color:
    #ffffff;

  font-size:
    1.35rem;
}

.footer-compact-brand p {
  max-width:
    660px;

  margin:
    0;

  color:
    #eadfca;

  font-size:
    0.87rem;

  line-height:
    1.5;
}

.footer-compact-start {
  display:
    flex;

  gap:
    14px;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    17px 18px;

  color:
    #263322;

  background:
    linear-gradient(
      135deg,
      #f4d69d,
      #f2c078
    );

  border-radius:
    14px;

  box-shadow:
    0 8px 20px
    rgba(
      0,
      0,
      0,
      0.12
    );
}

.footer-compact-kicker {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #6a4a16;

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.footer-compact-start strong {
  display:
    block;

  font-size:
    0.88rem;

  line-height:
    1.35;
}

.footer-compact-start a {
  display:
    inline-flex;

  min-height:
    39px;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 12px;

  color:
    #ffffff;

  background:
    #2f653b;

  border-radius:
    9px;

  font-size:
    0.75rem;

  font-weight:
    850;

  text-decoration:
    none;

  white-space:
    nowrap;
}

.footer-compact-start a:hover,
.footer-compact-start a:focus-visible {
  background:
    #204c2c;
}

/*
  ==================================================
  Compact Link Grid
  ==================================================
*/

.footer-compact-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    13px;

  margin-bottom:
    18px;
}

.footer-compact-column {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    13px;
}

.footer-compact-column h3 {
  margin:
    0 0 6px;

  padding:
    0 0 8px;

  color:
    #ffffff;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  font-size:
    0.86rem;
}

.footer-compact-column a {
  display:
    grid;

  grid-template-columns:
    23px minmax(
      0,
      1fr
    );

  gap:
    6px;

  align-items:
    center;

  min-height:
    30px;

  margin:
    0;

  padding:
    5px 6px;

  color:
    #eadfca;

  border-radius:
    7px;

  font-size:
    0.78rem;

  line-height:
    1.25;

  text-decoration:
    none;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.footer-compact-column a span {
  display:
    inline-grid;

  width:
    22px;

  height:
    22px;

  place-items:
    center;

  font-size:
    0.9rem;

  line-height:
    1;
}

.footer-compact-column a:hover,
.footer-compact-column a:focus-visible {
  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.09
    );

  transform:
    translateX(
      2px
    );
}

/*
  ==================================================
  Compact Inspiration Message
  ==================================================
*/

.footer-compact-message {
  display:
    grid;

  grid-template-columns:
    35px minmax(
      0,
      1fr
    );

  gap:
    10px;

  align-items:
    center;

  margin:
    0 0 17px;

  padding:
    11px 15px;

  background:
    rgba(
      255,
      255,
      255,
      0.065
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    11px;
}

.footer-compact-message > span {
  display:
    grid;

  width:
    34px;

  height:
    34px;

  place-items:
    center;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    50%;

  font-size:
    1.15rem;
}

.footer-compact-message strong {
  display:
    block;

  margin-bottom:
    2px;

  color:
    #ffffff;

  font-size:
    0.78rem;
}

.footer-compact-message p {
  margin:
    0;

  color:
    #f2c078;

  font-size:
    0.78rem;

  font-style:
    italic;

  font-weight:
    700;

  line-height:
    1.4;
}

/*
  ==================================================
  Compact Bottom
  ==================================================
*/

.site-footer-compact
.footer-pro-bottom {
  display:
    flex;

  gap:
    15px;

  align-items:
    center;

  justify-content:
    space-between;

  padding-top:
    14px;

  color:
    #d9cfbd;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  font-size:
    0.73rem;

  text-align:
    left;
}

.site-footer-compact
.footer-pro-bottom p {
  margin:
    0;

  line-height:
    1.4;
}

/*
  ==================================================
  Footer Responsive Layout
  ==================================================
*/

@media
(max-width: 900px) {

  .footer-compact-top {
    grid-template-columns:
      1fr;
  }

  .footer-compact-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}

@media
(max-width: 560px) {

  .site-footer-pro.site-footer-compact {
    margin-top:
      32px;

    padding:
      24px 12px 17px;
  }

  .footer-compact-start {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .footer-compact-start a {
    width:
      100%;
  }

  .footer-compact-grid {
    grid-template-columns:
      1fr;

    gap:
      9px;
  }

  .footer-compact-column {
    padding:
      12px;
  }

  .footer-compact-column a {
    min-height:
      34px;
  }

  .site-footer-compact
  .footer-pro-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;

    text-align:
      left;
  }

}

/*
  ==================================================
  Feed Crop Planner Test Dashboard Rankings
  ==================================================
*/

/*
  ==================================================
  Feed Crop Planner Matrix Column Layout
  ==================================================
*/

#profile-matrix-table {
  width:
    100%;

  table-layout:
    fixed;
}

/*
  Column 1: Profile number
*/

#profile-matrix-table th:nth-child(1),
#profile-matrix-table td:nth-child(1) {
  width:
    4%;
}

/*
  Column 2: Sample Profile
*/

#profile-matrix-table th:nth-child(2),
#profile-matrix-table td:nth-child(2) {
  width:
    15%;
}

/*
  Column 3: Profile Summary
*/

#profile-matrix-table th:nth-child(3),
#profile-matrix-table td:nth-child(3) {
  width:
    20%;
}

/*
  Column 4: Expected Leader
*/

#profile-matrix-table th:nth-child(4),
#profile-matrix-table td:nth-child(4) {
  width:
    12%;
}

/*
  Column 5: Actual Leader
*/

#profile-matrix-table th:nth-child(5),
#profile-matrix-table td:nth-child(5) {
  width:
    14%;
}

/*
  Column 6: Top 3 Rankings
*/

#profile-matrix-table th:nth-child(6),
#profile-matrix-table td:nth-child(6) {
  width:
    23%;
}

/*
  Column 7: Result
*/

#profile-matrix-table th:nth-child(7),
#profile-matrix-table td:nth-child(7) {
  width:
    7%;
}

/*
  Column 8: Diagnostics
*/

#profile-matrix-table th:nth-child(8),
#profile-matrix-table td:nth-child(8) {
  width:
    8%;
}

.profile-purpose,
.profile-top-three {
  vertical-align:
    top;
}

.profile-purpose {
  padding-left:
    12px !important;

  padding-right:
    12px !important;
}

.profile-top-three {
  padding-left:
    18px !important;

  padding-right:
    14px !important;
}

.profile-summary-list {
  margin:
    0;

  padding-left:
    0;

  list-style:
    none;
}

.profile-summary-list li {
  display:
    flex;

  gap:
    6px;

  align-items:
    flex-start;

  margin-bottom:
    6px;

  font-size:
    0.96rem;

  line-height:
    1.2;
}

.profile-summary-icon {
  flex:
    0 0 20px;

  text-align:
    center;
}

.profile-summary-icon {
  flex:
    0 0 22px;

  text-align:
    center;
}

.top-ranking-list {
  margin:
    0;

  padding-left:
    1.4rem;

  list-style-position:
    outside;
}

.top-ranking-item {
  margin:
    0 0 18px;
}

.top-ranking-item:last-child {
  margin-bottom:
    0;
}

.top-ranking-heading {
  display:
    flex;

  gap:
    6px;

  align-items:
    baseline;

  line-height:
    1.25;
}


.top-ranking-score {
  flex:
    0 0 auto;

  margin-left:
    0;

  white-space:
    nowrap;
}

.ranking-factor-list {
  margin:
    6px 0 0;

  padding-left:
    1.35rem;
}

.ranking-factor-list li {
  margin:
    3px 0;

  line-height:
    1.25;

  white-space:
    nowrap;
}

/* =========================================
   PRODUCT RECOMMENDATION TILES
   ========================================= */

.recommended-product-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin: 20px 0;
}

.recommended-product-grid
[data-product] {
  display: flex;
  min-width: 0;
}

.affiliate-card--tile {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: 230px;

  margin: 0;
  padding: 14px;

  border-radius: 14px;
}

.affiliate-card--tile
.affiliate-badge {
  align-self: flex-start;

  margin: 0 0 10px;
  padding: 5px 9px;

  font-size: 0.7rem;
  line-height: 1.2;
}

.affiliate-card--tile h3 {
  margin: 0 0 9px;

  font-size: 1rem;
  line-height: 1.25;
}

.affiliate-card--tile
.affiliate-description {
  margin: 0 0 14px;

  font-size: 0.82rem;
  line-height: 1.4;
}

.affiliate-card--tile
.affiliate-button {
  display: block;

  width: 100%;
  box-sizing: border-box;

  margin-top: auto;
  padding: 9px 8px;

  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 1100px) {
  .recommended-product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .recommended-product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .recommended-product-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-card--tile {
    min-height: 0;
  }
}

/* =========================================================
   Crop Guide Image Features
   ========================================================= */

.crop-guide-feature-card {

  display:
    grid;

  grid-template-columns:
    280px
    minmax(0, 1fr);

  gap:
    28px;

  align-items:
    center;

  margin:
    56px 0;

}


.crop-guide-feature-image {

  width:
    280px;

}


.crop-guide-feature-image img {

  width:
    100%;

  height:
    260px;

  object-fit:
    cover;

  border-radius:
    18px;

  display:
    block;

}


.crop-guide-feature-content h2 {

  margin-top:
    0;

} 

@media(max-width:760px){

  .crop-guide-feature-card {

    grid-template-columns:
      1fr;

  }

  .crop-guide-feature-card {

    margin:
      32px 0;

  }


  .crop-guide-feature-image {

    width:
      100%;

  }


  .crop-guide-feature-image img {

    height:
      220px;

  }

}

/* =========================================================
   Crop Guide Hero Image Layout
   ========================================================= */


.crop-guide-hero-grid {

  display:
    grid;

  grid-template-columns:
    280px
    minmax(0, 1fr);

  gap:
    28px;

  align-items:
    center;

}


.crop-guide-hero-image img {

  width:
    280px;

  height:
    280px;

  object-fit:
    cover;

  border-radius:
    18px;

}


.crop-guide-hero-content h1 {

  margin-top:
    0;

}


@media (max-width:760px){

  .crop-guide-hero-grid {

    grid-template-columns:
      1fr;

  }


  .crop-guide-hero-image img {

    width:
      100%;

    height:
      auto;

  }

}

/* =========================================================
   Crop Guide Hero Content Sizing
   ========================================================= */


/* =========================================================
   Crop Guide Section Spacing
   ========================================================= */


.crop-guide-section {

  margin-bottom:
    48px;

}


.crop-guide-section h2 {

  margin-top:
    0;

  margin-bottom:
    18px;

}


.crop-guide-section p {

  margin-bottom:
    16px;

}


.crop-guide-section ul {

  margin-top:
    18px;

  margin-bottom:
    18px;

}

.crop-guide-hero {

  padding:
    22px;

}


.crop-guide-hero h1 {

  font-size:
    2.1rem;

  line-height:
    1.15;

}


.crop-guide-hero p {

  line-height:
    1.45;

}


.crop-guide-hero-content h1 {

  margin-top:
    0;

  margin-bottom:
    16px;

}

.crop-guide-hero-content {

  text-align:
    left;

}

/* =========================================================
   Crop Guide Section Spacing
   ========================================================= */

.page-container > section {

  margin-bottom:
    48px;

}

.crop-info-grid {

display:
grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:
24px;

margin:
35px 0;

}


.crop-info-card {

background:
#ffffff;

padding:
24px;

border-radius:
16px;

box-shadow:
0 4px 12px rgba(0,0,0,.08);

}


.crop-info-card h3 {

margin-top:
0;

color:
var(--primary-color);

}

.quick-answer-box {

background:
#eef7ee;

border-left:
6px solid #4b8f4b;

padding:
24px;

margin:
35px 0;

border-radius:
14px;

font-size:
1.05rem;

}

.quick-answer-box strong {
  display: inline;
  font-size: inherit;
  margin-bottom: 0;
}

.quick-answer-box p:first-child > strong:first-child {
  display: block;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

/* =========================================
   Crop Guide Section Cards
   ========================================= */

.section-card {

  background:
    #ffffff;

  border-radius:
    18px;

  padding:
    32px;

  margin-bottom:
    40px;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.06);

}


.section-card h2 {

  margin-top:
    0;

  margin-bottom:
    18px;

}

/* =========================================
   Crop Guide Notice Spacing
   ========================================= */

.crop-warning-box,
.crop-success-box,
.crop-danger-box,
.crop-notice-box {

  margin-top:
    20px;

  margin-bottom:
    20px;

}

/* Prevent nested crop guide grids from overflowing section cards */

.section-card > * {

  max-width:
    100%;

}


.section-card .crop-grid,
.section-card .growth-stage-grid,
.section-card .planting-steps-grid,
.section-card .benefits-grid {

  width:
    100%;

  box-sizing:
    border-box;

}

/* Crop guide overflow protection */

.crop-guide-page,
.section-card {

  overflow-x:
    hidden;

}

.crop-comparison-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.crop-learning-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 17px;
}

.next-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
  gap: 17px;
}

.section-card {
  overflow: hidden;
}

.section-card * {
  max-width: 100%;
  box-sizing: border-box;
}

.crop-content-media-card {

display:grid;
grid-template-columns:
280px 1fr;
gap:28px;
align-items:center;

margin:30px 0;
padding:24px;

background:#f8fbf7;
border:1px solid #d7e3d6;
border-radius:16px;

}


.crop-content-media-image img {

width:100%;
height:220px;
object-fit:cover;

border-radius:14px;

box-shadow:
0 10px 25px
rgba(25,79,42,0.12);

}


.crop-content-media-text h2 {

margin-top:0;

}


@media(max-width:760px){

.crop-content-media-card{

grid-template-columns:1fr;

}

.crop-content-media-image img{

height:auto;

}

}

.crop-feature-image-row {

display: grid;
grid-template-columns:
minmax(220px, 320px)
1fr;

gap: 24px;

align-items: center;

margin: 25px 0;

}


.crop-feature-image img {

width: 100%;

border-radius: 16px;

box-shadow:
0 10px 25px
rgba(0,0,0,0.12);

}


.crop-feature-image-text {

line-height: 1.7;

}


@media (max-width:760px){

.crop-feature-image-row {

grid-template-columns:1fr;

}

}

/* =========================================
   Crop Guide FAQ Accordion
   ========================================= */


.faq-section {
  padding-bottom:
    26px;
}


.faq-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.faq-list details {

  background:
    #f8fbf7;

  border:
    1px solid #d7e3d6;

  border-radius:
    12px;

  overflow:
    hidden;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;

}


.faq-list details:hover {

  border-color:
    #b8d2bb;

}


.faq-list summary {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    16px 18px;

  cursor:
    pointer;

  color:
    #194f2a;

  font-weight:
    750;

  font-size:
    1rem;

  line-height:
    1.45;

  list-style:
    none;

}


.faq-list summary::-webkit-details-marker {

  display:
    none;

}


.faq-list summary::after {

  content:
    "+";

  flex:
    0 0 auto;

  margin-left:
    15px;

  color:
    #337747;

  font-size:
    1.4rem;

  font-weight:
    800;

}


.faq-list details[open]
summary::after {

  content:
    "−";

}


.faq-list details[open] {

  background:
    #ffffff;

  border-color:
    #bfd8c3;

}


.faq-list details p {

  margin:
    0;

  padding:
    0 18px 18px;

  color:
    #4d5c51;

  font-size:
    0.95rem;

  line-height:
    1.65;

}


@media(max-width:760px){

  .faq-list summary {

    padding:
      14px;

    font-size:
      0.95rem;

  }


  .faq-list details p {

    padding:
      0 14px 16px;

  }

}

/* ==================================================
   GROWING GUIDE DESIGN SYSTEM
   Version 2.0

   SECTION MAP

   01. Page Layout
   02. Compact Guide Hero
   03. Hero Color Themes
   04. Quick Facts
   05. Crop Snapshot
   06. Crop Recommendation
   07. Crop Planner Button
   08. Learning Grids and Ratings
   09. Callout Boxes
   10. Numbered Steps
   11. Timelines and Checklists
   12. Comparison Cards
   13. Guide Tables
   14. Sources and Related Guides
   15. Guide FAQ
   16. Mobile Layout
   ================================================== */

/* ==================================================
   GROWING GUIDE DESIGN SYSTEM
   Version 2.0
   ================================================== */


/* --------------------------------------------------
   PAGE LAYOUT
   -------------------------------------------------- */

.growing-guide-page,
.kale-guide-page {
  max-width: 1180px;
  margin: 32px auto;
  padding: 0 20px;
}

.growing-guide-page .section,
.kale-guide-page .section {
  overflow-wrap: anywhere;
}

.growing-guide-page .section p,
.growing-guide-page .section li,
.growing-guide-page .section td,
.growing-guide-page .section th,
.kale-guide-page .section p,
.kale-guide-page .section li,
.kale-guide-page .section td,
.kale-guide-page .section th {
  font-size: 0.98rem;
  line-height: 1.55;
}

.growing-guide-page .section h2,
.kale-guide-page .section h2 {
  line-height: 1.2;
}

/* --------------------------------------------------
   SHARED GROWING-GUIDE TABLES
   -------------------------------------------------- */

.growing-guide-page table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}

.growing-guide-page table th,
.growing-guide-page table td {
  padding: 13px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #d8e2d8;
}

.growing-guide-page table th {
  color: #ffffff;
  font-weight: 800;
  background: #356f44;
}

.growing-guide-page table tr:nth-child(even) td {
  background: #f7faf7;
}

.growing-guide-page table td {
  color: #303a33;
}

@media (max-width: 760px) {

  .growing-guide-page table {
    font-size: 0.92rem;
  }

}


/* --------------------------------------------------
   COMPACT GUIDE HERO
   -------------------------------------------------- */

.crop-guide-hero {
  padding: 22px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      rgba(42, 91, 52, 0.97),
      rgba(87, 126, 54, 0.95)
    );
  border-radius: 20px;
  box-shadow:
    0 16px 36px
    rgba(41, 78, 42, 0.18);
}

.crop-guide-hero-grid {
  display: grid;
  grid-template-columns:
    215px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.crop-guide-hero-image {
  width: 100%;
}

.crop-guide-hero-image img {
  display: block;
  width: 100%;
  height: 215px;
  object-fit: cover;
  border-radius: 14px;
}

.crop-guide-hero-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.crop-guide-hero-content h1 {
  margin: 0 0 9px;
  font-size:
    clamp(
      1.9rem,
      3vw,
      2.4rem
    );
  line-height: 1.08;
}

.crop-guide-hero-content p {
  max-width: 760px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.48;
}

.crop-guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  justify-content: center;
  align-self: center;
}

.crop-guide-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  color: #21442a;
  font-size: 0.8rem;
  line-height: 1.15;
  font-weight: 750;
  background: #dcefcf;
  border:
    1px solid
    rgba(33, 68, 42, 0.16);
  border-radius: 999px;
  white-space: nowrap;
}


/* --------------------------------------------------
   HERO COLOR THEMES
   -------------------------------------------------- */

.crop-guide-hero--buckwheat {
  background:
    linear-gradient(
      135deg,
      rgba(82, 70, 45, 0.97),
      rgba(139, 99, 49, 0.95)
    );
  box-shadow:
    0 16px 36px
    rgba(69, 72, 35, 0.18);
}

.crop-guide-hero--buckwheat
.crop-guide-tag {
  color: #402d1d;
  background: #ead4a7;
  border-color:
    rgba(64, 45, 29, 0.16);
}


/* --------------------------------------------------
   QUICK FACTS
   -------------------------------------------------- */

.quick-facts-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quick-fact {
  padding: 18px;
  background: #f8fbf7;
  border: 1px solid #d7e3d6;
  border-radius: 13px;
}

.quick-fact strong {
  display: block;
  margin-bottom: 6px;
  color: #194f2a;
}


/* --------------------------------------------------
   CROP SNAPSHOT
   -------------------------------------------------- */

.crop-snapshot {
  margin-top: 24px;
  padding: 24px;
  background:
    linear-gradient(
      135deg,
      #f8fbf7,
      #fffaf0
    );
  border: 1px solid #d7e3d6;
  border-radius: 16px;
  box-shadow:
    0 10px 25px
    rgba(25, 79, 42, 0.07);
}

.crop-snapshot-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.crop-snapshot-header h2 {
  margin: 0;
  color: #194f2a;
}

.crop-snapshot-rating {
  padding: 8px 13px;
  color: #5e4515;
  font-size: 0.95rem;
  font-weight: 800;
  background: #fff2c9;
  border: 1px solid #e7cf82;
  border-radius: 999px;
}

.crop-snapshot-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.crop-snapshot-item {
  padding: 15px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #dde7dc;
  border-radius: 11px;
}

.crop-snapshot-item strong {
  display: block;
  margin-bottom: 5px;
  color: #194f2a;
}


/* --------------------------------------------------
   CROP RECOMMENDATION
   -------------------------------------------------- */

.crop-recommendation {
  margin-top: 24px;
  padding: 24px;
  background: #f1f8f2;
  border: 1px solid #cae0ce;
  border-left: 7px solid #4c8b5d;
  border-radius: 14px;
}

.crop-recommendation h2 {
  margin-top: 0;
  color: #194f2a;
}

.crop-recommendation-rating {
  display: inline-block;
  margin-bottom: 15px;
  padding: 7px 12px;
  color: #285c37;
  font-weight: 800;
  background: #dff0e3;
  border: 1px solid #bdd9c4;
  border-radius: 999px;
}

.crop-recommendation-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.crop-recommendation-card {
  padding: 18px;
  background: #ffffff;
  border: 1px solid #d4e3d6;
  border-radius: 12px;
}

.crop-recommendation-card h3 {
  margin-top: 0;
  color: #194f2a;
}

.crop-recommendation-card ul {
  margin-bottom: 0;
}

.crop-recommendation-caution {
  background: #fffaf0;
  border-color: #e8d9b8;
}

.crop-recommendation-caution h3 {
  color: #74511d;
}


/* --------------------------------------------------
   CROP PLANNER BUTTON
   -------------------------------------------------- */

.crop-planner-button-row {
  margin-top: 19px;
}

.crop-planner-button {
  display: inline-block;
  padding: 12px 18px;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  background: #2f7245;
  border-radius: 10px;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.crop-planner-button:hover {
  color: #ffffff;
  background: #245c37;
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px
    rgba(25, 79, 42, 0.18);
}


/* --------------------------------------------------
   LEARNING GRID
   -------------------------------------------------- */

.crop-learning-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 17px;
}

.crop-learning-item {
  position: relative;
  padding: 11px 12px 11px 38px;
  background: #f8fbf8;
  border: 1px solid #dce6dd;
  border-radius: 10px;
}

.crop-learning-item::before {
  content: "✓";
  position: absolute;
  top: 10px;
  left: 13px;
  color: #2f7245;
  font-weight: 900;
}


/* --------------------------------------------------
   CROP RATING
   -------------------------------------------------- */

.crop-rating {
  color: #a46f18;
  font-weight: 800;
  letter-spacing: 1px;
}


/* --------------------------------------------------
   CROP TIMELINE
   -------------------------------------------------- */

.crop-timeline {
  position: relative;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.crop-timeline::before {
  content: "";
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 19px;
  width: 3px;
  background: #cbdccb;
}

.crop-timeline li {
  position: relative;
  margin-bottom: 14px;
  padding: 15px 16px 15px 54px;
  background: #f8fbf8;
  border: 1px solid #d8e4d9;
  border-radius: 11px;
}

.crop-timeline li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 11px;
  width: 17px;
  height: 17px;
  background: #337747;
  border: 4px solid #e7f1e8;
  border-radius: 50%;
}

.crop-timeline strong {
  color: #194f2a;
}


/* --------------------------------------------------
   CROP CHECKLIST
   -------------------------------------------------- */

.crop-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crop-checklist li {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 14px 12px 43px;
  background: #f8fbf8;
  border: 1px solid #d9e4da;
  border-radius: 10px;
}

.crop-checklist li::before {
  content: "☐";
  position: absolute;
  top: 10px;
  left: 14px;
  color: #337747;
  font-size: 1.15rem;
  font-weight: 800;
}


/* --------------------------------------------------
   CALLOUT BOXES
   -------------------------------------------------- */

.crop-notice-box,
.greens-notice,
.pumpkin-notice {
  padding: 20px;
  color: #5d4217;
  background: #fff8e8;
  border: 1px solid #ead7aa;
  border-left: 6px solid #c99735;
  border-radius: 12px;
}

.crop-success-box,
.greens-success-box,
.pumpkin-success-box {
  padding: 20px;
  background: #f1f8f2;
  border: 1px solid #cae0ce;
  border-left: 6px solid #4c8b5d;
  border-radius: 12px;
}

.crop-warning-box,
.greens-warning-box,
.pumpkin-warning-box {
  padding: 20px;
  color: #613e19;
  background: #fff5e9;
  border: 1px solid #ead1af;
  border-left: 6px solid #b46b2e;
  border-radius: 12px;
}

.crop-danger-box {
  padding: 20px;
  color: #5d2929;
  background: #fff1f1;
  border: 1px solid #e4bcbc;
  border-left: 6px solid #9d4444;
  border-radius: 12px;
}


/* --------------------------------------------------
   NUMBERED STEPS
   -------------------------------------------------- */

.crop-steps,
.greens-steps,
.pumpkin-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crop-steps {
  counter-reset: crop-step;
}

.greens-steps {
  counter-reset: greens-step;
}

.pumpkin-steps {
  counter-reset: pumpkin-step;
}

.crop-steps li,
.greens-steps li,
.pumpkin-steps li {
  position: relative;
  margin-bottom: 15px;
  padding: 18px 18px 18px 62px;
  background: #f8fbf8;
  border: 1px solid #d8e4d9;
  border-radius: 12px;
}

.crop-steps li::before,
.greens-steps li::before,
.pumpkin-steps li::before {
  position: absolute;
  top: 16px;
  left: 17px;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  background: #337747;
  border-radius: 50%;
}

.crop-steps li::before {
  counter-increment: crop-step;
  content: counter(crop-step);
}

.greens-steps li::before {
  counter-increment: greens-step;
  content: counter(greens-step);
}

.pumpkin-steps li::before {
  counter-increment: pumpkin-step;
  content: counter(pumpkin-step);
}

.crop-steps strong,
.greens-steps strong,
.pumpkin-steps strong {
  display: block;
  margin-bottom: 5px;
  color: #194f2a;
}


/* --------------------------------------------------
   COMPARISON CARDS
   -------------------------------------------------- */

.crop-comparison-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.crop-comparison-card {
  padding: 18px;
  background: #fafcf9;
  border: 1px solid #d8e4d9;
  border-radius: 13px;
}

.crop-comparison-card h3 {
  margin-top: 0;
  color: #194f2a;
}

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


/* --------------------------------------------------
   GUIDE TABLES
   -------------------------------------------------- */

.crop-calendar,
.greens-calendar,
.pumpkin-calendar,
.crop-scorecard {
  width: 100%;
  border-collapse: collapse;
}

.crop-calendar th,
.crop-calendar td,
.greens-calendar th,
.greens-calendar td,
.pumpkin-calendar th,
.pumpkin-calendar td,
.crop-scorecard th,
.crop-scorecard td {
  padding: 13px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #d8e2d8;
}

.crop-calendar th,
.greens-calendar th,
.pumpkin-calendar th,
.crop-scorecard th {
  color: #ffffff;
  background: #356f44;
}

.crop-calendar tr:nth-child(even) td,
.greens-calendar tr:nth-child(even) td,
.pumpkin-calendar tr:nth-child(even) td,
.crop-scorecard tr:nth-child(even) td {
  background: #f7faf7;
}


/* --------------------------------------------------
   SOURCES AND RELATED GUIDES
   -------------------------------------------------- */

.source-card {
  margin-bottom: 12px;
  padding: 15px;
  background: #f7faf7;
  border: 1px solid #dbe5dc;
  border-radius: 10px;
}

.source-card strong {
  display: block;
  margin-bottom: 4px;
}

.source-card p {
  margin: 5px 0 0;
}

.next-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.next-guide-card {
  padding: 19px;
  background: #f8fbf8;
  border: 1px solid #d7e3d8;
  border-radius: 13px;
}

.next-guide-card h3 {
  margin-top: 0;
  color: #194f2a;
}


/* --------------------------------------------------
   GUIDE FAQ
   -------------------------------------------------- */

.growing-guide-page details,
.kale-guide-page details {
  margin-bottom: 12px;
  padding: 15px 17px;
  background: #f8fbf8;
  border: 1px solid #d9e4da;
  border-radius: 11px;
}

.growing-guide-page summary,
.kale-guide-page summary {
  color: #194f2a;
  font-weight: 800;
  cursor: pointer;
}

.growing-guide-page details p:last-child,
.kale-guide-page details p:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------
   MOBILE
   -------------------------------------------------- */

@media (max-width: 760px) {

  .growing-guide-page,
  .kale-guide-page {
    margin-top: 22px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .quick-facts-grid,
  .crop-snapshot-grid,
  .crop-recommendation-grid,
  .crop-learning-grid,
  .crop-comparison-grid,
  .next-guide-grid {
    grid-template-columns: 1fr;
  }

  .crop-guide-hero {
    padding: 18px;
  }

  .crop-snapshot,
  .crop-recommendation {
    padding: 19px;
  }

  .crop-guide-hero-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .crop-guide-hero-image {
    max-width: 230px;
    margin: 0 auto;
  }

  .crop-guide-hero-image img {
    height: 190px;
  }

  .crop-guide-hero-content h1 {
    font-size: 2rem;
  }

  .crop-guide-hero-content p {
    font-size: 0.98rem;
  }

  .crop-calendar,
  .greens-calendar,
  .pumpkin-calendar,
  .crop-scorecard {
    font-size: 0.92rem;
  }

}

/* ==================================================
   SHARED LONG-FORM GUIDE NAVIGATION
   ================================================== */


/* --------------------------------------------------
   LAYOUT
   -------------------------------------------------- */

.guide-navigation-layout {
  display: grid;

  grid-template-columns:
    minmax(180px, 210px)
    minmax(0, 1fr);

  gap: 22px;

  align-items: start;

  /*
    Pull the navigation slightly farther
    toward the left edge without disturbing
    the main article.
  */
  margin-left: -18px;
}


/* --------------------------------------------------
   SIDEBAR
   -------------------------------------------------- */

.guide-navigation-sidebar {
  position: sticky;
  top: 18px;

  align-self: start;

  min-width: 0;

  max-height:
    calc(100vh - 36px);

  z-index: 20;
}


.guide-navigation {
  position: static;

  max-height:
    calc(100vh - 36px);

  overflow-y: auto;

  padding: 14px 12px;

  background: #ffffff;

  border:
    1px solid
    #dfe7df;

  border-radius: 15px;

  box-shadow:
    0 8px 22px
    rgba(35, 55, 40, 0.08);

  scrollbar-width: thin;
}


/* --------------------------------------------------
   HEADING
   -------------------------------------------------- */

.guide-navigation-heading {
  display: flex;
  gap: 9px;
  align-items: center;

  padding:
    4px
    4px
    13px;

  margin-bottom: 9px;

  border-bottom:
    1px solid
    #e5ebe5;
}

.guide-navigation-heading-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
}

.guide-navigation-heading strong {
  color: #245c37;
  font-size: 0.98rem;
  line-height: 1.25;
}


/* --------------------------------------------------
   LIST
   -------------------------------------------------- */

.guide-navigation-list {
  list-style: none;

  margin: 0;
  padding: 0;
}

.guide-navigation-item {
  margin: 0;
  padding: 0;
}

.guide-navigation-link,
.guide-navigation-link:visited {
  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr);

  gap: 7px;

  align-items: start;

  width: 100%;

  padding:
    6px
    7px;

  margin:
    1px
    0;

  color: #435348;

  text-decoration: none;

  border-radius: 8px;

  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.28;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.guide-navigation-link:hover {
  color: #245c37;
  background: #f1f6f2;
  text-decoration: none;
}

.guide-navigation-link:focus-visible {
  color: #245c37;
  background: #edf4ee;

  outline:
    2px solid
    #4c8c5e;

  outline-offset: 2px;
}


/* --------------------------------------------------
   INDICATOR
   -------------------------------------------------- */

.guide-navigation-indicator {
  display: inline-block;

  min-width: 16px;

  color: #9ba59d;

  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.4;

  text-align: center;
}

.guide-navigation-label {
  min-width: 0;
}


/* --------------------------------------------------
   PASSED SECTIONS
   -------------------------------------------------- */

.guide-navigation-link.is-past {
  color: #637269;
}

.guide-navigation-link.is-past
.guide-navigation-indicator {
  color: #6f9b77;
}


/* --------------------------------------------------
   ACTIVE SECTION
   -------------------------------------------------- */

.guide-navigation-link.is-active,
.guide-navigation-link.is-active:visited {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2f7245,
      #3f8756
    );

  box-shadow:
    0 5px 12px
    rgba(47, 114, 69, 0.18);

  transform:
    translateX(2px);
}

.guide-navigation-link.is-active
.guide-navigation-indicator {
  color: #ffffff;
}


/* --------------------------------------------------
   BACK TO TOP
   -------------------------------------------------- */

.guide-navigation-bottom {
  margin-top: 11px;
  padding-top: 11px;

  border-top:
    1px solid
    #e5ebe5;
}

.guide-navigation-top-link,
.guide-navigation-top-link:visited {
  display: block;

  padding:
    7px
    8px;

  color: #2f7245;

  font-size: 0.84rem;
  font-weight: 800;

  text-decoration: none;

  border-radius: 8px;
}

.guide-navigation-top-link:hover {
  color: #245c37;
  background: #f1f6f2;
  text-decoration: none;
}


/* --------------------------------------------------
   SCROLL TARGET OFFSET
   -------------------------------------------------- */

.guide-nav-section {
  scroll-margin-top: 24px;
}


/* --------------------------------------------------
   TABLET
   -------------------------------------------------- */

@media (max-width: 1100px) {

  .guide-navigation-layout {
    grid-template-columns:
      minmax(170px, 195px)
      minmax(0, 1fr);

    gap: 18px;

    margin-left: -10px;
  }

  .guide-navigation {
    padding:
      14px
      11px;
  }

  .guide-navigation-link,
  .guide-navigation-link:visited {
    font-size: 0.82rem;
  }

}


/* --------------------------------------------------
   MOBILE
   -------------------------------------------------- */

@media (max-width: 820px) {

  .guide-navigation-layout {
    display: block;
  }

  .guide-navigation-sidebar {
    display: none;
  }

}


/*
  ==================================================
  Floating Backyard Chicken Planner Promo
  ==================================================
*/

.bcp-planner-promo {
  position:
    fixed;

  right:
    14px;

  bottom:
    14px;

  width:
    185px;

  max-width:
    calc(
      100vw - 28px
    );

  z-index:
    9999;

  border-radius:
    12px;

  box-shadow:
    0 8px 24px
    rgba(
      0,
      0,
      0,
      0.22
    );

  overflow:
    visible;
}

.bcp-planner-promo__link {
  display:
    block;

  border-radius:
    12px;

  overflow:
    hidden;

  text-decoration:
    none;
}

.bcp-planner-promo__image {
  display:
    block;

  width:
    100%;

  height:
    auto;
}

.bcp-planner-promo__close {
  position:
    absolute;

  top:
    5px;

  right:
    5px;

  display:
    grid;

  width:
    24px;

  height:
    24px;

  padding:
    0;

  place-items:
    center;

  color:
    #ffffff;

  background:
    rgba(
      20,
      45,
      27,
      0.88
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.75
    );

  border-radius:
    50%;

  cursor:
    pointer;

  font-family:
    Arial,
    sans-serif;

  font-size:
    16px;

  font-weight:
    700;

  line-height:
    1;

  z-index:
    2;
}

.bcp-planner-promo__close:hover,
.bcp-planner-promo__close:focus-visible {
  background:
    #173f25;

  outline:
    2px solid
    #ffffff;

  outline-offset:
    2px;
}

/*
  Mobile
*/

@media
(max-width: 600px) {

  .bcp-planner-promo {
    right:
      8px;

    bottom:
      8px;

    width:
      150px;

    max-width:
      calc(
        100vw - 16px
      );
  }

  .bcp-planner-promo__close {
    top:
      4px;

    right:
      4px;

    width:
      22px;

    height:
      22px;

    font-size:
      14px;
  }

}