/*
 Theme Name: GeneratePress Child
 Template: generatepress
 Version: 1.0
*/

/* ============ CORE THEME RESET & FULL-BLEED NUKES ============ */
body #page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* --- CLEAN FIX: ELIMINATE SIDEBAR AND FORCE FULL WIDTH --- */
.content-area {
    width: 100% !important; /* Forces the main content area to full width */
}
.widget-area {
    display: none !important; /* Hides the sidebar completely */
    width: 0 !important;
    padding: 0 !important;
}

body .site-container,
body .site-content,
body .inside-site-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
}

/* Nuke all default header and content elements */
.site-header,
.site-branding-container,
.site-branding,
.site-logo,
.site-title,
.site-description,
.page .entry-header,
.entry-title,
h1.entry-title,
.page-title,
.site-header .header-widget {
  display: none !important; 
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

html, body { margin:0 !important; padding:0 !important; }
html{ overflow-x:hidden; }

/* Aggressively remove all margins and paddings on nested containers */
.site,
.site-content,
.content-area,
.site-main,
.inside-article,
.hentry,
.entry-content,
.entry-content > *:first-child,
.separate-containers .inside-article,
.site-main > article,
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-html,
.mca-page { 
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  width:100%;
}

/* FINAL KILL FOR STUBBORN GP HEADER AREA (Ensures the blue bar is the only thing visible) */
.site-header .inside-header {
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 60px !important; 
}


/* ============ DESIGN TOKENS ============ */
:root{
  --mca-navy:#0B2D4A;
  --mca-navy-2:#0F3A5F;
  --mca-gold:#F2B705;
  --mca-cream:#F8F6F2;
  --mca-white:#FFFFFF;
  --ink:#1c2330;
  --container:1200px;
  --radius:16px;
  --gap:18px;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.2s;
  /* Brush controls */
  --brush-height: clamp(54px, 9vw, 120px);
  --brush-side-pad: clamp(10px, 3vw, 28px);
  --brush-nudge-x: 20px;
  --brush-overlap: 70px;
}

/* ============ HERO SECTION (Includes Nav Bar) ============ */
.mca-hero{
  position:relative; 
  width:100%;
  max-width:100%;
  margin:0 !important;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Draw the full-width navy bar using a pseudo-element */
.mca-hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100vw;
  height:60px;
  background:var(--mca-navy);
  z-index:3;
  pointer-events:none;
}

/* Position the Logo */
.mca-topbar-logo{
  position:absolute;
  top:8px;                 
  left:16px;              
  width:126px;             
  height:44px;             
  object-fit:contain;
  z-index:4;
  pointer-events:auto;
}

/* HERO IMAGE AND TEXT (Fixed Width and Vertical Position) */
.mca-hero-bg{
  position:absolute;
  inset:0;
  width: 100vw;
  background:url('/wp-content/themes/generatepress-child/assets/hs_jf_back.jpg')
            center 15% / cover no-repeat;
  z-index:0;
}

/* HERO TEXT OVERLAY CONTAINER (Positioned and Styled) */
.mca-hero-overlay{
  position: relative; 
  z-index: 5;
  width: 100%; 
  margin: 0 auto; /* <-- ADDED MARGIN AUTO HERE */
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  padding: 0 14px;
}

/* FIX: CENTER HERO TEXT AFTER HTML WRAPPER ADDITION */
.mca-hero-text-wrapper {
    margin: 0 auto; 
    max-width: 800px; 
    width: 100%; 
}

.mca-hero-title{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(30px,5.6vw,64px);
  margin:0 0 10px;
}
.mca-hero-sub{
  font-size:clamp(16px,2.2vw,22px);
  margin:0;
}

/* --- FIX: Display the Menu --- */
.main-navigation,
#site-navigation {
    display: block !important; /* Force the menu container to be visible */
}


/* ============ MAIN CONTENT AREA & BRUSHSTROKE ============ */
.mca-page {
  position: relative;
  z-index: 10;
  /* Pulls the content up to overlap the hero */
  margin-top: calc(-1 * var(--brush-overlap)); 
  /* Adds padding back to keep content from hiding under the brush */
  padding-top: var(--brush-overlap); 
  background: var(--mca-cream); /* Set background for the content area */
  min-height: 500px;
}

/* BIG BRUSH AT THE SEAM */
.mca-page::before{
  content:"";
  position:absolute;
  top: 0; 
  left: 0; /* <-- Start the brush from the far left edge */
  transform: translateY(calc(-1 * var(--brush-overlap))); /* <-- Only vertical shift remains */
  width: 100%; /* <-- Force the brush to span the full width */
  height: var(--brush-height);
  background: center / 100% 100% no-repeat
              url('/wp-content/themes/generatepress-child/assets/yellowbrushstroke.png');
  z-index: 9;
  pointer-events: none;
  filter: saturate(1.05);
}
/* Fallback for specific viewport units is no longer needed with width: 100% */

@supports (width: 100dvw){
  .mca-page::before{
    width: calc(100dvw - (var(--brush-side-pad) * 2));
  }
}

/* ============ PROGRAMS SECTION (Starter) ============ */
.mca-programs{
  padding:60px 0; /* Increased padding for better spacing */
  background-color: var(--mca-navy); /* Set the section background to navy */
  color: var(--mca-white); /* Set default text color for this section to white */
}
.mca-wrap{
  max-width:var(--container); 
  margin:auto; 
  padding:0 20px;
  text-align: center; /* Centers all content inside the wrapper */
}

/* ============ PROGRAM CARDS LAYOUT ============ */
.mca-program-cards{
    display: grid;
    /* Create 4 equal columns for desktop, with a minimum size */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 24px; /* Space between the cards */
    margin-top: 40px; /* Space below the Programs heading */
    /* Center the grid block on the page, useful if the cards don't fill the full width */
    justify-content: center; 
}

/* ============ INDIVIDUAL CARD STYLING ============ */
.mca-card{
    background-color: var(--mca-white);
    color: var(--ink); /* Change text color back to dark for readability */
    padding: 30px;
    border-radius: var(--radius); /* Uses the 16px token you already defined */
    box-shadow: var(--shadow); /* Uses the shadow token you already defined */
    text-align: center; /* Center content like the example image */
    transition: transform var(--dur) var(--ease);
}

.mca-card:hover {
    transform: translateY(-4px); /* Slight lift effect on hover */
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.mca-card-title{
    font-family:"Playfair Display", Georgia, serif;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 8px;
}

.mca-card-subtitle{
    font-weight: 600;
    color: var(--mca-navy-2);
    margin-top: 0;
    margin-bottom: 24px;
}

.mca-card-desc{
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ============ STAFF BIOS PAGE STYLING ============ */

/* Full-width section with navy background (like programs) */
.page-id-59 .site-main { /* REPLACE XXXX with the page ID of your new staff page! */
    background-color: var(--mca-navy);
    color: var(--mca-white);
    padding: 60px 0;
}

/* Fallback if a page ID selector is difficult */
/* .mca-wrap { max-width: var(--container); margin: auto; padding: 0 20px; } */ 

.staff-heading{
    font-family:"Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 48px);
    text-align: center;
    margin-bottom: 40px;
    color: var(--mca-gold);
}

.admin-heading{
    margin-top: 80px;
}

/* 3-Column Grid Layout */
.staff-grid{
    display: grid;
    /* 3 equal columns for desktop, 2 for tablet, 1 for mobile */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-bottom: 60px;
}

/* Staff Card Specifics (Overrides for the general .mca-card) */
.staff-card {
    padding: 20px; 
    text-align: left;
}

.staff-image-placeholder {
    height: 150px;
    background-color: var(--mca-cream);
    border: 1px dashed var(--mca-navy-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--ink);
}

.staff-name{
    font-size: 22px;
    margin: 0 0 4px;
    color: var(--mca-navy);
}

.staff-class{
    font-weight: 600;
    color: var(--mca-gold);
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
}

.staff-favorite-label {
    font-weight: 700;
    margin: 15px 0 0;
    font-size: 14px;
}

.staff-favorite-value {
    margin: 0;
    font-style: italic;
    color: var(--mca-navy-2);
}

/* Directors/Admin Row Styling (1/3 Card, 2/3 Text) */
.admin-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 for card, 2/3 for text */
    gap: 30px;
    align-items: start;
}

.admin-card {
    padding: 30px;
}

.admin-image{
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    margin: 15px 0;
}

.admin-bio-box {
    background: transparent; /* Text box has no background */
    color: var(--mca-white); /* Text color must be white against navy background */
    padding: 20px;
}

.admin-bio-text {
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 16px;
}

/* Mobile adjustments for the admin row */
@media (max-width: 768px) {
    .admin-row {
        grid-template-columns: 1fr; /* Stack the card and text on mobile */
    }
    .admin-bio-box {
        padding: 0 20px; /* Adjust padding for mobile text box */
    }
}