/*!
Theme Name: ChapQuist Main
Theme URI: http://underscores.me/
Author: 5D Spectrum
Author URI: https://5dspectrum.com/
Description: A theme for ChapQuist Entertainment.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chapquist-main
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ChapQuist Main is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ============================================================
   CHAPQUIST ENTERTAINMENT — styles.css
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: #2dd5c9;
  background: url('https://chapquist.mystagingwebsite.com/wp-content/uploads/2026/05/AquaDots.jpg');
  background-repeat: repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  min-height: 100vh;
}

/* ============================================================
   HEADER / LOGO
   ============================================================ */
header {
  text-align: center;
  padding: 24px 10px 10px;
}

.logo-wrap {
  display: inline-block;
}

.logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Fallback text logo when image is missing */
.logo-text-fallback {
  display: none;
  text-align: center;
  line-height: 1.1;
}
.logo-text-fallback .logo-main {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(40px, 8vw, 72px);
  color: #FFB800;
  text-shadow: 3px 3px 0 #cc6600, -1px -1px 0 #cc6600;
  letter-spacing: 2px;
  display: block;
}
.logo-text-fallback .logo-sub {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(16px, 3vw, 26px);
  letter-spacing: 8px;
  color: #000;
  display: block;
}
.logo-text-fallback .logo-presents {
  font-family: Verdana, Arial, sans-serif;
  font-size: clamp(12px, 2vw, 16px);
  color: #000;
  display: block;
  margin-top: 4px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 10px 20px;
}

/* ============================================================
   SHOW GRIDS
   ============================================================ */
.shows-grid {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 18px;
}

.grid-4 { }
.grid-2 {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
}

/* ============================================================
   SHOW CARD
   ============================================================ */
.show-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.show-card a {
  display: block;
  text-decoration: none;
}

/* ============================================================
   POSTER BASE
   ============================================================ */
.poster {
  width: 275px;
  height: 387px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s;
  border: 2px solid rgba(0,0,0,0.3);
}

.poster img{
	width: 100%;
	height: 100%;
}

.poster:hover { opacity: 0.88; }

.grid-2 .poster {
  width: 244px;
  height: 400px;
}

.poster-inner {
  width: 100%;
  height: 100%;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  overflow: hidden;
}

/* ---------- Show Link ---------- */
.show-link {
  margin-top: 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
}

.show-link a {
  color: #000080;
  text-decoration: underline;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
}

.show-link a:hover { color: #FFFF00; }

/* ============================================================
   POSTER BACKGROUNDS
   ============================================================ */
.poster-ohwhat    { background: linear-gradient(160deg, #c8a000 0%, #8b6e00 100%); }
.poster-supreme   { background: linear-gradient(160deg, #7e1fa0 0%, #4a0060 100%); }
.poster-fourbyfour{ background: #000; }
.poster-yesterday { background: linear-gradient(160deg, #d40067 0%, #8c003f 100%); }
.poster-george    { background: #000; }
.poster-fiddler   { background: #000; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.p-white   { color: #ffffff; }
.p-yellow  { color: #FFFF00; }
.p-orange  { color: #FF6600; }
.p-cyan    { color: #00FFFF; }
.p-green   { color: #00FF00; }
.p-magenta { color: #FF00FF; }

.p-xxs  { font-size: 7px;  line-height: 1.2; }
.p-xs   { font-size: 9px;  line-height: 1.2; }
.p-sm   { font-size: 11px; line-height: 1.3; }
.p-md   { font-size: 13px; line-height: 1.3; }
.p-lg   { font-size: 16px; line-height: 1.2; }
.p-xl   { font-size: 19px; line-height: 1.2; }
.p-xxl  { font-size: 26px; line-height: 1.0; }

.bold   { font-weight: 900; }
.italic { font-style: italic; }

/* ============================================================
   POSTER-SPECIFIC CONTENT
   ============================================================ */

/* --- OH WHAT A NIGHT silhouettes --- */
.silhouette-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 4px;
  flex: 1;
  align-items: flex-end;
}

.sil-dancer {
  width: 28px;
  height: 70px;
  clip-path: polygon(
    44% 0%, 56% 0%,
    56% 18%, 70% 12%, 85% 22%, 80% 40%,
    100% 38%, 100% 48%, 80% 52%,
    72% 100%, 60% 100%, 55% 68%,
    45% 68%, 40% 100%, 28% 100%,
    20% 52%, 0% 48%, 0% 38%,
    20% 40%, 15% 22%, 30% 12%, 44% 18%
  );
}

/* simplified filled silhouette using border-radius trick */
.sil-dancer {
  width: 26px;
  height: 65px;
  border-radius: 2px;
  position: relative;
  clip-path: none;
}

.sil-dancer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
}

.sil-dancer.yellow { background: #FFD700; }
.sil-dancer.orange { background: #FF8C00; }
.sil-dancer.green  { background: #228B22; }
.sil-dancer.red    { background: #CC0000; }

/* --- SUPREMES silhouettes area --- */
.supremes-silhouettes {
  width: 110px;
  height: 90px;
  background: linear-gradient(to bottom, transparent 0%, #2a0040 100%);
  border-radius: 4px;
  position: relative;
  margin: 4px auto;
  overflow: hidden;
}

.supremes-silhouettes::before,
.supremes-silhouettes::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 80px;
  background: #1a0030;
  clip-path: polygon(30% 0%, 70% 0%, 85% 100%, 15% 100%);
}

.supremes-silhouettes::before { left: 8px; }
.supremes-silhouettes::after  { right: 8px; }

/* --- FOUR BY FOUR top silhouettes --- */
.fbf-top-sil {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #222 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}

/* --- YESTERDAY silhouettes --- */
.yesterday-sil {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}

.yesterday-sil::before {
  content: '';
  width: 70px;
  height: 70px;
  background: #000;
  clip-path: polygon(
    20% 0%,30% 0%,40% 20%,50% 0%,60% 0%,70% 20%,
    80% 10%,100% 30%,90% 50%,100% 70%,
    75% 100%,60% 100%,50% 70%,40% 100%,25% 100%,
    0% 70%,10% 50%,0% 30%,20% 10%
  );
}

/* --- GEORGE SOLOMON photo area --- */
.george-photo-area {
  flex: 1;
  width: 100%;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.george-photo-area::after {
  content: '🎤';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  opacity: 0.3;
}

/* --- FUNNY FIDDLE photo area --- */
.fiddle-photo-area {
  flex: 1;
  width: 100%;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.fiddle-photo-area::after {
  content: '🎻';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  opacity: 0.3;
}

/* ============================================================
   CREDITS ROW
   ============================================================ */
.credits-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  color: #fff;
  font-size: 6.5px;
  line-height: 1.4;
  margin-top: auto;
  padding-top: 4px;
}

.credits-row span {
  flex: 1;
  text-align: center;
}

.credits-row strong {
  display: block;
  font-size: 7px;
}

.credits-row.small {
  font-size: 6px;
}
.credits-row.small strong { font-size: 6.5px; }

/* credits-block (Supreme Reflections) */
.credits-block {
  margin-top: auto;
  text-align: center;
}

/* ============================================================
   FOOTER RULE
   ============================================================ */
/* .footer-rule {
  max-width: 620px;
  margin: 0 auto 10px;
  height: 3px;
  background: linear-gradient(to right, #cc9900, #FFDD00, #cc9900);
  border-radius: 2px;
} */



/* ============================================================
   FOOTER NAV
   ============================================================ */
footer {
  text-align: center;
  padding: 0 10px 30px;
}

.footer-nav {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  color: #993300;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.footer-nav a {
  color: #993300;
  /* text-decoration: none; */
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  padding: 2px 6px;
  font-weight: bold;
}

.footer-nav a:hover { color: #FFFF00; }

.footer-nav .sep {
  color: #993300;
  font-size: 16px;
  padding: 0 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: 2 × 2 grid for row 1 */
@media (max-width: 900px) {
  .shows-grid.grid-4 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .poster { width: 190px; height: 270px; }
  .grid-2 .poster { width: 190px; height: 280px; }
}

/* Mobile */
@media (max-width: 600px) {
  .shows-grid {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .poster,
  .grid-2 .poster {
    width: min(280px, 90vw);
    height: auto;
    min-height: 220px;
  }

  .poster-inner { padding: 12px 10px 8px; gap: 4px; }

  .p-xxl { font-size: 22px; }
  .p-xl  { font-size: 17px; }
  .p-lg  { font-size: 14px; }

  .footer-nav { font-size: 13px; }
  .footer-nav a { font-size: 13px; }

  .show-link, .show-link a { font-size: 10px; }

  .grid-2 {
    max-width: 100%;
  }
  .footer-rule img{
    width: 100%;
  }
}

@media (max-width: 380px) {
  .poster, .grid-2 .poster {
    width: 92vw;
  }
}

/* ============================================================
   TOP / BOTTOM SPACERS ---- About Us Page
   ============================================================ */
.top-spacer    { height: 60px; }
.bottom-spacer { height: 60px; }
 
/* ============================================================
   HERO ROW  —  [photo] [title] [photo]
   Three columns: photo | centre | photo
   ============================================================ */
.hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px;
}
 
/* ---- Photo columns ---- */
.hero-photo-col {
  flex: 0 0 auto;
}
 
.headshot {
  display: block;
  width: 100%;
  height: 469px;
  object-fit: cover;
  object-position: top center;
}
 
/* Photo placeholders when images missing */
.headshot-placeholder {
  width: 270px;
  height: 340px;
  background: #1a8a85;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-family: Verdana, sans-serif;
}
 
/* ---- Centre title column ---- */
.hero-title-col {
  flex: 1 1 auto;
  text-align: center;
  padding: 0 20px;
  min-width: 180px;
}
 
.site-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 3vw, 30px);
  font-weight: bold;
  /* font-style: italic; */
  color: #924200;        /* dark brown-red matching original */
  line-height: 1.15;
  margin-bottom: 18px;
}
 
.page-subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: bold;
  color: #924200;
  line-height: 1.2;
}
 
/* ============================================================
   BIO ROW  —  two columns of body text
   ============================================================ */
.bio-row {
  display: flex;
  justify-content: center;
  gap: 80px;
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 20px;
}
 
.bio-col {
  flex: 1 1 0;
  max-width: 490px;
}
 
/* Each paragraph in the bio */
.bio-col p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #924200;           /* dark brownish-red — matches original */
  text-align: justify;
  margin-bottom: 12px;
  font-weight: bold;
}
 
.bio-col p strong {
  font-weight: bold;
  color: #924200;
}
 
/* Closing sentence has a small extra gap above it */
.bio-closing {
  margin-top: 6px;
}
 
/* ============================================================
   FOOTER NAV
   ============================================================ */
footer {
  text-align: center;
  padding: 0px 10px 20px;
}
 
.footer-nav {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
 
.footer-nav a {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #993300;
  text-decoration: underline;
  padding: 2px 5px;
  white-space: nowrap;
  transition: color 0.15s;
}
 
.footer-nav a:hover {
  color: #FFFF00;
}
 
.footer-nav .bold-link {
  font-weight: bold;
}
 
.footer-nav .sep {
  color: #993300;
  font-size: 14px;
  padding: 0 1px;
  user-select: none;
}
 
/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
 
/* Tablet: stack hero vertically, keep bio columns side-by-side */
@media (max-width: 860px) {
  .hero-row {
    flex-direction: column;
    gap: 20px;
  }
 
  .hero-photo-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }
 
  .headshot,
  .headshot-placeholder {
    width: 220px;
    height: 275px;
  }
 
  .hero-title-col {
    padding: 10px 20px;
  }
 
  .bio-row {
    gap: 24px;
  }
}
 
/* Mobile: stack bio columns too */
@media (max-width: 600px) {
  .top-spacer    { height: 20px; }
  .bottom-spacer { height: 20px; }
 
  .bio-row {
    flex-direction: column;
    gap: 16px;
    padding: 0 14px;
  }
 
  .bio-col {
    max-width: 100%;
  }
 
  .headshot,
  .headshot-placeholder {
    width: 80vw;
    max-width: 280px;
    height: auto;
    aspect-ratio: 270 / 340;
  }
 
  .site-title   { font-size: 22px; }
  .page-subtitle{ font-size: 15px; }
 
  .footer-nav,
  .footer-nav a,
  .footer-nav .sep {
    font-size: 12px;
  }
}

/* ============================================================
   PAGE WRAPPER — centres content vertically & horizontally
   but positioned ~top-third like the original
   ============================================================ */
.page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;       /* original sits in upper portion */
  justify-content: center;
  padding-top: 90px;             /* ~matches the original top spacing */
  padding-bottom: 40px;
}
 
/* ============================================================
   CONTENT BLOCK — centred text column
   ============================================================ */
.content-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
 
/* ============================================================
   TEXT LINES
   All text is the same brownish-orange #993300 on teal
   ============================================================ */
 
/* shared line style */
.line {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #B95102;
  line-height: 1.2;
}
 
/* "CHAPQUIST ENTERTAINMENT" — regular weight, large */
.line.company {
  font-size: 36px;
  font-weight: normal;
  margin-bottom: 28px;
}
 
/* "MICHAEL CHAPMAN" — regular weight, same large size */
.line.name {
  font-size: 36px;
  font-weight: normal;
  margin-bottom: 28px;
}
 
/* Email link line */
.line.email {
  font-size: 36px;
  font-weight: normal;
  margin-bottom: 24px;
}
 
.line.email a {
  color: #B95102;
  text-decoration: underline;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: inherit;
  transition: color 0.15s;
}
 
.line.email a:hover {
  color: #FFFF00;
}
 
/* "Phone:" line — bold */
.line.phone {
  font-size: clamp(16px, 2.6vw, 24px);
  margin-bottom: 30px;
}
 
.line.phone strong {
  font-weight: bold;
  color: #B95102;
}
 
/* ============================================================
   FOOTER NAV
   ============================================================ */
.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 4px;
}
 
.footer-nav a {
  font-family: Verdana, Geneva, sans-serif;
  font-size: clamp(11px, 1.5vw, 14px);
  color: #B95102;
  text-decoration: underline;
  padding: 2px 4px;
  white-space: nowrap;
  transition: color 0.15s;
}
 
.footer-nav a:hover {
  color: #FFFF00;
}
 
.footer-nav .bold-link {
  font-weight: bold;
}
 
.footer-nav .sep {
  color: #B95102;
  font-size: clamp(11px, 1.5vw, 14px);
  padding: 0 1px;
  user-select: none;
}
 
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .page-wrap {
    padding-top: 60px;
  }
 
  .line.company,
  .line.name {
    font-size: 18px;
    margin-bottom: 20px;
  }
 
  .line.email {
    font-size: 16px;
    margin-bottom: 18px;
  }
 
  .line.phone {
    font-size: 16px;
    margin-bottom: 24px;
  }
}