/*==========================================================================
  MAKERLAB — WILD APRICOT CUSTOM THEME CSS (Merged)
  Maintainer: MakerLab Web Team
  Purpose: Overrides for themakerlab.org

  BRAND NOTE
  - Fonts per brand guide: Gotham (Bold/Medium) + Source Code Pro.

  STRUCTURE (Table of Contents)
  1) Brand Tokens (colors, spacing, radii, elevations, grid)
  2) Fonts
  3) Base & Utilities (reset-lite, helpers, links)
  4) Core Components (buttons, badges/tags, cards, notices)
  5) Layout Patterns (containers, grids, sections)
  6) Feature Modules
     6a) Home — Hero Band (CTA)
     6b) Labs Index — Cards/Grid
     6c) Lab Detail Page (hero/meta/sections/equipment/classes/gallery)
     6d) Events — Upcoming Events card styling
     6e) Footer — brand treatment
     6f) Labs Page Header — colored underline
  7) WildApricot Primitives (header/menu/forms/gadgets) incl. buttonStyle002
  8) Accessibility & Motion Preferences
==========================================================================*/


/*==========================================================================
  1) BRAND TOKENS
  ---------------------------------------------------------------------------*/
:root{
  /* Primary */
  --ml-orange:  #D55225;  /* Maker Orange */
  --ml-blue:    #2A698C;  /* Maker Blue */

  /* Neutrals (from guide) */
  --ml-charcoal:#353535;  /* darkest neutral for headings */
  --ml-slate:   #303E47;  /* mid neutral for subheads/UI */
  --ml-cloud:   #F4F0EC;  /* light neutral section bg */
  --ml-paper:   #FFFFFF;  /* site/page bg */

  /* Secondary/Support (existing) */
  --ml-teal:    #97CED0;
  --ml-red:     #8C312A;
  --ml-tan:     #F3BB6D;
  --ml-navy:    #1E4E6F;
  --ml-fire:    #A92E2D;
  --ml-peach:   #CE5F5F;

  /* Aliases for readability in rules */
  --ml-ink:     var(--ml-charcoal);
  --ml-ink-2:   #3a3a3a;
  --ml-bg:      var(--ml-paper);
  --ml-border:  rgba(0,0,0,.08);

  /* Radii / Shadow / Width */
  --radius: 12px;
  --radius-lg: 16px;
  --ml-radius: var(--radius-lg);         /* unify */
  --shadow: 0 6px 16px rgba(0,0,0,.08);
  --elev-1: 0 6px 16px rgba(0,0,0,.08);
  --elev-2: 0 12px 28px rgba(0,0,0,.14);
  --mx: 1200px;                           /* legacy container max */
  --ml-container: 1100px;                 /* new container max */

  /* Spacing / Typography scale */
  --ml-gap: clamp(12px, 2vw, 20px);
  --fs-hero: clamp(28px, 4.6vw, 44px);
  --fs-h2:   clamp(22px, 3.4vw, 32px);
  --fs-lead: clamp(18px, 2.2vw, 20px);

  /* Motion */
  --speed: 200ms cubic-bezier(.2,.6,.2,1);
  --grad-orange: linear-gradient(100deg, var(--ml-orange), var(--ml-peach));
  --grad-blue:   linear-gradient(100deg, var(--ml-blue), var(--ml-navy));

  /* Z-index */
  --z-nav: 1000;
  --z-modal: 2000;

  /* Labs page header underline colors (editable) */
  --labs-title-color: var(--ml-orange);
  --labs-underline:   var(--ml-blue);
}


/*==========================================================================
  2) FONTS  (update src URLs to your uploaded WOFF2 files in /resources/fonts)
  ---------------------------------------------------------------------------*/
@font-face {
  font-family: "Gotham";
  src: url("/resources/fonts/Gotham Medium/Gotham-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/resources/fonts/Gotham Bold/Gotham-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/resources/fonts/Source Code Pro/SourceCodePro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Global stacks */
html, body{
  font-family: "Source Code Pro", monospace;
  color: var(--ml-ink);
  background: var(--ml-bg);
}
code, .mono, .badge-code{ font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
h1,h2,h3,h4, h5, h6 { 
  font-family: "Gotham", sans-serif;
  font-weight: 800; letter-spacing:.2px; color: var(--ml-ink) }


/*==========================================================================
  3) BASE & UTILITIES
  ---------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
p { line-height: 1.6; margin: 0 0 1rem; }
a { color: var(--ml-blue); text-underline-offset: 10px; }
a:hover { opacity: .9; }
:focus-visible { outline: 3px solid var(--ml-tan); outline-offset: 2px; }
html { scroll-behavior: smooth; }

.container { max-width: var(--ml-container); margin-inline: auto; padding-inline: 16px; }
.lead { color: var(--ml-ink-2); font-size: var(--fs-lead); line-height: 1.6; }
.eyebrow { display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ml-blue); margin-bottom:.2rem; }
.hidden { display: none !important; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/*==========================================================================
  4) CORE COMPONENTS
  ---------------------------------------------------------------------------*/
/* Buttons */
.btn{
  display:inline-block;
  border-radius: 12px;
  padding:.8rem 1.2rem;
  font-weight: 800;
  line-height: 1;
  border:2px solid transparent;
  text-decoration: none;
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), color var(--speed);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--elev-1); }
.btn:active{ transform: translateY(0); }

.btn-primary   { background: var(--ml-orange); color: #fff; }
.btn-primary:hover{ filter: brightness(.95); }

.btn-secondary { background: transparent; border-color: var(--ml-blue); color: var(--ml-blue); }
.btn-secondary:hover{ background: var(--ml-blue); color: #fff; }

.btn-outline   { background: transparent; border-color: var(--ml-blue); color: var(--ml-blue); }
.btn-outline:hover{ background: var(--ml-blue); color:#fff; }

.btn-lg{ padding:1rem 1.4rem; border-radius:12px; }

/* Badges & Tags */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px; padding:.35rem .7rem;
  font: 700 12px/1 Gotham, Arial, sans-serif;
  background: var(--ml-cloud); color: var(--ml-blue); border:1px solid color-mix(in srgb, var(--ml-blue) 22%, #fff);
}
.badge--white{ background:#fff; color:var(--ml-blue); border:0; }
.tag{
  display:inline-block; font-size:.75rem; border-radius:999px; padding:.25rem .6rem;
  background:#eef2f5; border:1px solid rgba(0,0,0,.06);
}
.tag--orientation{ background:#fff3ec; border-color:#ffd9c7; color:#a54516; }
.tag--standard   { background:#eef6fb; border-color:#d7e8f3; color:#21526a; }
.tag--advanced   { background:#f3effc; border-color:#e1d9fa; color:#4b2e83; }

/* Cards & Notices */
.card{
  background: var(--ml-paper);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--ml-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--speed), transform var(--speed), border-color var(--speed);
}
.card:hover{ box-shadow: var(--elev-2); transform: translateY(-2px); border-color: rgba(0,0,0,.08); }

.notice{
  background: var(--ml-cloud);
  border-left: 4px solid var(--ml-orange);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ml-slate);
}


/*==========================================================================
  5) LAYOUT PATTERNS
  ---------------------------------------------------------------------------*/
.section { padding: clamp(24px, 4vw, 40px) 0; }
.grid{
  --min: 260px;
  display:grid; gap: var(--ml-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
}
.grid--wider { --min: 280px; }
.grid--tight { --min: 220px; gap: 12px; }


/*==========================================================================
  6) FEATURE MODULES
  ---------------------------------------------------------------------------*/

/* 6a) HOME — HERO BAND (Learn → Make → Repeat) */
.hero-band{
  position: relative;
  background: var(--ml-orange);
  color: #fff;
  padding: 56px;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.hero-band h1{ color:#fff; margin-bottom:10px; font-size: clamp(40px,5vw,56px); line-height:1.1; }
.hero-band .hero-subtitle,
.hero-band .hero-text{
  color: rgba(255,255,255,.95) !important;
  font-size:18px; line-height:1.55; max-width: 70ch; margin:10px 0 0;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:.35rem .70rem; border-radius:999px;
  background:#fff !important;
  color:var(--ml-blue) !important;
  border:1.5px solid color-mix(in srgb, var(--ml-blue) 22%, #fff);
  font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.hero-actions,
.hero-buttons{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }

/* Hero-specific button treatments */
.hero-band .btn{ border:2px solid transparent; }
.hero-band .btn-primary{
  background: var(--ml-blue); color:#fff;
}
.hero-band .btn-primary:hover{
  background: var(--ml-blue);
  color:#fff;
  border-color:#fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.hero-band .btn-secondary{
  background:#fff; color:var(--ml-blue); border-color:transparent;
}
.hero-band .btn-secondary:hover{
  background:#fff !important;
  color:var(--ml-blue)!important;
  border-color:var(--ml-blue);
  box-shadow:0 0 0 3px rgba(42,105,140,.18);
}

/* 6b) LABS INDEX — GRID & CARDS */
.labs-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px; margin:0; padding:0; list-style:none;
}
.lab-card{
  background:var(--ml-paper);
  border-radius:16px;
  box-shadow: var(--elev-1);
  border: 2px solid var(--ml-blue);           /* per request: blue border */
  overflow:hidden;
  transition: transform .2s, box-shadow .2s;
}
.lab-card:hover{ transform: translateY(-2px); box-shadow: var(--elev-2); }
.lab-body{ padding:14px 16px; }
.lab-title{ margin:0 0 6px; color:var(--ml-orange); font-weight:800; font-size:20px; }
.lab-desc{ color:var(--ml-slate); font-size:14px; line-height:1.5; margin:0 0 10px; }
.lab-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* 6c) LAB DETAIL PAGE */
.lab-page{ max-width: var(--mx); margin-inline:auto; padding:24px; }
.lab-section{ margin-top:40px; }
.lab-section h2{ font-weight:900; color:var(--ml-ink); margin:0 0 10px; }
.lab-section p.lead{ color:var(--ml-slate); font-size:18px; line-height:1.55; margin:4px 0 14px; }

/* Lab hero */
.lab-hero{
  background: var(--ml-orange);
  color:#fff; border-radius:24px; padding:28px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.lab-hero h1{ color:#fff; margin:0 0 6px; font-weight:900; font-size: var(--fs-hero); }
.lab-hero .lead{ color: rgba(255,255,255,.92); }

/* Lab meta badges */
.lab-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.badge--white{ background:#fff; color:var(--ml-blue); }

/* Lab hero actions + subnav chips */
.lab-hero .actions{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.lab-subnav{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding-top:8px; border-top:1px solid rgba(0,0,0,.12); }
.lab-subnav a{
  text-decoration:none; color:var(--ml-blue); font-weight:800;
  background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:999px; padding:.45rem .8rem;
}
.lab-subnav a:hover{ color:#fff; background:var(--ml-blue); border-color:var(--ml-blue); }

/* Equipment grid */
.eq-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
  list-style:none; padding:0; margin-top:12px;
}
.eq-card{
  background:var(--ml-paper); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px 14px;
  box-shadow: var(--elev-1);
}
.eq-card h3, .eq-card strong{ color:var(--ml-orange); }
.equipment ul{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
.equipment li{ background:var(--ml-paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
.equipment li h4{ color:var(--ml-orange); margin:0 0 6px; }

/* Classes */
.class-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:12px; }
.class-card{
  background:var(--ml-paper); border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow: var(--elev-1); padding:16px;
}
.class-card h3{ margin:0 0 6px; font-weight:900; color:var(--ml-ink); }
.class-card p{ margin:0 0 12px; color:var(--ml-slate); }
.class-card .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tag--orientation{ background:var(--ml-orange); color:#fff; }
.tag--standard{ background:var(--ml-blue); color:#fff; }
.tag--advanced{ background:var(--ml-navy); color:#fff; }

/* Safety callout (notice) */
#safety .btn{ margin-top:.5rem; }

/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:14px; box-shadow: var(--elev-1); }

/* 6d) EVENTS — UPCOMING LIST */
.WaGadgetUpcomingEvents li{
  background:var(--ml-paper); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 18px; margin:12px 0;
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center;
  border:1px solid rgba(0,0,0,.06);
}
.WaGadgetUpcomingEvents time{
  display:block; font-weight:800; color:#fff; background:var(--ml-blue);
  padding:14px; text-align:center; border-radius:12px;
}
.WaGadgetUpcomingEvents a{ font-weight:800; color:var(--ml-ink); }

/* 6e) FOOTER — BRAND */
#idFooter{ background:var(--ml-blue); color:#fff; padding:32px 0; }
#idFooter a{ color:#fff; text-decoration:underline; }
#idFooter a:hover{ color:var(--ml-orange); }

/* 6f) LABS PAGE HEADER — COLORED UNDERLINE */
.labs-header h1,
.labs-header h2{
  color: var(--labs-title-color) !important;
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.labs-header h1::after,
.labs-header h2::after{
  content:"";
  display:block;
  height:6px;
  width:120px;
  background: var(--labs-underline);
  border-radius:4px;
  margin-top:8px;
}
.labs-header hr{
  height:6px; width:240px; border:0; margin:8px 0 0;
  background: var(--labs-underline); border-radius:4px;
}


/*==========================================================================
  7) WILDAPRicot PRIMITIVES (header/menu/forms/gadgets)
  ---------------------------------------------------------------------------*/

/* Menu styling and active underline */
#id_yOhi7Wr{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.WaGadgetMenuHorizontal ul li a{
  position:relative; transition:background var(--speed), color var(--speed);
}
.WaGadgetMenuHorizontal ul li a:hover,
.WaGadgetMenuHorizontal ul li.sel a{
  background:var(--ml-cloud);
}
.WaGadgetMenuHorizontal ul li a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-2px; height:3px;
  background:var(--ml-blue); border-radius:3px; transform:scaleX(0); transition:transform var(--speed);
}
.WaGadgetMenuHorizontal ul li a:hover::after,
.WaGadgetMenuHorizontal ul li.sel a::after{ transform:scaleX(1) }

/* Gadget spacing harmonization */
.WaGadget, .WaGadgetRecentBlogPosts, .WaGadgetEvents, .WaGadgetBlog, .WaGadgetCustom{
  margin-top:.5rem; margin-bottom:.5rem;
}

/* Headings inside gadget boxes */
.WaGadget .gadgetTitle, .WaGadget .boxHeaderTitle, .WaGadget .gadgetTitle h2{
  font-weight:700; color: var(--ml-ink);
}


/* Gadget spacing harmonization */
.WaGadget, .WaGadgetRecentBlogPosts, .WaGadgetEvents, .WaGadgetBlog, .WaGadgetCustom{
  margin-top:.5rem; margin-bottom:.5rem;
}

/* Headings inside gadget boxes */
.WaGadget .gadgetTitle, .WaGadget .boxHeaderTitle, .WaGadget .gadgetTitle h2{
  font-weight:700; color: var(--ml-ink);
}

/* Forms (Join/Donate/Contact) — button alignment */
.WaGadgetContactForm .Buttons,
.WaGadgetMembershipForm .Buttons,
.WaGadgetDonate .Buttons { display:flex; gap:.5rem; flex-wrap:wrap; }

/* WA “stylized button” override: use MakerLab Blue everywhere */
.stylizedButton.buttonStyle002{
  background: var(--ml-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--ml-blue) !important;
  border-radius: 12px;
  font-weight: 800;
  padding: .55rem .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background var(--speed), transform var(--speed), box-shadow var(--speed);
}
.stylizedButton.buttonStyle002:hover{
  background: linear-gradient(100deg, var(--ml-blue), var(--ml-navy)) !important;
  transform: translateY(-1px);
}
.stylizedButton.buttonStyle002:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--ml-blue) 30%, white);
  outline-offset: 2px;
}


/*==========================================================================
  8) ACCESSIBILITY & MOTION
  ---------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Ensure keyboard-visible focus on nav/links/buttons */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline: 3px solid var(--ml-tan);
  outline-offset: 2px;
}

/* Alt approach: translate the underline instead of changing padding */
#idHeader .WaGadgetMenuHorizontal ul li a::after{
  bottom: 6px; /* keep original anchor point */
  transform: translateY(6px) scaleX(0); /* push it down */
  transition: transform var(--speed);
}
#idHeader .WaGadgetMenuHorizontal ul li a:hover::after,
#idHeader .WaGadgetMenuHorizontal ul li.sel a::after{
  transform: translateY(6px) scaleX(1);
}