/*
Theme Name: Lower Gruene District
Theme URI: https://lowergruene.com
Author: NAR Ventures
Description: Bold single-page placeholder theme for the Lower Gruene District — 54 acres in Gruene, Texas (New Braunfels). Riverfront palette, animated marquee, six-pillar grid. All copy editable in Appearance > Customize > Lower Gruene Content.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lower-gruene
Tags: one-page, landing-page, custom-colors, full-width-template
*/

:root{
  --lg-cream:#F1ECDF;
  --lg-green:#1E3A2E;
  --lg-gold:#C08A2E;
  --lg-blue:#1F4E63;
  --lg-brown:#6B4A32;
  --lg-display:'Bricolage Grotesque', Georgia, serif;
  --lg-body:'DM Sans', system-ui, -apple-system, sans-serif;
  --lg-mono:'DM Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lg-cream);color:var(--lg-green);font-family:var(--lg-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--lg-gold);text-decoration:none}
a:hover{color:var(--lg-green)}
::selection{background:var(--lg-gold);color:var(--lg-cream)}

.lg-skip{position:absolute;left:-9999px}
.lg-skip:focus{left:12px;top:12px;background:var(--lg-green);color:var(--lg-cream);padding:10px 16px;z-index:10}

.lg-root{min-height:100vh;overflow-x:hidden;position:relative;isolation:isolate}

/* river background */
.lg-river{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background-image:
    repeating-linear-gradient(100deg,rgba(31,78,99,.10) 0px,rgba(31,78,99,.10) 2px,transparent 2px,transparent 26px),
    repeating-linear-gradient(80deg,rgba(30,58,46,.09) 0px,rgba(30,58,46,.09) 1px,transparent 1px,transparent 17px),
    radial-gradient(120% 70% at 50% 0%,rgba(192,138,46,.14) 0%,transparent 60%);
  background-size:900px 100%,700px 100%,100% 100%;
  animation:lg-drift 60s linear infinite;
}
@keyframes lg-drift{from{background-position:0 0,0 0,0 0}to{background-position:900px 0,-700px 0,0 0}}
@keyframes lg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lg-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .lg-river,.lg-marquee__track{animation:none !important}
  .lg-h1 span span{animation:none !important}
}

/* header */
.lg-topbar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:20px 28px;border-bottom:2px solid var(--lg-green);
  font-family:var(--lg-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lg-topbar__accent{color:var(--lg-gold)}

/* hero */
.lg-hero{padding:64px 28px 40px;display:flex;flex-direction:column;gap:28px}
.lg-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--lg-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.lg-dot{width:10px;height:10px;background:var(--lg-gold);border-radius:50%;display:inline-block;flex:none}
.lg-h1{margin:0;font-family:var(--lg-display);font-weight:800;text-transform:uppercase;line-height:.82;letter-spacing:-.02em;font-size:clamp(64px,15.5vw,260px)}
.lg-h1 > span{display:block;overflow:hidden}
.lg-h1 > span > span{display:block;animation:lg-rise .9s cubic-bezier(.16,1,.3,1) both}
.lg-h1 > span:nth-child(2) > span{animation-delay:.12s}
.lg-h1 > span:nth-child(3) > span{animation-delay:.24s;color:var(--lg-gold)}
.lg-stats{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,26px);margin-top:-6px;
  font-family:var(--lg-display);font-weight:700;text-transform:uppercase;font-size:clamp(18px,3vw,42px);letter-spacing:-.01em;line-height:1}
.lg-stats__bar{color:var(--lg-gold)}
.lg-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;border-top:2px solid var(--lg-green);padding-top:24px}
.lg-lede{margin:0;font-size:clamp(20px,2.4vw,30px);line-height:1.25;max-width:22ch;font-weight:500;text-wrap:pretty}
.lg-body{margin:0;font-size:17px;line-height:1.6;max-width:44ch;opacity:.82;text-wrap:pretty}
.lg-when{display:flex;flex-direction:column;gap:8px;font-family:var(--lg-mono);font-size:13px;letter-spacing:.06em}
.lg-when__label{opacity:.6}
.lg-when__date{font-family:var(--lg-display);font-weight:800;font-size:clamp(34px,4.6vw,58px);text-transform:uppercase;line-height:.9}

/* marquee */
.lg-marquee{background:var(--lg-blue);color:var(--lg-cream);padding:16px 0;overflow:hidden;white-space:nowrap;
  border-top:2px solid var(--lg-green);border-bottom:2px solid var(--lg-green)}
.lg-marquee__track{display:inline-flex;gap:40px;animation:lg-marquee 44s linear infinite;
  font-family:var(--lg-display);font-weight:800;text-transform:uppercase;font-size:26px;letter-spacing:.02em}
.lg-marquee__item{display:inline-flex;align-items:center;gap:40px}
.lg-marquee__dot{width:9px;height:9px;background:var(--lg-gold);border-radius:50%;display:inline-block}

/* pillars */
.lg-pillars{display:grid;grid-template-columns:repeat(3,1fr)}
.lg-pillar{border-right:2px solid var(--lg-green);border-bottom:2px solid var(--lg-green);
  padding:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px) clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:14px;min-width:0;min-height:300px;
  background:rgba(241,236,223,.55);backdrop-filter:blur(2px);transition:background .25s ease,color .25s ease}
.lg-pillar:hover{background:var(--lg-brown);color:var(--lg-cream)}
.lg-pillar__num{font-family:var(--lg-mono);font-size:12px;letter-spacing:.16em}
.lg-pillar__title{margin:0;font-family:var(--lg-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,4vw,52px);line-height:.92;letter-spacing:-.01em}
.lg-pillar__body{margin:auto 0 0;font-size:16px;line-height:1.55;max-width:34ch;text-wrap:pretty}

/* signup */
.lg-signup{padding:72px 28px 84px;display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:900px}
.lg-signup__title{margin:0;font-family:var(--lg-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,7vw,96px);line-height:.88;letter-spacing:-.02em}
.lg-form{display:flex;flex-wrap:wrap;gap:12px;width:100%;max-width:620px}
.lg-form input[type=email]{flex:1 1 240px;padding:18px 20px;border:2px solid var(--lg-green);background:transparent;
  font-family:var(--lg-mono);font-size:15px;color:var(--lg-green);border-radius:0;outline:none}
.lg-form input[type=email]:focus{background:#fff}
.lg-form button{padding:18px 30px;border:2px solid var(--lg-green);background:var(--lg-blue);color:var(--lg-cream);
  font-family:var(--lg-display);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.04em;cursor:pointer;border-radius:0}
.lg-form button:hover{background:var(--lg-green)}

/* footer */
.lg-footer{border-top:2px solid var(--lg-green);padding:26px 28px 40px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--lg-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.lg-footer__legal{opacity:.6;flex-basis:100%}

/* editor / page content fallback */
.lg-page{padding:64px 28px;max-width:820px;font-size:17px;line-height:1.65}
.lg-page h1,.lg-page h2{font-family:var(--lg-display);font-weight:800;text-transform:uppercase;line-height:.95}

@media (max-width:900px){
  .lg-pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .lg-pillars{grid-template-columns:1fr}
  .lg-hero{padding:44px 20px 32px}
  .lg-topbar,.lg-footer{padding-left:20px;padding-right:20px}
  .lg-pillar{min-height:auto}
}