/*
Theme Name: SJW Desert Modern
Theme URI: https://example.com/sjw-desert-modern
Author: SJW
Description: A warm Desert Modern WordPress block theme inspired by the SJW homepage mockup, with Scottsdale mesa tones, strong horizontal rhythm, and professional services sections.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sjw-desert-modern
Tags: block-theme, full-site-editing, portfolio, business, one-column, custom-colors, custom-logo
*/

:root {
  --sjw-soft-plaster: #F5F1E8;
  --sjw-soft-plaster-rgb: 245, 241, 232;
  --sjw-sandstone: #EAD9BA;
  --sjw-warm-beige: #D8C3A5;
  --sjw-desert-clay: #C2A07A;
  --sjw-charcoal: #2F2F2F;
  --sjw-iron: #4A4A4A;
  --sjw-burnt-sienna: #C85A17;
  --sjw-adobe-rust: #A64521;
  --sjw-copper: #D97A3A;
  --sjw-sage: #7A8A72;
}

html { scroll-behavior: smooth; }
/* Zero out WordPress layout gap above main and between full-width sections */
main.wp-block-group { margin-top: 0 !important; }
main.wp-block-group > .wp-block-group,
main.wp-block-group > .wp-block-columns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body {
  background: var(--sjw-soft-plaster);
  color: var(--sjw-charcoal);
}
a { text-underline-offset: .2em; }

/* ── Navigation block ─────────────────────────────────────── */
.wp-block-navigation {
  gap: 2rem;
}
.wp-block-navigation a {
  text-decoration: none;
  letter-spacing: .1em;
  font-size: .78rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sjw-charcoal);
  position: relative;
  padding-bottom: 3px;
  transition: color .18s ease;
}

/* Animated underline on hover */
.wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--sjw-burnt-sienna);
  transition: width .22s ease;
}
.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus-visible::after {
  width: 100%;
}
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
  color: var(--sjw-burnt-sienna);
}

/* Hide submenu arrows on desktop — hover opens them */
@media (min-width: 783px) {
  .wp-block-navigation .wp-block-navigation-submenu__toggle { display: none !important; }
}

/* Active / current page indicator — covers both WP native classes and JS-applied .sjw-nav-active */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > a,
.wp-block-navigation .current_page_item .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item--active-ancestor > a,
.wp-block-navigation .wp-block-navigation-item--active-ancestor .wp-block-navigation-item__content,
.wp-block-navigation .sjw-nav-active > a,
.wp-block-navigation .sjw-nav-active > .wp-block-navigation-item__content {
  color: var(--sjw-burnt-sienna);
}
.wp-block-navigation .current-menu-item > a::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after,
.wp-block-navigation .current_page_item > a::after,
.wp-block-navigation .current_page_item .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item--active-ancestor > a::after,
.wp-block-navigation .wp-block-navigation-item--active-ancestor .wp-block-navigation-item__content::after,
.wp-block-navigation .sjw-nav-active > a::after,
.wp-block-navigation .sjw-nav-active > .wp-block-navigation-item__content::after {
  width: 100%;
}

/* ── Header: compact with overflow allowed for tall logos ────── */
header.wp-block-template-part {
  overflow: visible;
  position: relative;
  z-index: 100;
}
header.wp-block-template-part .wp-block-group {
  overflow: visible !important;
}

/* Mobile hamburger overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--sjw-charcoal);
  padding: 2rem 5vw;
}
.wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--sjw-warm-beige);
  font-size: 1.05rem;
  letter-spacing: .08em;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--sjw-copper);
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
  color: var(--sjw-charcoal);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg {
  color: var(--sjw-warm-beige);
}

/* ── Buttons ──────────────────────────────────────────────── */
.wp-block-button__link { transition: transform .18s ease, background .18s ease; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.wp-block-button__link:hover { transform: translateY(-2px); background: var(--sjw-copper) !important; }
.sjw-hairline { width: 56px; height: 1px; background: var(--sjw-burnt-sienna); display: inline-block; }
.sjw-kicker { color: var(--sjw-burnt-sienna); letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; font-weight: 800; }
.sjw-card { border-left: 1px solid rgba(200,90,23,.22); }
.sjw-service-icon { display: block; width: 28px; height: 28px; margin-bottom: 14px; }
/* Remove hero bottom padding that creates a plaster gap above services */
.sjw-mesa-hero { padding-bottom: 36px !important; }
/* Services section: compact padding, flush with sections above and below */
#services { padding-top: 32px !important; padding-bottom: 32px !important; }
.sjw-project-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
/* About section: stretch image cover to fill full column height */
#about .wp-block-column:first-child { display: flex; flex-direction: column; }
#about .wp-block-column:first-child > .wp-block-cover { flex: 1; min-height: 390px; }
.sjw-mesa-hero {
  position: relative;
  overflow: hidden;
  background: var(--sjw-soft-plaster);
  isolation: isolate;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Image anchored to the right via pseudo-element (v3 approach) */
.sjw-mesa-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82%;
  background-image: url('./assets/hero-building.jpg');
  background-repeat: no-repeat;
  background-size: auto 520px;
  background-position: right bottom;
  filter: contrast(.97) brightness(1.02);
  opacity: 1;
}

/* Three-layer gradient: horizontal fade, top/bottom vignette, radial soft-blend */
.sjw-mesa-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(var(--sjw-soft-plaster-rgb), 1)   0%,
      rgba(var(--sjw-soft-plaster-rgb), .97) 18%,
      rgba(var(--sjw-soft-plaster-rgb), .60) 33%,
      rgba(var(--sjw-soft-plaster-rgb), .15) 48%,
      rgba(var(--sjw-soft-plaster-rgb), 0)   60%),
    linear-gradient(180deg,
      rgba(var(--sjw-soft-plaster-rgb), .96) 0%,
      rgba(var(--sjw-soft-plaster-rgb), .55) 10%,
      rgba(var(--sjw-soft-plaster-rgb), .05) 22%,
      rgba(var(--sjw-soft-plaster-rgb), 0)   32%,
      rgba(var(--sjw-soft-plaster-rgb), 0)   100%),
    radial-gradient(circle at 35% 58%,
      rgba(var(--sjw-soft-plaster-rgb), .96) 0%,
      rgba(var(--sjw-soft-plaster-rgb), .78) 16%,
      rgba(var(--sjw-soft-plaster-rgb), .25) 32%,
      rgba(var(--sjw-soft-plaster-rgb), 0)   48%);
}

/* Lift WP block content above pseudo-element layers */
.sjw-mesa-hero .wp-block-columns {
  position: relative;
  z-index: 3;
}

/* Explicit hero H1 size — guards against WP failing to resolve --wp--preset--font-size--hero */
.sjw-mesa-hero h1.wp-block-heading {
  font-size: clamp(3.25rem, 8vw, 6.25rem);
}

@media (min-width: 1280px) {
  .sjw-mesa-hero {
    min-height: 660px;
  }
  .sjw-mesa-hero::before {
    background-size: auto 660px;
  }
}

/* Hero photo credit tooltip — covers visible image area, shows label on hover */
.sjw-hero-photo-credit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  z-index: 4;
  cursor: default;
}
.sjw-hero-photo-credit::after {
  content: attr(data-label);
  position: absolute;
  bottom: 20px;
  right: 24px;
  background: rgba(47, 47, 47, .72);
  color: var(--sjw-soft-plaster);
  font-size: .7rem;
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.sjw-hero-photo-credit:hover::after {
  opacity: 1;
}

/* Hide the SVG logo so the right side shows the building photo */
.sjw-hero-logo {
  display: none;
}
.sjw-desert-image {
  min-height: 390px;
  background:
    linear-gradient(180deg, rgba(47,47,47,.05), rgba(47,47,47,.05)),
    linear-gradient(165deg, transparent 0 53%, rgba(47,47,47,.55) 53.3% 55%, transparent 55.2%),
    linear-gradient(150deg, rgba(200,90,23,.25) 0 25%, transparent 25.5%),
    radial-gradient(circle at 25% 70%, rgba(122,138,114,.45), transparent 16%),
    linear-gradient(140deg, #C2A07A 0%, #EAD9BA 45%, #A7855E 100%);
}
.sjw-project-thumb {
  min-height: 160px;
  background:
    linear-gradient(160deg, rgba(47,47,47,.2), rgba(200,90,23,.12)),
    radial-gradient(circle at 76% 56%, rgba(122,138,114,.55), transparent 15%),
    linear-gradient(170deg, #C2A07A 0 40%, #EAD9BA 40.5% 62%, #8C6A48 62.5% 100%);
}
footer a { color: var(--sjw-warm-beige); text-decoration: none; }

/* ── Portfolio page banner ────────────────────────────────── */
.sjw-portfolio-banner {
  position: relative;
  overflow: hidden;
  background-color: #EEDDC1;
  background-image: url('./assets/portfolio-banner-sketch.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sjw-portfolio-banner h1.wp-block-heading {
  color: var(--sjw-charcoal) !important;
  position: relative;
  z-index: 1;
}
.sjw-portfolio-banner .sjw-hairline {
  background: var(--sjw-burnt-sienna);
  position: relative;
  z-index: 1;
}

/* Visual Portfolio pagination — active page in sage green */
.vp-pagination__style-default .vp-pagination__item.vp-pagination__item-active > * {
  background-color: var(--sjw-sage) !important;
}
/* Footer col 3: paragraph flush with SERVICES heading, button pinned to logo bottom */
.sjw-footer-cta-col.wp-block-column { justify-content: space-between; }

/* Post title links — override WP default purple */
.wp-block-post-title a {
  color: var(--sjw-charcoal);
  text-decoration: none;
}
.wp-block-post-title a:hover {
  color: var(--sjw-burnt-sienna);
}

/* Post excerpt "read more" — matches LEARN MORE kicker style */
.wp-block-post-excerpt__more-link {
  display: block;
  margin-top: 20px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sjw-burnt-sienna);
  text-decoration: none;
}
.wp-block-post-excerpt__more-link:hover {
  color: var(--sjw-copper);
}

/* Classic-editor content on inner pages */
.wp-block-post-content h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); margin-top: 2em; margin-bottom: .5em; }
.wp-block-post-content h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); margin-top: 1.75em; margin-bottom: .4em; }
.wp-block-post-content p  { line-height: 1.7; margin-bottom: 1em; }
.wp-block-post-content ul, .wp-block-post-content ol { padding-left: 1.5em; margin-bottom: 1em; line-height: 1.7; }
.wp-block-post-content a  { color: var(--sjw-burnt-sienna); }
@media (max-width: 782px) {
  .sjw-hero-logo { max-width: 260px !important; }
  .sjw-desert-image { min-height: 260px; }
  .sjw-mesa-hero::before {
    background-size: auto 360px;
    background-position: right bottom;
  }
}