/* =============================================================================
   CANFASD WEB BRAND SYSTEM — canfasd-brand.css
   Version 1.04 · WCAG 2.2 Level AA
   Paste into WPCode → Add Snippet → Custom CSS
   =========================================================================== */


/* =============================================================================
   1. GOOGLE FONTS IMPORT
   Also add the  tags to WPCode → Header & Footer → Header:

   
   
   
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');


/* =============================================================================
   2. BRAND TOKENS — CSS CUSTOM PROPERTIES
   =========================================================================== */

:root {

  /* ── Brand palette ──────────────────────────────────────────────────────── */
  --navy:          #002A3A;
  --burgundy:      #643335;
  --gold:          #C69214;   /* borders / icons / dark-bg text ONLY          */
  --gold-safe:     #7a5c00;   /* gold on white — 5.0:1 ✓                      */
  --web-blue:      #303e4e;
  --lt-grey:       #EDEDED;
  --dk-grey:       #3F3F3F;

  /* ── Interactive ────────────────────────────────────────────────────────── */
  --link:          #005B8E;   /* 5.9:1 on white ✓                             */

  /* ── Info ───────────────────────────────────────────────────────────────── */
  --info:          #006494;
  --info-bg:       #E8F3F8;
  --info-text:     #003D5C;

  /* ── Success ────────────────────────────────────────────────────────────── */
  --success:       #2A7A4B;
  --success-bg:    #E8F5EE;
  --success-text:  #1A4D30;

  /* ── Warning ────────────────────────────────────────────────────────────── */
  --warn-bg:       #FEF8E6;
  --warn-text:     #5D4200;

  /* ── Danger / alert ─────────────────────────────────────────────────────── */
  --danger:        #A8001A;
  --danger-bg:     #FDECEA;
  --danger-text:   #6B0011;

  /* ── Neutral ────────────────────────────────────────────────────────────── */
  --neutral-bg:    #F0F4F6;
  --neutral-text:  #1F2D3A;

  /* ── Highlight ──────────────────────────────────────────────────────────── */
  --hl:            #FFF4CC;
  --hl-term-bg:    #E8F3F8;
  --hl-term-text:  #003D5C;

  /* ── Utility greys ──────────────────────────────────────────────────────── */
  --caption-grey:  #595959;
  --border-light:  #d0d7de;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --sans:  'Lato', Arial, Helvetica, sans-serif;
  --serif: 'Century Gothic', 'Futura', 'Trebuchet MS', 'Lato', Arial, sans-serif;

  /* ── Focus ring — WCAG 2.4.11 ───────────────────────────────────────────── */
  --focus-ring:    3px solid var(--gold);
  --focus-shadow:  0 0 0 5px #fff;
}


/* =============================================================================
   3. ACCESSIBILITY BASE
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.canfasd-skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-family: var(--sans);
  text-decoration: none;
  border-radius: 0 0 0.375rem 0.375rem;
  font-size: 1rem;
  transition: top 0.1s;
}
.canfasd-skip-link:focus { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
   4. FOCUS RING
   =========================================================================== */

.canfasd-brand :focus-visible,
.canfasd-btn:focus-visible,
.canfasd-badge:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--focus-shadow);
  border-radius: 2px;
}
.canfasd-brand a:focus-visible { outline-color: var(--navy); }


/* =============================================================================
   5. TYPOGRAPHY
   =========================================================================== */

.canfasd-brand h1,
.canfasd-brand h2,
.canfasd-brand h3,
.canfasd-brand h4,
h1.canfasd-heading,
h2.canfasd-heading,
h3.canfasd-heading,
h4.canfasd-heading {
  font-family: var(--serif);
  line-height: 1.3;
  color: var(--navy);
  margin-top: 0;
}

.canfasd-brand h1 { font-size: 2rem;     font-weight: 700; }
.canfasd-brand h2 { font-size: 1.5rem;   font-weight: 700; }
.canfasd-brand h3 { font-size: 1.25rem;  font-weight: 700; color: var(--burgundy); }
.canfasd-brand h4 { font-size: 1.125rem; font-weight: 700; color: var(--burgundy); }

.canfasd-brand p,
.canfasd-brand li,
.canfasd-brand label,
.canfasd-brand input,
.canfasd-brand button,
.canfasd-brand td,
.canfasd-brand th {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dk-grey);
}

.canfasd-brand a                { color: var(--link); text-decoration: underline; }
.canfasd-brand a:hover          { color: var(--navy); }
.canfasd-brand a:visited        { color: var(--burgundy); }
.canfasd-brand a[rel~="noopener"]::after { content: " ↗"; font-size: 0.75em; vertical-align: super; }

.canfasd-brand small,
.canfasd-caption {
  font-size: 0.875rem;
  color: var(--caption-grey);
  font-family: var(--sans);
}

.canfasd-blockquote {
  border-left: 4px solid var(--gold);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #fef8e6 0%, #fff 100%);
  border-radius: 0 0.5rem 0.5rem 0;
  position: relative;
}
.canfasd-blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.25rem; left: 1rem;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}
.canfasd-blockquote p     { color: var(--neutral-text); font-style: italic; font-size: 1.0625rem; line-height: 1.7; padding-left: 1rem; }
.canfasd-blockquote footer { font-size: 0.875rem; color: var(--caption-grey); margin-top: 0.75rem; padding-left: 1rem; }
.canfasd-blockquote footer::before { content: '— '; }


/* =============================================================================
   6. TEXT HIGHLIGHTS
   =========================================================================== */

.canfasd-hl-search { background: var(--hl);         color: var(--dk-grey);       padding: 0 0.1875rem; border-radius: 0.125rem; }
.canfasd-hl-term   { background: var(--hl-term-bg);  color: var(--hl-term-text);  padding: 0 0.1875rem; border-radius: 0.125rem; }


/* =============================================================================
   7. BUTTONS — WCAG 2.5.8 minimum 44 px target size
   =========================================================================== */

.canfasd-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.375rem;
  min-height:      2.75rem;
  min-width:       2.75rem;
  padding:         0.625rem 1.25rem;
  font-family:     var(--sans);
  font-size:       1rem;
  font-weight:     700;
  line-height:     1.2;
  border:          2px solid transparent;
  border-radius:   0.375rem;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.canfasd-btn-primary           { background: var(--navy);     color: #fff; border-color: var(--navy); }
.canfasd-btn-primary:hover     { background: #003f56; border-color: #003f56; color: #fff; }
.canfasd-btn-secondary         { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.canfasd-btn-secondary:hover   { background: #7a3d3f; border-color: #7a3d3f; color: #fff; }
.canfasd-btn-webblue           { background: var(--web-blue); color: #fff; border-color: var(--web-blue); }
.canfasd-btn-webblue:hover     { background: #3e5060; border-color: #3e5060; color: #fff; }

.canfasd-btn-outline-navy      { background: transparent; color: var(--navy);     border-color: var(--navy); }
.canfasd-btn-outline-navy:hover { background: var(--navy); color: #fff; }
.canfasd-btn-outline-burgundy  { background: transparent; color: var(--burgundy); border-color: var(--burgundy); }
.canfasd-btn-outline-burgundy:hover { background: var(--burgundy); color: #fff; }

.canfasd-btn-download          { background: var(--info);    color: #fff; border-color: var(--info); }
.canfasd-btn-download:hover    { background: #004d70; border-color: #004d70; color: #fff; }
.canfasd-btn-confirm           { background: var(--success); color: #fff; border-color: var(--success); }
.canfasd-btn-confirm:hover     { background: #1f5c38; border-color: #1f5c38; color: #fff; }
.canfasd-btn-remove            { background: var(--danger);  color: #fff; border-color: var(--danger); }
.canfasd-btn-remove:hover      { background: #7d0013; border-color: #7d0013; color: #fff; }
.canfasd-btn-view              { background: transparent; color: var(--link); border-color: var(--link); }
.canfasd-btn-view:hover        { background: var(--info-bg); color: var(--info-text); }
.canfasd-btn-view:focus-visible { outline-color: var(--navy); }

.canfasd-btn-disabled,
.canfasd-btn[disabled],
.canfasd-btn[aria-disabled="true"] {
  background: var(--lt-grey);
  color: var(--caption-grey);
  border-color: var(--lt-grey);
  cursor: not-allowed;
  opacity: 1;
}
.canfasd-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; box-shadow: var(--focus-shadow); }


/* =============================================================================
   8. BADGES & TAGS
   =========================================================================== */

.canfasd-badge {
  display: inline-flex; align-items: center;
  padding: 0.1875rem 0.6875rem;
  border-radius: 2rem;
  font-size: 0.8125rem; font-weight: 700; font-family: var(--sans);
  line-height: 1.4; border: 2px solid transparent;
}
.canfasd-badge-navy     { background: var(--navy);     color: #fff; }
.canfasd-badge-burgundy { background: var(--burgundy); color: #fff; }
.canfasd-badge-webblue  { background: var(--web-blue); color: #fff; }
.canfasd-badge-info     { background: var(--info);     color: #fff; }
.canfasd-badge-success  { background: var(--success);  color: #fff; }
.canfasd-badge-danger   { background: var(--danger);   color: #fff; }
.canfasd-badge-neutral  { background: var(--lt-grey);  color: var(--dk-grey); }
.canfasd-badge-gold     { background: var(--navy);     color: var(--gold); }

.canfasd-tag {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem; font-weight: 400; font-family: var(--sans);
  border: 1.5px solid currentColor; background: transparent;
}
.canfasd-tag-navy    { color: var(--navy); }
.canfasd-tag-success { color: var(--success-text); border-color: var(--success); }
.canfasd-tag-warn    { color: var(--warn-text);    border-color: #b07e10; }
.canfasd-tag-danger  { color: var(--danger-text);  border-color: var(--danger); }
.canfasd-tag-neutral { color: var(--caption-grey); border-color: var(--caption-grey); }


/* =============================================================================
   9. MESSAGE / CALLOUT BOXES
   =========================================================================== */

.canfasd-msg {
  display: flex; gap: 0.875rem;
  border-radius: 0.5rem; padding: 1rem 1.25rem; margin-bottom: 1rem;
  border-left: 4px solid transparent; align-items: flex-start;
}
.canfasd-msg .canfasd-msg-icon  { font-size: 1.125rem; flex-shrink: 0; line-height: 1.6; width: 1.5rem; text-align: center; }
.canfasd-msg .canfasd-msg-body  { flex: 1; line-height: 1.6; font-family: var(--sans); font-size: 1rem; }
.canfasd-msg .canfasd-msg-label { display: block; font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem; }

.canfasd-msg-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info-text); }
.canfasd-msg-success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.canfasd-msg-warn    { background: var(--warn-bg);    border-color: var(--gold);    color: var(--warn-text); }
.canfasd-msg-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger-text); }
.canfasd-msg-neutral { background: var(--neutral-bg); border-color: var(--web-blue);color: var(--neutral-text); }


/* =============================================================================
   10. DARK PANEL (standalone, without tabs)
   =========================================================================== */

.canfasd-dark-panel {
  background: linear-gradient(135deg, #001e2b 0%, #002A3A 45%, #303e4e 100%);
  border-radius: 0.5rem; padding: 2rem 2.5rem; color: #fff;
}
.canfasd-dark-panel h1,
.canfasd-dark-panel h2   { color: #fff; font-family: var(--serif); }
.canfasd-dark-panel h3,
.canfasd-dark-panel h4   { color: var(--gold); font-family: var(--serif); }
.canfasd-dark-panel p    { color: #c8d8e0; font-family: var(--sans); line-height: 1.7; }
.canfasd-dark-panel .canfasd-eyebrow {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; font-family: var(--sans);
}
.canfasd-dark-panel a { color: var(--gold); text-decoration: underline; }
.canfasd-dark-panel a:hover { color: #fff; }
.canfasd-dark-panel a:focus-visible { outline-color: var(--gold); }


/* =============================================================================
   11. ICON CIRCLES
   =========================================================================== */

.canfasd-icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  font-weight: 700; font-size: 1.125rem; color: #fff; flex-shrink: 0;
}
.canfasd-ic-navy     { background: var(--navy); }
.canfasd-ic-burgundy { background: var(--burgundy); }
.canfasd-ic-info     { background: var(--info); }
.canfasd-ic-success  { background: var(--success); }
.canfasd-ic-danger   { background: var(--danger); }
.canfasd-ic-webblue  { background: var(--web-blue); }
.canfasd-ic-gold     { background: var(--gold); color: var(--navy); }
.canfasd-ic-neutral  { background: var(--lt-grey); color: var(--dk-grey); }


/* =============================================================================
   12. SECTION HEADERS
   =========================================================================== */

.canfasd-section-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}
.canfasd-section-header h2 { font-size: 1.375rem; color: var(--navy); margin: 0; font-family: var(--serif); }
.canfasd-section-tag {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--info-bg); color: var(--info-text);
  padding: 0.25rem 0.625rem; border-radius: 2rem; flex-shrink: 0;
  border: 1px solid #b5d4f4;
}


/* =============================================================================
   13. TAB NAVIGATION SYSTEM
   Full-width component matching the Web Brand Guide header + tab bar format.
   =========================================================================== */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */
.canfasd-tabs-wrapper {
  width: 100%;
  border: 1px solid var(--web-blue);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 2rem;
  font-family: var(--sans);
}

/* ── Hero header ──────────────────────────────────────────────────────────── */
.canfasd-tabs-hero {
  background: linear-gradient(135deg, #001e2b 0%, #002A3A 45%, #2d3848 100%);
  padding: 2rem 2.5rem;
  color: #fff;
}

.canfasd-tabs-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  line-height: 1.4;
}

.canfasd-tabs-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.canfasd-tabs-title .canfasd-tabs-title-sub {
  font-weight: 400;
  font-size: 1.25rem;
  font-style: italic;
}

.canfasd-tabs-subtitle {
  color: #c8d8e0;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  font-family: var(--sans);
}

/* ── Meta chip row ────────────────────────────────────────────────────────── */
.canfasd-tabs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.canfasd-tabs-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  color: #fff;
  font-family: var(--sans);
  line-height: 1.4;
  text-decoration: none;
  display: inline-flex;
  gap: 0.375rem;
  transition: background 0.15s, border-color 0.15s;
}

.canfasd-tabs-chip strong {
  color: var(--gold);
  font-weight: 700;
}

a.canfasd-tabs-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

a.canfasd-tabs-chip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ── Nav bar container (holds arrows + scrollable nav) ───────────────────── */
.canfasd-tabs-nav-wrap {
  position: relative;
  background: linear-gradient(135deg, #002030 0%, #002A3A 45%, #2d3848 100%);
}

/* ── Scroll arrows ────────────────────────────────────────────────────────── */
.canfasd-tabs-arrow {
  position: absolute;
  top: 0; bottom: 0;
  width: 2.5rem;
  display: none;              /* shown via JS when overflow exists */
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #002030 0%, #002A3A 60%, #2d3848 100%);
  border: none;
  cursor: pointer;
  z-index: 2;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--sans);
  padding: 0;
  transition: background 0.15s;
}

.canfasd-tabs-arrow:hover { background: rgba(0, 42, 58, 0.9); }

.canfasd-tabs-arrow.canfasd-arrow-visible { display: flex; }

.canfasd-tabs-arrow-left  {
  left: 0;
  border-right: 1px solid rgba(198, 146, 20, 0.3);
  border-radius: 0;
}
.canfasd-tabs-arrow-right {
  right: 0;
  border-left: 1px solid rgba(198, 146, 20, 0.3);
  border-radius: 0;
}

.canfasd-tabs-arrow:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

/* ── Scrollable tab nav ───────────────────────────────────────────────────── */
.canfasd-tabs-nav {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.canfasd-tabs-nav::-webkit-scrollbar { display: none; }

/* ── Individual tab buttons ───────────────────────────────────────────────── */
.canfasd-tab-btn {
  flex: 1 0 auto;
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 2.75rem;        /* 44 px — WCAG 2.5.8 */
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: 0;
}

.canfasd-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.canfasd-tab-btn[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.canfasd-tab-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  border-radius: 0;
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.canfasd-tab-panel {
  display: none;
  padding: 2rem 2.5rem;
  background: #fff;
  border-top: none;
}

.canfasd-tab-panel.canfasd-panel-active {
  display: block;
}

/* When there is no hero (no eyebrow/title/subtitle/chips), remove top border
   to let the nav bar sit flush to any surrounding container                  */
.canfasd-tabs-wrapper.canfasd-no-hero .canfasd-tabs-nav-wrap {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .canfasd-tabs-hero  { padding: 1.5rem; }
  .canfasd-tab-panel  { padding: 1.25rem; }
  .canfasd-tabs-title { font-size: 1.5rem; }
}

@media (max-width: 28rem) {
  .canfasd-tabs-title            { font-size: 1.25rem; }
  .canfasd-tabs-title .canfasd-tabs-title-sub { font-size: 1rem; }
  .canfasd-tabs-subtitle         { font-size: 0.9375rem; }
  .canfasd-tabs-chip             { font-size: 0.75rem; }
}


/* =============================================================================
   14. FONT SCALE FIXES — px → rem (WCAG 1.4.4)
   =========================================================================== */

.fasd-dir-card p { font-size: 0.9375rem; }
.fasd-dir-count  { font-size: 0.875rem; }
.fasd-dir-empty  { font-size: 0.9375rem; }
.fasd-dir-toc a  { font-size: 0.8125rem; }


/* =============================================================================
   15. UTILITY CLASSES
   =========================================================================== */

.canfasd-mt-1 { margin-top: 1rem; }
.canfasd-mt-2 { margin-top: 1.5rem; }
.canfasd-mt-3 { margin-top: 2rem; }
.canfasd-mb-1 { margin-bottom: 1rem; }
.canfasd-mb-2 { margin-bottom: 1.5rem; }

.canfasd-row        { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.canfasd-badge-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 28rem) {
  .canfasd-dark-panel { padding: 1.25rem; }
  .canfasd-row        { flex-direction: column; }
}