/* ==========================================================================
   SITE STYLES
   Kentico 11 — widget / web part / content-block level styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Typography */
  --primary-font: Poppins, Arial, sans-serif;

  /* --- Raw palette -------------------------------------------------------
     Letter names kept exactly as-is so existing markup keeps working.
     Prefer the semantic aliases below when writing anything new.
     (Note: there is no --accent-color-d; it was dropped at some point.)   */
  --text-color: #45464f;      /* Dark gray */
  --primary-color: #003e7e;   /* Navy blue */
  --secondary-color: #26808c; /* Teal green */
  --accent-color-a: #f3f2ef;  /* Cool Gray 1 C */
  --accent-color-b: #737373;  /* Dark Cool Gray 9 C */
  --accent-color-c: #ab2838;  /* Red */
  --accent-color-e: #7a138c;  /* Purple */
  --accent-color-f: #917122;  /* Gold */
  --accent-color-g: #008046;  /* Bright green */
  --accent-color-h: #dcf4e9;  /* Light green */
  --accent-color-i: #eef5fb;  /* Light blue */
  --accent-color-j: #3068ca;  /* Button blue */
  --accent-color-k: #ffffff;  /* White */
  --accent-color-l: #d88100;  /* Complementary orange */

  /* --- Semantic aliases --------------------------------------------------
     Use these in new code. Swapping a role's color becomes a one-line edit. */
  --text-inverse: var(--accent-color-k);
  --surface-muted: var(--accent-color-a);
  --surface-nav: var(--primary-color);
  --border-muted: var(--accent-color-b);
  --link-blue: var(--accent-color-j);
  --focus-color: var(--primary-color);
  --focus-color-inverse: var(--accent-color-k);
  --divider-color: rgba(115, 115, 115, 0.75);
  --divider-solid: #ccc;

  /* Radii */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Motion */
  --transition-base: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

body {
  font-family: var(--primary-font);
}

p,
li,
#text {
  color: var(--text-color);
}



/* --------------------------------------------------------------------------
   3. ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */

/* Visually hidden text for screen readers.
   Required companion to every ::before / ::after that carries meaning.
    
 */
.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;
} /* <span class="sr-only">Opens in a new tab</span>*/

.is-hidden {
  display: none;
}

/* Global keyboard focus indicator. :focus-visible only paints for keyboard
   users, so mouse clicks stay clean. */
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* White focus ring anywhere sitting on the navy nav */
.interior-navigation-container :focus-visible,
.navigation-container :focus-visible,
.cm-menu :focus-visible,
.header-top-links :focus-visible {
  outline-color: var(--focus-color-inverse);
}

/* --------------------------------------------------------------------------
   4. LINKS
   -------------------------------------------------------------------------- */

a {
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Links disabled at runtime (see padlet-block.js).
   aria-disabled keeps the link focusable so screen reader users are told
   it is unavailable — do not add tabindex="-1". */
a[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #f0f0f0;
  color: #666;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   Two variants: .button (filled, primary) and .btn-simple (outline, secondary).
   Hover no longer changes font-weight — that reflowed the text and shifted
   the button's width. Color inversion plus a lift gives the same feedback.
   -------------------------------------------------------------------------- */

.button,
.btn-simple {
  display: inline-block;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: normal;
  text-decoration: none;
  transition: var(--transition-base);
}

.button:hover,
.btn-simple:hover,
.button:focus,
.btn-simple:focus {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.button:active,
.btn-simple:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Filled */
.button {
  background-color: var(--link-blue);
  color: var(--text-inverse);
  border: 1px solid var(--link-blue);
}

.button:hover,
.button:focus {
  background-color: var(--accent-color-k);
  color: var(--link-blue);
}

/* Outline */
.btn-simple {
  background-color: var(--accent-color-k);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-simple:hover,
.btn-simple:focus {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .button,
  .btn-simple {
    transition: none;
  }

  .button:hover,
  .btn-simple:hover,
  .button:focus,
  .btn-simple:focus,
  .button:active,
  .btn-simple:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. FILE BADGES
   One base rule; each badge sets three custom properties.
   Adding a new file type is a single line.

   Usage — always pair the badge with .sr-only text, since generated
   content is not reliably announced by screen readers:
     <a class="badge-pdf" data-cke-saved-href="file.pdf" href="file.pdf" target="_blank">
       Document Title <span class="sr-only">(PDF, opens in a new tab)</span>
     </a>
   -------------------------------------------------------------------------- */

[class^="badge-"]::after,
[class*=" badge-"]::after {
  content: var(--badge-label);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  margin-left: 5px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
  white-space: nowrap;
}

.badge-pdf   { --badge-label: "PDF";     --badge-bg: #fde8e0; --badge-fg: #8c2a0f; }
.badge-pptx  { --badge-label: "PPTX";    --badge-bg: #deeaf7; --badge-fg: #0c3d78; }
.badge-docx  { --badge-label: "WORD";    --badge-bg: #fef3d8; --badge-fg: #8a5a00; }
.badge-video { --badge-label: "VIDEO";   --badge-bg: #ede8fb; --badge-fg: #3d2a90; }
.badge-xlsx  { --badge-label: "XLSX";    --badge-bg: #e2f2e2; --badge-fg: #1a5c1a; }
.badge-zoom  { --badge-label: "ZOOM";    --badge-bg: #91b2ff; --badge-fg: #24243d; }
.badge-teams { --badge-label: "TEAMS";   --badge-bg: #909191; --badge-fg: #f2f4f5; }
.badge-pod   { --badge-label: "PODCAST"; --badge-bg: var(--accent-color-i); --badge-fg: var(--primary-color); }

/* --------------------------------------------------------------------------
   7. INLINE ICONS
   Same pattern as badges: one base rule, tokens per class.
   -------------------------------------------------------------------------- */

.redstar::before,
.boldstar::before,
.yellowstar::before,
.check-mark::before,
.pttn-date::before,
.filefolder::before,
.computer-icon::before,
.arrow::after {
  content: var(--icon-char);
  color: var(--icon-color, inherit);
  font-size: var(--icon-size, 22px);
  vertical-align: var(--icon-align, middle);
  margin-right: var(--icon-gap, 5px);
  display: inline-block;
}

.redstar       { --icon-char: "\2605";     --icon-color: var(--accent-color-c); --icon-align: super; }
.boldstar      { --icon-char: "\2730";     --icon-align: super; }
.yellowstar    { --icon-char: "\2605";     --icon-color: #fad02c; --icon-size: 24px; --icon-align: super; }
.check-mark    { --icon-char: "\2713";     --icon-color: var(--secondary-color); --icon-align: sub; --icon-gap: 3px; }
.pttn-date     { --icon-char: "\1F5D3\FE0F"; --icon-size: 30px; }
.filefolder    { --icon-char: "\1F4C2";    --icon-size: 36px; }
.computer-icon { --icon-char: "\1F5A5\FE0F"; --icon-size: 20px; }
.arrow { --icon-char: "\23F5"; --icon-color: var(--primary-color); }

/* trailing icon: gap goes on the left */
.arrow::after {
  margin-right: 0;
  margin-left: var(--icon-gap, 5px);
}

/* --------------------------------------------------------------------------
   8. NAVIGATION
   All the "navy background, white text" rules collapsed into one list.
   !important is retained because Kentico's own theme CSS outranks these.
   -------------------------------------------------------------------------- */

.interior-navigation-container,
.interior-nav .toggle-menu,
.interior-navigation-container .interior-nav .cm-menu,
.interior-navigation-container .interior-nav .cm-menu .expander-wrap .has-sub,
.cm-menu ul,
.navigation-container,
.cm-menu .expander-wrap .has-sub > span,
.cm-menu > li > a:hover,
.cm-menu li a:hover,
.header-top-links a:hover {
  background: var(--surface-nav) !important;
  color: var(--text-inverse);
}

/* Let descendants inherit the navy from their container rather than each
   painting it themselves. Replaces `.cm-menu * { background: ... }`. */
.cm-menu * {
  background: transparent;
  color: var(--text-inverse);
  font-weight: normal;
  font-size: medium;
}

.cm-menu a,
.cm-menu li {
  font-weight: normal;
  font-size: large;
}

/* Hamburger bars */
.toggle-menu:after,
.toggle-menu:before,
.toggle-menu > span:before {
  background: var(--surface-nav) !important;
}

/* Submenu toggle gets the teal on hover */
.cm-menu .expander-wrap .has-sub > span:hover {
  background: var(--secondary-color) !important;
}

/* Top utility links */
.site-header .header-top-links ul li a:hover,
.site-header .header-top-links ul li a:hover .t {
  cursor: pointer;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   9. CONTENT BLOCKS & DIVIDERS
   -------------------------------------------------------------------------- */

.PaneContent {
  border: none;
}

.home-tab-container {
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
}

.event-list-container {
  margin: 20px 40px;
  padding: 10px;
  border-top: solid 2px var(--surface-muted);
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--divider-color),
    transparent
  );
}

hr.gray-bar {
  border: none;
  height: 4px;
  background-image: none;
  background-color: var(--divider-solid);
  margin: 20px 0;
  width: 100%;
}

.hero-slideshow .slideshow .slide-item .slide-overlay .title {
 color: #00356b;
 font-size: 22px;
 line-height: 1.5;
 font-weight: 500;
 margin: 0 auto;
 margin-bottom: 3px;
 
}


.hero-slideshow .slideshow .slide-item .slide-overlay {
    padding: 10px 20px;
    background: #fff;
    height: 145px;
    
}

.pttn-columns {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 5rem;
  margin: 2rem 0;
}

.pttn-columns > div {
  box-sizing: border-box;
  flex: 1 1 calc(50% - 2.5rem);
}

.pttn-callout > h2:first-child {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  color: #003e7e;
}

.pttn-callout-links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.pttn-callout-links > li {
  margin-bottom: 10px;
  color: #45464f;
}

.pttn-callout-links > li:last-child {
  margin-bottom: 0;
}

.pttn-callout-links a {
  color: #003e7e;
  text-decoration: underline;
}

.pttn-callout-links a:focus {
  outline: 2px solid #003e7e;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE — single breakpoint at 1000px
   Pattern: hide the richer element, show the simpler fallback.
   -------------------------------------------------------------------------- */

.youtube-link {
  display: none;
}

@media (max-width: 1000px) {
  .imgVisible {
    display: none;
  }

  .youtube-video {
    display: none;
  }

  .youtube-link {
    display: inline-block;
  }

  .event-list-container {
    margin: 20px 15px;
  }
}