/* Promethos Cyber Services. Brand: Deep Obsidian Blue, Forge Amber, Charcoal, Light Slate.
   No external resources by design: no web fonts, no CDNs, no third-party scripts.
   A security practice should not leak its visitors to other people's servers. */

:root {
  --obsidian: #0F172A;
  --amber: #E25822;
  --amber-dark: #B8441A;
  --charcoal: #334155;
  --slate: #F1F5F9;
  --line: #D8E0EA;
  --white: #FFFFFF;
  --maxw: 68rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 1.25rem; }

a { color: var(--amber-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--obsidian); color: var(--white);
  padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* Header and navigation.
   .nav-bar is fixed, so it sits at the very top of the viewport at all
   times, overlaying the top of .banner below it and staying locked in
   place as the page scrolls -- both come from the one position:fixed,
   no scroll listener needed. .banner reserves --nav-h of top padding so
   the logo itself is never covered, just the blank margin above it. */
.site-head a { color: var(--obsidian); text-decoration: none; }

.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--nav-h); position: relative;
}
.brand { display: flex; align-items: center; }
.brand-icon { height: 2.25rem; width: auto; }

.nav-toggle {
  display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.25rem; height: 2.25rem; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--obsidian); }

.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem;
  list-style: none; margin: 0 0 0 auto; padding: 0;
  font-size: .95rem;
}
.nav > li { position: relative; }
.nav > li > a { display: block; padding-block: .25rem; border-bottom: 2px solid transparent; }
.nav > li > a:hover, .nav > li > a[aria-current="page"] { border-bottom-color: var(--amber); }
.has-sub > a::after { content: ""; display: inline-block; margin-left: .35em; border: 4px solid transparent; border-top-color: currentColor; vertical-align: middle; }
.submenu-toggle { display: none; }

.submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 210; margin: 0; padding: .4rem 0;
  list-style: none; min-width: 15rem; background: var(--white); border: 1px solid var(--line);
  border-radius: .25rem; box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu { display: block; }
.submenu li a { display: block; padding: .5rem .9rem; border-bottom: 0; font-size: .9rem; }
.submenu li a:hover { background: var(--slate); }

/* Full-width banner. Nav overlays its top edge; padding-top clears --nav-h. */
.banner { background: var(--white); text-align: center; padding: calc(var(--nav-h) + 1rem) 1rem 1.25rem; }
.banner-img { height: clamp(70px, 10vw, 130px); width: auto; max-width: 100%; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
  }
  .nav.open { max-height: 80vh; overflow-y: auto; }
  .nav > li > a { padding: .8rem 1.25rem; }
  .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .has-sub > a { flex: 1; }
  .has-sub > a::after { display: none; }

  /* First layer loads collapsed: the parent link still navigates to its
     hub page, and a tap on the chevron button expands just that one
     submenu in place, single column, without a second tap needed to
     reach the hub page itself. */
  .submenu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; background: none; border: 0; padding: 0; cursor: pointer;
  }
  .submenu-toggle::after {
    content: ""; width: 8px; height: 8px; border-right: 2px solid var(--obsidian);
    border-bottom: 2px solid var(--obsidian); transform: rotate(45deg); transition: transform .15s ease;
  }
  .submenu-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

  .submenu { display: none; width: 100%; }
  /* Beats the base :hover/:focus-within reveal rule's specificity, so
     tabbing to (or clicking) the parent link alone doesn't pop the
     submenu open -- only the toggle's "open" class does. */
  .has-sub:hover > .submenu:not(.open), .has-sub:focus-within > .submenu:not(.open) { display: none; }
  .nav .has-sub > .submenu.open { display: block; }
}

/* Hero */
.hero { background: var(--obsidian); color: var(--white); padding-block: 3.5rem 3rem; text-align: center; }
.hero h1 { margin: 0 0 .6rem; font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 600; line-height: 1.2; }
.hero .lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #C9D4E2; max-width: 44ch; margin: 0 auto 1.75rem; }
.hero .rule { width: 4rem; height: 3px; background: var(--amber); margin: 0 auto 1.5rem; }
.hero .btn-row { justify-content: center; }

.page-head { background: var(--slate); border-bottom: 1px solid var(--line); padding-block: 2.5rem 2rem; text-align: center; }
.page-head h1 { margin: 0; color: var(--obsidian); font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 600; line-height: 1.25; }
.page-head .rule { width: 3rem; height: 3px; background: var(--amber); margin: 1rem auto 0; }

main { padding-block: 2.5rem 3rem; }
main h2 { color: var(--obsidian); font-size: 1.4rem; font-weight: 600; margin: 2.25rem 0 .75rem; }
main h2:first-child { margin-top: 0; }
main h3 { color: var(--obsidian); font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .4rem; }
main p { max-width: 70ch; }
main > .wrap > :first-child { margin-top: 0; }

.lead { font-size: 1.15rem; color: var(--obsidian); }

/* Article byline, above the lead paragraph on a /news/* page */
.article-meta {
  font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber-dark); margin: 0 0 1rem;
}

/* Lists */
ul.ticks { list-style: none; padding: 0; margin: 1rem 0; max-width: 70ch; }
ul.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; background: var(--amber); border-radius: 1px;
}
ul.ticks strong { color: var(--obsidian); }

/* Cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0; }
.card {
  border: 1px solid var(--line); border-top: 3px solid var(--amber);
  border-radius: .25rem; padding: 1.25rem; background: var(--white);
}
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; font-size: 1rem; }
.card a { font-weight: 600; }

/* Callout and CTA band */
.callout {
  background: var(--slate); border-left: 3px solid var(--amber);
  padding: 1.25rem 1.5rem; margin: 2rem 0; border-radius: 0 .25rem .25rem 0;
}
.callout p { margin: 0 0 1rem; }
.callout p:last-child { margin-bottom: 0; }

.band { background: var(--obsidian); color: var(--white); padding-block: 2.75rem; margin-top: 3rem; }
.band h2 { color: var(--white); margin-top: 0; }
.band p { color: #C9D4E2; max-width: 60ch; }

.btn {
  display: inline-block; background: var(--amber); color: var(--white) !important;
  padding: .8rem 1.4rem; border-radius: .25rem; font-weight: 600;
  text-decoration: none; border: 0;
}
.btn:hover { background: var(--amber-dark); }
.btn-ghost {
  background: transparent; color: var(--white) !important;
  border: 1px solid #57657C;
}
.btn-ghost:hover { background: #1B2438; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Event detail table */
.facts { border-collapse: collapse; margin: 1.5rem 0; width: 100%; max-width: 34rem; }
.facts th, .facts td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { color: var(--obsidian); font-weight: 600; white-space: nowrap; width: 7.5rem; }
.facts tr:nth-child(even) { background: var(--slate); }

/* Embedded forms */
.embed { margin: 1.5rem 0; }
.embed iframe { width: 100%; min-height: 45rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--white); }
.embed-fallback { font-size: .95rem; color: var(--charcoal); margin-top: .75rem; }

/* Footer */
.site-foot {
  background: var(--slate); border-top: 1px solid var(--line);
  padding-block: 2rem; margin-top: 0; font-size: .95rem;
}
.foot-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-foot h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--obsidian); margin: 0 0 .6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .35rem; }
.legal { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: #5A6B80; font-size: .875rem; }
.legal p { margin: .25rem 0; max-width: none; }

/* Social links row and copyright, at the very bottom of the footer */
.social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 1.5rem; }
.social a { display: inline-flex; color: var(--charcoal); }
.social a:hover { color: var(--amber); }
.social svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.copyright { font-size: .8125rem; letter-spacing: .01em; opacity: .85; text-align: center; margin: .75rem 0 0; }

/* Insights widget (news index and archive). Scoped under #promethos-insights
   so its card styling can never collide with the rest of the site. */
#promethos-insights {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--charcoal);
  background: var(--slate);
  padding: 8px;
  box-sizing: border-box;
}
#promethos-insights * { box-sizing: border-box; }

#promethos-insights .pi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

#promethos-insights .pi-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 20px 22px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#promethos-insights .pi-card:hover,
#promethos-insights .pi-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  border-color: var(--amber);
  outline: none;
}
#promethos-insights .pi-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(226, 88, 34, .45);
}

#promethos-insights .pi-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}

#promethos-insights .pi-title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--obsidian);
  margin: 0 0 10px 0;
}

#promethos-insights .pi-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 16px 0;
}

#promethos-insights .pi-read {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--obsidian);
}
#promethos-insights .pi-card:hover .pi-read { color: var(--amber); }

#promethos-insights .pi-archive { margin-top: 30px; }

#promethos-insights .pi-archive-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--obsidian);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amber);
}

#promethos-insights .pi-archive-scroll {
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
#promethos-insights .pi-archive-scroll::-webkit-scrollbar { width: 10px; }
#promethos-insights .pi-archive-scroll::-webkit-scrollbar-track { background: transparent; }
#promethos-insights .pi-archive-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}

#promethos-insights .pi-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid #eef2f6;
  transition: background .12s ease;
}
#promethos-insights .pi-row:last-child { border-bottom: none; }
#promethos-insights .pi-row:hover,
#promethos-insights .pi-row:focus-visible {
  background: var(--slate);
  outline: none;
}
#promethos-insights .pi-row:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(226, 88, 34, .45);
}
#promethos-insights .pi-row-date {
  flex: 0 0 auto;
  min-width: 118px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--amber);
}
#promethos-insights .pi-row-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--obsidian);
}

#promethos-insights .pi-empty {
  font-size: 15px;
  color: var(--charcoal);
  padding: 12px;
}

@media (prefers-reduced-motion: no-preference) { a, .btn { transition: background-color .15s, border-color .15s, color .15s; } }

@media print {
  .site-head, .band, .site-foot { background: none !important; color: #000 !important; }
  .nav-bar { position: static !important; }
  body { color: #000; }
}