/* page.css - Grasshopper Mower Standalone Page Styles */

:root {
  --color-primary: #e51936;
  --color-gray: #ededed;
  --font-sans: 'peridot-pe-variable', sans-serif;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

a { text-decoration: none; color: inherit; }

/* ---- Scrollbar ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Logo Fills ---- */
.header-logo .logo-inner { fill: var(--color-primary); transition: fill 0.3s ease; }
.header-logo .logo-outline { fill: white; transition: fill 0.3s ease; }

.footer-logo .logo-inner { fill: transparent; }
.footer-logo .logo-outline { fill: var(--color-primary); }

/* Header logo on scroll */
[data-scrolled="true"] .desktop-nav-bar .header-logo .logo-inner,
.desktop-nav-bar:hover .header-logo .logo-inner,
.desktop-nav-bar.nav-open .header-logo .logo-inner {
  fill: transparent;
}
[data-scrolled="true"] .desktop-nav-bar .header-logo .logo-outline,
.desktop-nav-bar:hover .header-logo .logo-outline,
.desktop-nav-bar.nav-open .header-logo .logo-outline {
  fill: var(--color-primary);
}

/* Mobile header logo states */
.mobile-header-bar.menu-open .header-logo .logo-inner { fill: transparent; }
.mobile-header-bar.menu-open .header-logo .logo-outline { fill: var(--color-primary); }
[data-scrolled="true"] .mobile-header-bar .header-logo .logo-inner { fill: transparent; }
[data-scrolled="true"] .mobile-header-bar .header-logo .logo-outline { fill: var(--color-primary); }

/* ---- Desktop Header ---- */
.desktop-header {
  transition: transform 0.3s ease-in-out;
}
.desktop-header.header-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

.desktop-nav-bar {
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
.desktop-nav-bar:hover,
.desktop-nav-bar.nav-open,
[data-scrolled="true"] .desktop-nav-bar {
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Nav buttons */
.nav-btn {
  color: white;
  transition: color 0.3s ease-in-out;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: 20px 8px;
}
.desktop-nav-bar:hover .nav-btn,
.desktop-nav-bar.nav-open .nav-btn,
[data-scrolled="true"] .nav-btn {
  color: black;
}

.nav-btn-inner {
  display: flex;
  align-items: flex-end;
  border-radius: 9999px;
  padding: 2px 8px 6px 12px;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  gap: 2px;
}
.nav-btn.active .nav-btn-inner {
  background-color: black;
  color: white;
}

/* Dropdown panel */
.nav-dropdown-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.nav-dropdown-panel.open {
  max-height: 600px;
  opacity: 1;
}

.desktop-nav-bar.nav-open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Close dropdown on link click */
.nav-dropdown-panel a {
  display: block;
}
.nav-dropdown-panel a:hover {
  text-decoration: underline;
}

/* ---- Mobile Header ---- */
.mobile-header {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.mobile-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.mobile-header-bar {
  transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.mobile-header-bar.menu-open,
[data-scrolled="true"] .mobile-header-bar {
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Mobile backdrop */
.mobile-backdrop {
  transition: opacity 0.5s ease-in-out;
}

/* Mobile menu content (grid animation) */
.mobile-menu-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.mobile-menu-content > div {
  overflow: hidden;
}
.mobile-menu-content.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Mobile menu slider */
.mobile-menu-slider {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease-in-out;
}
.mobile-menu-slider.submenu-open {
  transform: translateX(-100%);
}

.mobile-main-menu {
  min-width: 100%;
  transition: opacity 0.5s ease-in-out;
}
.mobile-main-menu.hidden-menu {
  opacity: 0;
}

.mobile-submenu-container {
  min-width: 100%;
}

.mobile-submenu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.mobile-submenu > div {
  overflow: hidden;
}
.mobile-submenu.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Menu toggle colors */
.menu-toggle-svg {
  transition: color 0.3s ease-in-out;
  color: white;
}
.mobile-header-bar.menu-open .menu-toggle-svg,
[data-scrolled="true"] .mobile-header-bar .menu-toggle-svg {
  color: black;
}

/* Hamburger line animation */
.menu-toggle-svg path {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform-origin: center;
}

/* ---- Button Component ---- */
.btn {
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  border: 2px solid var(--color-primary);
  padding: 4px 16px 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.3s ease;
  will-change: transform;
  text-decoration: none;
  line-height: 1.5;
}
.btn:hover { transform: scale(1.05); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background-color: var(--color-primary); color: white; }
.btn-secondary { background-color: white; color: black; border-color: white; }

@media (min-width: 1024px) {
  .btn { padding: 8px 20px 10px; }
}

/* ---- Radio Buttons ---- */
.radio-custom {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background-color: white;
  cursor: pointer;
}
.radio-custom:checked {
  background-color: var(--color-primary);
  border: 2px solid white;
}

/* ---- Blog Content ---- */
.blog_content a { color: #c8102e !important; text-decoration: underline !important; }
.blog_content h2 { font-weight: bold; }
.blog_content h2, .blog_content h3, .blog_content h2 *, .blog_content h3 * { font-size: 22px !important; }
.blog_content h3 { font-size: 18px !important; color: #c8102e !important; }
.blog_content ul { list-style: disc; padding-left: 20px; }
.blog_content ol { list-style: decimal; padding-left: 20px; }