/*
Theme Name: Station Mindset
Theme URI: https://stationmindset.com/
Author: Station Mindset
Description: A bold, accessible block theme for Station Mindset vending services in Greater St. Louis.
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.3
Version: 3.0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: station-mindset
Tags: block-patterns, full-site-editing, accessibility-ready, custom-colors, custom-logo, featured-images
*/

:root {
  --sm-charcoal: #2a3438;
  --sm-charcoal-deep: #182024;
  --sm-orange: #f85808;
  --sm-orange-dark: #c2410c;
  --sm-orange-pale: #fff0e8;
  --sm-warm-white: #f7f5f2;
  --sm-warm-gray: #eee9e3;
  --sm-line: #d8d1ca;
  --sm-shadow: 0 20px 55px rgba(42, 52, 56, .16);
  --sm-card-shadow: 0 10px 32px rgba(42, 52, 56, .10);
  --sm-radius: 22px;
  /* Version 2.0 compatibility aliases for stored 1.x content. */
  --sm-navy: var(--sm-charcoal);
  --sm-navy-deep: var(--sm-charcoal-deep);
  --sm-teal: var(--sm-orange-dark);
  --sm-teal-bright: var(--sm-orange);
  --sm-red: var(--sm-orange);
  --sm-ice: var(--sm-warm-white);
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; text-wrap: pretty; }
::selection { background: var(--sm-orange); color: var(--sm-charcoal-deep); }
a { text-underline-offset: .18em; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > main { min-width: 0; }
.sm-site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 30px rgba(2,18,34,.18);
}

.sm-header-inner { min-height: 58px; }
.sm-brand-lockup { gap: .9rem !important; }
.sm-brand-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sm-brand-logo img { display: block; width: auto; height: 46px; object-fit: contain; }
.sm-brand-logo--full img { height: auto; width: min(280px, 78vw); }
.sm-site-header .wp-block-site-title a { text-decoration: none; }
.sm-site-header .wp-block-navigation-item__content { font-weight: 760; text-decoration: none; }
.sm-site-header .wp-block-navigation-item__content:hover { color: #ffb085; }

.sm-hero {
  position: relative;
  isolation: isolate;
  min-height: 610px;
  background-color: var(--sm-charcoal-deep);
  background-image:
    linear-gradient(90deg, rgba(24,32,36,.99) 0%, rgba(24,32,36,.95) 39%, rgba(24,32,36,.48) 68%, rgba(24,32,36,.18) 100%),
    url('assets/images/hero-smart-store.webp');
  background-size: cover;
  background-position: center;
}

.sm-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--sm-orange) 0 66%, transparent 66% 69%, #fff 69% 73%, transparent 73% 76%, var(--sm-orange) 76% 100%);
}

.sm-hero-copy { max-width: 680px; }
.sm-hero h1 { max-width: 680px; font-size: clamp(3rem, 5.4vw, 4.85rem) !important; text-shadow: 0 3px 20px rgba(0,0,0,.25); }
.sm-lede { max-width: 650px; }
.sm-eyebrow {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.sm-proof-strip { position: relative; z-index: 4; margin-top: -4.75rem !important; }
.sm-proof-card,
.sm-card,
.sm-media-card,
.sm-form-shell {
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-card-shadow);
}

.sm-proof-card { background: #fff; overflow: hidden; }
.sm-proof-card > .wp-block-columns { gap: 0; }
.sm-proof-item {
  display: flex;
  align-items: center;
  min-height: 145px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.sm-proof-item p { margin: 0; }
.sm-proof-item + .sm-proof-item { border-left: 1px solid var(--sm-line); }
.sm-proof-icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1rem;
  background: var(--sm-orange-pale);
  color: var(--sm-orange-dark);
  font-weight: 900;
  letter-spacing: -.03em;
}

.sm-card {
  box-sizing: border-box;
  min-width: 0;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sm-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow); border-color: rgba(248,88,8,.45); }
.sm-card--dark { background: var(--sm-charcoal); border-color: var(--sm-charcoal); color: #fff; }
.sm-card--dark p { color: var(--sm-warm-gray); }
.sm-card--dark .sm-icon { background: var(--sm-orange-dark); color: #fff; }
.sm-icon {
  display: inline-grid;
  place-items: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 .75rem;
  border-radius: 1rem;
  background: var(--sm-orange-pale);
  color: var(--sm-orange-dark);
  font-weight: 900;
}
.sm-number {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--sm-charcoal);
  color: #fff;
  font-weight: 850;
}

.sm-section-rule { position: relative; }
.sm-section-rule::before {
  content: "";
  display: block;
  width: 6.5rem;
  height: .42rem;
  margin-bottom: 1.6rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--sm-orange) 0 72%, transparent 72% 78%, var(--sm-charcoal) 78% 100%);
}

.sm-media-card { overflow: hidden; background: #fff; }
.sm-content-image { display: block; width: 100%; max-width: 100%; height: auto; }
.sm-media-card img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.sm-media-card--right img { object-position: center right; }
.sm-media-card--left img { object-position: center left; }
.sm-brand-panel { padding: clamp(2rem, 5vw, 4rem); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); }
.sm-brand-panel .sm-brand-logo--full { display: block; margin-bottom: 2rem; }
.sm-brand-panel .sm-brand-logo--full img { width: min(360px, 100%); }

.sm-check-list { list-style: none; padding-left: 0; }
.sm-check-list li { position: relative; padding-left: 1.85rem; margin-bottom: .8rem; }
.sm-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .02em;
  color: var(--sm-orange-dark);
  font-weight: 900;
}

.sm-page-hero { position: relative; overflow: hidden; }
.sm-page-hero::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: -7rem;
  bottom: -12rem;
  border: 3rem solid rgba(248,88,8,.22);
  border-radius: 50%;
  pointer-events: none;
}

.sm-cta { position: relative; overflow: hidden; }
.sm-cta > * { position: relative; z-index: 1; }
.sm-cta::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: -9rem;
  top: -12rem;
  border: 3rem solid rgba(255,255,255,.11);
  border-radius: 50%;
  pointer-events: none;
}

.sm-faq details { border-top: 1px solid var(--sm-line); padding: 1.25rem 0; }
.sm-faq details:last-child { border-bottom: 1px solid var(--sm-line); }
.sm-faq summary { cursor: pointer; font-weight: 780; color: var(--sm-charcoal); }
.sm-faq summary::marker { color: var(--sm-orange-dark); }
.sm-contact-details { display: flex; flex-wrap: wrap; gap: .55rem 1rem; padding: 1.5rem; border-radius: 16px; }
.sm-contact-details:empty { display: none; }
.sm-contact-details a { color: inherit; font-weight: 760; }
.sm-contact-details__separator { opacity: .45; }
.sm-contact-details__item { display: block; flex: 1 1 13rem; }

.sm-form-shell { background: #fff; overflow: visible; padding: clamp(1.5rem, 4vw, 2.5rem); }
.sm-form-notice { padding: 1rem 1.25rem; border-radius: 12px; background: var(--sm-warm-gray); }
.sm-form-notice--admin { border-left: 4px solid var(--sm-orange); }

.sm-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  border-radius: var(--sm-radius);
  background: var(--sm-charcoal-deep);
  box-shadow: var(--sm-card-shadow);
}

.sm-dark-section { background: var(--sm-charcoal-deep); color: #fff; }
.sm-dark-section p { color: var(--sm-warm-gray); }
.sm-surface-warm { background: var(--sm-warm-gray); }
.sm-brand-panel { background: var(--sm-warm-white); }

.wp-element-button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(42,52,56,.20); }
.is-style-outline .wp-element-button:hover { background: rgba(248,88,8,.10); }
.sm-button-red .wp-element-button { background: var(--sm-orange-dark) !important; color: #fff !important; }

.sm-site-footer a { color: inherit; }
.sm-site-footer .sm-brand-logo--mark img { width: auto; max-width: 100%; height: 80px; }
.sm-site-footer ul { list-style: none; margin: 0; padding: 0; }
.sm-site-footer li { margin-bottom: .45rem; }
.sm-nav-cta > a { padding: .62rem 1rem !important; border-radius: 999px; background: var(--sm-orange-dark); color: #fff !important; }
.sm-footer-preferences { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.sm-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: stretch; gap: 1.25rem; }
.sm-host-grid .sm-card,
.sm-location-grid .sm-card,
.sm-support-grid .sm-card { padding: clamp(1.5rem, 3vw, 2rem); }
.sm-location-grid { margin-bottom: var(--wp--preset--spacing--50); }
.sm-support-grid .sm-card { display: flex; flex-direction: column; }
.sm-support-grid .sm-card__action { margin-top: auto; margin-bottom: 0; padding-top: .75rem; }
.sm-support-grid .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
}
.sm-cta-actions { align-items: stretch; gap: .75rem 1rem !important; margin-top: 1.5rem; }
.sm-cta-actions > * { margin-block: 0 !important; }

.sm-material-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 1rem;
  background: var(--sm-orange-pale);
}
.sm-material-icon::before,
.sm-direct-contact .sm-contact-details__item a::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--sm-orange-dark);
  -webkit-mask: var(--sm-material-icon) center / contain no-repeat;
  mask: var(--sm-material-icon) center / contain no-repeat;
}
.sm-material-icon--issue { --sm-material-icon: url('assets/icons/report_problem.svg'); }
.sm-material-icon--product { --sm-material-icon: url('assets/icons/local_drink.svg'); }
.sm-material-icon--service { --sm-material-icon: url('assets/icons/storefront.svg'); }
.sm-material-icon--contact { --sm-material-icon: url('assets/icons/contact_support.svg'); }
.sm-direct-contact .sm-contact-details { flex-direction: column; gap: .75rem; padding: 0; }
.sm-direct-contact .sm-contact-details__item { flex: 0 1 auto; }
.sm-direct-contact .sm-contact-details__item a { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; }
.sm-direct-contact .sm-contact-details__item a[href^="tel:"] { --sm-material-icon: url('assets/icons/call.svg'); }
.sm-direct-contact .sm-contact-details__item a[href^="mailto:"] { --sm-material-icon: url('assets/icons/mail.svg'); }
.sm-stat { padding: 1.2rem; border-left: 4px solid var(--sm-orange-dark); background: var(--sm-orange-pale); }
.sm-table-wrap { overflow-x: auto; }
.sm-table { width: 100%; border-collapse: collapse; background: #fff; }
.sm-table th, .sm-table td { padding: 1rem; border: 1px solid var(--sm-line); text-align: left; vertical-align: top; }
.sm-table th { background: var(--sm-charcoal); color: #fff; }
.sm-support-alert { padding: 1rem 1.25rem; border-left: 5px solid var(--sm-orange-dark); background: var(--sm-orange-pale); }
.sm-form-anchor { scroll-margin-top: 2rem; }
.sm-landing-nav .wp-block-navigation { display: none; }

.sm-consent {
  position: fixed;
  z-index: 99999;
  right: 1rem;
  bottom: 1rem;
  width: min(31rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--sm-line);
  border-radius: 16px;
  background: #fff;
  color: var(--sm-charcoal);
  box-shadow: 0 18px 55px rgba(24,32,36,.28);
}
.sm-consent[hidden], .sm-consent-manage[hidden] { display: none; }
.sm-consent p { margin: 0 0 .8rem; }
.sm-consent__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.sm-consent button, .sm-consent-manage {
  min-height: 44px;
  border: 2px solid var(--sm-orange-dark);
  border-radius: 999px;
  padding: .7rem 1rem;
  background: var(--sm-orange-dark);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sm-consent__decline { background: #fff !important; color: var(--sm-orange-dark) !important; }
.sm-consent-manage { position: fixed; z-index: 9999; left: 1rem; bottom: 1rem; padding: .55rem .8rem; font-size: .8rem; }
.sm-consent button:focus-visible, .sm-consent-manage:focus-visible { outline: 3px solid var(--sm-charcoal-deep); outline-offset: 3px; }

@media (max-width: 900px) {
  .sm-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .sm-site-header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    overflow-y: auto;
  }
  .sm-site-header .wp-block-navigation__responsive-container-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    width: 100%;
    padding: 4.5rem 1.25rem 1.5rem;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch;
    width: 100%;
    gap: .25rem;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu,
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { width: 100%; }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: .55rem .75rem;
    box-sizing: border-box;
    text-align: left;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-left: 1rem !important;
  }
  .sm-site-header .wp-block-navigation__responsive-container.is-menu-open .sm-nav-cta > a { justify-content: center; }
  .sm-hero {
    min-height: 570px;
    background-image: linear-gradient(90deg, rgba(24,32,36,.98), rgba(24,32,36,.78)), url('assets/images/hero-smart-store.webp');
    background-position: 63% center;
  }
  .sm-proof-strip { margin-top: -2.5rem !important; }
}

@media (max-width: 781px) {
  .sm-site-header .wp-block-site-title { font-size: 1rem !important; }
  .sm-brand-logo img { height: 42px; }
  .sm-hero { min-height: auto; background-position: 72% center; }
  .sm-hero h1 { font-size: clamp(2.45rem, 11vw, 3.3rem) !important; }
  .sm-hero-copy { max-width: none; }
  .sm-proof-strip { margin-top: 0 !important; }
  .sm-proof-item + .sm-proof-item { border-left: 0; border-top: 1px solid var(--sm-line); }
  .sm-card:hover, .wp-element-button:hover { transform: none; }
  .sm-media-card img { min-height: 320px; }
  .wp-block-buttons .wp-block-button { width: 100%; }
  .wp-block-buttons .wp-block-button .wp-block-button__link { width: 100%; text-align: center; }
  .sm-cta-actions { flex-direction: column; }
  .sm-cta-actions > *,
  .sm-cta-actions .wp-block-button,
  .sm-cta-actions .wp-element-button,
  .sm-support-grid .wp-element-button { width: 100%; box-sizing: border-box; }
}

@media (max-width: 420px) {
  .sm-site-header .wp-block-site-title { display: none; }
  .sm-hero { background-position: 78% center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}