/* ========================================
   INTUITIVE LISTENING — Custom Styles
   Everything theme.json cannot express
   ======================================== */

/* ----------------------------------------
   GLOBAL
   ---------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 10000;
}

/* ----------------------------------------
   NAVIGATION — Fixed + Scroll State
   ---------------------------------------- */

/* WordPress wraps template parts in <header class="wp-block-template-part">.
   We need to fix-position this outer wrapper so the nav overlaps the hero. */
header.wp-block-template-part {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

body.admin-bar header.wp-block-template-part {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

/* Default state: dark text on sand (for inner pages) */
.site-header.nav {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(242, 235, 224, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header.nav .wp-block-site-title a {
  color: var(--wp--preset--color--deep-brown) !important;
  transition: color 0.5s;
}

.site-header.nav .wp-block-navigation a {
  color: var(--wp--preset--color--warm-brown) !important;
  transition: color 0.3s;
  position: relative;
}

.site-header.nav .wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wp--preset--color--terracotta);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.nav .wp-block-navigation a:hover::after {
  width: 100%;
}

/* Homepage only: transparent header with cream text over hero */
body.home .site-header.nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.home .site-header.nav .wp-block-site-title a {
  color: var(--wp--preset--color--cream) !important;
}

body.home .site-header.nav .wp-block-navigation a {
  color: rgba(255, 253, 248, 0.8) !important;
}

/* Scrolled state: always sand background with dark text (all pages) */
.site-header.nav.scrolled {
  background: rgba(242, 235, 224, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  box-shadow: 0 1px 0 rgba(42, 31, 20, 0.06);
}

.site-header.nav.scrolled .wp-block-site-title a {
  color: var(--wp--preset--color--deep-brown) !important;
}

.site-header.nav.scrolled .wp-block-navigation a {
  color: var(--wp--preset--color--warm-brown) !important;
}

/* Mobile menu overlay */
.site-header.nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--sand) !important;
}

.site-header.nav .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--wp--preset--color--deep-brown) !important;
  font-size: 0.9rem;
}

/* ----------------------------------------
   HERO SECTION
   ---------------------------------------- */
.hero-section {
  position: relative;
}

.hero-section .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 80vh;
}

.hero-location {
  margin-bottom: 2rem;
}

.hero-scroll {
  margin-top: 3rem;
}

.hero-scroll-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: rgba(255, 253, 248, 0.3);
  vertical-align: middle;
  margin-right: 0.5rem;
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--golden-light);
  animation: scrollLine 2s infinite;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollLine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ----------------------------------------
   SECTION UTILITIES
   ---------------------------------------- */
.section-label {
  font-family: var(--wp--preset--font-family--accent) !important;
  font-size: 0.65rem !important;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracotta);
}

.golden-line-top {
  position: relative;
}

.golden-line-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wp--preset--color--golden), transparent);
}

/* ----------------------------------------
   HORSE CARDS (Home Teaser Grid)
   wp:cover blocks inside wp:columns
   ---------------------------------------- */
.horse-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.6s;
}

.horse-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(42, 31, 20, 0.15);
}

.horse-card .wp-block-cover__image-background {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.horse-card:hover .wp-block-cover__image-background {
  transform: scale(1.05);
}

.horse-card .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ----------------------------------------
   SERVICES PREVIEW (Home)
   wp:cover blocks inside wp:columns
   ---------------------------------------- */
.service-preview-card {
  cursor: pointer;
}

.service-preview-card .wp-block-cover__image-background {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-preview-card:hover .wp-block-cover__image-background {
  transform: scale(1.03);
}

.service-preview-card .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ----------------------------------------
   SUPPORT CTA (Home)
   ---------------------------------------- */
.support-cta-section {
  position: relative;
  overflow: hidden;
}

.support-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.08), transparent 70%);
}

/* ----------------------------------------
   ABOUT PAGE
   ---------------------------------------- */
.about-portrait {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.about-pullquote {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--terracotta);
  line-height: 1.5;
  padding: 2rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--wp--preset--color--golden-light);
  border-bottom: 1px solid var(--wp--preset--color--golden-light);
}

/* ----------------------------------------
   HORSE PROFILES (Horses Page)
   wp:columns with wp:image blocks
   ---------------------------------------- */
.horse-profile {
  margin-bottom: 6rem !important;
}

.horse-profile:last-child {
  margin-bottom: 0 !important;
}

.horse-profile-image {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.horse-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.horse-profile-meaning {
  font-family: var(--wp--preset--font-family--accent);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracotta);
}

.horse-profile-trait {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--wp--preset--font-family--accent);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage-dark);
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--preset--color--sage-light);
  border-radius: 2px;
}

/* ----------------------------------------
   SERVICES PAGE
   wp:columns with wp:image blocks
   ---------------------------------------- */
.service-detail-visual {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.service-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.service-features {
  margin-top: 2rem;
}

.service-features li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--wp--preset--color--warm-brown);
}

.service-features li::marker {
  color: var(--wp--preset--color--golden);
}

.service-note {
  margin-top: 2rem;
  padding: 2rem;
  border-left: 2px solid var(--wp--preset--color--golden);
  background: rgba(201, 169, 110, 0.06);
}

.service-note p {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.15rem !important;
  font-style: italic;
  color: var(--wp--preset--color--deep-brown);
  line-height: 1.6;
}

/* ----------------------------------------
   SUPPORT PAGE
   ---------------------------------------- */
.support-vision {
  position: relative;
  overflow: hidden;
}

.support-vision::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.06), transparent 70%);
}

.support-way {
  padding: 3rem 2rem;
  border: 1px solid var(--wp--preset--color--sand-dark);
  border-radius: 4px;
  transition: all 0.4s;
  background: var(--wp--preset--color--sand-light);
}

.support-way:hover {
  border-color: var(--wp--preset--color--golden);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(42, 31, 20, 0.08);
}

.support-way-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 1.5rem;
}

/* ----------------------------------------
   BUTTONS — Custom Styling
   ---------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--terracotta);
  background: transparent;
  border-radius: 100px;
  transition: all 0.4s;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--cream);
}

.wp-block-button__link {
  border-radius: 100px !important;
}

/* ----------------------------------------
   FOOTER
   ---------------------------------------- */
.site-footer {
  margin-top: 0 !important;
}

.site-footer .wp-block-separator {
  border-color: rgba(255, 253, 248, 0.1) !important;
  opacity: 1;
}

.footer-nav-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.footer-nav-list li {
  list-style: none !important;
}

.footer-nav-list a {
  color: rgba(255, 253, 248, 0.5);
  transition: color 0.3s;
  text-decoration: none;
}

.footer-nav-list a:hover {
  color: var(--wp--preset--color--cream) !important;
}

.footer-links-heading {
  margin-bottom: 1.5rem;
}