/*
Theme Name: Mystic Immersive
Theme URI: https://www.mysticimmersive.com
Author: NextTech Solutions
Author URI: https://nexttech.solutions
Description: Custom theme for Mystic Immersive — 23'x13' LED video wall rental and live event production, Mystic, CT.
Version: 1.0
License: Proprietary
Text Domain: mystic-immersive
*/

/* ==========================================================================
   Mystic Immersive — design tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:        #0B1220;
  --ink-2:      #121B2E;
  --ink-3:      #1E2C46;
  --hairline:   #2B3A57;
  --sand:       #E7DFC9;
  --sand-2:     #F1ECDD;
  --amber:      #E7A33E;
  --amber-2:    #C97F1E;
  --teal:       #1F6F6B;
  --teal-2:     #164F4C;
  --live:       #D6483F;
  --paper-text: #171310;
  --ink-text:   #EDEAE0;
  --ink-text-dim: #A7B0C0;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--sand-2);
  color:var(--paper-text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:0.95;
  margin:0 0 .4em;
  letter-spacing:0.2px;
}
h1{ font-size:clamp(2.6rem, 6vw, 5rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.7rem); }
p{ margin:0 0 1em; max-width:62ch; }
.lede{ font-size:1.2rem; color:#3C362D; max-width:56ch; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  padding:.85em 1.5em; border-radius:3px;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-amber{ background:var(--amber); color:#241705; }
.btn-amber:hover{ background:var(--amber-2); }
.btn-outline-dark{ border-color:var(--paper-text); color:var(--paper-text); }
.btn-outline-dark:hover{ background:var(--paper-text); color:var(--sand-2); }
.btn-outline-light{ border-color:rgba(237,234,224,.55); color:var(--ink-text); }
.btn-outline-light:hover{ background:var(--ink-text); color:var(--ink); border-color:var(--ink-text); }

/* Header ------------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.wordmark{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  color:var(--ink-text); text-decoration:none; letter-spacing:.3px;
  white-space:nowrap;
}
.wordmark span{ color:var(--amber); }
.main-nav{ display:flex; align-items:center; gap:2rem; }
.main-nav ul{ list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; }
.main-nav a{
  color:var(--ink-text-dim); text-decoration:none; font-weight:500; font-size:.97rem;
  padding:.3em 0; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--ink-text); border-color:var(--amber); }
.header-cta{
  display:inline-flex; align-items:center; gap:.6em;
  color:var(--ink-text); border:1px solid var(--hairline); border-radius:999px;
  padding:.5em 1em; text-decoration:none; font-weight:600; font-size:.92rem;
}
.header-cta:hover{ border-color:var(--amber); color:var(--amber); }
.nav-toggle{
  display:none; background:none; border:0; color:var(--ink-text); font-size:1.6rem;
  cursor:pointer; padding:.2em .3em;
}

@media (max-width: 880px){
  .main-nav ul{
    position:fixed; inset:74px 0 auto 0; background:var(--ink);
    flex-direction:column; gap:0; border-bottom:1px solid var(--hairline);
    transform:translateY(-140%); transition:transform .25s ease;
  }
  .main-nav ul.open{ transform:translateY(0); }
  .main-nav ul li{ border-bottom:1px solid var(--hairline); }
  .main-nav a{ display:block; padding:1em 24px; }
  .header-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* Hero / lower-third -------------------------------------------------------
   The signature device of the site: every hero photo carries a broadcast
   "lower third" bar, the same graphic convention used on the screens this
   business rents out. */
.hero{
  position:relative; min-height:78vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-color:var(--ink);
  color:var(--ink-text);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,0) 35%, rgba(11,18,32,.55) 70%, rgba(11,18,32,.92) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-block:2.5rem 3rem; }
.lower-third{
  background:rgba(11,18,32,.82); border-left:4px solid var(--amber);
  padding:1.6rem 1.9rem; max-width:640px;
  animation:riseIn .6s ease-out both;
}
@media (prefers-reduced-motion: reduce){ .lower-third{ animation:none; } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.live-chip{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.06em; color:#FFD9D4; margin-bottom:.9em;
}
.live-chip::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 3px rgba(214,72,63,.25);
}
.hero h1{ color:#fff; margin-bottom:.3em; }
.hero .lede{ color:var(--ink-text-dim); font-size:1.08rem; margin-bottom:1.2em; }
.hero-page{ min-height:52vh; }

/* Sections ----------------------------------------------------------------*/
.section{ padding:5rem 0; }
.section-ink{ background:var(--ink); color:var(--ink-text); }
.section-ink p{ color:var(--ink-text-dim); }
.section-ink h2, .section-ink h3{ color:#fff; }
.section-head{ max-width:640px; margin-bottom:2.6rem; }
.section-head p{ color:#54493A; }
.section-ink .section-head p{ color:var(--ink-text-dim); }

/* Tile wall — service grid styled like an LED video wall -------------------*/
.tile-wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  background:var(--ink-3); padding:3px; border:1px solid var(--hairline);
}
.tile{
  position:relative; aspect-ratio:4/3; overflow:hidden; text-decoration:none;
  display:block; background:var(--ink-2);
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile:hover img{ transform:scale(1.06); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,0) 45%, rgba(11,18,32,.92) 100%);
}
.tile-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.1rem;
  color:#fff;
}
.tile-label .tag{ font-family:var(--font-mono); font-size:.68rem; color:var(--amber); letter-spacing:.05em; display:block; margin-bottom:.25em; }
.tile-label h3{ margin:0; font-size:1.3rem; }
.tile-empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-text-dim); font-family:var(--font-mono); font-size:.75rem;
  padding:1rem; background:
    repeating-linear-gradient(45deg, var(--ink-2), var(--ink-2) 10px, #17223a 10px, #17223a 20px);
}

@media (max-width: 880px){
  .tile-wall{ grid-template-columns:repeat(2,1fr); }
}

/* Spec list — technical-rider styling for "what's included" ---------------*/
.spec-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.spec-list li{
  display:flex; gap:1.5rem; padding:1.1rem 0; border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.spec-list .num{ font-family:var(--font-mono); color:var(--amber); font-size:.85rem; min-width:2.2ch; }
.spec-list strong{ display:block; font-size:1.05rem; }
.spec-list span{ color:var(--ink-text-dim); font-size:.95rem; }

/* Event-type pill row -------------------------------------------------------*/
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  border:1px solid var(--hairline); border-radius:999px; padding:.5em 1.1em;
  font-size:.92rem; color:var(--ink-text-dim);
}

/* Photo strip ---------------------------------------------------------------*/
.photo-strip{ display:grid; grid-template-columns:1.3fr 1fr; gap:3px; }
.photo-strip img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){ .photo-strip{ grid-template-columns:1fr; } }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; gap:2rem; } }

/* CTA band -------------------------------------------------------------- */
.cta-band{
  background:var(--teal); color:#fff; padding:3.2rem 0; text-align:left;
}
.cta-band .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; }
.cta-band h2{ color:#fff; margin:0; font-size:clamp(1.7rem,3vw,2.3rem); }
.cta-band p{ color:#CFE6E4; margin:0; }

/* Footer ------------------------------------------------------------------*/
.site-footer{ background:var(--ink); color:var(--ink-text-dim); padding:3.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.footer-grid h4{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:.9em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.55em; }
.footer-grid a{ text-decoration:none; color:var(--ink-text-dim); }
.footer-grid a:hover{ color:var(--amber); }
.footer-bottom{
  border-top:1px solid var(--hairline); padding-top:1.5rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.85rem;
}
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* Badge / about ----------------------------------------------------------*/
.badge-frame{ border:1px solid var(--hairline); padding:8px; background:var(--ink-2); max-width:340px; }

/* Utility */
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-inline:auto; }

/* ==========================================================================
   Editable content areas (Gutenberg / the_content)
   Native WordPress blocks are styled here so editing text on any page
   never requires touching code.
   ========================================================================== */
.entry-content{
  max-width:var(--container);
  margin-inline:auto;
  padding:4rem 24px 5rem;
}
.entry-content > *{ margin-top:0; margin-bottom:2.4rem; }
.entry-content > *:last-child{ margin-bottom:0; }
.entry-content p{ max-width:68ch; }
.entry-content .lede{ font-size:1.15rem; color:#3C362D; max-width:56ch; }

/* Numbered lists become the technical "spec list" look */
.entry-content ol{
  list-style:none; counter-reset:mi-counter; padding:0; margin-bottom:2.4rem;
  border-top:1px solid var(--hairline);
}
.entry-content ol > li{
  counter-increment:mi-counter; display:flex; gap:1.5rem; padding:1.1rem 0;
  border-bottom:1px solid var(--hairline); align-items:baseline;
}
.entry-content ol > li::before{
  content: counter(mi-counter, decimal-leading-zero);
  font-family:var(--font-mono); color:var(--amber); font-size:.85rem; min-width:2.2ch;
}

/* Bullet lists become the pill row used for "where we show up" style tags */
.entry-content ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin-bottom:2.4rem; }
.entry-content ul > li{
  border:1px solid var(--hairline); border-radius:999px; padding:.5em 1.1em;
  font-size:.92rem; color:#3C362D;
}

/* Buttons */
.entry-content .wp-block-button__link{
  background:var(--amber); color:#241705; border-radius:3px; font-weight:600;
  padding:.85em 1.5em; text-decoration:none;
}
.entry-content .wp-block-button__link:hover{ background:var(--amber-2); }
.entry-content .is-style-outline .wp-block-button__link{
  background:transparent; border:2px solid var(--paper-text); color:var(--paper-text);
}

/* Optional section classNames — add these under a block's "Advanced ›
   Additional CSS class(es)" panel to reuse the site's signature sections. */
.entry-content .ink-block{ background:var(--ink); color:var(--ink-text); padding:2.6rem; }
.entry-content .ink-block h2, .entry-content .ink-block h3{ color:#fff; }
.entry-content .ink-block p{ color:var(--ink-text-dim); }
.entry-content .ink-block ol{ border-color:var(--hairline); }
.entry-content .ink-block ol > li{ border-color:var(--hairline); }
.entry-content .ink-block ul > li{ border-color:var(--hairline); color:var(--ink-text-dim); }

.entry-content .cta-band-block{ background:var(--teal); color:#fff; padding:2.6rem; }
.entry-content .cta-band-block h2, .entry-content .cta-band-block h3{ color:#fff; margin-bottom:.3em; }
.entry-content .cta-band-block p{ color:#CFE6E4; }

.entry-content .photo-strip-block.wp-block-columns{ gap:3px !important; }
.entry-content .photo-strip-block .wp-block-column{ margin:0 !important; }
.entry-content .photo-strip-block img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; border-radius:0; }

.entry-content .tile-wall-block.wp-block-columns{
  background:var(--ink-3); padding:3px; gap:3px !important; border:1px solid var(--hairline);
}
.entry-content .tile-wall-block .wp-block-column{
  background:var(--ink-2); margin:0 !important; padding:0 1rem 1rem !important;
}
.entry-content .tile-wall-block img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-bottom:.8rem; }
.entry-content .tile-wall-block h3{ color:#fff; margin:0; }

.entry-content .badge-frame{ border:1px solid var(--hairline); padding:8px; background:var(--ink-2); max-width:320px; }

/* Custom logo in the header */
.custom-logo-link{ display:block; line-height:0; }
.custom-logo-link img{ height:52px; width:auto; display:block; }
.site-footer .custom-logo-link img{ height:64px; }