/* Utah Planting Date Calculator */
*, *::before, *::after { box-sizing: border-box; }
.calc-wrap { max-width: 1060px; margin: 0 auto; padding-bottom: 3rem; color: #252F40; }
.calc-wrap button, .calc-wrap input { font: inherit; }
.calc-header { background: linear-gradient(145deg,#0F2439,#252F40); padding: 2.25rem 2rem; color: #FFFFFF; overflow: hidden; position: relative; }
.calc-header::after { content:""; position:absolute; width:15rem; height:15rem; right:-5rem; bottom:-8rem; border-radius:50%; background:rgba(68,148,218,.16); }
.calc-header-inner { position:relative; z-index:1; }
.calc-header h1 { color:#FFFFFF; }
.calc-header p { max-width:45rem; color:#FFFFFF; }
.calc-header-eyebrow { display:inline-block; padding:.3rem .7rem; border-radius:1rem; background:rgba(68,148,218,.28); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.calc-header-lead {
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.6;
}

.calc-header .calc-feature-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: .28rem;
  max-width: 52rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.calc-header .calc-feature-list li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: .86rem;
  line-height: 1.35;
  list-style: none !important;
}
.calc-header .calc-feature-list li::marker {
  content: "";
}
.calc-header .calc-feature-list li::before {
  content: "\2713";
  position: absolute;
  top: 0;
  left: 0;
  color: #FFFFFF;
  font-weight: 700;
}


.selector-card { background:#FFFFFF; padding:1.5rem 1.75rem; box-shadow:0 .25rem 1.1rem rgba(15,36,57,.1); border-radius:0 0 .5rem .5rem; }
.selector-heading-row, .results-heading-row, .month-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.location-button { white-space:nowrap; }
.city-input-wrap { position:relative; }
.city-input, .veg-search { width:100%; min-height:48px; border:1px solid #838898; border-radius:.3rem; padding:.7rem 2.5rem .7rem .9rem; background:#FFFFFF; color:#252F40; }
.city-input:focus, .veg-search:focus, .month-slider:focus, button:focus { outline:3px solid rgba(68,148,218,.35); outline-offset:2px; }
.city-chevron { position:absolute; right:.9rem; top:50%; transform:translateY(-50%); pointer-events:none; }
.city-dropdown { position:absolute; z-index:20; left:0; right:0; max-height:20rem; overflow-y:auto; list-style:none; padding:0; margin:.2rem 0 0; background:#FFFFFF; border:1px solid #838898; border-radius:.3rem; box-shadow:0 .5rem 1rem rgba(15,36,57,.16); }
.city-option { display:flex; justify-content:space-between; gap:1rem; padding:.75rem .9rem; cursor:pointer; border-bottom:1px solid #E9ECEF; }
.city-option:hover { background:#E1EAF9; }
.city-option span { color:#495057; font-size:.82rem; }
.city-empty { padding:1rem; }
.city-hint, .location-feedback { font-size:.88rem; }
.location-feedback:empty { display:none; }

.frost-banner { grid-template-columns:repeat(3,1fr); gap:1px; background:#CED4DA; margin-top:1rem; border:1px solid #CED4DA; border-radius:.4rem; overflow:hidden; }
.frost-item { background:#FFFFFF; padding:.9rem 1rem; display:flex; flex-direction:column; }
.frost-label { font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:#495057; }
.frost-highlight { background:#E1EAF9; }

.today-summary, .month-panel, .results-section { margin-top:1rem; border:1px solid #DEE2E6; border-radius:.45rem; background:#FFFFFF; }
.today-summary { padding:1rem 1.2rem; }
.today-summary-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.summary-kicker { display:block; color:#226BAA; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.summary-date { font-size:1.35rem; font-weight:700; color:#384660; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.summary-item { padding:.7rem .8rem; background:#F8F9FA; border-radius:.35rem; border-left:.25rem solid #226BAA; }
.summary-item.summary-now { border-left-color:#588038; }
.summary-item p { margin:.2rem 0 0; font-size:.9rem; line-height:1.45; }
.summary-item a, .month-action a { color:#0F2439; text-decoration:underline; }

.month-panel { padding:1.1rem 1.2rem; }
.month-current-label { display:block; margin-top:1rem; }
.month-slider { width:100%; margin:.55rem 0 .15rem; accent-color:#226BAA; }
.month-scale { display:flex; justify-content:space-between; font-size:.72rem; color:#495057; }
.month-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1rem; }
.month-action { background:#F8F9FA; border-top:.25rem solid #4494DA; padding:.8rem; border-radius:.3rem; }
.month-action p { margin:.25rem 0 0; font-size:.86rem; line-height:1.45; }

.results-section { padding:1.25rem; }
.results-toolbar { display:flex; gap:.75rem; align-items:center; margin-top:1rem; }
.search-wrap { flex:1; }
.view-toggle { display:inline-flex; border:1px solid #838898; border-radius:.3rem; overflow:hidden; }
.view-button { border:0; background:#FFFFFF; padding:.55rem .75rem; color:#252F40; }
.view-button + .view-button { border-left:1px solid #838898; }
.view-button.active { background:#384660; color:#FFFFFF; }
.favorite-filter { min-height:44px; border:1px solid #838898; background:#FFFFFF; padding:.55rem .8rem; border-radius:.3rem; }
.favorite-filter.active { background:#E1EAF9; border-color:#226BAA; }

.status-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 .6rem; }
.status-tab { border:1px solid #838898; background:#FFFFFF; border-radius:1rem; padding:.42rem .75rem; font-size:.86rem; }
.status-tab.active { background:#0F2439; border-color:#0F2439; color:#FFFFFF; }
.status-tab span { font-size:.78rem; }
.results-count { color:#495057; font-size:.85rem; margin-bottom:.8rem; }

.vegetable-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.vegetable-card { border:1px solid #DEE2E6; border-top:.3rem solid #838898; border-radius:.4rem; padding:1rem; box-shadow:0 .15rem .55rem rgba(15,36,57,.07); min-width:0; }
.status-border-now { border-top-color:#588038; }
.status-border-upcoming { border-top-color:#226BAA; }
.status-border-past { border-top-color:#838898; }
.card-topline, .vegetable-title-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.vegetable-title-row { justify-content:flex-start; margin:.75rem 0 .35rem; }
.veg-emoji { font-size:1.45rem; flex:0 0 auto; }
.veg-name-link { color:#0F2439; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.favorite-button { border:0; background:transparent; font-size:1.5rem; line-height:1; padding:.2rem; color:#AE6002; }
.status-badge { display:inline-block; border-radius:1rem; padding:.25rem .55rem; font-size:.76rem; font-weight:700; white-space:nowrap; }
.status-now { background:#E8F0E2; color:#35521F; }
.status-upcoming { background:#E1EAF9; color:#154A78; }
.status-past { background:#E9ECEF; color:#495057; }
.card-status-sentence { margin:.25rem 0 .75rem; font-size:.9rem; }
.date-list { margin:0; border-top:1px solid #E9ECEF; }
.date-list div { display:grid; grid-template-columns:7.2rem 1fr; gap:.6rem; padding:.42rem 0; border-bottom:1px solid #E9ECEF; }
.date-list dt { font-size:.78rem; color:#495057; }
.date-list dd { margin:0; font-size:.86rem; }
.protect-note { display:inline-block; color:#7A4300; font-size:.75rem; }

.visual-timeline { margin-top:.85rem; }
.timeline-track { height:.42rem; background:#DEE2E6; border-radius:1rem; position:relative; margin:.45rem .3rem; }
.timeline-marker { position:absolute; top:50%; width:.8rem; height:.8rem; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #FFFFFF; box-shadow:0 0 0 1px #495057; }
.timeline-marker.indoor, .key-indoor { background:#226BAA; }
.timeline-marker.outdoor, .key-outdoor { background:#588038; }
.timeline-marker.fall, .key-fall { background:#AE6002; }
.timeline-labels { display:flex; justify-content:space-between; font-size:.65rem; color:#495057; }
.timeline-key { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.25rem; font-size:.68rem; color:#495057; }
.timeline-key i { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.2rem; }
.education-tip { margin:.8rem 0 .55rem; padding:.65rem; background:#FFF8E8; border-left:.22rem solid #AE6002; font-size:.82rem; line-height:1.45; }
.guide-link { display:inline-block; font-weight:700; font-size:.84rem; color:#226BAA; }

.veg-table { width:100%; }
.veg-table th { background:#384660; color:#FFFFFF; white-space:nowrap; }
.veg-table th, .veg-table td { padding:.7rem; vertical-align:middle; }
.row-past { opacity:.75; }
.empty-state { text-align:center; padding:2rem 1.25rem; }
.results-footer { margin-top:1.2rem; padding:1rem; background:#F8F9FA; border-left:.25rem solid #4494DA; font-size:.82rem; line-height:1.5; }

@media (max-width:767.98px) {

  .calc-header .calc-feature-list {
    grid-template-columns: 1fr;
    row-gap: .25rem;
  }
  .calc-header { padding:1.6rem 1.2rem; }
  .selector-card, .results-section { padding:1rem; }
  .selector-heading-row, .results-heading-row, .month-panel-heading { align-items:flex-start; flex-direction:column; }
  .location-button { width:100%; }
  .frost-banner, .summary-grid, .month-actions, .vegetable-grid { grid-template-columns:1fr; }
  .results-toolbar { align-items:stretch; flex-direction:column; }
  .favorite-filter { width:100%; }
  .view-toggle { width:100%; }
  .view-button { flex:1; }
  .date-list div { grid-template-columns:6.5rem 1fr; }
}

/* Frequently Asked Questions */
.faq-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 1px solid #DEE2E6;
  border-radius: .45rem;
}
.faq-intro {
  max-width: 48rem;
}
.faq-list {
  margin-top: 1rem;
  border-top: 1px solid #CED4DA;
}
.faq-item {
  border-bottom: 1px solid #CED4DA;
}
.faq-item summary {
  position: relative;
  padding: 1rem 2.5rem 1rem 0;
  color: #0F2439;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: .72rem;
  right: .25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #E1EAF9;
  color: #0F2439;
  font-size: 1.25rem;
  line-height: 1.65rem;
  text-align: center;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item summary:hover {
  color: #226BAA;
}
.faq-item summary:focus {
  outline: 3px solid rgba(68,148,218,.35);
  outline-offset: 3px;
}
.faq-answer {
  padding: 0 2.5rem .9rem 0;
}
.faq-answer p {
  margin: 0;
  line-height: 1.65;
}
.faq-source {
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: #F8F9FA;
  border-left: .25rem solid #4494DA;
  font-size: .88rem;
}
@media (max-width: 767.98px) {
  .faq-section {
    padding: 1rem;
  }
  .faq-item summary {
    padding-right: 2.25rem;
  }
  .faq-answer {
    padding-right: 0;
  }
}

.calc-header .calc-header-lead {
  margin-bottom: .65rem !important;
}

.station-suggestions {
  padding: 1rem;
  border: 1px solid #CED4DA;
  border-radius: .4rem;
  background: #F8F9FA;
}
.station-suggestions-heading p {
  color: #495057;
  font-size: .86rem;
}
.station-choice-list {
  display: grid;
  gap: .6rem;
  margin-top: .9rem;
}
.station-choice {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid #838898;
  border-radius: .35rem;
  background: #FFFFFF;
  color: #252F40;
  text-align: left;
}
.station-choice:hover {
  border-color: #226BAA;
  background: #E1EAF9;
}
.station-choice.recommended {
  border: 2px solid #226BAA;
}
.station-choice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.station-choice-meta {
  display: block;
  margin-top: .2rem;
  color: #495057;
  font-size: .8rem;
  line-height: 1.4;
}
.recommended-label {
  display: inline-block;
  padding: .18rem .48rem;
  border-radius: 1rem;
  background: #E1EAF9;
  color: #154A78;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.station-note {
  margin-top: .8rem;
  color: #495057;
  font-size: .78rem;
  line-height: 1.45;
}
.city-option strong {
  display: block;
}
.city-option {
  align-items: center;
}
@media (max-width: 767.98px) {
  .station-choice-top {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
}

.city-option[tabindex="0"]:focus {
  outline: 3px solid #FFBF47;
  outline-offset: -3px;
  background: #E1EAF9;
}
.location-change-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: #005EA8;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.location-change-button:hover,
.location-change-button:focus {
  color: #003F72;
  text-decoration-thickness: 2px;
}
.location-change-button:focus {
  outline: 3px solid #FFBF47;
  outline-offset: 2px;
}

.zip-option span {
  line-height: 1.4;
}