/* =========================================================
   Cyfenders Executive Briefing Styles
   Scoped to executive briefing pages only
   File: cyfenders-executive-briefing.css
   ========================================================= */

/* --- Executive assertion (section thesis) --- */
.briefing-assertion {
  border-left: 4px solid #d13708;
  padding-left: 16px;
  margin-top: 28px;
}

.briefing-assertion p {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.82);
}

/* --- 3-step executive arc cards (individual briefing pages) --- */
.briefing-arc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(11, 70, 88, 0.12);
  border-top: 4px solid rgba(209, 55, 8, 0.85);
  border-radius: 12px;
  background: #fff;
  padding: 22px 20px 18px 20px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
}

/* Step badge */
.briefing-step-badge {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.92rem;
  color: #0b4658;
  background: rgba(11, 70, 88, 0.08);
  border: 1px solid rgba(11, 70, 88, 0.16);
  margin-bottom: 10px;
}

/* Card title */
.briefing-arc-card h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #0b4658;
  min-height: 2.8em;
}

/* Card body */
.briefing-arc-card p {
  margin-bottom: 0;
  font-size: 0.97rem;
  line-height: 1.42;
  color: rgba(0, 0, 0, 0.78);
}

/* --- Responsive 3-across behavior (content-width aware) --- */
/* Only applies to the individual briefing "approach" section, not the overview page. */
#approach .row.g-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

#approach .row.g-3>[class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
}

/* --- Common Focus Areas: expandable executive topics (if used) --- */
.faq .focus-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.faq .focus-item {
  border: 1px solid rgba(11, 70, 88, 0.12);
  border-left: 4px solid rgba(209, 55, 8, 0.85);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.faq .focus-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.faq .focus-title {
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.25;
  color: #0b4658;
}

.faq .focus-toggle::after {
  content: "+";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0b4658;
  background: rgba(11, 70, 88, 0.08);
  border: 1px solid rgba(11, 70, 88, 0.16);
}

.faq .focus-toggle[aria-expanded="true"]::after {
  content: "-";
}

.faq .focus-toggle:hover {
  background: rgba(11, 70, 88, 0.02);
}

.faq .focus-toggle:focus-visible {
  outline: 3px solid rgba(11, 70, 88, 0.35);
  outline-offset: 2px;
}

.faq .focus-content {
  padding: 0 18px 16px 18px;
}

.faq .focus-content p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.78);
}

@media (max-width: 575.98px) {
  .faq .focus-toggle {
    padding: 14px 14px;
  }

  .faq .focus-content {
    padding: 0 14px 14px 14px;
  }
}

/* --- Section rhythm and anchor behavior (individual briefing pages) --- */
#briefing section {
  scroll-margin-top: 140px;
  margin-top: 0;
  margin-bottom: 0;
}

#briefing section+section {
  margin-top: 48px;
}

@media (min-width: 992px) {
  #briefing section+section {
    margin-top: 56px;
  }
}

/* =========================================================
   Executive Briefings OVERVIEW page additions
   Uses existing services.html structure, no HTML changes needed
   ========================================================= */

/* Hide unused services pillar sections on the overview page (safe even if they are not present) */
#services-pillar-nav #operations-section,
#services-pillar-nav #assurance-section,
#services-pillar-nav #training-section {
  display: none;
}

/* If services.css assumes a left rail layout, ensure the content area uses full width on this page */
#services-pillar-nav .services-content {
  max-width: none;
  width: 100%;
}

/* Tighten the briefings grid spacing a bit */
#services-pillar-nav .briefings-grid {
  margin-top: 18px;
  width: 100%;
  max-width: none;
}

/* Ensure Bootstrap row/col behavior remains intact, but allow equal-height cards reliably */
#services-pillar-nav .briefings-grid.row>[class*="col-"] {
  display: flex;
}

/* Make briefing cards feel like intentional tiles */
#services-pillar-nav a.briefing-card-link {
  display: block;
  width: 100%;
  text-decoration: none;
}

#services-pillar-nav a.briefing-card-link:hover,
#services-pillar-nav a.briefing-card-link:focus {
  text-decoration: none;
}

#services-pillar-nav .briefing-card {
  width: 100%;
  border: 1px solid rgba(11, 70, 88, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 18px 18px 16px 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* Subtle lift on hover */
#services-pillar-nav a.briefing-card-link:hover .briefing-card,
#services-pillar-nav a.briefing-card-link:focus .briefing-card {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
  border-color: rgba(11, 70, 88, 0.18);
}

/* CTA line inside card */
#services-pillar-nav .briefing-card-cta {
  font-weight: 700;
  color: #0b4658;
}

/* 
#home .article-box {
  border: 1px solid rgba(11, 70, 88, 0.12);
  border-left: 4px solid rgba(209, 55, 8, 0.85);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
} */

#home .article-box {
  border: none;
  border-left: 4px solid rgba(209, 55, 8, 0.85);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 0 4px;
}

#home .article-box-abs {
  margin-left: 0.5rem;
}

#home .article-box-title {
  color: #0b4658;
  font-weight: 750;
}

@media (min-width: 992px) {
  #home .article-box {
    margin-top: 6px;
  }
}

#services-pillar-nav .services-topics {
  gap: 10px;
}

#services-pillar-nav .services-topic {
  border: 1px solid rgba(11, 70, 88, 0.14);
  background: rgba(11, 70, 88, 0.03);
  color: #0b4658;
}

#services-pillar-nav .services-topic:hover,
#services-pillar-nav .services-topic:focus {
  border-color: rgba(11, 70, 88, 0.22);
  background: rgba(11, 70, 88, 0.05);
  color: #0b4658;
}

/* =========================================================
   Executive Briefings – Mobile-only refinements
   ========================================================= */
@media (max-width: 575.98px) {

  /* --- Intro + callout flow --- */

  /* Reduce separation between CTA and callout so they read as one unit */
  #home .article-box {
    margin-top: 12px;
    padding-left: 14px;
  }

  /* Slightly de-emphasize callout text on mobile */
  #home .article-box p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* --- Briefings cards --- */

  /* Increase vertical separation between cards for scroll clarity */
  #services-pillar-nav .briefings-grid .col-12+.col-12,
  #services-pillar-nav .briefings-grid .col-md-6+.col-md-6 {
    margin-top: 14px;
  }

  /* Ensure the card itself breathes a bit more vertically */
  #services-pillar-nav .briefing-card {
    padding-bottom: 18px;
  }

  /* Make the action affordance clearer on touch */
  #services-pillar-nav .briefing-card-cta {
    margin-top: 10px;
    font-weight: 700;
  }

  /* --- Related pills --- */

  /* Improve tap comfort without changing visual weight */
  #services-pillar-nav .services-topics {
    row-gap: 10px;
  }


  /* Give the final CTA room to land before the footer */
  #services-pillar-nav .article-box:last-of-type,
  #services-pillar-nav .cta-box,
  #services-pillar-nav .final-cta {
    margin-bottom: 28px;
  }
}