/* --- Web Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');

/* --- Root Color Palette --- */
:root {
  --primary-color: #4B0082;   /* بنفش اصلی برای تیترها/متن‌های خاص */
  --primary-dark: #2E004E;
  --secondary-color: #FF8BC8; /* صورتی روشن مکمل */
  --accent-color: #FF4F9A;    /* صورتی/مجنتا، برای دکمه‌ها و ... */
  --text-color: #1a1a1a;
  --bg-color: #000814;        /* پس‌زمینهٔ کلی سایت – سرمه‌ای */
  --white: #ffffff;
}


/* ===== Layout stability: keep header/menu position identical across pages (scrollbar width) ===== */
html{
  scrollbar-gutter: stable;
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

/* --- Base Styles --- */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  direction: ltr;
  margin: 0;
  padding: 0;
}

/* --- Header & Menu --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background-color: #000814;
  color: var(--white);

  padding: 15px 30px;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 8px 8px;

  /* هالهٔ روشن پایین هدر */
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.22);
}

header .logo {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 36px; /* separation between brand and navigation */
}

.logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
}

header .logo h1 {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0;
  color: var(--white);
}

/* --- Navigation --- */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding: 6px 14px;              /* برای شکل قرصی */
  border-radius: 999px;
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* hover: قرص خیلی ملایم */
nav a:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.10);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}

/* active: قرص روشن‌تر و واضح‌تر */
nav a.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.20);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

/* --- Main Content --- */
main {
  margin-top: 100px; /* فاصله از هدر ثابت */
}

.intro {
  text-align: center;
}

.main-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn {
  background-color: var(--accent-color);
  color: var(--primary-dark);
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #E8DFF5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

/* --- Workshop List --- */
ul.workshop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0;
  margin-top: 40px;
  list-style-type: none;
  justify-content: center;
}

.workshop-item {
  background-color: var(--white);
  padding: 20px;
  width: 280px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workshop-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.workshop-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* --- Category Cards --- */
.category-list {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.category-card {
  background-color: #ffffff;
  padding: 30px;
  width: 180px;
  text-align: center;
  border-radius: 12px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
  transform: scale(1.05);
  background-color: #f3e5f5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* --- Brochure / Text-heavy Pages --- */
.brochure-page {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 100px;
}

.brochure-header {
  text-align: center;
  margin-bottom: 30px;
}

.brochure-content h3 {
  margin-top: 30px;
  color: var(--primary-color);
}

.brochure-content ul {
  padding-left: 20px;
}

.quote {
  margin: 40px auto;
  font-style: italic;
  text-align: center;
  color: #555;
}

.download-section {
  text-align: center;
  margin-top: 30px;
}

/* --- Videos / Gallery --- */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding-top: 20px;
  margin-top: 40px;
}

.video-item {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.local-video {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.video-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* --- Unified for Responsive Video Pages --- */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  margin-bottom: 14px;
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-item h3 {
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 1.2em;
  color: var(--primary-color);
}

.video-item p {
  text-align: center;
  font-size: 0.95em;
  color: #444;
  margin: 0;
  padding: 0 5px;
}

/* =========================================================
   ADDITION (SMALL CHANGE): Workshops page layout like About
   - two columns
   - white box + tilted images
   (Does NOT touch About/Home)
========================================================= */

.workshops-layout {
  margin-top: 120px;
  padding: 40px 40px 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

.workshops-box {
  max-width: 620px;
  background-color: #ffffff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  color: var(--text-color);
}

.workshops-images {
  position: relative;
  width: 460px;
  height: 500px;
}

.workshop-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.ws-img {
  position: absolute;
  width: 320px;
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(0,0,0,0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ws-img-1 {
  top: 40px;
  left: 20px;
  transform: rotate(-6deg);
}

.ws-img-2 {
  top: 150px;
  left: 200px;
  transform: rotate(4deg);
}

.ws-img:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 28px 64px rgba(0,0,0,0.85);
}

@media (max-width: 900px) {
  .workshops-layout {
    padding: 40px 20px 60px;
  }

  .workshops-images {
    width: 300px;
    height: 360px;
  }

  .ws-img {
    width: 230px;
  }

  .ws-img-1 {
    top: 25px;
    left: 10px;
  }

  .ws-img-2 {
    top: 120px;
    left: 100px;
  }
}



/* ===== FINAL FIX: Brochure text color harmony ===== */
.brochure-page{
  background-color: #ffffff;
  color: #111;
}

.brochure-page h2,
.brochure-page h3{
  color: #000814;
}

.brochure-page p,
.brochure-page li{
  color: rgba(0,0,0,0.85);
}

.brochure-page .quote{
  color: rgba(0,0,0,0.75);
  border-left: 4px solid #000814;
  padding-left: 16px;
}



/* ===== PATCH v2: Brochure spacing inside the white area ===== */
.brochure-page{
  padding-left: 34px;
  padding-right: 34px;
  padding-bottom: 70px;
  box-sizing: border-box;
}

@media (max-width: 700px){
  .brochure-page{
    padding-left: 18px;
    padding-right: 18px;
  }
}



/* ===== PATCH v3: Brochure download button (black & white) ===== */
.brochure-page .btn{
  background-color: #000814;
  color: #ffffff;
}

.brochure-page .btn:hover{
  background-color: #111c3a;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}



/* ===== PATCH v4: Videos page card + button color harmony =====
   Goal: remove purple theme on Videos search card and match brand (#000814 + white)
*/
.videos-layout .videos-box,
.video-search-box,
.search-box,
.videos-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  color: #111;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.videos-layout .videos-box h2,
.video-search-box h2,
.search-box h2,
.videos-box h2{
  color: #000814;
}

.videos-layout .videos-box p,
.video-search-box p,
.search-box p,
.videos-box p{
  color: rgba(0,0,0,0.78);
}

/* Inputs inside the videos search card */
.videos-layout .videos-box input,
.video-search-box input,
.search-box input,
.videos-box input{
  border: 1px solid rgba(15, 23, 42, 0.18);
  color: #111;
}

/* Search button inside videos card (override purple) */
.videos-layout .videos-box button,
.video-search-box button,
.search-box button,
.videos-box button{
  background-color: #000814;
  color: #ffffff;
  border: none;
}

.videos-layout .videos-box button:hover,
.video-search-box button:hover,
.search-box button:hover,
.videos-box button:hover{
  background-color: #111c3a;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}



/* ===== PATCH v5: Make Videos search card identical to Workshops card ===== */
.videos-box{
  max-width: 620px;
  background-color: #ffffff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  color: var(--text-color);
  border: none;
  box-sizing: border-box;
}

/* Typography inside Videos card should match Workshops card (no purple) */
.videos-box h2{ color: #000814; }
.videos-box p{ color: rgba(0,0,0,0.78); }

/* Search button in Videos card: black with white text */
.videos-box button,
.videos-box .btn{
  background-color: #000814;
  color: #ffffff;
  border: none;
}
.videos-box button:hover,
.videos-box .btn:hover{
  background-color: #111c3a;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}



/* ===== PATCH v6: ONE unified card system across all pages =====
   Fix: different pages were using different card backgrounds/shadows.
   Strategy: define card tokens once and apply to all "*-box" elements inside <main>.
*/

/* Card design tokens */
:root{
  --card-bg: rgba(255,255,255,0.965);
  --card-border: 1px solid rgba(15, 23, 42, 0.08);
  --card-radius: 18px;
  --card-shadow: 0 18px 40px rgba(0,0,0,0.35);
  --card-padding: 34px;
}

/* Apply to all cards that follow the site's naming convention */
main [class$="box"],
main [class*="-box"]{
  background: var(--card-bg) !important;
  border: var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  padding: var(--card-padding) !important;
  color: #111 !important;
  box-sizing: border-box;
}

/* Card typography */
main [class$="box"] h1,
main [class$="box"] h2,
main [class*="-box"] h1,
main [class*="-box"] h2{
  color: #000814 !important;
}

/* Subtext inside cards */
main [class$="box"] p,
main [class$="box"] label,
main [class*="-box"] p,
main [class*="-box"] label{
  color: rgba(0,0,0,0.78) !important;
}

/* Forms inside cards */
main [class$="box"] input,
main [class$="box"] textarea,
main [class*="-box"] input,
main [class*="-box"] textarea{
  color: #111 !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}

/* Buttons inside cards default to brand black/white */
main [class$="box"] button,
main [class$="box"] .btn,
main [class*="-box"] button,
main [class*="-box"] .btn{
  background-color: #000814 !important;
  color: #ffffff !important;
  border: none !important;
}

main [class$="box"] button:hover,
main [class$="box"] .btn:hover,
main [class*="-box"] button:hover,
main [class*="-box"] .btn:hover{
  background-color: #111c3a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px);
}

/* Smaller helper/info bars (often appear under Gallery/Journal) */
main [class*="message"],
main [class*="notice"],
main [class*="result"]{
  border-radius: 14px;
  padding: 16px 22px;
}



/* ===== Contact page form (matches unified card system) ===== */
.contact-page{
  display: flex;
  justify-content: center;
  padding: 110px 24px 90px; /* space below fixed header */
}

.contact-page .contact-box{
  max-width: 720px;
  width: 100%;
}

.contact-form{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.contact-form .field{
  display: grid;
  gap: 6px;
}

.contact-form label{
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.78);
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255,255,255,0.98);
  outline: none;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(0, 8, 20, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 8, 20, 0.10);
}

.contact-form .form-note{
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.72);
}

.contact-form .form-note a{
  color: #000814;
  text-decoration: underline;
}

.contact-details{
  margin-top: 18px;
  padding-left: 18px;
  color: rgba(0,0,0,0.78);
}



/* ===== PATCH v7: Unified split-layout positioning (all pages with right image stack) =====
   Goal: across all split-layout pages (About/Workshops/Videos/Gallery/Journal),
   keep the LEFT card and RIGHT image stack aligned from the same top edge.
   Home and Contact are unaffected because they don't use *-layout/*-images pairs.
*/

/* One set of layout tokens */
:root{
  --split-page-top: 120px;        /* space below header */
  --split-page-pad: 40px;         /* outer padding */
  --split-right-gap: 80px;        /* space between left card and right images */
  --split-right-width: 460px;     /* right images column width */
  --split-right-top: 140px;       /* top edge of right images stack */
  --split-right-right: 40px;      /* distance from right edge */
}

/* Any page wrapper that follows the "*-layout" naming */
main [class$="-layout"],
main [class*="-layout"]{
  margin-top: var(--split-page-top) !important;
  padding: var(--split-page-pad) !important;
  padding-right: calc(var(--split-right-width) + var(--split-right-gap)) !important;
  box-sizing: border-box;
}

/* Any fixed image stack that follows the "*-images" naming */
main [class$="-images"],
main [class*="-images"]{
  position: fixed !important;
  top: var(--split-right-top) !important;
  right: var(--split-right-right) !important;
  width: var(--split-right-width) !important;
}

/* Ensure the first card on the left starts from the same top edge */
main [class$="-layout"] > section:first-child,
main [class*="-layout"] > section:first-child{
  margin-top: 0 !important;
}



/* ===== PATCH v8: Prevent right image stack from visually covering the left card ===== */
main [class$="-images"],
main [class*="-images"]{
  pointer-events: none; /* decorative images */
  z-index: 1;
}

/* Left cards above decorative images */
main [class$="-layout"] [class$="box"],
main [class$="-layout"] [class*="-box"],
main [class*="-layout"] [class$="box"],
main [class*="-layout"] [class*="-box"]{
  position: relative;
  z-index: 2;
}


/* ===== PATCH v9: TRUE uniform info-card geometry across ALL pages =====
   Goal (strict):
   1) Same LEFT edge for every descriptive card (welcome/about/search/gallery/journal/contact).
   2) Same TOP edge across pages (below the fixed header).
   3) Same WIDTH across pages; height remains auto based on content.

   Notes:
   - We intentionally touch ONLY the "descriptive cards" and the two wrappers
     that were force-centering them (Home hero + Contact wrapper).
   - Right-side decorative image stack is untouched.
*/

:root{
  --info-card-left: 40px;
  --info-card-top: 160px;                /* 120 (header gap) + 40 (page pad) */
  --info-card-width: 720px;              /* single source of truth */
}

/* ========== 1) Home (hero) ========== */
main .hero{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: var(--info-card-top) var(--info-card-left) 60px !important;
}

main .hero-card{
  width: min(var(--info-card-width), calc(100vw - (var(--info-card-left) * 2))) !important;
  max-width: var(--info-card-width) !important;
  margin: 0 !important;
}

/* ========== 2) Split-layout pages (About / Workshops / Explorations / Gallery / Journal / Videos) ========== */
main .about-box,
main .workshops-box,
main .videos-box,
main .gallery-box,
main .journal-box,
main .search-box,
main .video-search-box{
  width: min(var(--info-card-width), calc(100vw - (var(--info-card-left) * 2))) !important;
  max-width: var(--info-card-width) !important;
  margin-left: 0 !important;
}

/* Some pages wrap the card in a fixed-width left column; relax it so the card width can be identical */
main .about-left{
  width: auto !important;
  min-width: 0 !important;
}

/* Ensure those pages start from the same top-left anchor */
main.about-layout,
main.workshops-layout,
main.videos-layout,
main.gallery-layout,
main.journal-layout{
  margin-top: 120px !important;
  padding: 40px !important;
  padding-left: var(--info-card-left) !important;
}

/* ========== 3) Contact page ========== */
main .contact-page{
  justify-content: flex-start !important;
  padding-top: var(--info-card-top) !important;
  padding-left: var(--info-card-left) !important;
  padding-right: var(--info-card-left) !important;
}

main .contact-box{
  width: min(var(--info-card-width), calc(100vw - (var(--info-card-left) * 2))) !important;
  max-width: var(--info-card-width) !important;
  margin: 0 !important;
}



/* ===== PATCH v9: Split pages - keep left card width reasonable (prevents full-width white slab) ===== */
main [class$="-layout"],
main [class*="-layout"]{
  display: block; /* keep existing behavior but ensure predictable width calc */
}

/* Left card default width on split-layout pages */
main [class$="-layout"] > [class$="box"],
main [class$="-layout"] > [class*="-box"],
main [class*="-layout"] > [class$="box"],
main [class*="-layout"] > [class*="-box"]{
  max-width: 680px;
  width: 100%;
}

/* Ensure the right image stack stays visually behind the card */
main [class$="-images"],
main [class*="-images"]{
  z-index: 1;
}


/* ===== FIX v2: Header should never wrap on Contact (or any page) ===== */
header .logo h1{ white-space: nowrap; }
header .logo{ flex-shrink: 0; }

nav ul{ flex-wrap: nowrap; }
nav li{ flex: 0 0 auto; }
nav a{ white-space: nowrap; }

/* If the page gets a scrollbar (effective width shrinks), slightly tighten the nav spacing */
@media (max-width: 1100px){
  nav ul{ gap: 16px; }
}
@media (max-width: 980px){
  nav ul{ gap: 12px; }
  nav a{ padding: 6px 12px; }
}


/* ===== HEADER SPACING OVERRIDE (FINAL) =====
   Fixes:
   - nav items not getting closer due to later media-query overrides
   - Contact link overflowing the header
   Notes:
   - Keeps header layout consistent across pages
*/
nav ul{ gap: 12px !important; }
nav a{ padding: 6px 10px !important; }

@media (max-width: 1100px){
  nav ul{ gap: 12px !important; }
}
@media (max-width: 980px){
  nav ul{ gap: 10px !important; }
  nav a{ padding: 6px 9px !important; }
}


/* ===== PATCH v10: Force identical width + identical top-left origin for all explanatory cards ===== */
:root{
  --info-card-width: 680px; /* unified width for ALL description cards */
}

/* Unified card width across pages (only affects the descriptive boxes) */
.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box{
  width: var(--info-card-width) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure cards don't get centered by parent layouts */
.hero-card{ margin-right: auto !important; }
.about-box, .workshops-box, .videos-box, .gallery-box, .journal-box, .contact-box{
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Home page: keep the hero section as-is, but make the card start at the same
   top-left coordinate used by split-layout pages (padding 40px, top offset 120px). */
.hero .hero-card{
  align-self: flex-start !important; /* overrides hero align-items:center */
  /* hero inline CSS uses padding: 110px 20px 40px; compensate so card aligns to 120px/40px */
  margin-top: calc(var(--split-page-top) - 110px) !important;
  margin-left: calc(var(--split-page-pad) - 20px) !important;
}

/* ===== PATCH v11: Actually enforce the geometry (override inline page CSS) ===== */

/* 1) Home: stop centering the hero card (inline CSS centers it) */
main .hero{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  /* match split pages: 120px below header + 40px inner padding */
  padding: calc(var(--split-page-top) + var(--split-page-pad)) var(--split-page-pad) 60px !important;
}

main .hero .hero-card{
  margin: 0 !important;
}

/* 2) About: the .about-left wrapper hard-limits width to ~560px on desktop */
main.about-layout .about-left{
  width: auto !important;
  min-width: 0 !important;
}

/* 3) Workshops: cancel the old manual left-nudge that breaks alignment */
#workshops-search.workshops-left .workshops-box{
  left: 0 !important;
}

/* 4) Contact: stop centering the contact card and align it like other pages */
main .contact-page{
  justify-content: flex-start !important;
  padding-top: calc(var(--split-page-top) + var(--split-page-pad)) !important;
  padding-left: var(--split-page-pad) !important;
  padding-right: var(--split-page-pad) !important;
}

main .contact-page .contact-box{
  margin: 0 !important;
}



/* ===== FIX v3: Force unified left/top anchor + unified card width (Home/Workshops/Contact) ===== */
:root{
  --cck-card-width: 680px;
  --cck-card-pad: var(--split-page-pad, 80px);
  --cck-card-top: var(--split-page-top, 0px);
}

/* Home (uses .hero and .hero-card, not main-*-layout) */
.hero{
  display: flex !important;
  justify-content: flex-start !important;
  padding-top: calc(var(--cck-card-top) + var(--cck-card-pad)) !important;
  padding-left: var(--cck-card-pad) !important;
  padding-right: var(--cck-card-pad) !important;
  box-sizing: border-box;
}
.hero .hero-card{
  width: min(var(--cck-card-width), 100%) !important;
  max-width: var(--cck-card-width) !important;
  margin: 0 !important;
  left: 0 !important;
}

/* Workshops (boxes are nested inside .workshops-left) */
main.workshops-layout{
  padding-left: var(--cck-card-pad) !important;
  padding-right: var(--cck-card-pad) !important;
  box-sizing: border-box;
}
main.workshops-layout .workshops-left{
  margin: 0 !important;
  left: 0 !important;
}
main.workshops-layout .workshops-box{
  width: min(var(--cck-card-width), 100%) !important;
  max-width: var(--cck-card-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
}

/* Contact (the contact-page class is on main itself) */
main.contact-page,
main.page.contact-page{
  justify-content: flex-start !important;
  padding-top: calc(var(--cck-card-top) + var(--cck-card-pad)) !important;
  padding-left: var(--cck-card-pad) !important;
  padding-right: var(--cck-card-pad) !important;
  box-sizing: border-box;
}
main.contact-page .contact-box,
main.page.contact-page .contact-box{
  width: min(var(--cck-card-width), 100%) !important;
  max-width: var(--cck-card-width) !important;
  margin: 0 !important;
  left: 0 !important;
}

/* ===== FIX v4: Finish the remaining misalignments without touching HTML ===== */

/* Workshops: the page has an inline rule:
   #workshops-search.workshops-left .workshops-box{ left: -114px !important; }
   It loads AFTER style.css, so we must beat it on specificity.
*/
body.workshops-page #workshops-search.workshops-left .workshops-box{
  left: 0 !important;
}

/* Workshops: anchor the left column to the same left edge (the original layout centers it) */
body.workshops-page main.workshops-layout{
  justify-content: flex-start !important;
}

/* Contact: match the split-layout geometry exactly (no extra drop) */
main.page.contact-page{
  margin-top: var(--split-page-top) !important;
  padding: var(--split-page-pad) !important;
  padding-right: var(--split-page-pad) !important;
  display: block !important;
}
main.page.contact-page .contact-box{
  margin: 0 !important;
}

/* Home: make the hero card corners match the other info cards (same radius + visual treatment) */
.hero-card{
  border-radius: 14px !important;
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
}



/* =========================================================
   PATCH v12 (FINAL, MINIMAL): shrink all descriptive cards ~2cm from right
   - Keeps LEFT edge and TOP alignment unchanged
   - Fixes Contact regression by targeting main.contact-page explicitly
   - Keeps height auto (content-driven)
   Place LAST in file.
========================================================= */

:root{
  --info-card-width: 604px; /* 680px - ~2cm */
}

/* All main descriptive cards */
.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box,
.search-box,
.video-search-box{
  max-width: var(--info-card-width) !important;
  width: min(var(--info-card-width), calc(100vw - 80px)) !important; /* 40px left + 40px right */
  box-sizing: border-box !important;
}

/* Ensure cards stay anchored to the same left edge */
.hero-card,
.about-box, .workshops-box, .videos-box, .gallery-box, .journal-box,
.contact-box, .search-box, .video-search-box{
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* CONTACT: the class is on <main>, not a wrapper div */
main.contact-page,
main.page.contact-page{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: 160px 40px 90px !important; /* matches your existing top-left geometry (120+40) */
  box-sizing: border-box !important;
}
main.contact-page .contact-box,
main.page.contact-page .contact-box{
  margin: 0 !important;
}

/* WORKSHOPS: keep width identical even if left column tries to shrink */
body.workshops-page #workshops-search.workshops-left,
body.workshops-page #workshops-search.workshops-left .workshops-box{
  max-width: var(--info-card-width) !important;
  width: min(var(--info-card-width), calc(100vw - 80px)) !important;
}


/* =========================================================
   ALIGNMENT PATCH (Home is the baseline)
   Requirement:
   - Do NOT touch the header.
   - Make the main content cards on ALL pages align with the Home "Welcome" card
     from TOP, LEFT and RIGHT.
   Notes:
   - We only normalize the LEFT/TOP anchors (padding-left + padding-top + box margin-top).
   - We intentionally do NOT override padding-right on split pages to avoid changing
     their right-side decorative/stacked layout.
   Place LAST in file.
========================================================= */

:root{
  --cck-align-left: 40px;  /* matches Home baseline */
  --cck-align-top: 160px;  /* 120 (header gap) + 40 (page padding) */
  --cck-align-gap: 120px;  /* margin-top used by split-layout pages */
}

/* Home baseline (actual markup uses <section class="hero">, not main .hero) */
.hero{
  padding-top: var(--cck-align-top) !important;
  padding-left: var(--cck-align-left) !important;
  padding-right: var(--cck-align-left) !important;
  box-sizing: border-box;
}
.hero .hero-card{
  margin-top: 0 !important;
}

/* Split-layout pages: normalize TOP + LEFT so their first card starts exactly like Home */
main.about-layout,
main.workshops-layout,
main.videos-layout,
main.gallery-layout,
main.journal-layout{
  margin-top: var(--cck-align-gap) !important;
  padding-top: var(--cck-align-left) !important;
  padding-left: var(--cck-align-left) !important;
  box-sizing: border-box;
}

/* Ensure the left content wrapper and the first card don't add extra vertical offset */
main.about-layout .about-left,
main.workshops-layout .workshops-left,
main.videos-layout .videos-left,
main.gallery-layout .gallery-left,
main.journal-layout .journal-left{
  margin-top: 0 !important;
}

main.about-layout .about-box,
main.workshops-layout .workshops-box,
main.videos-layout .videos-box,
main.gallery-layout .gallery-box,
main.journal-layout .journal-box{
  margin-top: 0 !important;
}


/* =========================================================
   PATCH (HOME + CONTACT ONLY)
   - Make Home (.hero-card) and Contact (.contact-box) match the common card width
   - Remove extra top padding that pushed Contact lower
   Changes NOTHING else.
========================================================= */

.hero-card,
.contact-box{
  max-width: 620px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main.contact-page,
main.page.contact-page,
.contact-page{
  padding-top: 0 !important;
}


/* =========================================================
   PATCH v2 (HOME + CONTACT ONLY) — precise overrides
   - Home card: match width + match unified card background & radius
   - Contact card: match width; adjust top padding to align (was slightly too high)
   Changes NOTHING else.
========================================================= */

:root{
  --cck-descriptive-card-width: 620px;
}

/* HOME: beat any earlier 'main .hero-card' rules */
main .hero-card,
.hero .hero-card{
  max-width: var(--cck-descriptive-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* Visual match with the unified card system */
  background: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
}

/* CONTACT: keep width consistent and align top with other pages */
main.contact-page,
main.page.contact-page,
.contact-page{
  padding-top: 40px !important; /* was 0 (too high); was 110 (too low) */
}

main.contact-page .contact-box,
main.page.contact-page .contact-box,
.contact-page .contact-box{
  max-width: var(--cck-descriptive-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================================
   PATCH v3 — raise ALL descriptive cards by ~15mm
   (~15mm ≈ 56px)
   - Keeps left alignment and widths intact
   - Moves ALL cards up uniformly
   Changes NOTHING else.
========================================================= */

/* Apply a uniform upward shift to all descriptive cards */
.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box,
.search-box,
.video-search-box{
  margin-top: -56px !important;
}


/* =========================================================
   PATCH v4 — robust raise for ALL cards (Home + Contact included)
   Use translateY so container padding/centering cannot cancel it.
   (~15mm ≈ 56px)
   ========================================================= */

.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box,
.search-box,
.video-search-box{
  transform: translateY(-56px) !important;
}


/* =========================================================
   PATCH v5 — prevent double-raise on non-Home/Contact
   Reason: an earlier patch used margin-top:-56px, then we added transform:-56px.
   Home/Contact were unaffected by the margin, but other pages were raised twice.
   Fix: reset margin-top back to 0 for all descriptive cards (keep transform).
========================================================= */

.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box,
.search-box,
.video-search-box{
  margin-top: 0 !important;
}


/* =========================================================
   PATCH v6 — unify typography + internal alignment for ALL descriptive cards
   Goals:
   - Same title font across all cards (Home was different)
   - Same body font across all cards
   - Same title/text baseline + consistent spacing (title line, divider, next lines)
   Changes NOTHING else on the site.
========================================================= */

.hero-card,
.about-box,
.workshops-box,
.videos-box,
.gallery-box,
.journal-box,
.contact-box,
.search-box,
.video-search-box{
  text-align: left !important;
}

/* Title typography + consistent top-left anchoring */
.hero-card h1, .hero-card h2,
.about-box h1, .about-box h2,
.workshops-box h1, .workshops-box h2,
.videos-box h1, .videos-box h2,
.gallery-box h1, .gallery-box h2,
.journal-box h1, .journal-box h2,
.contact-box h1, .contact-box h2,
.search-box h1, .search-box h2,
.video-search-box h1, .video-search-box h2{
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

/* Body typography + consistent spacing */
.hero-card p, .hero-card label, .hero-card li,
.about-box p, .about-box label, .about-box li,
.workshops-box p, .workshops-box label, .workshops-box li,
.videos-box p, .videos-box label, .videos-box li,
.gallery-box p, .gallery-box label, .gallery-box li,
.journal-box p, .journal-box label, .journal-box li,
.contact-box p, .contact-box label, .contact-box li,
.search-box p, .search-box label, .search-box li,
.video-search-box p, .video-search-box label, .video-search-box li{
  font-family: 'Segoe UI', sans-serif !important;
  margin-top: 0 !important;
  line-height: 1.55 !important;
}

/* Divider (the line under titles) — normalize across pages */
.hero-card hr,
.about-box hr,
.workshops-box hr,
.videos-box hr,
.gallery-box hr,
.journal-box hr,
.contact-box hr,
.search-box hr,
.video-search-box hr{
  margin: 0 0 14px 0 !important;
}

/* Ensure Home card uses the same internal padding baseline as other cards */
.hero-card{
  padding: var(--card-padding) !important;
  box-sizing: border-box !important;
}


/* =========================================================
   PATCH v7 — align “bars” shown under selector-card pages
   (Workshops / Explorations / Journal)
   Goal:
   - Same left edge as main card
   - Same width as main card
   - Reasonable gap below main card
   - Do NOT affect other components
========================================================= */

/* Common width driver (already used for cards) */
:root{
  --cck-card-width: 620px;
  --cck-bar-gap: 18px;
}

/* The PDF / selector bars under the main card */
.all-workshops-bar,
.all-explorations-bar,
.all-journal-bar{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* align with the main card */
  margin-left: 0 !important;
  margin-right: auto !important;

  /* spacing below main card */
  margin-top: var(--cck-bar-gap) !important;
}

/* Inside layout: keep content nicely spaced, without changing button styles */
.all-workshops-bar,
.all-explorations-bar,
.all-journal-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* Text block in the bar */
.all-workshops-text,
.all-explorations-text,
.all-journal-text{
  margin: 0 !important;
}

/* Button in the bar (do not restyle, only prevent shrinking) */
.all-workshops-btn,
.all-explorations-btn,
.all-journal-btn{
  flex: 0 0 auto !important;
}


/* =========================================================
   PATCH v8 — align the *actual* under-card bars & panels
   (Workshops: .all-workshops-bar)
   (Explorations: .explore-pdf-bar)
   (Gallery tabs content: .tab-panel + .g-section-title)
   NOTE: previous v7 selectors didn't match your HTML.
   This patch only affects these bars/panels.
========================================================= */

:root{
  --cck-card-width: 620px;
  --cck-under-gap: 18px;
}

/* -------- Workshops: All Workshops (PDF) bar -------- */
.workshops-left .all-workshops-bar{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* keep it aligned with the main search card */
  margin: var(--cck-under-gap) 0 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* Some workshop pages had a hard left offset; neutralize it *only* here */
.workshops-left .all-workshops-bar{
  position: relative !important;
  left: 0 !important;
}

/* Make the text/button sit nicely without changing their look */
.workshops-left .all-workshops-bar p{ margin: 0 !important; }
.workshops-left .all-workshops-bar a{ flex: 0 0 auto !important; }

/* -------- Explorations: All Explorations (PDF) bar -------- */
.videos-left .explore-pdf-bar{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin: var(--cck-under-gap) 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.videos-left .explore-pdf-bar p{ margin: 0 !important; }
.videos-left .explore-pdf-bar .explore-pdf-btn{ flex: 0 0 auto !important; }

/* -------- Gallery: tabs content should align with the main card -------- */
.gallery-left .tab-panel{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin-top: var(--cck-under-gap) !important;
}
.gallery-left .g-section-title{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  margin-left: 0 !important;
}


/* =========================================================
   PATCH v9 — Explorations PDF bar width/alignment fix
   Workshops bar is OK. Explorations bar wasn't matched because its container
   isn't always .videos-left (varies per page).
   This patch targets .explore-pdf-bar directly, but ONLY within the explorations
   page area to avoid affecting other components.
========================================================= */

:root{
  --cck-card-width: 620px;
  --cck-under-gap: 18px;
}

/* Explorations: All Explorations (PDF) bar */
.explorations-left .explore-pdf-bar,
.explorations-layout .explore-pdf-bar,
main.videos-layout .explore-pdf-bar,
main.explorations-layout .explore-pdf-bar,
.explore-pdf-bar{
  max-width: var(--cck-card-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin: var(--cck-under-gap) 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;

  position: relative !important;
  left: 0 !important;
}

/* Keep inner pieces tidy */
.explore-pdf-bar p{ margin: 0 !important; }
.explore-pdf-bar .explore-pdf-btn{ flex: 0 0 auto !important; }


/* =========================================================
   PATCH v10 — force Explorations PDF bar to EXACTLY match card width
   The bar was still wider because it is likely a flex item stretching
   or has an overriding width/min-width.
   This override is intentionally strong but scoped to Explorations page.
========================================================= */

/* Scope: Explorations page only (nav active or title area) */
body .explore-pdf-bar{
  /* exact same width as the cards */
  width: 620px !important;
  max-width: 620px !important;
  min-width: 0 !important;

  /* prevent flex stretching */
  flex: 0 1 620px !important;
  align-self: flex-start !important;

  /* align left with the card */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* If the page becomes narrow, allow it to shrink safely */
@media (max-width: 680px){
  body .explore-pdf-bar{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}


/* =========================================================
   PATCH v11 — Explorations PDF bar: fix box-sizing so padding doesn't enlarge it
   Problem: .explore-pdf-bar had width:100% and (content-box) padding,
            making it look wider than the 620px card.
   Fix: force border-box and clamp width to card width.
========================================================= */

.explore-pdf-bar{
  box-sizing: border-box !important;
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin-top: 18px !important;
}


/* =========================================================
   PATCH v12 — Explorations PDF bar: match card width + reduce vertical gap
   Issue reported:
   - .explore-pdf-bar still not same width as main card
   - gap below main card still too large
   Fix:
   - force bar width to the SAME variable used for cards
   - remove any centering/extra offsets
   - set a tighter, consistent margin-top
========================================================= */

:root{
  /* Use the same width used by the main cards (fallback 620px) */
  --cck-card-width: var(--cck-descriptive-card-width, 620px);
  --cck-under-gap-tight: 10px;
}

/* Explorations PDF bar */
.explore-pdf-bar{
  box-sizing: border-box !important;

  /* exact card width */
  width: var(--cck-card-width) !important;
  max-width: var(--cck-card-width) !important;

  /* prevent stretching in flex/grid parents */
  flex: 0 0 auto !important;
  align-self: flex-start !important;

  /* align with card's left edge */
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;

  /* tighten the gap under the main card */
  margin-top: var(--cck-under-gap-tight) !important;
  margin-bottom: 18px !important;
}

/* If the viewport is narrower than the card, allow it to shrink */
@media (max-width: 700px){
  .explore-pdf-bar{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}


/* =====================================================================
   FIX: Explorations PDF bar (under-card) must match main card width
   and sit at a reasonable distance under it.
   This is intentionally HIGH-SPECIFICITY + !important so it wins over
   page-level inline <style> rules without affecting other pages.
   ===================================================================== */

:root{
  /* Fallbacks; if your CSS already defines these, keep yours */
  --cck-card-width: 620px;
  --cck-card-radius: 22px;
  --cck-card-bg: #f7f7f7;
  --cck-card-border: rgba(0,0,0,0.12);
}

/* Force the left column on Explorations to use the same max width as cards */
body .videos-left{
  max-width: var(--cck-card-width) !important;
}

/* Reduce the gap between the main explorations card and the PDF bar */
body .videos-left .videos-box{
  margin-bottom: 14px !important;
}

/* Make the PDF bar match the card width + alignment */
body .videos-left .explore-pdf-bar{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--cck-card-width) !important;

  /* spacing under the main card */
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* same look/feel as cards */
  background: var(--cck-card-bg) !important;
  border: 1px solid var(--cck-card-border) !important;
  border-radius: var(--cck-card-radius) !important;
  padding: 14px 22px !important;

  /* stable internal layout */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* In case the bar is not nested exactly as expected in some versions */
body .explore-pdf-bar{
  box-sizing: border-box !important;
}

/* --- Explorations PDF bar spacing: force match with main card --- */
body.videos-page .videos-left .videos-box{
  margin-bottom: 12px !important;
}
body.videos-page .videos-left .explore-pdf-bar{
  margin-top: 12px !important;
}

/* =========================================================
   ALIGNMENT PATCH (Home is the baseline)
   Goal:
   - All primary content cards across pages align with the HOME card
     ("Welcome to the CCK.") on TOP / LEFT / RIGHT.
   Scope:
   - Does NOT modify the header.
   - Only normalizes the starting anchor of each page's main content box.
   ========================================================= */

:root{
  --cck-align-left: 40px;  /* matches Home hero padding-left */
  --cck-align-pad: 40px;   /* internal page padding (top/left) */
  --cck-align-topgap: 120px; /* gap below header before page padding */
}

/* HOME (baseline): ensure the hero section keeps the baseline anchor */
.hero{
  padding-top: calc(var(--cck-align-topgap) + var(--cck-align-pad)) !important; /* 120 + 40 = 160 */
  padding-left: var(--cck-align-left) !important;
  padding-right: var(--cck-align-left) !important;
  box-sizing: border-box !important;
}
.hero-card{
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* Split-layout pages: force the SAME top + left anchor as Home
   IMPORTANT: do NOT touch padding-right (some pages reserve room for right images). */
main.about-layout,
main.workshops-layout,
main.videos-layout,
main.gallery-layout,
main.journal-layout{
  margin-top: var(--cck-align-topgap) !important;
  padding-top: var(--cck-align-pad) !important;
  padding-left: var(--cck-align-left) !important;
  box-sizing: border-box !important;
}

/* Remove any extra top offset on the left column wrappers */
main.about-layout .about-left,
main.workshops-layout .workshops-left,
main.videos-layout .videos-left,
main.gallery-layout .gallery-left,
main.journal-layout .journal-left{
  margin-top: 0 !important;
}

/* Remove any per-page top offset on the primary cards */
main.about-layout .about-box,
main.workshops-layout .workshops-box,
main.videos-layout .videos-box,
main.gallery-layout .gallery-box,
main.journal-layout .journal-box,
main.workshops-layout .search-box,
main.videos-layout .video-search-box{
  margin-top: 0 !important;
}


/* =========================================================
   FINAL ALIGNMENT – match Home hero-card geometry
   (horizontal alignment only; no vertical shift)
   ========================================================= */
.about-box,
.workshops-box,
.explorations-box,
.gallery-box,
.journal-box,
.contact-box {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* === FINAL FIX: vertical alignment with Home === */
.workshops-box,
.explorations-box,
.gallery-box,
.journal-box {
  margin-top: 0;
}


/* =====================================================
   FINAL REAL FIX
   Align Workshops / Explorations / Gallery / Journal
   with Home by removing extra layout offset
   ===================================================== */

/* Try common layout class names (safe no-ops if not present) */
.workshops-layout,
.explorations-layout,
.gallery-layout,
.journal-layout,
.content-layout,
.two-column-layout,
.page-layout {
  margin-top: 0;
  padding-top: 0;
}

/* Page-specific fallback (targets only these pages) */
body.workshops-page main,
body.explorations-page main,
body.gallery-page main,
body.journal-page main {
  margin-top: 0;
  padding-top: 0;
}


/* === Nudge Journal box slightly left (keep top alignment) === */
body.journal-page .journal-box {
  position: relative;
  left: -12px;
}

/* === Workshops: add clearer gap between the main search card and the PDF bar === */
body.workshops-page .all-workshops-bar{
  margin-top: 28px !important;
}

\n

/* === PDF bars: constrain to the same inner width as main cards === */
.all-workshops-bar .card-inner,
.all-explorations-bar .card-inner,
.all-journal-bar .card-inner{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}



/* === Explorations: make the PDF bar use the same card sizing as the main box === */
body.explorations-page .all-explorations-bar.explorations-box{
  width: min(800px, calc(100vw - 80px));
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* === Explorations: make the PDF bar match the main card width === */
body.explorations-page .explore-pdf-bar{
  width: min(800px, calc(100vw - 80px));
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* === FINAL OVERRIDE: Explorations PDF bar must match card width (override older !important rules) === */
body.explorations-page .explore-pdf-bar{
  width: min(var(--cck-card-width), calc(100vw - 80px)) !important;
  max-width: var(--cck-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* === FINAL: force Explorations PDF bar to use EXACT same sizing as .explorations-box card === */
body.explorations-page .explore-pdf-bar.explorations-box{
  width: min(800px, calc(100vw - 80px)) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* === FINAL: Explorations page uses body.videos-page (not explorations-page). Constrain PDF bar to card width === */
body.videos-page .explore-pdf-bar{
  width: min(800px, calc(100vw - 80px)) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* === FINAL OVERRIDE (Explorations PDF bar): match descriptive card width exactly === */
body.videos-page .videos-left .explore-pdf-bar{
  width: min(var(--info-card-width, 680px), calc(100vw - 80px)) !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* === Workshops: keep PDF bar text + button on the same line === */
.cck-pdfbar-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cck-pdfbar-inline > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* On small screens, allow wrapping instead of overflow */
@media (max-width: 520px){
  .cck-pdfbar-inline{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}


/* === FIX: Workshops PDF bar layout is inside .card-inner === */
.cck-pdfbar-inline .card-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cck-pdfbar-inline .card-inner > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 520px){
  .cck-pdfbar-inline .card-inner{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}


/* === Workshops PDF bar: push the button to the far right edge of the bar === */
body.workshops-page .cck-pdfbar-inline .card-inner{
  justify-content: flex-start !important; /* don't distribute space weirdly */
  width: 100% !important;
}

body.workshops-page .cck-pdfbar-inline .card-inner a,
body.workshops-page .cck-pdfbar-inline .card-inner button{
  margin-left: auto !important;  /* shove button to the right */
}

body.workshops-page .cck-pdfbar-inline .card-inner{
  padding-right: 18px !important; /* slightly less right padding so it sits closer to the edge */
}


/* === tweak: nudge Workshops PDF button a bit further right === */
body.workshops-page .cck-pdfbar-inline .card-inner{
  padding-right: 8px !important;
}
body.workshops-page .cck-pdfbar-inline .card-inner a,
body.workshops-page .cck-pdfbar-inline .card-inner button{
  margin-right: -6px !important; /* small nudge, keeps within rounded bar */
}


/* === hard fix: make the Workshops PDF bar content truly fill the row and push button to the right edge === */
body.workshops-page .cck-pdfbar-inline .card-inner{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 14px !important;
  padding-right: 6px !important; /* minimal right padding so button can reach edge */
}

body.workshops-page .cck-pdfbar-inline .card-inner > :first-child{
  flex: 1 1 auto !important;   /* let the text take remaining space */
  margin-right: 0 !important;
}

body.workshops-page .cck-pdfbar-inline .card-inner a,
body.workshops-page .cck-pdfbar-inline .card-inner button{
  margin-left: auto !important; /* push to far right */
  margin-right: 0 !important;
}