/* ============================================================
   cassiopeia_doccc — DOCCC brand foundation
   Loaded automatically by Cassiopeia as user.css (last in the cascade,
   so these rules win over the parent without !important in most cases).
   ------------------------------------------------------------
   Palette : charcoal #1A1A1A  ·  orange #F14833  ·  white #FFFFFF
   System  : white/charcoal are the positive-negative text pair;
             orange is the constant accent on both.
   Fonts   : Libre Franklin (self-hosted, OFL) for headings;
             real Franklin Gothic used first where the visitor has it.
   ============================================================ */

/* ---------- Self-hosted Libre Franklin (no Google CDN) ---------- */
@font-face{
  font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/doccc-libre-franklin-400.woff2") format("woff2");
}
@font-face{
  font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/doccc-libre-franklin-500.woff2") format("woff2");
}
@font-face{
  font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/doccc-libre-franklin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/doccc-libre-franklin-700.woff2") format("woff2");
}

/* ---------- Brand tokens ---------- */
:root{
  --doccc-charcoal:#1A1A1A;   /* soften to #242424 here if #1A1A1A reads too black */
  --doccc-orange:#F14833;
  --doccc-orange-dark:#D63A27; /* hover/active */
  --doccc-white:#FFFFFF;
  --doccc-muted:#4B4B4B;       /* secondary text on light ground */
  --doccc-line:rgba(26,26,26,.14);

  /* heading stack: genuine Franklin Gothic first, Libre Franklin as the web fallback */
  --doccc-heading:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",
                  "Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --doccc-body:"Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Base typography ---------- */
body{font-family:var(--doccc-body);color:var(--doccc-charcoal)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{
  font-family:var(--doccc-heading);
  color:var(--doccc-charcoal);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.1;
}

/* ---------- Orange as the constant accent ---------- */
a{color:var(--doccc-orange);text-decoration:none}
a:hover,a:focus{color:var(--doccc-orange-dark)}

.btn-primary,.button,
.btn-primary:not(:disabled):not(.disabled){
  background-color:var(--doccc-orange);
  border-color:var(--doccc-orange);
  color:var(--doccc-white);
}
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--doccc-orange-dark);
  border-color:var(--doccc-orange-dark);
  color:var(--doccc-white);
}
.btn-outline-primary{color:var(--doccc-orange);border-color:var(--doccc-orange)}
.btn-outline-primary:hover{background:var(--doccc-orange);color:var(--doccc-white)}

/* Cassiopeia accent hooks */
:root{
  --cassiopeia-color-primary:#F14833;
  --cassiopeia-color-link:#F14833;
  --cassiopeia-color-hover:#D63A27;
}

/* ---------- Positive / negative helpers ----------
   Use .on-dark on any section whose background is dark or an image;
   text goes white, orange accent stays. .on-light is the default. */
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark li{
  color:var(--doccc-white);
}
.on-dark a{color:var(--doccc-orange)}
.on-dark a:hover{color:#ff6a58}
.on-light,.on-light h1,.on-light h2,.on-light h3,.on-light p{color:var(--doccc-charcoal)}

/* thin orange rule used under headings (matches the Flex look) */
.accent-rule::after{
  content:"";display:block;width:2.4rem;height:3px;
  background:var(--doccc-orange);margin-top:.55rem;
}

/* ---------- DOCCC wordmark ----------
   Drop the markup (see html/WORDMARK.html) into a Custom HTML module
   placed in the header/banner position. */
.doccc-logo{
  display:inline-flex;align-items:baseline;
  font-family:var(--doccc-heading);
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:.02em;
  line-height:1;
  text-decoration:none;
}
.doccc-logo .doc{color:var(--doccc-charcoal)}
.doccc-logo .cc{color:var(--doccc-orange)}
.doccc-logo:hover .doc{color:var(--doccc-charcoal)}
.doccc-logo:hover .cc{color:var(--doccc-orange-dark)}
/* on a dark header, add class "on-dark" to the wordmark to flip DOC to white */
.doccc-logo.on-dark .doc{color:var(--doccc-white)}


/* ============================================================
   HOME PAGE — slider + sections
   The home article uses only these classes (no inline styles),
   so Joomla's editor can't mangle it. Slide photos are set here.
   ============================================================ */

/* ---------- layout helpers used by the home article ---------- */
.doccc-wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.doccc-section{padding-block:clamp(2.2rem,4vw,3.4rem)}
.doccc-head{max-width:56ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.doccc-head h2{font-size:clamp(2rem,3.6vw,2.8rem);margin:.2rem 0 0}
.doccc-head p{color:var(--doccc-muted);margin-top:.7rem}
.doccc-eyebrow{font-weight:600;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--doccc-orange);display:inline-block;margin-top:1.8rem;margin-bottom:.6rem}
.doccc-btn{display:inline-block;font-weight:600;font-size:.92rem;padding:.72rem 1.35rem;border-radius:2px;transition:.2s;background:var(--doccc-orange);color:var(--doccc-white)}
.doccc-btn:hover{background:var(--doccc-orange-dark);color:var(--doccc-white)}
.doccc-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:var(--doccc-white)}
.doccc-btn.ghost:hover{border-color:var(--doccc-orange);color:var(--doccc-orange);background:transparent}
.doccc-btn.line{background:transparent;border:1px solid var(--doccc-charcoal);color:var(--doccc-charcoal)}
.doccc-btn.line:hover{background:var(--doccc-charcoal);color:var(--doccc-white)}

/* ---------- SLIDER (CSS-only cross-fade, no JS) ---------- */
/* sits tight under the header — kills Joomla's default article top margin,
   plus Cassiopeia's content-wrapper top padding, for this page only */
#doccc-home-page,.doccc-hero{margin-top:0}
.item-page .doccc-hero{margin-top:0}
.item-page:has(.doccc-hero){padding-top:0}
.item-page:has(.doccc-hero) .page-header,
.item-page:has(.doccc-hero) .com-content-article__header{display:none}
main#content:has(.doccc-hero){padding-top:0}
.doccc-hero{position:relative;overflow:hidden;height:clamp(22rem,58vh,34rem);background:var(--doccc-charcoal)}
.doccc-slide{position:absolute;inset:0;opacity:0;animation:docccFade 21s infinite;
  background-size:cover;background-position:center;display:flex;align-items:center}
.doccc-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,20,20,.82) 0%,rgba(20,20,20,.5) 45%,rgba(20,20,20,.2) 100%)}
/* the three home photos (copied from the SPPB pages), root-relative */
.doccc-slide.s1{background-image:url('/images/2019/05/11/weyne-yew-492363-doccc-head6.jpg')}
.doccc-slide.s2{background-image:url('/images/2019/05/10/dan-freeman-399586-doccc-head5.jpg')}
.doccc-slide.s3{background-image:url('/images/2019/05/12/chris-barbalis-781041-doccc-head9.jpg')}
.doccc-slide:nth-child(1){animation-delay:0s}
.doccc-slide:nth-child(2){animation-delay:7s}
.doccc-slide:nth-child(3){animation-delay:14s}
@keyframes docccFade{0%{opacity:0}4%{opacity:1}29%{opacity:1}33%{opacity:0}100%{opacity:0}}
.doccc-slide-inner{position:relative;z-index:2;max-width:38rem}
.doccc-slide .doccc-eyebrow{color:var(--doccc-orange);margin-top:0}
.doccc-slide h2{color:var(--doccc-white);font-size:clamp(2rem,4.6vw,3.4rem);margin:0 0 1rem;max-width:16ch}
.doccc-slide p{color:rgba(255,255,255,.85);font-size:clamp(1rem,1.4vw,1.18rem);max-width:40ch;margin:0 0 1.6rem}
@media(prefers-reduced-motion:reduce){
  .doccc-slide{animation:none;opacity:0}
  .doccc-slide:nth-child(1){opacity:1}
}

/* ---------- COURSES / buy path ---------- */
.doccc-courses{background:#F4F5F5}
.accent-rule::after{content:"";display:block;width:2.4rem;height:3px;background:var(--doccc-orange);margin-top:.6rem}
.doccc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem}
.doccc-card{background:var(--doccc-white);border:1px solid var(--doccc-line);display:flex;flex-direction:column;transition:.2s}
.doccc-card:hover{border-color:var(--doccc-orange);transform:translateY(-3px)}
.doccc-card .top{background:var(--doccc-charcoal);color:var(--doccc-white);padding:1.1rem 1.25rem}
.doccc-card .top .k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--doccc-orange);font-weight:600;display:block}
.doccc-card .top h3{color:var(--doccc-white);font-size:1.15rem;margin:.4rem 0 0}
.doccc-card .cbody{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.doccc-card .cbody p{font-size:.88rem;color:var(--doccc-muted);flex:1;margin:0}
.doccc-card .cbody .go{align-self:flex-start;background:var(--doccc-orange);color:var(--doccc-white);font-weight:600;font-size:.85rem;padding:.55rem 1.1rem;border-radius:2px}
.doccc-card .cbody .go:hover{background:var(--doccc-orange-dark);color:var(--doccc-white)}
.doccc-card.intro .top{background:#F4F5F5;color:var(--doccc-charcoal);border-bottom:1px solid var(--doccc-line)}
.doccc-card.intro .top h3{color:var(--doccc-charcoal)}

/* ---------- PILLARS ---------- */
.doccc-pillars .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--doccc-line);border:1px solid var(--doccc-line)}
.doccc-pillar{background:var(--doccc-white);padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.7rem}
.doccc-pillar h3{font-size:1.35rem;margin:0}
.doccc-pillar p{font-size:.92rem;color:var(--doccc-muted);flex:1;margin:0}
.doccc-pillar a{font-weight:600;font-size:.85rem;margin-top:.4rem}

/* ---------- ABOUT ---------- */
.doccc-about .agrid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.doccc-about h2{font-size:clamp(1.9rem,3.2vw,2.6rem);max-width:16ch;margin:0}
.doccc-about p{color:var(--doccc-muted);margin-top:.8rem;max-width:46ch}
.doccc-about .side{border-left:2px solid var(--doccc-orange);padding-left:1.3rem}
.doccc-about .side p{font-size:.92rem;margin-bottom:1rem}
@media(max-width:820px){.doccc-about .agrid{grid-template-columns:1fr}}

/* ---------- Mobile tightening (home) ---------- */
@media (max-width:640px){
  .doccc-hero{height:clamp(20rem,72vh,28rem)}
  .doccc-slide h2{font-size:1.7rem;max-width:14ch}
  .doccc-slide p{font-size:.95rem}
  .doccc-section{padding-block:1.8rem}
  .doccc-head h2{font-size:1.6rem}
  .doccc-about h2{font-size:1.6rem}
  .doccc-eyebrow{font-size:1rem;margin-top:1.4rem}
  .doccc-cards{grid-template-columns:1fr}
}


/* ============================================================
   HEADER: org name, contact strip, menu type size, alignment
   ============================================================ */

/* ---------- Org name beside the DOCCC wordmark ---------- */
.doccc-orgname{
  font-family:var(--doccc-body);font-weight:500;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--doccc-muted);
  line-height:1.25;margin-left:.75rem;align-self:center;
}
.doccc-logo.on-dark .doccc-orgname{color:rgba(255,255,255,.75)}

/* ---------- Contact strip (phone / email / web) ----------
   Paste html/CONTACT-STRIP.html into a Custom HTML module.
   Placed as a slim bar — works in a top-a/top-b header position,
   or at the top of the footer. */
.doccc-contact-strip{
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;
  font-family:var(--doccc-body);font-size:.85rem;
  padding-block:.55rem;
}
.doccc-contact-strip a{color:inherit;font-weight:500}
.doccc-contact-strip a:hover{color:var(--doccc-orange)}
.doccc-contact-strip.on-dark{color:rgba(255,255,255,.8)}
.doccc-contact-strip .item{display:inline-flex;align-items:center;gap:.45rem}
.doccc-contact-strip .abn{font-family:var(--doccc-body);font-size:.78rem;color:var(--doccc-muted);letter-spacing:.02em}
.doccc-contact-strip.on-dark .abn{color:rgba(255,255,255,.55)}

/* ---------- Menu type size ---------- */
/* Cassiopeia's default menu module renders Bootstrap nav-link items;
   this covers the common selectors. If it doesn't visibly change
   anything, tell me the exact class from devtools and I'll retarget. */
#menu .nav-link,
#menu .nav-item > a,
.mod-menu .nav-link,
nav.navbar .nav-link{
  font-size:1.05rem;
  font-weight:600;
}

/* Header alignment: superseded by the centred header-brand block below —
   title/logomark/contact now live in one module (HEADER-BRAND.html) and
   the menu is centred beneath it, working with Cassiopeia's natural
   stacking instead of forcing separate positions into one row. */


/* ============================================================
   HEADER BRAND — centred stack: title, logomark, contact line.
   Paste html/HEADER-BRAND.html into one Custom HTML module,
   in the position above the menu. Menu is centred to match.
   ============================================================ */

.doccc-header-brand{
  max-width:1140px;margin-inline:auto;
  padding:1.4rem clamp(1.25rem,5vw,4rem) .7rem;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.5rem;
}
.doccc-sitetitle{
  font-family:var(--doccc-heading);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.5rem);
  color:var(--doccc-white);letter-spacing:-.01em;
  margin:0;line-height:1.1;
}

/* Dark header treatment: paint the whole header area charcoal (broad,
   robust selector — doesn't depend on knowing Cassiopeia's exact inner
   markup) so the title and the menu just beneath it both read white.
   To compare against orange instead, change the one line below. */
:root{ --doccc-header-bg: var(--doccc-charcoal); }  /* try var(--doccc-orange) to compare */
header,
header#header,
header.site-header,
#header{
  background:var(--doccc-header-bg);
}
header a,
header .nav-link,
header .nav-item > a{
  color:var(--doccc-white);
}
header a:hover,
header .nav-link:hover{
  color:var(--doccc-orange);
}

/* Centre the main menu beneath the brand block.
   !important overrides Bootstrap's navbar-nav defaults (which otherwise
   push the menu left/right via margin-right:auto or space-between). */
#menu, .mod-menu, nav.navbar, header .navbar{
  text-align:center;
}
#menu .nav,
#menu ul.nav,
.mod-menu > ul,
nav.navbar .navbar-nav{
  display:inline-flex !important;
  float:none !important;
  width:auto !important;
  margin:0 auto !important;
  justify-content:center;
}
@media(max-width:640px){
  .doccc-sitetitle{font-size:1.4rem}
  .doccc-header-brand{padding-top:1rem}
}