/*
Theme Name: RockOn
Description: Live event audio & video production. Dark, understated block theme.
Version: 1.1.3
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: rockon
*/

:root {
  --line: #262a30;
  --text: #ecedee;
  --muted: #7d838b;
  --accent: #c9ad7a;
  --bg-alt: #15181c;
  --gutter: clamp(16px, 5vw, 48px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
p { margin-top: 0; }

/* Sections sit flush; spacing comes from their own padding. */
.site-main > * { margin-block: 0 !important; }
.wp-site-blocks > * { margin-block: 0; }

.eyebrow, .label {
  font-size: .75rem !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.topbar {
  padding: .9rem var(--gutter);
  background: rgba(15, 17, 20, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { gap: .65rem; }
.brand .wp-block-site-title, .footer-brand .wp-block-site-title {
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; color: var(--text);
}
.brand .wp-block-site-title a, .footer-brand .wp-block-site-title a { color: var(--text); }
.topnav { gap: 2rem; }
.topnav .wp-block-navigation { font-size: .92rem; gap: 2rem; }
.topnav .wp-block-navigation a { color: var(--wp--preset--color--body); }
.topnav .wp-block-navigation a:hover { color: var(--text); }
.btn-small .wp-block-button__link { padding: .55rem 1.1rem !important; font-size: .88rem !important; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--bg) !important; color: var(--text) !important; }

/* ---------- buttons ---------- */
.wp-block-button.is-style-arrow .wp-block-button__link {
  background: transparent !important; color: var(--text) !important; padding-left: 0 !important; padding-right: 0 !important;
}
.wp-block-button.is-style-arrow .wp-block-button__link::after { content: " \2192"; }
.wp-block-buttons { gap: 2rem; align-items: center; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(82vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) !important;
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(201,173,122,.10), transparent 70%),
    linear-gradient(180deg, #121519 0%, var(--wp--preset--color--bg) 100%);
  border-bottom: 1px solid var(--line);
}
/* faded logo behind the hero text */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: url("assets/rockon-mark.png") no-repeat right calc(var(--gutter) - 2%) center / min(460px, 38vw);
}
.hero > * { position: relative; z-index: 1; width: 100%; }
.hero-inner > * { margin-top: 0; }
.hero h1 { max-width: 19ch; margin: 0 0 1.5rem; }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 56ch; margin-bottom: 2.4rem; }

/* ---------- sections ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) var(--gutter) !important; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 3rem !important; }
.section-head h2 { max-width: 22ch; margin: 0; }
.body-lg { font-size: 1.1rem; max-width: 58ch; margin-top: 1.2rem !important; }

/* services */
.grid-4 { gap: 2.5rem 2rem !important; }
.grid-4 > * { border-top: 1px solid var(--line); padding-top: 1.4rem; margin: 0 !important; }
.grid-4 h3 { margin: 0 0 .5rem; }
.grid-4 p { font-size: .95rem; margin: 0; }

.events { margin-top: 4rem !important; padding-top: 2rem; border-top: 1px solid var(--line); }
.events ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem 2rem; }
.events li { color: var(--text); padding-left: 1.1rem; position: relative; }
.events li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 1px; background: var(--accent); }

.events.area { margin-top: 2.5rem !important; }
.events.area p:not(.label) { color: var(--text); max-width: 60ch; margin: 0; }

/* approach */
.split { gap: 4rem !important; }
.split .section-head { margin-bottom: 0 !important; position: sticky; top: 7rem; }
.points > * { padding: 1.5rem 0; border-top: 1px solid var(--line); margin: 0 !important; }
.points > *:last-child { border-bottom: 1px solid var(--line); }
.points h3 { margin: 0 0 .35rem; font-size: 1rem; }
.points p { font-size: .95rem; margin: 0; }

/* process */
.process { gap: 1.5rem !important; }
.process > * { border-top: 2px solid var(--line); padding-top: 1.2rem; margin: 0 !important; }
.process > *:first-child { border-top-color: var(--accent); }
.process .step { font-family: var(--wp--preset--font-family--heading); color: var(--accent); font-size: .85rem; letter-spacing: .08em; margin: 0 0 .8rem; }
.process h3 { margin: 0 0 .5rem; }
.process p:not(.step) { font-size: .92rem; margin: 0; }

/* recent work: photo grid; feature 2x2, tall 1x2, wide 2x1 */
.section-work { border-top: 1px solid var(--line); }
.wp-block-gallery.work-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 230px);
  grid-auto-flow: dense; gap: .75rem !important;
}
.wp-block-gallery.work-grid > .wp-block-image { width: auto !important; margin: 0 !important; border-radius: 4px; overflow: hidden; background: var(--bg-alt); }
.wp-block-gallery.work-grid > .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s ease, opacity .2s; }
.wp-block-gallery.work-grid > .wp-block-image:hover img { transform: scale(1.03); }
.work-grid .is-feature { grid-column: span 2; grid-row: span 2; }
.work-grid .is-tall { grid-row: span 2; }
.work-grid .is-wide { grid-column: span 2; }

/* "More photos" toggle under the spotlight grid */
.more-work { margin-top: 1.5rem !important; }
.more-work > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  padding: .65rem 1.2rem; border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-size: .92rem;
  transition: border-color .15s;
}
.more-work > summary::-webkit-details-marker { display: none; }
.more-work > summary::after { content: "+"; color: var(--accent); font-size: 1.15rem; line-height: 1; }
.more-work[open] > summary::after { content: "\2212"; }
.more-work > summary:hover { border-color: var(--accent); }
.more-work > .work-grid { margin-top: 1.25rem !important; }

/* client quote under the photo grid */
.wp-block-quote.testimonial { margin-top: 4rem !important; margin-bottom: 0 !important; padding: 2rem 0 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; }
.testimonial p { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.5; color: var(--text); margin: 0 0 1rem; max-width: 52ch; }
.testimonial cite { font-style: normal; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* equipment */
.inventory { gap: 2.5rem !important; }
.inventory > * { margin: 0 !important; }
.inventory h3 {
  font-family: var(--wp--preset--font-family--body); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin: 0;
}
.inventory ul { list-style: none; padding: 0; margin: 0 !important; }
.inventory li { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.inventory li strong { display: block; color: var(--text); font-weight: 500; font-size: 1rem; }

/* contact */
.contact-row { gap: 1rem !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
.contact-card {
  padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: 4px; margin: 0 !important;
  transition: border-color .15s, background .15s;
}
.contact-card:hover { border-color: var(--accent); background: var(--bg-alt); }
.contact-card .label { margin-bottom: .5rem; }
.contact-card p:last-child { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 500; overflow-wrap: anywhere; }

.contact-split .contact-row { display: grid; gap: 1rem; margin-top: 2rem !important; }

/* proposal form */
.proposal-form { display: grid; gap: 1.1rem; padding: 2rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-alt); }
.proposal-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.proposal-form label { display: grid; gap: .4rem; font-size: .85rem; color: var(--text); font-weight: 500; }
.proposal-form label b { color: var(--accent); font-weight: 500; }
.proposal-form input[type=text], .proposal-form input[type=email], .proposal-form input[type=tel], .proposal-form input[type=date],
.proposal-form select, .proposal-form textarea {
  width: 100%; box-sizing: border-box; padding: .75rem .85rem; font: inherit; font-size: .95rem; font-weight: 400;
  color: var(--text); background: var(--wp--preset--color--bg); border: 1px solid var(--line); border-radius: 4px;
  color-scheme: dark; transition: border-color .15s;
}
.proposal-form textarea { resize: vertical; min-height: 120px; }
.proposal-form :is(input, select, textarea):focus { outline: none; border-color: var(--accent); }
.proposal-form .services { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.proposal-form .services legend { font-size: .85rem; color: var(--text); font-weight: 500; margin-bottom: .5rem; padding: 0; }
.proposal-form label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--wp--preset--color--body); font-size: .95rem; }
.proposal-form .check input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.proposal-form button { justify-self: start; cursor: pointer; border: 0; }
.proposal-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.proposal-notice { padding: 1.2rem 1.4rem; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 1rem; }
.proposal-notice.is-sent { border-color: var(--accent); background: var(--bg-alt); color: var(--text); padding: 2rem; font-size: 1.05rem; }
.proposal-notice.is-error { border-color: #b4574f; color: #f0c4bf; }
/* footer */
.footer { padding: 3rem var(--gutter) !important; border-top: 1px solid var(--line); font-size: .9rem; }
.footer-brand { gap: .6rem; margin-bottom: .6rem; }
.footer-brand img { opacity: .8; }
.footer p { margin: 0 !important; }
.footer .fine { color: var(--muted); font-size: .8rem; margin-top: .4rem !important; }

@media (max-width: 900px) {
  .split { flex-wrap: wrap !important; gap: 2.5rem !important; }
  .split .section-head { position: static; }
}
@media (max-width: 781px) {
  .proposal-form { padding: 1.25rem; }
  .proposal-form .row { grid-template-columns: 1fr; }
  .wp-block-gallery.work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; gap: .5rem !important; }
  .topnav .wp-block-buttons { display: none; }
  .hero::before { opacity: .08; background-size: 60vw; background-position: right -12vw top 18%; }
}