/*
Theme Name: SCC NewTheme
Theme URI: https://example.com
Author: Andre Lefebvre
Description: Classic Editor friendly, boxed layout with optional full-bleed bands. Demo landing wireframe.
Version: 2.0.4
License: GPL-2.0+
Text Domain: scc-newtheme
*/

/* Load Inter (plus fallbacks) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Lato:wght@400;700&family=Work+Sans:wght@400;600;700&display=swap");

/* @change 1.8.15: Body font weight ? 400; bump radii (content/UI surfaces) to 4px. Menus/dropdowns unchanged. */
/* @change 1.8.14: Switch all typography to Inter stack (Inter, Lato, Work Sans). */
/* @change 1.8.10: Home card body honors WP image align classes (alignleft/right/center) + clearfix. */
/* @change 1.8.9: Fix home-card title bar colors (bg #042234, text #fff). */
/* @change 1.8.8: Home cards - Title bar + unified radii rules. */
/* @change 1.8.7: Talks - CSS-only A1 top row using existing markup. */

/* Global font family override (Inter stack) */
html, body {
  font-family: "Inter", Lato, "Work Sans", sans-serif;
  font-weight: 400; /* body text = 400 */
}
h1,h2,h3,h4,h5,h6,
p, li, blockquote, figcaption,
button, input, textarea,
.post, .entry-content, .post-card, .talks-title, .talks-excerpt,
.site-header, .primary-nav, .home-intro {
  font-family: inherit;
}
/* Numeric normalization */
* { font-variant-numeric: normal; }

:root{
  --bg:#ffffff;
  --text:#000000;
  --brand:#042234;

  --card-bg:#042234;
  --card-text:#ffffff;

  --maxw:1500px;
  --pad:2rem;
  --gap:1.25rem;
  --logo-h:50px;
  --header-h:55px;  /* was 80px - tweak value */

  /* ========================================
     FIX FOR THE GAP ON PAGE-CARD-LAYOUT
  ======================================= */
  --scc-card-offset-top: 80px;  /* was 32px global top offset for white cards */
  /* ======================================= */

  /* Home card title bar colors */
  --home-title-bg:#042234;
  --home-title-fg:#ffffff;

  /* Talks UI */
  --talks-topbar-h:38px;
  --talks-btn-h:32px;
  --talks-btn-radius:3px; /* nav buttons radius left as-is */
  --talks-blue:#042235;
  --talks-blue-hover:#0d4c7a;
}

/* Mobile override for Page Card Layout top offset */
@media (max-width: 768px){
  :root{
    --scc-card-offset-top: 12px; /* mobile value */
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.4 !important;
  overflow-x:hidden;
  padding-top: var(--header-h); /* make room for fixed header */
}

/* links & buttons */
a{color:#e86800;text-decoration:none}
a:hover{color:#042235;text-decoration:none}
a.button,.button{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:6px;
  border:1px solid currentColor;
  text-decoration:none;
  font-family: inherit;
}
a.button:hover{opacity:.85}

.page-header {
  max-width: 760px;   /* same as your content column */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ----------------------------------
   W R A P P E R
---------------------------------- */
.wrapper{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}
.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}

/* Canonical wrapper alignment override */
.wrapper{
  max-width: var(--maxw);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

@media (max-width: 600px) {
  .wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Cancel WP's default html margin for admin bar
   because we offset the header ourselves */
html {
    margin-top: 0 !important;
}

@media (max-width: 782px) {
    html {
        margin-top: 0 !important;
    }
}

/* ----------------------------------
   HEADER + NAV (CLEAN, 900px breakpoint)
---------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: var(--brand, #042234);
  color: #fff;
  border-bottom: 2px solid #eb6900;
/* box-shadow: 0 3px 8px rgba(0,0,0,0.65);  shadow on landing */
}

/* WordPress admin bar correction */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px; /* WP mobile admin bar height */
  }
}

.site-header .wrapper {
  max-width: 1432px;
  margin: 0 auto;
  padding: 0 6px;
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 0; /* more breathing room than 14px */
  transition: padding .25s ease, height .25s ease;
}

/* PAGE CARD TEMPLATE FIX - THICK BORDER 
.page-card-layout{
  border-top: 12px solid #042234 !important;
}*/


/* ----------------------------------
   HEADER SEARCH ICON + dropdown
---------------------------------- */

.header-search{
  position: relative;
  margin-left: 4px;
  display: flex;
  align-items: center;
}

.header-search-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 4px;
  line-height: 1;
  color: #fff;
}

.header-search-toggle:focus{
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

.header-search-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: #042234;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  min-width: 300px;
  z-index: 2000;
border: 1px solid #ddd;
}

.header-search-panel form{
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-search-icon i{
  font-size: 20px;   /* try 18-22px */
  color: #ff6600;
 }

.header-search-panel input[type="search"]{
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  color: #042234;
}

.header-search-panel input[type="submit"],
.header-search-panel button[type="submit"]{
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
}

/* SEARCH ON MOBILE */
/* Mobile: hide ONLY the header search ICON, keep the panel usable */
@media (max-width: 1100px){

  .header-search{
    display: block;        /* keep container alive */
    position: relative;
  }

  .header-search-toggle{
    display: none !important; /* hide the icon button only */
  }

  /* Make the dropdown usable on mobile */
  .header-search-panel{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 76px;              /* adjust if needed */
    min-width: 0;
    width: auto;
    z-index: 3000;
  }
}


/* ----------------------------------------------------
HIDE "SEARCH" TEXT FROM MENU ON DESKTOP
------------------------------------------------------*/
/* Hide SEARCH menu item on desktop */
@media (min-width: 769px){
  .menu-search-toggle{
    display: none !important;
  }
}

/* Show SEARCH menu item on mobile */
@media (max-width: 768px){
  .menu-search-toggle{
    display: block;
  }
}

/* ============================================================
   MOBILE MENU - Search TEXT item with Font Awesome icon
   ============================================================ */
@media (max-width: 1100px){

  /* Search row: text left, icon right */
  li.menu-search-toggle > a{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Font Awesome icon appended via JS */
  li.menu-search-toggle > a .scc-menu-search-icon{
    margin-left: 12px;          /* ? spacing between text and icon */
    font-size: 18px;
    line-height: 1;
    color: #ff6600;
    flex-shrink: 0;             /* prevent squish on small screens */
  }
}


/* ============================================================
   MOBILE MENU - appended search icon (JS-added)
   ============================================================ */
@media (max-width: 768px){

  /* The search icon button appended to social icons */
  .scc-mobile-search-btn{
    background: none;
    border: 0;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .scc-mobile-search-btn i{
    font-size: 22px;
    color: #fff;
  }

  /* Subtle hover/tap feedback */
  .scc-mobile-search-btn:active i,
  .scc-mobile-search-btn:hover i{
    opacity: 0.85;
  }

}

/* ----------------------------------
   DESKTOP SHRINK - MENU + LOGO
---------------------------------- */
@media (min-width: 1101px) {

  .site-header.is-stuck .inner {
    padding: 6px 0 !important;
  }

  .site-header.is-stuck .custom-logo {
    max-width: 240px !important;
  }

  .site-header.is-stuck #primary-nav .menu > li > a {
    padding: 2px 6px !important;
    font-size: 0.90em !important;
  }

  .site-header.is-stuck #primary-nav .sub-menu > li > a {
    padding: 4px 10px !important;
    font-size: 0.90em !important;
  }
}

/* Smooth shrinking for menu items */
#primary-nav .menu > li > a {
  transition: padding .25s ease, font-size .25s ease;
}

#primary-nav .sub-menu > li > a {
  transition: padding .25s ease, font-size .25s ease;
}


/* Branding / logo */
.site-branding {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
}

.custom-logo {
  width: 320px;
  max-width: 320px;
  height: auto;
  display: block;
  transition: max-width .25s ease;
}

.site-title {
  font-weight: bold;
  letter-spacing: .5px;
  margin: 0;
}

.site-title a {
  color: #fff;
  text-decoration: none;
}

/* Shrink shadow + logo on scroll (desktop JS toggles .is-stuck) */
.site-header.is-stuck {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.site-header.is-stuck .custom-logo {
  max-width: 240px;
}

/*BURGER MENU BUTTON FIX
----------------------------------------- */

/* Burger button - base (desktop + mobile) */
.nav-toggle {
  display: none;                 /* shown only in mobile @media */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: relative;
}

/* Three-line burger using box-shadow (one element, no pseudo-elements) */
.nav-toggle .nav-icon {
  display: block;
  width: 26px;
  height: 2px;
  background: #ffffff;          /* bar color */
  border-radius: 2px;
  box-shadow:
    0 -7px 0 #ffffff,           /* top bar */
    0  7px 0 #ffffff;           /* bottom bar */
}


/* Desktop primary nav layout - colors/FX come from NAVIGATION + FX blocks */
#primary-nav {
  /* JS controls display on mobile; desktop is visible by default */
}

#primary-nav .menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-nav .menu > li {
  position: relative;
}

#primary-nav .menu > li > a {
  display: block;
  padding: 4px 10px;
}

/* Desktop submenus (hover dropdown) */
#primary-nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 180px;
  background: var(--brand, #042234);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  display: none;
}

#primary-nav li:hover > .sub-menu,
#primary-nav li:focus-within > .sub-menu {
  display: block;
}

#primary-nav .sub-menu > li > a {
  display: block;
  padding: 8px 14px;
  color: #fff;
  white-space: nowrap;
}


/* ---------------------------------
   MOBILE HEADER + NAV (<=1100px)
   logo left, burger right, dropdown nav
---------------------------------- */
@media (max-width: 1100px) {

.site-header .inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;   /* 20px left + right */
  position: relative;
}


  .site-branding {
    margin-right: auto;
    justify-content: flex-start;
  }

  .custom-logo {
    max-width: 240px;
  }

  /* SHOW + POSITION burger on mobile */
  .nav-toggle {
    display: inline-flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Mobile dropdown: nav.js handles display (none/block) */
  #primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand, #042234);
  }

  #primary-nav .menu {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 12px 0 16px;
  }

  #primary-nav .menu > li > a {
    padding: 10px 0;
  }

  /* Submenus: hidden by default, shown when JS adds .submenu-open */
  #primary-nav .sub-menu {
    position: static;
    width: 100%;
    background: var(--brand, #042234);
    padding: 4px 0 8px;
    margin: 0;
    display: none;
  }

  #primary-nav li.submenu-open > .sub-menu {
    display: block;
  }

  #primary-nav .sub-menu > li > a {
    padding: 6px 0;
    font-size: 0.95em;
  }
}


/* ----------------------------------
   NAVIGATION
---------------------------------- */
.primary-nav{ margin-left:auto; } /* ensure far-right */
.primary-nav > ul,
.primary-nav > div > ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1rem; align-items:center;
}
.primary-nav li{ position:relative; }
.primary-nav > ul > li > a,
.primary-nav > div > ul > li > a{
  color:#fff; text-decoration:none; display:inline-block; padding:.6rem .4rem;
  font-family: inherit;
}
.primary-nav > ul > li > a:hover,
.primary-nav > div > ul > li > a:hover{
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
}
.primary-nav li ul,
.primary-nav li .sub-menu{
  list-style:none; display:none; position:absolute; top:100%; left:0;
  min-width:220px; background:var(--brand);
  border-radius:8px; padding:.5rem; z-index:1000;
}
.primary-nav li:hover > ul,
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > ul,
.primary-nav li:focus-within > .sub-menu{ display:block; }
.primary-nav li ul li a,
.primary-nav li .sub-menu li a{
  display:block; color:#fff; text-decoration:none; padding:.5rem .75rem; border-radius:6px;
}
.primary-nav li ul li a:hover,
.primary-nav li .sub-menu li a:hover{ background:rgba(255,255,255,.12); }

/* Nav hover behavior:
   - parent items (About Us, Resources) = no underline
   - submenu links = underline on hover
*/
.primary-nav .menu > li.menu-item-has-children > a:hover {
  text-decoration: none;
}

.primary-nav .menu .sub-menu a:hover {
  text-decoration: underline;
}

/* Submenu underline - same thickness & spacing as main menu hover */
.primary-nav .menu .sub-menu a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Visually hide screen-reader-only text (WordPress standard) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Centered pagination */
.articles-pagination {
  text-align: center;
  margin-top: 40px;
}

.articles-pagination .pagination-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

/* Style WP pagination */
.articles-pagination .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 10px;
  font-size: 15px;
  color: #042234;
  text-decoration: none;
}

.articles-pagination .page-numbers.current {
  background: #eb6900;
  color: #fff;
  border-radius: 4px;
}

.articles-pagination .page-numbers:hover {
  color: #eb6900;
}

/* ============================
   MOBILE MENU – font size only
   (top-level + submenus)
   ============================ */
@media (max-width: 768px){

  /* Top-level menu items */
  .primary-nav > ul > li > a{
    font-size: 18px;
    line-height: 1.2;
  }

  /* Submenu items */
  .primary-nav .sub-menu a{
    font-size: 18px !important;   /* slightly smaller than top-level */
    line-height: 1.2;
  }

}



/* -----------------------------
REUSABLE BUTTONS CLASS
--------------------------------- */

/* Reusable page button */
.scc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: #042234;
  border: 1px solid #ffffff;
  border-radius: 10px; /* flat look */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.scc-btn:hover,
.scc-btn:focus {
  background-color: #ffffff;
  color: #042234;
  border-color: #042234;
}

.scc-btn + .scc-btn {
  margin-left: 12px; /* adjust to taste */
}

/* =========================================================
   SCC — Animated Links System (CLEAN)
   ========================================================= */

   a.scc-linkfx,
a.scc-linkfx2,
.entry-content a:not(.no-linkfx):not(:has(img)),
.single-post .entry-cats a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
}

   
/* ---------------------------------------------------------
   1) BASE EFFECT (shared animation logic)
--------------------------------------------------------- */
a.scc-linkfx,
a.scc-linkfx2,
.entry-content a:not(.no-linkfx):not(:has(img)),
.single-post .cat-links a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
}

/* Top + bottom bars */
a.scc-linkfx::before,
a.scc-linkfx::after,
a.scc-linkfx2::before,
a.scc-linkfx2::after,
.entry-content a:not(.no-linkfx):not(:has(img))::before,
.entry-content a:not(.no-linkfx):not(:has(img))::after,
.single-post .cat-links a::before,
.single-post .cat-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6200;
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

/* Top bar */
a.scc-linkfx::before,
a.scc-linkfx2::before,
.entry-content a:not(.no-linkfx):not(:has(img))::before,
.single-post .cat-links a::before {
  top: 0;
  transform-origin: right;
}

/* Bottom bar */
a.scc-linkfx::after,
a.scc-linkfx2::after,
.entry-content a:not(.no-linkfx):not(:has(img))::after,
.single-post .cat-links a::after {
  bottom: 0;
  transform-origin: left;
}

/* Hover animation */
a.scc-linkfx:hover::before,
a.scc-linkfx:hover::after,
a.scc-linkfx2:hover::before,
a.scc-linkfx2:hover::after,
.entry-content a:not(.no-linkfx):not(:has(img)):hover::before,
.entry-content a:not(.no-linkfx):not(:has(img)):hover::after,
.single-post .cat-links a:hover::before,
.single-post .cat-links a:hover::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   2) VARIANTS
--------------------------------------------------------- */

/* Menu / uppercase version */
a.scc-linkfx {
  color: #042234;
  text-transform: uppercase;
}

/* Normal text version (what defaults use) */
a.scc-linkfx2,
.entry-content a:not(.no-linkfx):not(:has(img)),
.single-post .cat-links a {
  color: #ff6200;
  text-transform: none;
}

a.scc-linkfx:hover,
a.scc-linkfx2:hover,
.entry-content a:not(.no-linkfx):not(:has(img)):hover,
.entry-content a:not(.no-linkfx):not(:has(img)):focus-visible,
.single-post .cat-links a:hover,
.single-post .cat-links a:focus-visible {
  color: #042234;
}

/* ---------------------------------------------------------
   3) HEADER MENU (top-level only, no submenu items)
--------------------------------------------------------- */
.site-header .menu > li:not(.menu-item-has-children) > a {
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------
   4) EXCLUSIONS (buttons, nav wrappers, utilities)
--------------------------------------------------------- */
.wp-block-button__link,
.button,
.btn,
a.wp-element-button {
  position: static;
}

.wp-block-button__link::before,
.wp-block-button__link::after,
.button::before,
.button::after,
.btn::before,
.btn::after {
  content: none !important;
}

/* Utility opt-out */
a.no-linkfx::before,
a.no-linkfx::after {
  content: none !important;
}

a.scc-linkfx::before,
a.scc-linkfx::after,
a.scc-linkfx2::before,
a.scc-linkfx2::after,
.entry-content a:not(.no-linkfx):not(:has(img))::before,
.entry-content a:not(.no-linkfx):not(:has(img))::after,
.single-post .entry-cats a::before,
.single-post .entry-cats a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6200;
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

a.scc-linkfx::before,
a.scc-linkfx2::before,
.entry-content a:not(.no-linkfx):not(:has(img))::before,
.single-post .entry-cats a::before {
  top: 0;
  transform-origin: right;
}

a.scc-linkfx::after,
a.scc-linkfx2::after,
.entry-content a:not(.no-linkfx):not(:has(img))::after,
.single-post .entry-cats a::after {
  bottom: 0;
  transform-origin: left;
}
a.scc-linkfx:hover::before,
a.scc-linkfx:hover::after,
a.scc-linkfx2:hover::before,
a.scc-linkfx2:hover::after,
.entry-content a:not(.no-linkfx):not(:has(img)):hover::before,
.entry-content a:not(.no-linkfx):not(:has(img)):hover::after,
.single-post .entry-cats a:hover::before,
.single-post .entry-cats a:hover::after {
  transform: scaleX(1);
}

a.scc-linkfx2,
.entry-content a:not(.no-linkfx):not(:has(img)),
.single-post .entry-cats a {
  color: #ff6200;
  text-transform: none;
}

a.scc-linkfx:hover,
a.scc-linkfx2:hover,
.entry-content a:not(.no-linkfx):not(:has(img)):hover,
.entry-content a:not(.no-linkfx):not(:has(img)):focus-visible,
.single-post .entry-cats a:hover,
.single-post .entry-cats a:focus-visible {
  color: #042234;
}


/* ----------------------------------**********************************-----------------------------------------
END CONTENT LINKS FX
---------------------------------------*********************************----------------------------------------*/



/*------ABOUT US MENU --------*/
.about-inline-menu {
  display: flex;
  justify-content: center;   /* center horizontally */
  gap: 1.2rem;               /* space between buttons */
  flex-wrap: wrap;           /* wraps on mobile */
  margin: 1.2rem 0 2rem;
}

.about-inline-menu a {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 2px;          /* helps the linkfx lines sit nicely */
  color: #042234;            /* match your brand navy */
}

/* ----------------
MAIN MENU FX
------------------- */
/* Remove leftover underline/borders from old menu hover */
.site-header .menu a:hover {
  text-decoration: none !important;
  border: none !important;
}



/* ------------------------------------------
   TOP-LEVEL ITEMS WITH SUBMENUS
   NO animation, NO bars, NO underline
------------------------------------------ */
.site-header .menu > li.menu-item-has-children > a {
  position: relative;
  padding: 4px 0;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none !important;
  text-transform: normal;
  letter-spacing: 0.5px;
}

.site-header .menu > li.menu-item-has-children > a::before,
.site-header .menu > li.menu-item-has-children > a::after {
  content: none !important;  /* no bars */
}


/* ------------------------------------------
   SUBMENU ITEMS (inside dropdowns)
   ? YES animation
------------------------------------------ */
.site-header .menu .sub-menu > li > a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: #ffffff;   /* adjust if submenu background is white */
  font-weight: 500;
  text-decoration: none;
  text-transform: normal;
  letter-spacing: 0.5px;
}

/* Bars */
.site-header .menu .sub-menu > li > a::before,
.site-header .menu .sub-menu > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6200;
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

/* TOP - right-left */
.site-header .menu .sub-menu > li > a::before {
  top: 0;
  transform-origin: right;
}

/* BOTTOM left-right */
.site-header .menu .sub-menu > li > a::after {
  bottom: 0;
  transform-origin: left;
}

/* Hover */
.site-header .menu .sub-menu > li > a:hover::before,
.site-header .menu .sub-menu > li > a:hover::after {
  transform: scaleX(1);
}

/* ------------------------------------------
   TOP-LEVEL ITEMS (NO submenus)
   YES animation (same as submenu)
------------------------------------------ */
.site-header .menu > li:not(.menu-item-has-children) > a{
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  text-transform: normal;
  letter-spacing: 0.5px;
}

/* Bars */
.site-header .menu > li:not(.menu-item-has-children) > a::before,
.site-header .menu > li:not(.menu-item-has-children) > a::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6200;
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

/* TOP - right-left */
.site-header .menu > li:not(.menu-item-has-children) > a::before{
  top: 0;
  transform-origin: right;
}

/* BOTTOM left-right */
.site-header .menu > li:not(.menu-item-has-children) > a::after{
  bottom: 0;
  transform-origin: left;
}

/* Hover */
.site-header .menu > li:not(.menu-item-has-children) > a:hover::before,
.site-header .menu > li:not(.menu-item-has-children) > a:hover::after{
  transform: scaleX(1);
}



/* ----------------------------------
   SECTIONS & HERO
---------------------------------- */
.section{padding:64px 0}
.section.thin{padding:5px 0}

.hero {
  background: transparent;
  color: #fff;
  position: relative;
  margin-top: 0 !important;
  padding: 6px 0 6px;  /* tightened top + bottom spacing */
  border-top: 0 !important;
  border-bottom: 0;
}

/* Hero with image - show whole photo, no cropping */
.hero.has-image {
 background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), var(--hero-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 900px) {
  .hero.has-image {
    overflow: hidden;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  min-height: var(--hero-h);   /* RESTORED */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-title{
display: none;font-family: inherit;font-weight:800;color:#fff;margin:0 0 .35rem 0;font-size:clamp(28px,4.2vw,56px)}
.hero-subtitle{
display: none; font-family: inherit;font-weight:400;color:#fff;margin:0;font-size:clamp(16px,2vw,22px)}

/* Restore hero-title inside homepage cards */
.home-card-body .hero-title {
  display: block !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-weight: 500;
  color: #042234 !important;
  font-size: 22px;      /* h3-ish */
  line-height: 1.3;
  margin: 0 0 10px 0;
}

/* Homepage card titles use Georgia */
.post-card.home-intro h1,
.post-card.home-intro h2,
.post-card.home-intro h3,
.post-card.home-intro h4,
.post-card.home-intro h5,
.post-card.home-intro h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.articles-archive .entry-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
}

/* Extra spacing between homepage card rows */
.home .section {
  margin-bottom: 15px;    /* adjust to taste */
}

/* =======================================
   HOMEPAGE - HERO IMAGE width
======================================= */

.home .hero {
  width: 100%;
  max-width: 1432px;
  margin: 0 auto;
  position: relative;      /* MUST STAY */
  overflow: visible !important;
  background-color: #dddddd; /* hero band matches page grey */
box-shadow: 0px 0px 5px 4px rgba(2, 17, 39, 0.18);
}

/* DEBUG: remove any pseudo-element content on hero */
.hero::before,
.hero::after,
.hero-inner::before,
.hero-inner::after {
  content: none !important;
}

/* ----------------------------------
   PAGE SECTION MENU (inline anchors)
   Flat blue buttons
---------------------------------- */
.page-section-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 24px;
  padding: 0;
  font-family: inherit;
  background: transparent; /* no peach band */
}

.page-section-menu a {
  display: inline-block;
  padding: 8px 18px;
  background: #042234;       /* brand blue */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid #042234; /* flat, no radius */
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Hover / focus / "current" state (reverse colors) */
.page-section-menu a:hover,
.page-section-menu a:focus,
.page-section-menu a.is-current {
  background: #ffffff;
  color: #042234;
  border-color: #042234;
}

/* mobile: stack vertical, full-width buttons */
@media (max-width: 768px) {
  .page-section-menu {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .page-section-menu a {
    text-align: center;
    width: 100%;
  }
}


/* Create top padding */
html {
  scroll-padding-top: 120px; /* adjust if needed */
}


/* ----------------------------------
   CARDS & GRIDS
---------------------------------- */
.home-grid.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:900px){.home-grid.two-col{grid-template-columns:1fr}}

/* Global card style - radius = 6px */
.post-card{
  background:#fff;color:#000;border:1px solid #e6e8eb;
  border-radius:6px;
  padding:1rem 1.25rem;
/*  box-shadow:0 1px 2px rgba(0,0,0,.04);*/
box-shadow: 0px 2px 10px -1px rgba(17, 19, 90, 0.4);
}

/* Home intro cards: unify edges + manage title bar + body */
.post-card.home-intro{
  overflow:hidden;     /* ensures images/title respect radius */
  padding:0;           /* title bar touches edges */
}

.post-card.home-intro .home-card-title{
  background: none !important;
  padding: 0;                 /* ? removed !important */
  color: #777777 !important;
  font-family: "Montserrat";
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  text-align: center;
  padding-top: 20px;           /* now works */
  margin-bottom: 8px;
}


.post-card.home-intro .home-card-body{
  padding:1rem 1.25rem;
}

/* Images inside cards */
.post-card img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:4px;
 margin-top: 0px !important;
}


/* NEW - Honor WP Classic Editor alignment classes inside home card body */
.home-card-body::after{
  content:"";
  display:block;
  clear:both; /* clearfix */
}

/* float right */
.home-card-body img.alignright,
.home-card-body .alignright{
  float:right;
  margin:0 0 .75rem .9rem;
}

/* float left */
.home-card-body img.alignleft,
.home-card-body .alignleft{
  float:left;
  margin:0 .9rem .75rem 0;
}

/* centered */
.home-card-body img.aligncenter,
.home-card-body .aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* figure captions */
.home-card-body figure.alignright{
  float:right;
  margin:0 0 .75rem .9rem;
  overflow:hidden;
  border-radius:4px;
}
.home-card-body figure.alignleft{
  float:left;
  margin:0 .9rem .75rem 0;
  overflow:hidden;
  border-radius:4px;
}
.home-card-body figure.aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  border-radius:4px;
}
.home-card-body figure img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:0; /* figure already rounded */
}

/* Mobile: drop floats to full width */
@media (max-width:600px){
  .home-card-body .alignright,
  .home-card-body .alignleft,
  .home-card-body figure.alignright,
  .home-card-body figure.alignleft{
    float:none;
    margin:.25rem 0 .75rem 0;
  }
}

/* Subtle lift */
.post-card{transition:box-shadow .2s ease, transform .2s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* ----------------------------------
 DOWNLOAD BUTTONS
---------------------------------- */

.download-bg-button {
  display:inline-block;
  background:#e06c10;
  color:#ffffff !important;
  padding:4px 8px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size: 0.9rem;
  margin-left: 5px;
}

.download-bg-button:hover {
  background:#000000;
  color:#ffffff !important;
}


/* ----------------------------------
   TALKS (cards used on homepage slider)
---------------------------------- */
.talks-card{
  border:1px solid #e6e8eb;border-radius:4px;background:#fff;color:#000;
  overflow:hidden;width:100%
}
.talks-thumb{
  display:block;width:100%;height:245px;background:#ddd center/cover no-repeat;
  border-radius:4px 4px 0 0;
}
.talks-meta{padding:.9rem}
.talks-title{margin:.1rem 0 .25rem 0;font-family: inherit;font-size:1.05rem;line-height:1.3}
.talks-title a{text-decoration:none;color:inherit}
.talks-date{font-size:.9rem;opacity:.7}

/* Talks hover */
.section.talks-section .talks-card {
  transition: box-shadow .2s ease, transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  will-change: transform, box-shadow;
}
.section.talks-section .talks-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}

/* ============================
   HOME - SUNDAY TALKS STRIP (ghost title)
   ============================ */

.section.talks-section {
  position: relative;
  padding-top: 56px;     /* room for the big ghost title */
  padding-bottom: 4px;
  overflow: hidden;      /* hide any overflow from huge text */
}

/* Hide visible h2; use ghost heading instead */
.section.talks-section .home-section-title {
  display: none;
}

/* Big faded -SUNDAY TALKS- behind the slider (HOME only) */
.home .talks-section::before {
  content: "LATEST MESSAGES";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -24px;                       /* a bit lower = sits nicer */

  font-family: "Inter", sans-serif;
  font-weight: 800;                 /* bold */
  font-size: clamp(40px, 9vw, 130px);
  letter-spacing: 0.05em;           /* less stretched */

  color: rgba(4, 34, 52, 0.10);     /* lighter ghost */
  opacity: 2;

  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  max-width: 90vw;
  overflow: hidden;
}

/* ============================================
   SUNDAY TALKS SLIDER - CUSTOM SCROLLBAR
   (cleaned, single source of truth)
============================================ */

/* Make space for thicker scrollbar + white dot */
.talks-section .talks-slider {
    padding-bottom: 12px;
    position: relative; /* needed for the white dot */
}

/* Scrollbar height */
.talks-section .talks-slider::-webkit-scrollbar {
    height: 18px; /* thickness */
}

/* Track */
.talks-section .talks-slider::-webkit-scrollbar-track {
    background: #bdbdbd;   /* mid grey */
    border-radius: 10px;
}

/* Thumb: pill with white center */
.talks-section .talks-slider::-webkit-scrollbar-thumb {
    background: #777;               /* darker surround */
    border-radius: 5px;
    border: 6px solid #fff;         /* white center look */
    box-shadow: 0 0 6px rgba(0,0,0,0.2); /* soft shadow */
}

.talks-section .talks-slider::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Remove the white guide dot */
.talks-section .talks-slider::after{
  display: none !important;
}


/* White -guide- dot sitting on the scrollbar 
.talks-section .talks-slider::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
    z-index: 100;
}*/


/* Make the real content sit above the ghost text */
.section.talks-section .wrapper {
  position: relative;
  z-index: 1;
}

/* Center the -Browse All Sunday Talks- button */
.section.talks-section .talks-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Optional: button feel */
.section.talks-section .talks-viewall {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* Sunday Talks - button + slider hover colours */
.section.talks-section .talks-viewall {
  background-color: #042234;  /* dark blue default */
  color: #ffffff;
  border: 1px solid #ffffff;  /* white border */
}

.section.talks-section .talks-viewall:hover,
.section.talks-section .talks-viewall:focus {
  background-color: #eb6900 !important;  /* orange background */
  color: #ffffff;             /* text stays white */
  border-color: #ffffff;      /* border stays white */
}

/* Mobile adjustments - smaller ghost text */
@media (max-width: 768px) {
  .section.talks-section {
    padding-top: 40px;
  }

  .home .talks-section::before {
    font-size: 56px;
    letter-spacing: 0.12em;
    top: 6px;
  }
}

/* TALKS: hide any talks-bar link that is NOT the real Sunday Talks URL */
.home .talks-section .talks-bar a:not([href*="sunday-talks"]) {
  display: none !important;
}

/* ===========================
REMOVE DUPLICATE BUTTON 
=============================*/
.section.talks-section .talks-viewall {
    background-color: #042234;
    color: #ffffff;
    border: 1px solid #ffffff;
	display: none;
}
.section.talks-section .talks-viewall {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
	display: none;
}

/* TALKS: remove legacy arrow links */

talks-btn talks-btn-icon topbar-left js-prev,
talks-btn talks-btn-icon topbar-right js-next {
  display: none !important;
}


/* TALKS: hide injected prev/next arrow buttons */
.talks-topbar .js-prev,
.talks-topbar .js-next {
  display: none !important;
}


/* ----------------------------------
   TALKS - top controls (from 1.8.7) - UPDATED COLOURS
---------------------------------- */
.talks-section {
  position: relative;
}

.talks-section .talks-slider {
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  padding-top: calc(var(--talks-topbar-h) + 6px);
  touch-action: ;
}

.talks-section .wrapper {
  position: relative;
}

/* Center bar with -Browse All Sunday Talks- */
.talks-section .talks-bar {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: var(--talks-topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

/* MAIN BUTTON - REST STATE */
.talks-section .talks-bar .talks-viewall {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--talks-btn-h);
  min-width: var(--talks-btn-h);
  padding: 0 12px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff !important;        /* white font */
  background-color: #042234;        /* dark blue */
  border: 1px solid #ffffff;        /* white border */
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    opacity .12s ease,
    border-color .12s ease,
    color .12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* MAIN BUTTON - HOVER STATE */
.talks-section .talks-bar .talks-viewall:hover,
.talks-section .talks-bar .talks-viewall:focus {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  background-color: #ffffff !important; /* white background on hover */
  border-color: #042234 !important;     /* blue border */
  color: #042234 !important;            /* blue text */
}

/* ARROW BUTTONS - REST STATE */
.talks-section .talks-arrow {
  position: absolute;
  top: 4px;
  z-index: 11;
  height: var(--talks-btn-h);
  min-width: var(--talks-btn-h);
  width: var(--talks-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #042234;          /* dark blue */
  border: 1px solid #ffffff;          /* white border */
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease;
}

/* ARROW ICON - REST = WHITE */
.talks-section .talks-arrow svg {
  stroke: #ffffff !important;
}

/* ARROW HOVER */
.talks-section .talks-arrow:hover,
.talks-section .talks-arrow:focus {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  background-color: #ffffff !important; /* white background */
  border-color: #042234 !important;     /* blue border */
  color: #042234 !important;            /* blue text (if any) */
}

/* ARROW ICON - HOVER = BLUE */
.talks-section .talks-arrow:hover svg,
.talks-section .talks-arrow:focus svg {
  stroke: #042234 !important;
}


.talks-section .talks-arrow[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.talks-section .talks-prev {
  left: var(--pad);
}

.talks-section .talks-next {
  right: var(--pad);
}

/* 3 / 2 / 1 layout for cards */
.talks-slider > * {
  flex: 0 0 calc((100% - 8px) / 3);
  scroll-snap-align: start;
}


/* Background for Resources single posts */
body.resources-single .resources-single-wrap {
  background-image: url('/wp-content/themes/scc-newtheme/assets/img/music-bg.jpg');
}

@media (max-width: 1100px) {
  .talks-slider > * {
    flex: 0 0 calc((100% - 4px) / 2);
  }
}

@media (max-width: 700px) {
  .talks-slider > * {
    flex: 0 0 100%;
  }
}


/* Back to Top - global button */
.back-to-top-global {
  text-align: center;
  margin: 0 0 14px 0; /* inside footer; 20px comes from footer padding-top */
}

.back-to-top-btn{
  display:inline-block;
  padding:10px 24px;
  background-color:#042234;
  color:#ffffff;
  border-radius:6px;
  border:1px solid #ffffff;
  text-decoration:none;
  font-family:"Inter","Work Sans",system-ui,-apple-system,BlinkMacSystemFont,
              "Segoe UI",sans-serif;
  text-align:center;
}
.back-to-top-btn .back-to-top-icon{
  display:block;
  font-size:18px;
  line-height:1;
  margin-bottom:2px;
}
.back-to-top-btn .back-to-top-label{
  display:block;
  font-size:14px;
  line-height:1.2;
}
.back-to-top-btn:hover,
.back-to-top-btn:focus{
  background-color:#ffffff;
  color:#042234;
  border-color:#042234;
  text-decoration:none;
}
/* Hide Back to Top on mobile */
@media (max-width:768px){
  .back-to-top-global{ display:none; }
}

/* Talks buttons keep previous radius (3px) */
.talks-section a.button,
.talks-section .button{
  border-radius:3px !important;
}

/* =========================================
   Offset content under fixed header
   (single system, responsive)
========================================= */

/* Desktop / default */
.site-content{
  margin-top: var(--header-h);
}

/* Mobile */
@media (max-width: 768px){
  .site-content{
    margin-top: 55px; /* tune if needed */
  }
}


/* ----------------------------------------
   SUNDAY TALKS - Archive (preserved)
---------------------------------------- */
:root{
  --talks-badge-w:84px;
  --talks-gap:18px;
  --talks-pad:24px;
  --talks-card-radius:8px;
  --talks-card-shadow:0 1px 2px rgba(0,0,0,.05);
  --talks-title:#E86800;
  --talks-title-hover:#042234;
}
#talks-archive .talks-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1fr 1fr;
}
@media (max-width:768px){
  #talks-archive .talks-grid{ grid-template-columns:1fr; }
}

#talks-archive .talks-card{
  display:grid;
  grid-template-columns:var(--talks-badge-w) 1fr;
  gap:var(--talks-gap);
  padding:var(--talks-pad);
  background:#fff;
  border:1px solid #e6e8eb;
  border-radius:8px;
  box-shadow:var(--talks-card-shadow);
}
#talks-archive .talks-date-badge{
  grid-column:1;
  align-self:start;
  width:var(--talks-badge-w);
  min-width:var(--talks-badge-w);
  background:#f7f7f7;
  border:1px solid #e6e8eb;
  border-radius:4px;
  text-align:center;
  padding:10px 0 8px;
  line-height:1;
  color:#606060;
  font-feature-settings:"tnum" 1,"lnum" 1;
  -webkit-font-feature-settings:"tnum" 1,"lnum" 1;
}
#talks-archive .talks-date-badge .m{
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:.4px;
}
#talks-archive .talks-date-badge .d{
  font-size:30px;
  font-weight:700;
  margin-bottom:6px;
}
#talks-archive .talks-date-badge .y{
  font-size:16px;
  font-weight:600;
}

#talks-archive .talks-card-content{
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}
#talks-archive .talks-title{
  color:var(--talks-title);
  text-decoration:none;
  font-weight:600;
  font-size:32px;
  line-height:1.2;
  margin-bottom:0 !important;
}
/* NEW: avoid overflow on long/unstyled titles */
#talks-archive .talks-title,
#talks-archive .talks-title a{
  overflow-wrap:anywhere;
  word-wrap:break-word;
}

#talks-archive .talks-title:hover{
  color:var(--talks-title-hover);
}
#talks-archive .talks-excerpt{
  color:#2b2b2b;
  font-weight:400;
  line-height:1.4;
}

/* Listen button */
#talks-archive .talks-card,
.talks-archive-page .talks-card{
  position: relative;
}

#talks-archive a.talks-read,
.talks-archive-page a.talks-read{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .35rem 1.1rem;
  margin-top: auto;
  align-self: flex-end;
  justify-self: end;
  border-radius: 4px;
  background: #000;
  border: 1px solid #000;
  text-decoration: none;
}

/* Label = white */
#talks-archive .talks-read-label,
.talks-archive-page .talks-read-label{
  color: #fff;
  font-weight: 600;
}

/* Icon = orange */
#talks-archive .talks-read-icon,
.talks-archive-page .talks-read-icon{
  color: #ff6600;
  font-size: 1.1em;
}

/* Hover swap */
#talks-archive a.talks-read:hover .talks-read-label,
.talks-archive-page a.talks-read:hover .talks-read-label{
  color: #ff6600;
}

#talks-archive a.talks-read:hover .talks-read-icon,
.talks-archive-page a.talks-read:hover .talks-read-icon{
  color: #fff;
}


/* Optional: add the ?? icon via CSS (only if you want it even when Font Awesome fails) */
#talks-archive a.talks-read::after,
.talks-archive-page a.talks-read::after{
  content: "\1F3A7\FE0E";
  display: inline-block;
  margin-left: 10px;
  font-size: 1.2em;
  line-height: 1;
  color: #E86800;
  font-weight: 600;
}

#talks-archive a.talks-read:hover::after,
.talks-archive-page a.talks-read:hover::after{
  color: #fff;
  font-weight: 800;
}

/* Stop any old CSS-injected icon on the Listen button */
.talks-archive-page .talks-read::before,
.talks-archive-page .talks-read::after{
  content: none !important;
}


/* Pagination on Talks */
nav.pagination{
  float:right;
  font-size:20px !important;
}
nav.pagination li a,
nav.pagination li span{
  font-weight:800;
}
nav.pagination li{
  margin-left:10px;
}

/* Make top & bottom pagination span all grid columns on the talks grid */
.talks-grid nav.pagination-top,
.talks-grid nav.pagination-bottom{
  grid-column:1 / -1;   /* full width of the 3-column grid */
}

/* Optional: tweak spacing for bottom pagination */
.talks-grid nav.pagination-bottom{
  margin-top:24px;
}

/* Add padding between the right of pagination arrow and sidebar */
.talks-grid nav.pagination-top{
  padding-right:25px;
  font-weight:800;
}
.talks-grid nav.pagination-bottom{
  padding-right:25px;
  font-weight:800;
}

/* Wider wrapper + sidebar options on the template */
#talks-archive .wrapper{ max-width:1320px; }
#talks-archive .wrapper.has-sidebar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:24px;
  align-items:start;
}
#talks-archive .content-area{ min-width:0; }
#talks-archive .site-sidebar{
  align-self:start;
  margin-top:0;
}

/* Hybrid neutralization for legacy badge layout on the dedicated page */
.talks-archive-page #talks-archive .talks-card{
  display:block;
  grid-template-columns:none;
  gap:0;
  padding:0;
  /* NEW: keep children contained on mobile/any */
  overflow:hidden;
}
.talks-archive-page #talks-archive .talks-date-badge{ display:none !important; }
.talks-archive-page .talks-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.talks-archive-page .talks-meta{
  flex:1 1 auto;
  padding:20px 24px 24px;
  display:flex;
  flex-direction:column;
}
.talks-archive-page .talks-excerpt{
  margin:0 0 1.5rem;
  padding:0 8px;
  flex-grow:1;
}
.talks-archive-page .talks-read{
  align-self:flex-end;
  margin-top:auto;
}

/* Intro wrapper: match content + sidebar grid so title centers to content */
.talks-archive-page .talks-intro-wrapper.has-sidebar{
  display: grid;
  grid-template-columns: minmax(0,1fr) 240px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px){
  .talks-archive-page .talks-intro-wrapper.has-sidebar{
    grid-template-columns: 1fr;
  }
}

.talks-archive-page .talks-intro-wrapper .page-title{
  text-align: center;
}


/* --- SUNDAY TALKS: mobile-only padding/overflow fixes --- */
@media (max-width:768px){
  /* So the template doesn-t look shoved right by the global wrapper padding */
  #talks-archive .wrapper{
    padding-left:16px;
    padding-right:16px;
  }
  /* Card inner padding slightly tighter on small screens to avoid horizontal nudge */
  #talks-archive .talks-card{
    padding:16px;
  }
  /* If pagination causes a tiny overflow, contain it */
  #talks-archive nav.pagination{
    float:right !important;
    text-align:center;
    overflow:hidden;
  }
}

/*
Version: 2.0.3 - Alignment sanity reset for Classic Editor images/captions
*/
.entry-content img,
.home-grid .home-card-body img,
.talks-archive-page .entry-content img{
  max-width:100%;
  height:auto;
}

/* Classic Editor alignment classes */
.alignleft  { float:left;  margin:0 1rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1rem; }
.aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
  float:none;
}

/* Captions / figures */
figure.alignleft,
.wp-caption.alignleft{
  float:left;
  margin:0 1rem 1rem 0;
}
figure.alignright,
.wp-caption.alignright{
  float:right;
  margin:0 0 1rem 1rem;
}
figure.aligncenter,
.wp-caption.aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
  float:none;
  text-align:center;
}
.wp-caption{ max-width:100%; }
.wp-caption img{
  display:block;
  margin:0 auto;
}
.wp-caption .wp-caption-text{
  font-size:.9rem;
  color:#555;
  margin-top:.25rem;
}

/* Home cards sometimes force centered text-respect image floats inside them */
.home-grid .home-card-body .alignleft  { float:left; }
.home-grid .home-card-body .alignright { float:right; }

/* Mobile: drop floats so images don-t hang off the edges */
@media (max-width:700px){
  .alignleft,
  .alignright,
  figure.alignleft,
  figure.alignright,
  .wp-caption.alignleft,
  .wp-caption.alignright{
    float:none;
    display:block;
    margin:0 auto 1rem;
  }
}

/* Sunday Talks - mobile image crop */
@media (max-width:768px){
  .talks-archive-page .talks-thumb{
    aspect-ratio:16 / 9;   /* pick your ratio: 16/9, 4/3, etc. */
    overflow:hidden;
    display:block;
  }
  .talks-archive-page .talks-thumb .talks-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
}

/* Our Values page - background image behind the white card */
body.page-id-8578{
  background-color:#042235; /* fallback */
  background-image:url("https://letmedev.art/wp-content/uploads/2025/11/assissi2.jpg") !important;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}


/* ============================================
   PAGE CARD LAYOUT - BACKGROUND IMAGE SYSTEM
   ============================================ */

/* When no background image is set:
   solid brand color fallback already defined earlier. */

/* When a background is set via meta:
   <main class="page-card-layout has-pcl-bg" - style="--vars:-"> */
.page-card-layout.has-pcl-bg{
  position:relative;
  background:var(--brand,#042234); /* fallback under overlay */
  z-index:0;
}

/* ****************************************************************/
/* The actual background image layer */
.page-card-layout.has-pcl-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--pcl-bg-image);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--pcl-bg-position,center center);
  opacity:1;
  border-top: 40px solid #960000;
}

/* Dark overlay using brand color + adjustable intensity */
.page-card-layout.has-pcl-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--brand,#042234);
  opacity:var(--pcl-bg-overlay,0.5);
}

/* Make sure the white card stays above everything */
.page-card-layout .card-wrap{
  position:relative;
  z-index:1;
}

/* Make each Resources card a vertical flex box */
.folio-archive-page article.folio-card {
  display: flex;
  flex-direction: column;
}

/* Push the Read More button to the bottom of the card */
.folio-archive-page article.folio-card .folio-read {
  margin-top: auto;
}

/* Resources sidebar */
.resources-sidebar {
  background: #fff;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.resources-sidebar .sidebar-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--brand, #042234);
}

.resources-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resources-tag-cloud .tag-item {
  display: inline-block;
  background: #f2f2f2;
  padding: 6px 10px;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}

.resources-tag-cloud .tag-item:hover {
  background: #e86800;
  color: #fff;
}
/* Sidebar as a white card */
.folio-archive-page .site-sidebar .widget {
  background: #ffffff;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Title inside sidebar */
.folio-archive-page .site-sidebar .widget-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand, #042234);
}

/* Tag cloud links */
.folio-archive-page .site-sidebar .tag-cloud a {
  display: inline-block;
  padding: 6px 10px;
  background: #f2f2f2;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  margin: 4px;
}

.folio-archive-page .site-sidebar .tag-cloud a:hover {
  background: #e86800;
  color: #ffffff;
}
/* ===========================================
   GLOBAL SIDEBAR CARD STYLE (Talks + Resources)
   =========================================== */

.site-sidebar .widget {
  background: #ffffff;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  margin-bottom: 32px;
}

.site-sidebar .widget-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand, #042234);
}

/* Tag clouds (Talks + Resources) */
.site-sidebar .tag-cloud a {
  display: inline-block;
  padding: 6px 10px;
  background: #f2f2f2;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  margin: 4px;
}

.site-sidebar .tag-cloud a:hover {
  background: #e86800;
  color: #ffffff;
}

/* Contact page column widths - keep both sides equal */
.contact-page .contact-main,
.contact-page .contact-right {
  flex: 0 0 50%;
  max-width: 50%;
}

/* ===========================
   CONTACT PAGE - BACKGROUND
   =========================== */

.contact-page {
  position: relative;
  overflow: hidden;
}

.contact-page .contact-bg {
  background-image: url('/wp-content/uploads/2025/11/lighthouse-vista.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  position: absolute;
  inset: 0;
  z-index: 0;
}


/* ===========================
   CONTACT PAGE - LAYOUT
   =========================== */

.contact-page .contact-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.contact-main,
.contact-right {
  flex: 1 1 0%;
}


/* ===========================
   CONTACT FORM AREA
   =========================== */

.contact-main {
  background: rgba(255,255,255,0.55);
  padding: 32px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.contact-header h1 {
  margin: 0 0 12px;
}

.contact-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.contact-toggle-option {
  background: #f2f2f2;
  padding: 6px 12px;
  border-radius:6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-form { display: none; }
.contact-form.is-active { display: block; }


/* ===========================
   RIGHT COLUMN - TINT BOX
   =========================== */

.contact-right-box {
  background: rgba(255,255,255,0.88);
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.20);
  backdrop-filter: blur(4px);
}

.contact-right-box h2 {
  margin-top: 0;
  color: #042234;
}

.contact-right-box a {
  color: #e86800;
}


/* ===========================
   MAP
   =========================== */

   /* Contact page - Directions heading above map */
.contact-directions-heading {
  text-align: center;
  font-weight: 700;
  margin: 28px 0 10px;
  color: #fff;
}

.contact-map-embed {
  width: 100%;
  height: 360px;
  margin-top: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.contact-map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------------------------
MAP IN HOMEPAGE CARD
------------------------------ */
.post-card.home-intro .contact-hub-map-wrap {
  margin-top: 12px;
}

.post-card.home-intro .contact-hub-map-inner {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 6px;
}

.post-card.home-intro .contact-hub-map-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Map inside Homepage intro cards */
.post-card.home-intro .home-map-heading {
  margin: 8px 0 6px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #042234;
  text-align: center;
}

.post-card.home-intro .home-card-map {
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
}

.post-card.home-intro .home-card-map iframe {
  display: block;
  width: 100%;
  height: 260px; /* matches the HTML height, but CSS will rule */
  border: 0;
}


/* ===========================
   MOBILE
   =========================== */

@media (max-width: 768px) {
  .contact-page .contact-wrapper {
    flex-direction: column;
  }
}

/* ===========================
   CONTACT HUB PAGE EDITED
   =========================== */

.contact-hub {
  position: relative;
  padding: 28px 0 28px;
  color: #111;
}

.contact-hub-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://letmedev.art/wp-content/uploads/2025/11/lighthouse-vista.jpg');
  background-size: cover;
  background-position: center center;
  opacity: 0.45;
  z-index: 0;
}

.contact-hub-inner {
  position: relative;
  z-index: 2;
}

/* Header */

.contact-hub-header {
  text-align: center;
  margin-bottom: 20px;
}

.contact-hub-title {
  margin: 0 0 8px;
  font-size: 32px;
  color: #042234; /* brand blue */
}

.contact-hub-subtitle {
  margin: 0;
  color: #042234;
}

/* Tabs */

.contact-hub-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* Normal (inactive) tab */
.contact-hub-tab {
  border: 1px solid #042234;        /* blue outline */
  background: #ffffff;              /* white background */
  color: #042234;                   /* blue text */
  padding: 8px 18px;
  border-radius: 6px;               /* squared pill */
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.contact-hub-tab:hover {
  background: #042234;
  color: #ffffff;
}

/* Active (selected) tab */
.contact-hub-tab.is-active {
  background: #042234;
  color: #ffffff;
  border-color: #042234;
}

/* Panels */

.contact-hub-panels {
  max-width: 1100px;
  margin: 0 auto;
}

.contact-hub-panel {
  display: none;
}

.contact-hub-panel.is-active {
  display: block;
}

/* Main card */

/* Make the right column wider */
.contact-hub-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  background: rgba(255,255,255,0.94);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
  padding: 24px 24px 28px;
}


.contact-hub-card.single-column {
  grid-template-columns: minmax(0, 1fr);
}

.contact-hub-card-main h2 {
  margin-top: 0;
  font-size: 22px;
  color: #042234;
}

.contact-hub-lead {
  margin-top: 4px;
  margin-bottom: 16px;
}

/* Two-column info inside card */

.contact-hub-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Shared section headings inside card */
.contact-hub-col h3,
.contact-hub-extra h3 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}

.contact-hub-extra {
  margin-top: 16px;
  text-align: center;
}

.contact-hub-link {
  color: #e86800;
  text-decoration: none;
}

.contact-hub-link:hover {
  text-decoration: underline;
}

/* Right side (form area) */

.contact-hub-card-side {
  background: rgba(248,227,208,0.96);
  border-radius: 6px;
  padding: 16px 18px 18px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.20);
}

.contact-hub-card-side h3 {
  margin-top: 0;
  font-size: 18px;
  color: #042234;
}

.contact-hub-note {
  font-size: 14px;
  margin-bottom: 10px;
}

/* ======================================
MAKE IMAGES RESPONSIVE ON MOBILE
=========================================*/

/* Contact page: make building/feed images responsive */
.contact-hub img,
.contact-hub-card img,
.contact-hub-card-main img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* If it-s still visually spilling past rounded corners */
.contact-hub-card{
  overflow: hidden;
}


/* ===========================
   CONTACT HUB - FORM FIXES
   (applies to BOTH panels)
   =========================== */

.contact-hub .wpcf7-form input[type="text"],
.contact-hub .wpcf7-form input[type="email"],
.contact-hub .wpcf7-form input[type="tel"],
.contact-hub .wpcf7-form input[type="url"],
.contact-hub .wpcf7-form input[type="number"],
.contact-hub .wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Taller inputs */
.contact-hub .wpcf7-form input[type="text"],
.contact-hub .wpcf7-form input[type="email"],
.contact-hub .wpcf7-form input[type="tel"],
.contact-hub .wpcf7-form input[type="url"],
.contact-hub .wpcf7-form input[type="number"] {
  padding: 10px 12px;
  height: 46px;
  font-size: 15px;
  border-radius: 4px;
}

/* Taller message box */
.contact-hub .wpcf7-form textarea {
  padding: 10px 12px;
  min-height: 220px;  /* tweak this if you want even taller */
  font-size: 15px;
  border-radius: 4px;
}

/* Map */

.contact-hub-map-wrap {
  margin-top: 18px;
}

.contact-hub-map-inner {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  background: #ccc;
  height: 360px;
}

.contact-hub-map-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Social buttons spacing */

.contact-hub-extra .scc-social-links {
  margin-top: 8px;
}

/* Icon image inside SCC social buttons */
.scc-social-links .scc-social-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.scc-social-links .scc-social-btn-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

/* If you ever use layout="icons" (no label) */
.scc-social-links.layout-icons .scc-social-btn {
  padding: 6px;
}

.scc-social-links.layout-icons .scc-social-btn-icon {
  margin-right: 0;
}

/* ===============================
   SCC Social Links - Base
   =============================== */

.scc-social-links {
  padding-top: 8px; /* no flex/stacking here anymore */
}

/* =========================================
   Layout: BUTTONS (Contact page, stacked)
   ========================================= */

.scc-social-links.layout-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scc-social-links.layout-buttons .scc-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #042234; /* brand blue */
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  width: fit-content;
}

.scc-social-links.layout-buttons .scc-social-btn:hover {
  background: #063556;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.scc-social-links .scc-social-btn-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* =========================================
   GLOBAL SCC SOCIAL LINKS - ICON LAYOUT
   (used in footer + header)
   ========================================= */

.scc-social-links.layout-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  align-items: center;
}

/* Base icon button style (footer-sized) */
.scc-social-links.layout-icons .scc-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: transform 0.23s ease;
}

/* Stronger lift, no glow */
.scc-social-links.layout-icons .scc-social-btn:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

.scc-social-links.layout-icons .scc-social-btn-icon img {
  width: 32px;
  height: 32px;
}



/* =========================================
   HEADER SOCIAL ICONS - subtle lift + tighter spacing
   Wrapper: .menu-social-icons around the shortcode
   ========================================= */

.menu-social-icons {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Use same layout, but tighter spacing + smaller icons */
.menu-social-icons .scc-social-links.layout-icons {
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Header buttons: slightly smaller, tighter */
.menu-social-icons .scc-social-links.layout-icons .scc-social-btn {
  width: 32px;
  height: 32px;
  margin-left: 2px;           /* was 12px */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Hover lift in header */
.menu-social-icons .scc-social-links.layout-icons .scc-social-btn:hover {
  transform: translateY(-3px);
}

/* Header icon image size */
.menu-social-icons .scc-social-links.layout-icons .scc-social-btn-icon img {
  width: 28px;
  height: 28px;
  display: block;
}

/* =========================================
   MOBILE MENU - center header icons
   ========================================= */

@media (max-width: 768px) {
  .menu-social-icons {
    order: 999;
    margin-top: 24px;
    justify-content: center;
  }

  .menu-social-icons .scc-social-links.layout-icons .scc-social-btn {
    margin: 0 5px;
  }
}


/* ---------------------------------------
   MOBILE MENU - position icons at bottom
   --------------------------------------- */
@media (max-width: 768px) {
  .menu-social-icons {
    order: 999;
    margin-top: 24px;
    justify-content: center;
  }

  .menu-social-icons .scc-social-links a {
    margin: 0 8px;
  }
}


/* Responsive */

@media (max-width: 768px) {
  .contact-hub-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hub-card-side {
    margin-top: 10px;
  }

  .contact-hub-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hub-map-inner {
    height: 220px;
  }
}
/* ============================
   Leadership grid
   ============================ */

.leadership-grid-wrap {
  max-width: 960px;              /* narrower than Sunday Talks */
  margin: 24px auto 56px;        /* centered on page */
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .leadership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .leadership-grid {
    grid-template-columns: 1fr;
  }
}

.leader-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 16px 16px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.leader-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}


.leader-card-image {
  margin-bottom: 12px;
}

.leader-card-image img,
.leader-card-image-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;           /* square */
  object-fit: cover;
  border-radius: 0px;            /* your requested radius */
  background: #e4e4e4;
}

.leader-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #666;
}

.leader-card-name {
  font-size: 18px;
  margin: 6px 0 2px;
}

.leader-card-name a {
  text-decoration: none;
  color: inherit;
}

.leader-card-role {
  font-size: 14px;
  margin-bottom: 8px;
  color: #c86722;                /* warm accent (tweak if needed) */
}

.leader-card-excerpt {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.leader-card-footer .leader-card-button {
  margin-top: 4px;
 }

/* ============================
   Leadership Single - Title + Role
   ============================ */

.leadership-single .leader-name {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 0;
  color: #042234;
}

.leadership-single .leader-role {
  text-align: center;
  font-size: 1.4rem;
  color: #042234;   /* same brand blue */
  margin-bottom: 24px;
  margin-top: -4px;
  font-weight: 500;
}
/* ============================
   Leadership Single - image centering
   ============================ */

.leadership-single .leader-hero {
  text-align: center;
}

.leader-hero-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================
   Leadership single - external link button style
   ============================ */
.leader-external-links {
  margin-top: 18px;
  margin-bottom: 32px;
  text-align: center;
}

.leader-external-link {
  display: inline-block;
  text-decoration: none;
  background-color: #042234; /* BRAND BLUE DEFAULT */
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.leader-external-link:hover,
.leader-external-link:focus {
  background-color: #e68000; /* ORANGE HOVER */
  color: #ffffff;
}

/* ============================
   IMAGE STYLES (EDITOR PRESETS)
   ============================ */

/* Image - Padded Left: float left, text wraps on right */
.img-padded-left {
  float: left;
  margin: 4px 16px 8px 0;  /* top, right, bottom, left */
  max-width: 45%;
  height: auto;
}

/* Image - Padded Right: float right, text wraps on left */
.img-padded-right {
  float: right;
  margin: 4px 0 8px 16px;  /* top, right, bottom, left */
  max-width: 45%;
  height: auto;
}

/* Image - Center Narrow: centered with comfy margins */
.img-center-narrow {
  display: block;
  margin: 16px auto;
  max-width: 70%;
  height: auto;
  float: none;
}

/* Mobile: stop floats and go full-width */
@media (max-width: 768px) {
  .img-padded-left,
  .img-padded-right {
    float: none;
    display: block;
    margin: 12px auto;
    max-width: 100%;
  }
}


/* ===========================================
   Global Page Title formatting (main H1 on pages)
   =========================================== */
/*
.page h1 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 0;
  color: #042234;
}
*/

/* Apply spacing to ALL page content wrappers */
.page h1 {
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 8px;
    color: #042234;
  }

  .talks-grid nav.pagination-bottom {
    padding-right: 25px;
    font-weight: 800;
  margin-bottom: 20px;
    margin-top: 0px;
}

/* =================================
   MOBILE LAYOUT - HEADER + WRAPPER
   ================================= */
@media (max-width: 768px) {

  /* Make room for the sticky header so titles aren't hidden */
  body {
    padding-top: 80px; /* adjust to 60 / 80 if needed */
  }

  /* Bring cards closer to the edges on phone */
  .page-card-layout {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-card-layout .card-wrap {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================
   ABOUT - INNER MENU MOBILE
   ========================== */
@media (max-width: 768px) {

  /* Replace .about-inner-menu with the class used on that grey bar */
  .about-inner-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .about-inner-menu a {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* =================================
   STACK INNER MENU ON MOBILE
   ================================= */
@media (max-width: 768px) {

  .page-section-menu {
    display: flex;
    flex-direction: column;
    gap: 0px;       /* no extra vertical spacing */
    width: 100%;
    margin-bottom: 4px;
    padding: 8px;
  }

  .page-section-menu a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 4px 0;    /* compact */
    line-height: 1.1;  /* minimal text height */
  }
}

/* ====================
BACK TO TOP ARROW
======================*/
/* Back to Top pill - centered at bottom on all viewports */
#mobile-back-to-top {
  position: fixed;
  left: 50%;                 /* center horizontally */
  bottom: 32px;              /* distance from bottom */
  transform: translate(-50%, 8px);  /* center + slight drop for animation */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px #ffffff solid;
  background-color: #042234;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
}

#mobile-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);  /* slide up slightly when visible */
}

#mobile-back-to-top:hover,
#mobile-back-to-top:focus {
  background-color: #ff6200;
}


/* Leadership page - keep intro and grid in same width */
.leadership-page-wrap {
  max-width: 1000px;   /* roughly the width of the 3-card row */
  margin: 0 auto 40px; /* center it and add some space below */
}

/* Stack WordPress embed cards on mobile (image top, text below) */
@media (max-width: 768px) {
  .wp-embed {
    display: block;           /* stop any horizontal flex layout */
  }

  .wp-embed-featured-image {
    float: none;
    width: 100%;
    margin: 0 0 12px 0;       /* image full-width, a bit of space below */
  }

  .wp-embed-body {
    padding: 0;               /* remove any left padding from text area */
  }
}


/* ============================
   FOOTER LOGO – controlled size
   ============================ */
#media_image-2 img{
  width: 160px !important;
  height: auto !important;
}

/* ============================
   SOCIAL ICONS – single row
   ============================ */
.site-footer .scc-social-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
}

.site-footer .scc-social-links .scc-social-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
}

.site-footer .scc-social-links .scc-social-btn-icon img {
  width: 26px;
  height: 26px;
  display: block;
}


/* ============================
   ARTICLES CATEGORY ARCHIVE
   ============================ */

.articles-archive .articles-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
}

@media (max-width: 960px) {
  .articles-archive .articles-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .articles-archive .articles-sidebar {
    margin-top: 24px;
  }
}

/* Article card */
.article-card {
  margin-bottom: 32px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 24px;
}

.article-thumb {
  display: block;
  margin-bottom: 16px;
}

.article-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.article-title {
  font-size: 26px;
  margin: 0 0 6px;
}

.article-title a {
  color: #042234;
  text-decoration: none;
}

.article-title a:hover {
  text-decoration: underline;
}

.article-meta {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.article-excerpt {
  margin-bottom: 14px;
}

.btn-article-read-more {
  display: inline-block;
  padding: 6px 14px;
  background: #eb6900;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
}

.btn-article-read-more:hover {
  background: #c95500;
}

/* Pagination */
.articles-pagination {
  margin-top: 24px;
}

/* ===== Events Calendar - badge + typography tweaks ===== */

/* Badge layout: weekday on top, date below */
.cec-date-badge,
.cec-list-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cec-date-dow,
.cec-list-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.cec-date-day,
.cec-list-day {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

/* Event titles - grid + list */
.cec-event-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.25em;
}

/* List meta text */
.cec-list .cec-meta {
  font-size: 1.2rem;
  font-weight: 500;
  opacity: 0.9;
}

/* Single Event - increase date size */
body.single-event .entry-meta {
  font-size: 17px;
}

/* ================================
   Fix top spacing - page titles
   ================================ */

/* Sunday Talks archive page */
.page-id-22 h1.page-title {
  margin-top: 48px !important;
}

/* Events Calendar page */
.page-id-7233 h1.section-title {
  margin-top: 48px !important;
}

/* Resources Portfolio page */
.page-id-8755 h1.page-title {
  margin-top: 48px !important;
}

/* Contact St. Croix page */
.page-id-280 h1.page-title {
    margin-top: 48px !important;
}

/* Fix bottom pagination "Next" label (Articles) */
.articles-pagination .page-numbers.next {
  font-size: 0 !important;      /* hide original "Next ?" text */
  position: relative;
}

/* Inject clean "Next" text */
.articles-pagination .page-numbers.next::before {
  content: "Next";
  font-size: 15px;              /* matches other page numbers */
  font-weight: 500;
  color: #042234;               /* brand dark blue */
}

/* Kill any theme-added arrow/icon */
.articles-pagination .page-numbers.next::after {
  content: none !important;
}



/* Put "More on this topic" and pagination on one line */
.articles-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Ensure the heading stays left */
.articles-pagination h2 {
  margin: 0;
}

/* Pagination row on the right */
.articles-pagination .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Hide the "More on this topic" heading */
.articles-pagination h2,
.articles-pagination h3 {
    display: none !important;
}

/* ============================================================
   HEADER SOCIAL ICONS - Option B (Menu Injection) [if used]
   ============================================================ */

/* If you are still injecting socials as a <li class="menu-social-icons"> */
.menu-social-icons{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Reset shortcode wrapper so footer styles don-t leak */
.menu-social-icons .scc-social-links,
.menu-social-icons .scc-social-links *{
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Icons inline */
.menu-social-icons .scc-social-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: transform 0.25s ease;
}

.menu-social-icons .scc-social-links a:hover{
  transform: scale(1.18);
}

@media (max-width: 768px){
  .menu-social-icons{
    margin-top: 20px;
    order: 999;
    justify-content: center;
  }
  .menu-social-icons .scc-social-links a{
    margin: 0 6px;
  }
}



.home .hero {
  margin-top: 200px !important;
}

.home .hero {
  margin-top: 24px !important;  /* adjust 16-32px to taste */
}

.site-header.is-stuck {
  box-shadow: 0 6px 8px rgba(0,0,0,.58) !important;
}

.hero {
  padding: 4px 0 6px;
}

/* Push homepage hero down below fixed header */
.home .hero {
  margin-top: 24px !important;  /* tweak 20-28px to taste */
}

/* =======================================
   HOMEPAGE MOTTO STRIPE
======================================= */

.home-motto-strip {
  margin: 0 auto;
  width: 100%;
  max-width: 1432px;          /* same width as hero + cards */
  background-color: #042234;
  border: 1px solid #fff;
}

.home-motto-strip .wrapper {
  padding: 0; /* keep wrapper tight */
}

.home-motto-inner {
  position: relative;
  padding: 0.6em 1.5rem;      /* scales with font size */
  text-align: center;
  color: #042234;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 1; /* text above decorative marks */
}

.home-motto-inner p,
.home-motto-text {
  margin: 0;
}

.home-motto-text.motto-bold {
  font-weight: 700;
}

.home-motto-text.motto-italic {
  font-style: italic;
}

.home-motto-text.motto-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}


/* =======================================
   HOMEPAGE HERO SPACING UNDER FIXED HEADER
   (final authority)
======================================= */

.home .hero {
  margin-top: 24px !important;   /* adjust 20-32px to taste */
}

/* Extra space when the WP admin bar is visible */
.admin-bar .home .hero {
  margin-top: 56px !important;   /* header + admin bar */
}

/* Homepage full-height gradient background */
html, body {
  min-height: 100%;
}

body.home {
  background: linear-gradient(
    to bottom,
    #dddddd 0%,   /* very top */
    #dddddd 70%,  /* stay light for a bit */
    #042234 100%  /* fade to dark at bottom */
  );
  background-attachment: fixed;  /* keep one continuous gradient */
}

/* ============================================================
   MOBILE: extend Contact Hub background up behind the fixed header
   ============================================================ */
@media (max-width: 1100px){

  /* Match this to your mobile header offset */
  :root { --scc-mobile-header-offset: 78px; }  /* adjust 70-90px */

  body.page-template-page-contact-hub .contact-hub{
    position: relative; /* ensure bg positions correctly */
  }

  body.page-template-page-contact-hub .contact-hub-bg{
    top: calc(var(--scc-mobile-header-offset) * -1) !important;
    height: calc(100% + var(--scc-mobile-header-offset)) !important;
  }
}

/* ============================================================
   PAGE CARD LAYOUT - CLEAN BLOCK (single source of truth)
   ============================================================ */

/* Base */
.page-card-layout{
  /* PULL the background up behind the fixed header (covers the gap) */
  margin-top: calc(var(--header-h) * -1);

  /* Keep the content/card at the same visual position */
  padding: calc(var(--scc-card-offset-top) + var(--header-h)) 16px 48px;

  background-color: var(--brand, #042234);
}

.page-card-layout .card-wrap{
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.page-card-layout .entry-header{
  margin-bottom: 24px;
}

.page-card-layout .entry-title{
  margin: 0;
  font-size: 32px;
  line-height: 1.3;
}

/* =======*/


/* ============================ 
MOBILE SCREEN - CARD WIDTH 
============================== */
/* Phone: tighter top spacing + full-width card (12px edges) */
@media (max-width: 768px){

  .page-card-layout{
    /* still cover the gap */
    margin-top: calc(var(--header-h) * -1);

    /* tighter top offset, but still account for fixed header */
    padding: calc(12px + var(--header-h)) 12px 48px;
  }

  .page-card-layout .card-wrap{
    margin: 0 8px;          /* EXACT 12px from screen edges */
    max-width: none;         /* allow full-width card */
    padding: 14px;
  }

  .page-card-layout .entry-title{
    font-size: 26px;
  }
}

/* ----------------------------------
   RESTORE: Home hero alignment (mobile)
---------------------------------- */
@media (max-width: 768px){
  body.home{
    padding-top: 0 !important;
  }
}
/* ======================================== */

/* Footer login icon (Dashicons) */
.site-footer-credits a.footer-login {
  text-decoration: none;
}

.site-footer-credits a.footer-login .dashicons {
  font-size: 18px;
  line-height: 1;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  vertical-align: text-bottom;
}

.site-footer-credits a.footer-login:hover .dashicons {
  opacity: 1;
}

/* FORCE the Leader card Read More button padding (wins over theme button rules) */
.leader-card-footer a.button.leader-card-button,
a.button.leader-card-button {
  display: inline-block !important;
  padding: 6px 14px !important;   /* left/right padding included */
  box-sizing: border-box !important;
}

/* =========================================================
   SINGLE POST — contain FEATURED image (.entry-thumb)
   ========================================================= */

/* 1) Force the featured-image wrapper to stay inside the post column */
.single-post .entry-header,
.single-post .entry-thumb {
  max-width: 860px;          /* match your card-wrap max-width */
  margin-left: auto;
  margin-right: auto;
}

/* If your content column has side padding, mirror it here */
.single-post .entry-header {
  padding-left: 32px;        /* match card-wrap padding */
  padding-right: 32px;
  box-sizing: border-box;
}

/* 2) Clamp the actual image so it can’t exceed its container */
.single-post .entry-thumb img.wp-post-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Substack "Share" trigger button (on *your* site)
   ========================================================= */

/* Target: links/buttons that point to Substack share */
.single-post .entry-content a[href*="substack.com"][href*="share"],
.single-post .post-content  a[href*="substack.com"][href*="share"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;              /* <-- left/right padding you wanted */
  border-radius: 6px;

  background: #ff6200;             /* brand orange */
  color: #fff !important;

  border: 2px solid #ff6200;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

/* Hover: reverse */
.single-post .entry-content a[href*="substack.com"][href*="share"]:hover,
.single-post .post-content  a[href*="substack.com"][href*="share"]:hover {
  background: #fff;
  color: #ff6200 !important;
  border-color: #ff6200;
}

/* Keyboard focus (nice to have) */
.single-post .entry-content a[href*="substack.com"][href*="share"]:focus-visible,
.single-post .post-content  a[href*="substack.com"][href*="share"]:focus-visible {
  outline: 3px solid rgba(255, 98, 0, 0.35);
  outline-offset: 2px;
}



/* =========================================================
   FOOTER — CLEAN SINGLE SOURCE OF TRUTH
   Uses your markup: .site-footer .footer-main .footer-left .footer-right
   ========================================================= */

/* Footer background + base text */
.site-footer{
  background: #000;
  color: #fff;
  margin-top: 0;
  padding: 20px 0 16px;
  border-top: 2px solid #eb6900;
}

/* Keep footer content constrained (matches your existing pattern) */
.site-footer .footer-main,
.site-footer .site-footer-credits{
  max-width: 860px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Top row: left menu + right widgets */
.site-footer .footer-main{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-top: 16px;
  padding-bottom: 8px;
}

/* Left + right columns */
.site-footer .footer-left,
.site-footer .footer-right{
  flex: 1 1 50%;
  min-width: 0;
}

/* Footer menu (stacked links) */
.site-footer .footer-nav .footer-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-nav .footer-menu li{
  margin: 0 0 8px 0;
}

.site-footer .footer-nav .footer-menu li:last-child{
  margin-bottom: 0;
}

/* Right column default alignment (desktop) */
.site-footer .footer-right{
  text-align: right;
}

/* Footer links */
.site-footer a,
.site-footer a:visited{
  color: #ff6200;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus{
  color: #fff;
  text-decoration: underline;
}

/* Footer credits */
.site-footer .site-footer-credits{
  text-align: center;
  font-size: 14px;
  opacity: 0.75;
  padding-top: 10px;
  padding-bottom: 14px;
}

/* =========================================================
   FOOTER LOGO — your exact image ID
   ========================================================= */
.site-footer img.wp-image-9169{
  display: block;
  width: 340px;      /* desktop size */
  max-width: 100%;
  height: auto;
  margin-left: auto; /* keep it away from left */
  margin-right: 0;   /* align toward right on desktop */
}

/* =========================================================
   FOOTER SOCIAL ICONS — remove glow + subtle lift (no crazy zoom)
   ========================================================= */
.site-footer .scc-social-links.layout-icons a,
.site-footer .scc-social-links.layout-icons a *{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.site-footer .scc-social-links.layout-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  padding: 0;
}

.site-footer .scc-social-links.layout-icons a img{
  transition: transform 0.25s ease;
}

.site-footer .scc-social-links.layout-icons a:hover img{
  transform: translateY(-3px) scale(1.08);
}

/* =========================================================
   MOBILE — smaller footer text + breathing room + less edge-cramp
   ========================================================= */
@media (max-width: 768px){

  /* footer font size ONLY on mobile */
  .site-footer,
  .site-footer p,
  .site-footer a,
  .site-footer li{
    font-size: 14px;
    line-height: 1.4;
  }

  .site-footer .site-footer-credits{
    font-size: 13px;
  }

  /* Keep columns side-by-side but give both breathing room */
  .site-footer .footer-main{
    gap: 16px;
  }

  .site-footer .footer-left,
  .site-footer .footer-right{
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  /* Right column: don’t hug the right edge on mobile */
  .site-footer .footer-right{
    text-align: right;
  }

  /* Mobile logo: smaller + centered so it never looks cramped */
  .site-footer img.wp-image-9169{
    width: 200px;
    margin: 10px auto 0 auto;
  }
}

/* =========================================================
   FOOTER — tighten address widget spacing
   ========================================================= */
.site-footer .widget p,
.site-footer .widget:first-child{
  margin-top: -10px;
}

.site-footer .widget p{
  margin-bottom: 6px;
}

/* Footer address styling */
.site-footer .footer-address{
  color: #ff6600;
  display: block;
  margin-top: 0;
  line-height: 1.4;
}