/*!
Theme Name: Oh What a Night
Theme URI: http://underscores.me/
Author: 5D Spectrum
Author URI: https://5dspectrum.com/
Description: A theme for ChapQuist sub site.
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: oh-what-a-night
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.

Oh What a Night 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/
*/

/* ============================================================
   OH WHAT A NIGHT — ohwhatannight.css
   Pixel-perfect recreation of the original design
   ============================================================ */

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

/* ============================================================
   BODY — lime/chartreuse green background
   ============================================================ */
body {
  background-color: #ACD341;
  background-image: url('AquaDots-green.jpg'); /* optional green dot bg */
  background-repeat: repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  min-height: 100vh;
}

/* ============================================================
   HERO / POSTER
   ============================================================ */
.hero {
  display: flex;
  justify-content: center;
  /* padding: 20px 10px 10px; */
}

.poster-wrap {
  background-color: #8db500; /* same as body — poster is "cut out" */
  width: 410px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Top text block ---- */
.poster-text-block {
  width: 100%;
  text-align: center;
  padding: 6px 4px 4px;
  line-height: 1.1;
}

.title-main {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(36px, 9vw, 68px);
  font-weight: 900;
  font-style: italic;
  color: #FFFF00;
  text-shadow:
    3px  3px 0 #CC8800,
    -2px -2px 0 #CC8800,
     2px -2px 0 #CC8800,
    -2px  2px 0 #CC8800,
     3px  0   0 #CC8800,
    -3px  0   0 #CC8800;
  letter-spacing: 1px;
  line-height: 1.0;
  margin-bottom: 4px;
}

.subtitle {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: clamp(11px, 2.8vw, 18px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-shadow: 1px 1px 2px #000;
}

.title-star {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(28px, 7.5vw, 58px);
  font-weight: 900;
  font-style: italic;
  color: #FF4400;
  text-shadow:
     3px  3px 0 #882200,
    -2px -2px 0 #882200,
     2px -2px 0 #882200,
    -2px  2px 0 #882200;
  line-height: 1.0;
  margin-bottom: 0;
}

.and-text {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(13px, 2.5vw, 20px);
  font-weight: 900;
  font-style: italic;
  color: #FFFF00;
  text-shadow: 1px 1px 0 #886600;
  margin: 2px 0;
}

/* ---- Dancers Row ---- */
.dancers-row {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: 10px;
}

.dancer-panel {
  flex: 1;
  aspect-ratio: 1 / 1.45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.dancer-panel .dancer-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Colour panels matching the original */
.bg-orange { background-color: #E8834A; }
.bg-pink   { background-color: #E8A0B8; }
.bg-cyan   { background-color: #60CCDE; }
.bg-yellow { background-color: #D4CC80; }

/* SVG silhouette fallback — shown when no dancer image */
.dancer-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 85%;
  background: #111;
  clip-path: polygon(
    40%  0%, 60%  0%,
    60% 20%, 75% 10%, 90% 25%, 85% 45%,
    100% 42%,100% 55%, 82% 58%,
    72% 100%,58% 100%,52% 65%,
    48% 65%,42% 100%,28% 100%,
    18% 58%,  0% 55%,  0% 42%, 15% 45%,
    10% 25%, 25% 10%, 40% 20%
  );
  pointer-events: none;
}

/* Hide fallback if real image present */
.dancer-panel img:not([src=""]) ~ *,
.dancer-panel:has(img[src]:not([src=""])) ::after {
  display: none;
}

/* ---- Credits Row ---- */
.credits-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 10px;
  padding: 0 4px 14px;
}

.credit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.credit-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(9px, 1.8vw, 13px);
  color: #222;
  display: block;
  margin-bottom: 1px;
}

.credit-name {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(10px, 2.2vw, 16px);
  font-weight: 900;
  color: #883300;
  display: block;
  letter-spacing: 0.5px;
}

/* ============================================================
   PHOTO SECTIONS
   ============================================================ */
.photo-section {
  display: flex;
  justify-content: center;
  padding: 6px 10px;
}

/* Yellow border frame */
/* .yellow-border {
  border: 4px solid #FFFF00;
  padding: 2px;
  background: #FFFF00;
} */

/* ---- Row 1: 2 photos side by side ---- */
.photo-row {
  display: flex;
  /* gap: 2px; */
}

/* .photo-row.two-col {
  width: 620px;
  max-width: calc(100vw - 28px);
} */

.photo-row.three-col {
  width: 1100px;
  max-width: calc(100vw - 28px);
}

.photo-cell {
  flex: 1;
  overflow: hidden;
  line-height: 0;
}

.photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border: 14px solid #FFFF00;
}

/* Fixed heights to match original proportions */
/* .photo-row.two-col   .photo-cell { height: 140px; } */
/* .photo-row.three-col .photo-cell { height: 155px; } */
/* .photo-row.two-col .photo-cell{
	border: 14px solid #FFFF00;
} */

/* Placeholder when images not present */
.photo-cell:not(:has(img[src]:not([src=""]))) {
  background: #333;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 10px;
}

.photo-row-2 { margin-top: 4px; }

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

.footer-nav {
  font-family: Verdana, Geneva, sans-serif;
  font-size: clamp(11px, 1.6vw, 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.footer-nav li{
  list-style-type: none;
}

.footer-nav a {
  color: #0000FF;
  text-transform: uppercase;
  text-decoration: underline;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 24;
  padding: 2px 4px;
  white-space: nowrap;
  transition: color 0.15s;
  font-weight: bold;
}

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

.footer-nav .sep {
  color: #FFFF00;
  font-size: clamp(11px, 1.6vw, 14px);
  padding: 0 1px;
  user-select: none;
}

.footer-nav ul{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0;
    padding:0;
}

.footer-nav li{
    list-style:none;
    display:flex;
    align-items:center;
}

.footer-nav li:not(:last-child)::after{
    content:"|";
    /* margin-left:10px; */
    color:#FFFF00;
}
.border-2 img{
  border: 12px solid;
  border-top-color: gray;
  border-left-color: gray;
  border-bottom-color: black;
  border-right-color: black;
}

.content-border {
    width: 50%;
    margin: 0 auto;
    border: 12px solid;
    border-top-color: #DEC179;
    border-left-color: #DEC179;
    border-bottom-color: #948050;
    border-right-color: #948050;
    padding: 2rem;
}
.content-border p{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 1rem;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .photo-row.three-col { flex-wrap: wrap; }
  .photo-row.three-col .photo-cell {
    flex: 1 1 calc(50% - 2px);
/*     height: 130px; */
  }
	.photo-cell img{
		object-fit: contain;
	}
  .photo-row.three-col .photo-cell:last-child {
    flex: 1 1 100%;
  }
}

@media (max-width: 640px) {
  .photo-row.two-col { flex-direction: column; }
  /* .photo-row.two-col .photo-cell { height: 160px; } */

  .poster-wrap, .poster-wrap img { width: 100%; }

  .dancers-row { gap: 2px; }
	.content-border{width:100%;}
}

@media (max-width: 480px) {
  .footer-nav { font-size: 11px; }
  .footer-nav a { font-size: 11px; }
  .footer-nav .sep { font-size: 11px; }

  .photo-row.three-col .photo-cell {
    flex: 1 1 100%;
  }
}