/*
Theme Name: Elmspur
Theme URI: https://elmspur.com
Author: Elmspur
Author URI: https://elmspur.com
Description: Block theme for elmspur.com - WordPress plugins and apps.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elmspur
*/

/* Sticky header — frosted glass */
.site-header {
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header.has-base-background-color {
  background-color: rgba(255, 255, 255, 0.92);
}

/* Nav link animated underline */
.site-header .wp-block-navigation a {
  position: relative;
  padding-bottom: 2px;
  letter-spacing: 0.015em;
}
.site-header .wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--wp--preset--color--primary);
  transition: width 0.2s ease;
}
.site-header .wp-block-navigation a:hover::after {
  width: 100%;
}

/* Outline button on the dark hero: the default outline variation is primary
   green on green (invisible until hover), so flip it to a white outline that
   inverts to filled-white on hover/focus — readable in every state. The
   `.wp-block-buttons` ancestor is included to out-specify WordPress's own
   outline-variation rule (`...:not(.has-text-color)`, 0,4,0), which otherwise
   wins and keeps the button green-on-green. */
.cascade-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
  color: #ffffff;
  border-color: #ffffff;
  background-color: transparent;
}
.cascade-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cascade-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus {
  color: var(--wp--preset--color--contrast);
  background-color: #ffffff;
  border-color: #ffffff;
}

/* Hero demo dropdowns: this is the live Elmspur Cascade block (.crd-cascade)
   given the .cascade-hero-demo class. These rules reproduce the translucent
   "pill" container and the solid-white dropdowns the former static mockup used,
   so the block's placement and styling are unchanged on the homepage. */
.cascade-hero-demo.crd-cascade {
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.cascade-hero-demo.crd-cascade select.crd-level {
  flex: 0 1 180px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
/* Solid white with dark text so the selects stay readable both closed and when
   the native option list is open. (Browsers/OSes render the open list natively
   and largely ignore CSS on <option>, so the readable colors live on the
   <select> itself; this rule just reinforces it.) */
.cascade-hero-demo select,
.cascade-hero-demo select option {
  color: var(--wp--preset--color--contrast);
  background-color: #ffffff;
}
/* Mobile: the plugin stacks the demo dropdowns vertically (flex-direction:
   column) below 480px. In a column the 180px flex-basis becomes the item's
   *height*, blowing the selects up into oversized boxes. Reset to auto height
   and let them fill the stacked width instead. */
@media (max-width: 480px) {
  .cascade-hero-demo.crd-cascade {
    padding: 1rem;
    gap: 0.5rem;
  }
  .cascade-hero-demo.crd-cascade select.crd-level {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Product screenshots in the Cascade feature rows: rounded, lightly framed
   against the white section so the editor/front-end captures read as UI. */
.cascade-shot img {
  border-radius: 8px;
  border: 1px solid #e2e8e4;
  box-shadow: 0 1px 4px rgba(26, 43, 31, 0.15);
  cursor: zoom-in; /* hint the native image-block lightbox (click to enlarge) */
}

/* Focus styles — visible on keyboard nav only */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Footer links inherit the white text color from parent */
footer .wp-block-list a,
footer .wp-block-navigation a {
  color: inherit;
  text-decoration: none;
}
footer .wp-block-list a:hover {
  text-decoration: underline;
}