/*
Theme Name: Grandstand
Theme URI: https://www.grandbleachers.com
Author: Simpweb
Author URI: https://simpweb.com
Description: Block theme for Grand Bleachers — aluminum bleachers and grandstands. Built around the stepped rows of a grandstand: brushed-aluminum bands, deep navy, varsity red.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grandstand
*/

/* ---------- motifs ---------- */

/* Bleacher rows: stacked aluminum planks with riser shadow. Used once between hero and body, and as the footer cap. */
.gs-rows {
  height: 36px;
  background: repeating-linear-gradient(
    180deg,
    #E3E6E9 0 7px,
    #B9BEC4 7px 9px,
    #7E858D 9px 12px
  );
  border-top: 1px solid #7E858D;
}

/* Ticket strip: section / row / seat style fact band */
.gs-ticket {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}
.gs-ticket .wp-block-columns { gap: 0; }
.gs-ticket .wp-block-column {
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
  border-left: 2px dashed rgba(199, 204, 209, 0.35);
}
.gs-ticket .wp-block-column:first-child { border-left: 0; }
.gs-ticket .gs-ticket-value {
  font-family: var(--wp--preset--font-family--condensed);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--wp--preset--color--white);
  margin: 0 0 0.3rem;
}
.gs-ticket .gs-ticket-label {
  color: var(--wp--preset--color--aluminum);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  max-width: 28ch;
}
@media (max-width: 781px) {
  .gs-ticket .wp-block-column { border-left: 0; border-top: 2px dashed rgba(199, 204, 209, 0.35); }
  .gs-ticket .wp-block-column:first-child { border-top: 0; }
}

/* ---------- hero ---------- */
.gs-hero.wp-block-cover {
  min-height: min(88vh, 820px);
  align-items: flex-end;
}
.gs-hero .wp-block-cover__inner-container { padding-bottom: clamp(2rem, 6vw, 5rem); }
.gs-hero h1 {
  color: var(--wp--preset--color--white);
  text-transform: uppercase;
  max-width: 11ch;
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.gs-hero p {
  color: var(--wp--preset--color--aluminum-light);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  max-width: 48ch;
  line-height: 1.45;
}
.gs-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(14,31,58,0.92) 0%, rgba(14,31,58,0.55) 55%, rgba(14,31,58,0.15) 100%) !important; opacity: 1 !important; }

/* Page hero (interior pages) */
.gs-page-hero.wp-block-cover { min-height: 42vh; align-items: flex-end; }
.gs-page-hero h1 { color: var(--wp--preset--color--white); text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.92; }
.gs-page-hero p { color: var(--wp--preset--color--aluminum-light); max-width: 50ch; }
.gs-page-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(14,31,58,0.9) 0%, rgba(14,31,58,0.45) 60%, rgba(14,31,58,0.2) 100%) !important; opacity: 1 !important; }

/* ---------- buttons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--aluminum);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--white); background: rgba(255,255,255,0.08); color: #fff; }
.gs-on-light .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.gs-on-light .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: #fff; }

/* ---------- header ---------- */
.gs-header { background: var(--wp--preset--color--navy); color: #fff; }
.gs-header a { color: #fff; text-decoration: none; }
.gs-header .wp-block-site-title a { color: #fff; }
.gs-header .wp-block-navigation a:hover { color: var(--wp--preset--color--aluminum); }
.gs-header .gs-phone a {
  font-family: var(--wp--preset--font-family--condensed);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  border: 2px solid var(--wp--preset--color--red);
  padding: 0.35rem 0.9rem 0.4rem;
  border-radius: 2px;
}
.gs-header .gs-phone a:hover { background: var(--wp--preset--color--red); }
.gs-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); }
.gs-header .wp-block-navigation__responsive-container-open,
.gs-header .wp-block-navigation__responsive-container-close { color: #fff; }
.gs-logo { display: inline-flex; align-items: center; line-height: 0; }
.gs-logo svg, .gs-logo img { height: 50px; width: auto; display: block; }
.gs-footer .gs-logo svg, .gs-footer .gs-logo img { height: 40px; }
@media (max-width: 600px) { .gs-logo svg, .gs-logo img { height: 40px; } }

/* ---------- sections ---------- */
.gs-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.gs-section-tight { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.gs-lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; max-width: 58ch; }
.gs-kicker { color: var(--wp--preset--color--red); font-weight: 600; margin-bottom: 0.4rem; }

/* Services: alternating photo/text tiers */
.gs-tier { align-items: center; }
.gs-tier h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 0.5rem; }
.gs-tier figure { margin: 0; }
.gs-tier img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* Steps (sequence) */
.gs-step { border-top: 3px solid var(--wp--preset--color--navy); padding-top: 1rem; }
.gs-step h3 { margin-top: 0; }
.gs-step .gs-step-no {
  font-family: var(--wp--preset--font-family--condensed);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--wp--preset--color--red);
  margin: 0 0 0.5rem;
}

/* Big stat */
.gs-stat {
  font-family: var(--wp--preset--font-family--condensed);
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.85;
  color: var(--wp--preset--color--navy);
  letter-spacing: -0.03em;
  margin: 0;
}

/* Gallery */
.gs-gallery.wp-block-gallery { gap: 6px; }
.gs-gallery img { border-radius: 2px; }

/* Quote */
.gs-quote.wp-block-quote { padding-left: 0; border: 0; }
.gs-quote.wp-block-quote p { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; color: var(--wp--preset--color--navy); }
.gs-quote.wp-block-quote cite { font-family: var(--wp--preset--font-family--barlow); font-style: normal; font-weight: 500; color: var(--wp--preset--color--steel); }

/* CTA band */
.gs-cta { background: var(--wp--preset--color--navy); color: #fff; }
.gs-cta h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); text-transform: uppercase; }
.gs-cta p { color: var(--wp--preset--color--aluminum-light); }
.gs-cta a { color: #fff; }
.gs-cta .gs-bigphone a {
  font-family: var(--wp--preset--font-family--condensed);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.gs-cta .gs-bigphone a:hover { color: var(--wp--preset--color--aluminum); }

/* Contact details list */
.gs-contact-list { list-style: none; padding: 0; margin: 0; }
.gs-contact-list li { padding: 0.9rem 0; border-top: 1px solid var(--wp--preset--color--aluminum); }
.gs-contact-list li:last-child { border-bottom: 1px solid var(--wp--preset--color--aluminum); }
.gs-contact-list strong { font-family: var(--wp--preset--font-family--condensed); font-size: 1.2rem; font-weight: 700; color: var(--wp--preset--color--navy); display: block; }

/* Contact Form 7 */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
  width: 100%; font: inherit; padding: 0.7rem 0.8rem; border: 1.5px solid var(--wp--preset--color--aluminum); border-radius: 2px; background: #fff; color: var(--wp--preset--color--steel);
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 1px; border-color: var(--wp--preset--color--navy); }
.wpcf7 label { display: block; font-weight: 600; color: var(--wp--preset--color--navy); margin-bottom: 1rem; }
.wpcf7 label > * { margin-top: 0.3rem; font-weight: 400; }
.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--red); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; padding: 0.8rem 1.6rem;
}
.wpcf7 input[type="submit"]:hover { background: #A50D26; }
.wpcf7 .gs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 600px) { .wpcf7 .gs-form-row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.gs-footer { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--aluminum); }
.gs-footer a { color: #fff; text-decoration: none; }
.gs-footer a:hover { color: var(--wp--preset--color--aluminum); text-decoration: underline; }
.gs-footer .wp-block-site-title a { color: #fff; }
.gs-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--barlow); font-weight: 400; font-size: 1rem; }
.gs-footer-fine { font-size: 0.9rem; color: var(--wp--preset--color--aluminum); }

/* ---------- misc ---------- */
:focus-visible { outline: 3px solid var(--wp--preset--color--red); outline-offset: 2px; }
.wp-block-cover:focus-visible { outline: 0; }
img { height: auto; max-width: 100%; }
.gs-eyebrow-rule { height: 4px; background: var(--wp--preset--color--red); width: 64px; margin: 0 0 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .wp-block-button__link, .gs-header .gs-phone a { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
}

/* ---------- 3D configurator ---------- */
.gs-3d {
  --gs3d-h: clamp(420px, 60vh, 640px);
  position: relative;
  background: radial-gradient(120% 90% at 70% 20%, #1B3360 0%, #0E1F3A 55%, #091628 100%);
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  min-height: var(--gs3d-h);
}
.gs-3d-canvas { position: absolute; inset: 0; }
.gs-3d-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.gs-3d-canvas noscript img { width: 100%; height: 100%; object-fit: cover; }
.gs-3d.is-failed { background: var(--wp--preset--color--aluminum-light); }
.gs-3d-controls {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.75rem 1.5rem; align-items: end;
  background: rgba(9, 22, 40, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(199, 204, 209, 0.3); border-radius: 3px; padding: 0.9rem 1.1rem 0.8rem;
  max-width: 820px;
}
.gs-3d-field label { display: flex; justify-content: space-between; font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--wp--preset--color--aluminum-light); margin-bottom: 0.25rem; }
.gs-3d-field output { color: #fff; }
.gs-3d-field input[type="range"] { width: 100%; accent-color: var(--wp--preset--color--red); margin: 0; }
.gs-3d-check label { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.35rem; cursor: pointer; }
.gs-3d-check input { accent-color: var(--wp--preset--color--red); width: 1.1rem; height: 1.1rem; }
.gs-3d-capacity { text-align: right; line-height: 1; }
.gs-3d-capacity-value { display: block; font-family: var(--wp--preset--font-family--condensed); font-weight: 800; font-size: 2.4rem; color: #fff; }
.gs-3d-capacity-label { display: block; font-size: 0.85rem; color: var(--wp--preset--color--aluminum); margin-top: 0.2rem; }
.gs-3d-hint { grid-column: 1 / -1; margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--wp--preset--color--aluminum); }
@media (max-width: 700px) {
  .gs-3d { --gs3d-h: 560px; }
  .gs-3d-controls { grid-template-columns: 1fr 1fr; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; }
  .gs-3d-capacity { text-align: left; }
  .gs-3d-hint { display: none; }
}

/* Home hero with the 3D stand */
.gs-hero3d { background: var(--wp--preset--color--navy); color: #fff; }
.gs-hero3d h1 { color: #fff; text-transform: uppercase; font-size: clamp(2.9rem, 6vw, 5.6rem); line-height: 0.88; letter-spacing: -0.015em; margin: 0 0 1.25rem; text-wrap: balance; overflow-wrap: anywhere; }
.gs-hero3d .gs-lede { color: var(--wp--preset--color--aluminum-light); }
.gs-hero3d .gs-3d { --gs3d-h: clamp(460px, 62vh, 680px); }
.gs-hero3d .wp-block-columns { align-items: center; }

/* Blueprint drawing */
.gs-drawing-wrap { margin: 0; border: 1px solid var(--wp--preset--color--aluminum); border-radius: 4px; overflow: hidden; background: var(--wp--preset--color--aluminum-light); }
.gs-drawing { width: 100%; height: auto; display: block; }
.gs-drawing-wrap.is-tilted { transform: perspective(1400px) rotateX(4deg) rotateY(-6deg); box-shadow: 30px 40px 60px rgba(14, 31, 58, 0.18); }
@media (max-width: 781px) { .gs-drawing-wrap.is-tilted { transform: none; box-shadow: none; } }
.gs-drawing text { font-family: var(--wp--preset--font-family--barlow); }

/* Service spec table */
.gs-spec { border-collapse: collapse; width: 100%; font-size: 1rem; }
.gs-spec th, .gs-spec td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--wp--preset--color--aluminum); vertical-align: top; }
.gs-spec th { font-family: var(--wp--preset--font-family--condensed); font-size: 1.1rem; font-weight: 700; color: var(--wp--preset--color--navy); white-space: nowrap; }

/* Phase timeline (a true sequence) */
.gs-phases { counter-reset: phase; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
.gs-phases li { counter-increment: phase; border-top: 3px solid var(--wp--preset--color--navy); padding-top: 0.9rem; }
.gs-phases li::before { content: counter(phase, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--condensed); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--wp--preset--color--red); margin-bottom: 0.4rem; }
.gs-phases h3 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.gs-phases p { margin: 0; }
@media (max-width: 900px) { .gs-phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gs-phases { grid-template-columns: 1fr; } }

/* Deliverables list */
.gs-deliverables { list-style: none; padding: 0; margin: 0; }
.gs-deliverables li { padding: 0.75rem 0 0.75rem 1.5rem; border-top: 1px solid var(--wp--preset--color--aluminum); position: relative; }
.gs-deliverables li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 10px; height: 10px; background: var(--wp--preset--color--red); }
.gs-deliverables li:last-child { border-bottom: 1px solid var(--wp--preset--color--aluminum); }

/* Photo tiles */
.gs-tier-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 2px; }
.gs-tier-img + .gs-tier-img { margin-top: 1rem; }
.gs-tier-img + h3, .wp-block-image + .wp-block-heading { margin-top: 1rem; }

/* Configurator presets (injected by grandstand3d.js) */
.gs-3d-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.gs-3d-presets button { font: inherit; font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--wp--preset--color--aluminum-light); background: rgba(255,255,255,0.06); border: 1px solid rgba(199,204,209,0.35); border-radius: 2px; padding: 0.3rem 0.7rem; cursor: pointer; }
.gs-3d-presets button:hover, .gs-3d-presets button[aria-pressed="true"] { background: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); color: #fff; }

/* Planning guides list */
.gs-guides { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; }
.gs-guides li { border-top: 1px solid var(--wp--preset--color--aluminum); padding: 1.1rem 0; }
.gs-guides li:last-child, .gs-guides li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--wp--preset--color--aluminum); }
.gs-guides a { font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 1.45rem; line-height: 1.1; text-decoration: none; color: var(--wp--preset--color--navy); display: block; }
.gs-guides a:hover { color: var(--wp--preset--color--red); }
.gs-guides p { margin: 0.3rem 0 0; color: var(--wp--preset--color--steel); }
@media (max-width: 700px) { .gs-guides { grid-template-columns: 1fr; } .gs-guides li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* FAQ */
.gs-faq details { border-top: 1px solid var(--wp--preset--color--aluminum); padding: 0.4rem 0; }
.gs-faq details:last-child { border-bottom: 1px solid var(--wp--preset--color--aluminum); }
.gs-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 1.35rem; color: var(--wp--preset--color--navy); }
.gs-faq summary::-webkit-details-marker { display: none; }
.gs-faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--red); flex: none; }
.gs-faq details[open] summary::after { content: "\2013"; }
.gs-faq details > p { margin: 0 0 1rem; max-width: 70ch; }

/* Series / sport selector strip */
.gs-finder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.gs-finder a { display: block; text-decoration: none; border: 1.5px solid var(--wp--preset--color--aluminum); border-radius: 3px; padding: 1rem 1rem 0.9rem; color: var(--wp--preset--color--navy); }
.gs-finder a:hover { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--aluminum-light); }
.gs-finder strong { display: block; font-family: var(--wp--preset--font-family--condensed); font-weight: 700; font-size: 1.3rem; line-height: 1.05; }
.gs-finder span { display: block; font-size: 0.95rem; color: var(--wp--preset--color--steel); margin-top: 0.25rem; }