/* ============================================
   Greenscape Pro - Additional Components
   ============================================ */

/* === Compact Header Nav Link (CTA button in header) === */
.gp-header .btn--header {
  padding: 6px 14px;
  font-size: 0.8125rem;
  background: var(--gp-sage);
  color: #fff;
  border-radius: var(--gp-radius-md);
  border: none;
}
.gp-header .btn--header:hover {
  background: var(--gp-sage-hover);
}

/* === Nature Icon Grid (for features) === */
.feature-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gp-space-lg);
  max-width: var(--gp-container);
  margin: 0 auto;
  padding: 0 var(--gp-space-lg);
}
.feature-icon-item {
  text-align: center;
  padding: var(--gp-space-lg);
}
.feature-icon-item__icon {
  font-size: 2.5rem;
  margin-bottom: var(--gp-space-sm);
  display: block;
}
.feature-icon-item h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}
.feature-icon-item p {
  font-size: 0.875rem;
  color: var(--gp-muted);
}

/* === Dark Section Extras === */
.gp-section--dark .section-header p {
  color: var(--gp-ink-subtle);
}

/* === Mobile Menu Toggle (for future use) === */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gp-ink-subtle);
  cursor: pointer;
  padding: 4px;
}
.menu-toggle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .gp-header nav ul { display: none; }
  .gp-header nav ul.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--gp-canvas-dark); padding: var(--gp-space-md); border-bottom: 1px solid var(--gp-hairline-dark); }
  .feature-icons { grid-template-columns: repeat(2, 1fr); }
}

/* === Smooth Scroll for the page === */
html {
  scroll-behavior: smooth;
}

/* === Selection === */
::selection {
  background: var(--gp-sage);
  color: #fff;
}

/* === Focus Styles === */
:focus-visible {
  outline: 2px solid var(--gp-sage);
  outline-offset: 2px;
}

/* === Links in content === */
.content-area a {
  color: var(--gp-sage-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--gp-transition);
}
.content-area a:hover {
  color: var(--gp-sage);
}