/*
Theme Name: SHCG
Theme URI: https://creative.stageham.com
Author: Stage Ham Entertainment - Creative
Description: Lean, plugin-free custom theme for Stage Ham Creative. Native WP templates and blocks, no page builder.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: SHCG
*/

  :root{
    --paper:#F3EEE2;
    --paper-warm:#EBE2D2;
    --ink:#1B1712;
    --ink-dim:#035EA5;
    --line:#D8CEB8;
    --walnut:#1B3980;
    --amber:#6E0C3F;
    --peak:#B23E24; 
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--stage);
    color:var(--ivory);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }

  ::selection {
    background:var(--tally);
    color:var(--ivory);
}

  .grain{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

 
  .blog-post-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  h1 {
    font-weight: 900;
  }

/* --- Standard Text Links --- */
a.link {
    color: var(--peak); /* Uses your brand red for the resting state */
    text-decoration: underline; 
    text-underline-offset: 4px; /* Drops the underline slightly for a cleaner look */
    text-decoration-color: var(--line); /* Makes the underline subtle */
    transition: color 0.2s ease, text-decoration-color 0.2s ease; /* Smooth fade effect */
}

a.link:hover {
    color: var(--ink); /* Changes the text to dark black on hover */
    text-decoration-color: var(--peak); /* Changes the underline to red on hover */
}

/* --- DESKTOP NAV LAYOUT --- */
.mobile-toggle {
  display: none; 
}

@media (min-width: 801px) {
  .nav-wrapper {
    /* This makes the wrapper invisible to the layout, 
       restoring your original 3-column center spacing */
    display: contents; 
  }
}

/* --- MOBILE NAV LAYOUT (Max-width 800px) --- */
@media (max-width: 800px) {
  
  .mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative; /* Required for z-index to work */
    z-index: 10000; /* Must be higher than the menu */
  }

  .mobile-toggle span {
    width: 100%;
    height: 2px;
    background: var(--ink);
    transition: transform 0.3s ease;
  }

  /* The 'X' animation */
  .mobile-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-toggle.active span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Full Screen Overlay */
  .nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--paper); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    /* Hide menu completely until opened */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav-wrapper.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Re-stack the links for mobile */
  .nav-wrapper .navlinks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
  }

  .nav-wrapper .navlinks a {
    font-size: 24px;
  }
}

/* --- LOGO MARQUEE STYLES --- */


/* ==========================================================================
   VISUAL VIEWPORT & ALPHA MASK LAYER
   ========================================================================== */
.logo-marquee-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 20px 0;
    background: transparent; /* Seamless blending into your #EFEEF5 background block */

    /* Premium dual-sided transparency edge mask */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
}

.logo-marquee-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* 🔄 STRUCTURAL SCROLL STATE TRIGGER
   When JavaScript detects that the logo row width is larger than the screen width, 
   it appends this class to kickstart the hardware-accelerated continuous crawl. */
.logo-marquee-viewport.has-overflow .logo-marquee-track {
    animation: partnerLogoContinuousCrawl 120s linear infinite;
}

/* Hide duplicate track completely if logos fit static on desktop */
.logo-marquee-viewport:not(.has-overflow) .duplicate-group {
    display: none !important;
}

/* Center items perfectly if no scroll is needed */
.logo-marquee-viewport:not(.has-overflow) .logo-marquee-track {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
}

.marquee-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 56px; /* High-end padding distance between logos */
    padding-right: 56px; /* Keeps loop gap spacing perfectly balanced */
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    height: 150px; /* Strict height limitation to force vertical layout balance */
    width: auto;
    object-fit: contain;
    
    /* 🎨 UNIFIED UNIFORM GRAY IMAGE FILTER 
       Forces all diverse WebP colors into a beautiful dark slate gray palette. */
    filter: grayscale(100%) brightness(0.65) contrast(0.9);
    opacity: 0.75;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Clean lighting response when hovering over a partner asset */
.logo-item img:hover {
    filter: grayscale(100%) brightness(0.3) contrast(1.1); /* Deepens the gray safely to maintain gray constraints */
    opacity: 1;
}

/* ==========================================================================
   CSS KEYFRAME LINEAR SCROLL RUNTIME
   ========================================================================== */
@keyframes partnerLogoContinuousCrawl {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Resets seamlessly at exactly the halfway duplicate marker */
}

/* --- Core Team / Roster Styles --- */

.roster {
  padding: 70px 48px;
  border-bottom: 0px solid var(--line);
  border-left: 0px solid var(--line);
  border-right: 0px solid var(--line);
}

.roster-grid {
  display: grid;
  /* 1fr 1fr forces exactly 2 equal columns */
  grid-template-columns: 1fr 1fr !important; 
  gap: 60px; /* Adjust this to add more or less space between the two bios */
  margin-top: 40px;
  margin: 0 150px 0 150px;
}

.roster-card .role {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--peak);
  font-size: 13px;
  margin-bottom: 100px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.roster-card h3 {
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 12px;
}

.roster-card p {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* Make sure it stacks into 1 column on mobile phones */
@media (max-width: 800px) {

/* --- Force Team/Roster to Stack on Mobile --- */
    .roster {
        padding: 50px 20px !important; /* Reduces the massive desktop padding */
    }

    .roster-grid {
        grid-template-columns: 1fr !important; /* Overrides the desktop !important tag */
        display: flex !important; /* Completely abandons CSS Grid on mobile */
        flex-direction: column !important; /* Forces the cards to stack on top of each other */
        margin: 0 !important; /* Strips out the 150px desktop margins */
        gap: 1px !important;
    }
}

/* ====================================
PULL QUOTE STYLING
==================================== */

/* 1. Set up the Pullquote Container */
.wp-block-pullquote {
  position: relative; 
  /* Creates space on the left (70px) for the quote mark to sit */
  padding: 20px 0 20px 70px; 
  margin: 60px auto;
  text-align: left; /* Forces all text to align left */
  border: none; 
}

/* 2. Inject and Style the Giant Quote Mark */
.wp-block-pullquote blockquote::before {
  content: '\201C'; 
  font-family: 'Instrument Serif', serif; 
  font-size: 120px; /* Scaled down slightly to fit the left rail */
  color: var(--peak); 
  
  /* Position it on the top left edge */
  position: absolute;
  top: 10px;
  left: -10px;
  transform: none; /* Removes the centering math from the previous version */
  line-height: 1;
  opacity: 0.15; 
  z-index: 0;
}

/* 3. Style the Actual Quote Text */
.wp-block-pullquote p {
  font-size: clamp(24px, 4vw, 32px); 
  font-weight: 700;
  font-family: 'Instrument Serif', serif;
  font-size: 3em;
  color: var(--ink);
  line-height: 1.4;
  position: relative;
  z-index: 1; 
  margin: 0; /* Clears default WordPress margins so it aligns perfectly */
}

/* 4. Style the Citation (if you add a name to the quote) */
.wp-block-pullquote cite {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 16px;
  font-style: normal;
}


/* ====================================
   Cover Art / Featured Image Styles
   ==================================== */

.cover-art {
  width: 100%; /* Or whatever specific width you want this to take up */
  
  /* Forces the box into a perfect square automatically */
  aspect-ratio: 1 / 1; 
  
  /* Handles the background image formatting */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Optional: Add a background color so the placeholder SVG is visible when no image exists */
  background-color: var(--panel); 
  
  /* Centers the placeholder SVG if it is displaying */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px; /* Optional: adds a slight curve to the corners */
}

/* Styles the placeholder SVG icon */
.cover-art svg {
  width: 40px;
  height: 40px;
  stroke: var(--ink-dim);
  margin-bottom: 8px;
}

.cover-art .slot-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Styles the excerpt text */
.page-excerpt p {
  font-size: 20px; /* Make it slightly larger than standard body text */
  color: var(--ink-dim); 
  line-height: 1.6;
  max-width: 800px;
  margin-bottom: 30px;
}

/* 1. The Centering Wrapper */
.sh-contact-container {
  display: flex;
  flex-direction: column;   /* Stacks the success message and form vertically */
  justify-content: center;  /* Centers everything vertically */
  align-items: center;      /* Centers everything horizontally */
  
  width: 100%;
  min-height: 70vh;         /* Makes the container take up at least 70% of the screen height */
  padding: 40px 24px;       /* Adds breathing room so it doesn't touch the screen edges on mobile phones */
  box-sizing: border-box;
}

.sh-contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;             /* Tells the form to fill the container... */
  max-width: 600px;        /* ...but stop growing once it hits 600px wide */
  margin: 0;               /* REPLACED: Removed the 40px margin from earlier */
}

/* --- Unique Single Post Excerpt --- */
    .single-excerpt {
        font-family: 'Roboto' serif;
        font-size: 20px; /* Larger than body text, smaller than H1 */
        color: var(--dim);
        font-style: italic;
        font-weight: 100;
        line-height: 1.4;
        margin-bottom: 24px;
        max-width: 800px; /* Keeps the line length comfortable to read */
    }

    .single-excerpt .excerpt-highlight {
        font-family: 'Inter', sans-serif; /* Switches to the modern sans-serif */
        font-size: 32px;                  /* Makes it larger */
        font-weight: 700;                 /* Makes it bold */
        font-style: normal;               /* Removes the italic */
        color: var(--ink);                /* Makes it darker */
        display: block;                   /* Forces a clean break */
        margin-bottom: 8px;               /* Adds a little breathing room before line 2 */
    }

    .stat-talk {
      font-family: 'Roboto', san-serif;
      font-size: 20px;
      font-weight: 300;
      width: 100vw;
      margin: 50px;    
    }