/*
  =====================================================================
  KISTI CHRISTENSEN — PORTFOLIO STYLESHEET
  =====================================================================
  This file controls the look and feel of the entire site.
  All pages (index.html, theatre.html, figgy.html) share this one file,
  so any change here affects every page.

  HOW THIS FILE IS ORGANIZED:
    1. Fonts        — loads Google Fonts
    2. Base styles  — background color, text color, links
    3. Header       — the name banner at the top
    4. Navigation   — the horizontal menu bar
    5. Content      — the main content area wrapper
    6. Home page    — hero section and navigation cards
    7. Sidebar      — chapter-style role nav on the theatre page
    8. Filter bar   — company filter buttons on theatre page
    9. Sections     — category headings and dividers
   10. Gallery      — the grid of production photo cards
   11. Contact      — contact page styling
   12. Lightbox     — full-screen photo gallery for productions
   13. Figgy        — placeholder styling
   14. Footer       — bottom of every page
   15. Responsive   — adjustments for small screens (phones)

  COLOR REFERENCE (light mode palette):
    Background:       #faf9f7  (warm off-white)
    Cards/Header:     #fff     (white)
    Text:             #333     (dark gray)
    Headings:         #2a2a2a  (near-black)
    Muted text:       #666, #888, #999
    Accent (gold):    #8b6f4e  (links, highlights)
    Accent hover:     #6b5438  (darker gold)
    Borders:          #ddd8d2, #e0dcd6  (warm light gray)
    Nav background:   #f5f3f0

  TO CHANGE THE ACCENT COLOR:
    Search for #8b6f4e (the gold) and replace it everywhere in this file.
    Also replace #6b5438 (the darker hover version) with a darker shade
    of your new color.
  =====================================================================
*/


/* ---- 1. FONTS ---- */
/* Playfair Display = elegant serif for headings */
/* Inter = clean sans-serif for body text */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500&display=swap');


/* ---- 2. BASE STYLES ---- */

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  background: #faf9f7;       /* page background color */
  color: #333;                /* default text color */
  min-height: 100vh;
}

/* Links — all clickable text across the site */
a {
  color: #8b6f4e;            /* gold accent */
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #6b5438;            /* darker gold on hover */
}


/* ---- 3. HEADER ---- */
/* The big name banner at the top of every page */

.site-header {
  text-align: center;
  padding: 3rem 1rem 1.5rem;
  border-bottom: 1px solid #e0dcd6;
  background: #fff;
}

.site-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.15em;     /* spreads the letters apart */
  text-transform: uppercase;
  color: #2a2a2a;
  margin-bottom: 0.3rem;
}

/* The subtitle line under the name (e.g. "Designer • Painter • Builder") */
.site-header .tagline {
  font-size: 0.95rem;
  color: #999;
  letter-spacing: 0.08em;
}


/* ---- 4. NAVIGATION ---- */
/* The horizontal menu bar below the header */

nav {
  display: flex;              /* lays items out in a row */
  justify-content: center;    /* centers the row */
  gap: 0;
  background: #f5f3f0;
  border-bottom: 1px solid #e0dcd6;
  flex-wrap: wrap;            /* wraps to next line on small screens */
}

nav a {
  padding: 0.85rem 1.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  border-left: 1px solid #e5e1dc;  /* thin divider between links */
  transition: background 0.3s, color 0.3s;
}

nav a:first-child {
  border-left: none;          /* no divider before the first link */
}

/* Highlighted state — applied to hovered links AND the current page's link */
nav a:hover,
nav a.active {
  background: #eae7e2;
  color: #8b6f4e;
}


/* ---- 5. CONTENT WRAPPER ---- */
/* Centers the main content and sets a max width */

.content {
  max-width: 1100px;
  margin: 0 auto;            /* centers horizontally */
  padding: 2.5rem 1.5rem;
}


/* ---- 6. HOME PAGE ---- */
/* The welcome section and big navigation cards on index.html */

.home-hero {
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.home-hero h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.8rem;
  color: #2a2a2a;
  margin-bottom: 1.2rem;
}

.home-hero p {
  font-size: 1rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 2rem;
}

/* Container for the navigation cards */
.home-nav-cards {
  display: flex;
  gap: 2rem;                  /* space between cards */
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Each clickable card (Theatre, Figgy, etc.) */
.home-nav-card {
  display: block;
  width: 300px;
  padding: 2.5rem 2rem;
  border: 1px solid #ddd8d2;
  background: #fff;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.home-nav-card:hover {
  border-color: #8b6f4e;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.home-nav-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: #2a2a2a;
  margin-bottom: 0.6rem;
  letter-spacing: 0.05em;
}

.home-nav-card p {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.5;
}


/* ---- 7. THEATRE SIDEBAR ---- */
/*
  A sticky sidebar on the left side of the theatre page with chapter-style
  links to each role category (Set Design, Scenic Painting, Scenic Carpentry).
  On the theatre page, .content gets an additional .theatre-layout class that
  turns it into a two-column layout: sidebar on the left, main content on the right.

  The sidebar uses position:sticky so it stays visible as you scroll.
  On small screens it collapses to a horizontal bar above the content.
*/

/* Two-column layout: sidebar + main content (only on the theatre page) */
.theatre-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;    /* sidebar sticks to the top, doesn't stretch */
}

/* The main content column (everything except the sidebar) */
.theatre-main {
  flex: 1;                    /* takes up all remaining space */
  min-width: 0;               /* prevents grid blowout */
}

/* The sidebar itself */
.theatre-sidebar {
  position: sticky;
  top: 2rem;                  /* distance from top of viewport when stuck */
  width: 180px;
  flex-shrink: 0;             /* don't let it shrink */
  padding-top: 0.5rem;
}

/* "Roles" label at the top of the sidebar */
.sidebar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #aaa;
  margin-bottom: 0.8rem;
  padding-left: 0.8rem;
}

/* Each link in the sidebar */
.sidebar-link {
  display: block;
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  color: #777;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.sidebar-link:hover {
  color: #8b6f4e;
  border-left-color: #ddd8d2;
}

/* Highlighted state — the currently visible section (set by JS) */
.sidebar-link.active {
  color: #8b6f4e;
  border-left-color: #8b6f4e;
  font-weight: 400;
}


/* ---- 8. COMPANY FILTER BAR ---- */
/*
  The row of buttons at the top of the theatre page that lets visitors
  filter by theatre company. The "active" class highlights the selected button.
*/

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0dcd6;
}

/* "Company:" label next to the filter buttons */
.filter-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-right: 0.5rem;
}

/* Each filter button */
.filter-btn {
  padding: 0.45rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #777;
  background: #fff;
  border: 1px solid #ddd8d2;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.filter-btn:hover {
  border-color: #8b6f4e;
  color: #8b6f4e;
}

/* The currently selected filter button */
.filter-btn.active {
  background: #8b6f4e;
  color: #fff;
  border-color: #8b6f4e;
}


/* ---- 9. SECTION HEADINGS ---- */
/* Category titles like "Set Design", "Scenic Painting", etc. */

.section-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: #2a2a2a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* The short horizontal line under each section heading */
.section-rule {
  width: 60px;
  border: none;
  border-top: 1px solid #ccc;
  margin-bottom: 2rem;
}

/* Optional description text below a section heading */
.section-desc {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Spacing between category sections */
.category-section {
  margin-bottom: 4rem;
}


/* ---- 10. PRODUCTION GALLERY ---- */
/* The grid of photo cards on the theatre page */

/*
  The grid automatically fills rows with cards that are at least 300px wide.
  On a wide screen you'll see 3 cards per row; on narrow screens, fewer.
  To change the minimum card width, edit the "300px" value below.
*/
.productions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;                /* space between cards */
}

/* Each production card (photo + title) */
.production-card {
  border: 1px solid #ddd8d2;
  background: #fff;
  overflow: hidden;           /* keeps the image inside the card borders */
  transition: border-color 0.3s, box-shadow 0.3s;
}

.production-card:hover {
  border-color: #bbb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/*
  The production photo.
  - "object-fit: cover" crops the image to fill the space without stretching.
  - Change "height: 220px" to make photos taller or shorter.
*/
.production-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* The text area below the photo — matches the nav bar color scheme */
.production-card .card-body {
  padding: 1.2rem;
  background: #f5f3f0;
  border-top: 1px solid #e5e1dc;
}

/* Production title */
.production-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: #2a2a2a;
  margin-bottom: 0.4rem;
}

/* Company name shown on the card (e.g. "City Lights Theater Company") */
.production-card .card-company {
  display: block;
  font-size: 0.75rem;
  color: #8b6f4e;
  margin-bottom: 0.2rem;
}

/* Category label under the title (e.g. "Set Design") */
.production-card .card-tags {
  font-size: 0.75rem;
  color: #999;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ---- 11. CONTACT PAGE ---- */

.contact-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 0;
}

.contact-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 2rem;
}

.contact-email {
  margin-top: 1.5rem;
}

/* The email link rendered by JS */
.contact-email-link {
  display: inline-block;
  font-size: 1.1rem;
  color: #8b6f4e;
  padding: 0.8rem 1.5rem;
  border: 1px solid #ddd8d2;
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-email-link:hover {
  border-color: #8b6f4e;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}


/* ---- 12. LIGHTBOX GALLERY ---- */
/*
  Full-screen photo gallery that opens when a visitor clicks a production card.
  Shows one photo at a time with left/right navigation arrows, a caption,
  photo counter, and production info at the top.
  Close via X button, clicking the dark backdrop, or pressing Escape.
  Navigate with arrow keys or the on-screen arrow buttons.
*/

/* Dark full-screen backdrop */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  flex-direction: column;
}

.lightbox.open {
  display: flex;
}

/* Top bar: title, meta info, and close button */
.lightbox-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  flex-shrink: 0;
}

.lightbox-info {
  min-width: 0;                      /* allows text to truncate */
}

.lightbox-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.2rem;
}

.lightbox-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.lightbox-company {
  font-size: 0.8rem;
  color: #c9a87c;
}

.lightbox-date {
  font-size: 0.8rem;
  color: #888;
}

/* Close button */
.lightbox-close {
  background: none;
  border: none;
  color: #999;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.3rem;
  flex-shrink: 0;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: #fff;
}

/* Middle area: the photo + left/right arrows */
.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;                     /* allows image to shrink in flexbox */
  padding: 0 3.5rem;                 /* room for arrow buttons */
}

/* The currently displayed photo */
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Left and right arrow buttons */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2.5rem;
  cursor: pointer;
  padding: 1rem 0.5rem;
  transition: color 0.2s;
  z-index: 1;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  color: #fff;
}

.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

/* Bottom bar: caption, description, and photo counter */
.lightbox-bottom {
  padding: 1rem 1.5rem 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.lightbox-caption {
  font-size: 0.9rem;
  color: #ddd;
  line-height: 1.5;
  margin-bottom: 0.3rem;
}

.lightbox-description {
  font-size: 0.82rem;
  color: #888;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.lightbox-counter {
  font-size: 0.75rem;
  color: #666;
  letter-spacing: 0.1em;
}


/* ---- 13. FIGGY PAGE ---- */
/* Dashed-border placeholder box shown when a section has no content yet */

.placeholder-box {
  border: 1px dashed #ccc;
  padding: 3rem;
  text-align: center;
  color: #999;
  font-size: 0.95rem;
  margin-top: 1rem;
}


/* ---- 14. FOOTER ---- */

.site-footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid #e0dcd6;
  color: #aaa;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}


/* ---- 15. RESPONSIVE ---- */
/* These rules kick in on screens narrower than 700px (phones, small tablets) */

@media (max-width: 700px) {
  .site-header h1 {
    font-size: 1.8rem;
  }

  nav a {
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
  }

  /* Stack the home nav cards vertically on small screens */
  .home-nav-cards {
    flex-direction: column;
    align-items: center;
  }

  /* Single column gallery on small screens */
  .productions-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding: 3rem 1rem;
  }

  /* Collapse sidebar to a horizontal bar on small screens */
  .theatre-layout {
    flex-direction: column;
    gap: 0;
  }

  .theatre-sidebar {
    position: static;          /* no longer sticky */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e0dcd6;
    padding-bottom: 1rem;
  }

  .sidebar-label {
    margin-bottom: 0;
    margin-right: 0.3rem;
  }

  .sidebar-link {
    border-left: none;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }

  .sidebar-link.active,
  .sidebar-link:hover {
    border-left: none;
  }

  /* Lightbox adjustments for small screens */
  .lightbox-stage {
    padding: 0 2.5rem;
  }

  .lightbox-prev,
  .lightbox-next {
    font-size: 1.8rem;
  }

  .lightbox-title {
    font-size: 1.1rem;
  }
}