/**
 * Cyber Advisory Knowledge Centre | Page Styles | v1.0.0
 * Route: /pages/lob/cyber-faq/
 * Scope: Loaded only by the Cyber Advisory Knowledge Centre page.
 */

.page-cyber-faq {
  --nrm-red: var(--ndp-color-brand-red);
  --nrm-blue: var(--ndp-color-brand-blue);
  --nrm-blue-700: #11167f;
  --nrm-gold: var(--ndp-color-brand-gold);
  --nrm-taco-blue: var(--ndp-color-brand-cyan);
  --text: var(--ndp-color-brand-black);
  --muted: #5f6170;
  --surface: var(--ndp-color-neutral-0);
  --surface-soft: #f7f8fb;
  --surface-blue: #f2f4ff;
  --surface-gold: #fff9ee;
  --line: #d8d9e2;
  --line-strong: #bfc2d1;
  --focus: var(--ndp-color-brand-red);
  --shadow-small: 0 4px 14px rgba(2, 6, 111, 0.07);
  --shadow-medium: 0 14px 34px rgba(2, 6, 111, 0.11);
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;
  --space-3: 12px;
  --space-5: 24px;
  --container-max: 1200px;
  --font-heading: var(--ndp-font-heading);
  --font-body: var(--ndp-font-body);
  --transition-fast: 150ms ease;

  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.page-cyber-faq img { max-width: 100%; height: auto; }
.page-cyber-faq button,
.page-cyber-faq input { font: inherit; }
.page-cyber-faq button { color: inherit; }
.page-cyber-faq a { color: inherit; }
.page-cyber-faq h1,
.page-cyber-faq h2,
.page-cyber-faq h3,
.page-cyber-faq p { margin-top: 0; }
.page-cyber-faq h1,
.page-cyber-faq h2,
.page-cyber-faq h3 { font-family: var(--font-heading); color: var(--nrm-blue); }
.page-cyber-faq h1 { font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1.12; }
.page-cyber-faq h2 { font-size: clamp(1.7rem, 2.7vw, 2.2rem); line-height: 1.22; }
.page-cyber-faq h3 { line-height: 1.35; }
.page-cyber-faq :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: none; }
.page-cyber-faq ::selection { background: rgba(237, 21, 93, 0.2); }
.page-cyber-faq .l-container { width: min(calc(100% - 56px), var(--container-max)); margin-inline: auto; }

.page-cyber-faq .skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--surface);
  color: var(--nrm-blue);
  border: 2px solid var(--nrm-blue);
  border-radius: var(--radius-small);
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-cyber-faq .skip-link:focus { transform: translateY(0); }

.page-cyber-faq .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--line);
}
.page-cyber-faq .site-header__inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.page-cyber-faq .site-brand { display: inline-flex; align-items: center; }
.page-cyber-faq .site-brand img { display: block; width: 142px; }
.page-cyber-faq .site-header__label {
  margin: 0;
  color: var(--nrm-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-cyber-faq .eyebrow {
  margin-bottom: var(--space-3);
  color: var(--nrm-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-cyber-faq .eyebrow--blue { color: var(--nrm-blue); }
.page-cyber-faq .button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  padding: 11px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}
.page-cyber-faq .button--primary { background: var(--nrm-red); color: #fff; }
.page-cyber-faq .button--primary:hover { color: #fff; filter: brightness(0.93); }
.page-cyber-faq .text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  text-underline-offset: 4px;
}
.page-cyber-faq .text-link--light,
.page-cyber-faq .text-link--light:hover { color: #fff; }

.page-cyber-faq .faq-hero {
  background: linear-gradient(135deg, var(--nrm-blue), var(--nrm-blue-700));
  color: #fff;
}
.page-cyber-faq .faq-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
  gap: 54px;
  align-items: center;
  padding-block: 64px;
}
.page-cyber-faq .faq-hero h1 { max-width: 820px; margin-bottom: 18px; color: #fff; }
.page-cyber-faq .faq-hero__lede { max-width: 760px; margin-bottom: 24px; color: #e8e9f5; font-size: 1.05rem; }
.page-cyber-faq .faq-hero__note { border-left: 2px solid rgba(255,255,255,0.28); padding: 10px 0 10px 28px; }
.page-cyber-faq .faq-hero__note-label { margin-bottom: 8px; color: var(--nrm-taco-blue); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; }
.page-cyber-faq .faq-hero__note p:last-child { margin: 0; color: #f0f1f8; font-size: 0.94rem; }

.page-cyber-faq .faq-search-section { background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.page-cyber-faq .faq-search-section__inner { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 64px; align-items: start; padding-block: 56px; }
.page-cyber-faq .faq-search-copy h2 { margin-bottom: 10px; }
.page-cyber-faq .faq-search-copy p:last-child { max-width: 420px; margin-bottom: 0; color: var(--muted); }
.page-cyber-faq .faq-search__label { display: block; margin-bottom: 9px; color: var(--nrm-blue); font-weight: 700; }
.page-cyber-faq .faq-search__control { position: relative; display: flex; align-items: center; }
.page-cyber-faq .faq-search__icon { position: absolute; left: 17px; width: 17px; height: 17px; border: 2px solid var(--nrm-blue); border-radius: 50%; pointer-events: none; }
.page-cyber-faq .faq-search__icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 7px; height: 2px; background: var(--nrm-blue); transform: rotate(45deg); transform-origin: left center; }
.page-cyber-faq .faq-search input { width: 100%; min-height: 56px; border: 1px solid var(--line-strong); border-radius: var(--radius-medium); background: #fff; padding: 14px 126px 14px 48px; color: var(--text); box-shadow: var(--shadow-small); }
.page-cyber-faq .faq-search input:focus { border-color: var(--nrm-blue); outline: 3px solid rgba(237,21,93,0.22); outline-offset: 1px; }
.page-cyber-faq .faq-search__clear { position: absolute; right: 8px; min-height: 40px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--nrm-red); padding-inline: 12px; font-weight: 700; cursor: pointer; }
.page-cyber-faq .faq-search__clear:hover { background: rgba(237,21,93,0.08); }
.page-cyber-faq .faq-search__help,
.page-cyber-faq .faq-search__status { font-size: 0.83rem; }
.page-cyber-faq .faq-search__help { margin: 9px 0 4px; color: var(--muted); }
.page-cyber-faq .faq-search__status { margin: 0; color: var(--nrm-blue); font-weight: 600; }
.page-cyber-faq .faq-search-results { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: #fff; box-shadow: var(--shadow-medium); overflow: hidden; }
.page-cyber-faq .faq-search-results__list { list-style: none; margin: 0; padding: 0; }
.page-cyber-faq .faq-search-results__item + .faq-search-results__item { border-top: 1px solid var(--line); }
.page-cyber-faq .faq-search-results__button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0; background: #fff; padding: 13px 16px; text-align: left; cursor: pointer; }
.page-cyber-faq .faq-search-results__button:hover,
.page-cyber-faq .faq-search-results__button:focus-visible { background: var(--surface-blue); }
.page-cyber-faq .faq-search-results__question { color: var(--text); font-weight: 700; }
.page-cyber-faq .faq-search-results__category { flex: 0 0 auto; color: var(--nrm-blue); font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.page-cyber-faq .faq-search-results__empty { padding: 18px; color: var(--muted); }
.page-cyber-faq .faq-search-results__empty p:last-child { margin-bottom: 0; }

.page-cyber-faq .faq-content { padding-block: 64px 80px; }
.page-cyber-faq .faq-content__intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.page-cyber-faq .faq-content__intro h2 { margin-bottom: 0; }
.page-cyber-faq .faq-content__intro > p { max-width: 560px; margin-bottom: 3px; color: var(--muted); }
.page-cyber-faq .faq-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--nrm-blue); overflow-x: auto; scrollbar-width: thin; }
.page-cyber-faq .faq-tabs__tab { position: relative; top: 2px; flex: 0 0 auto; min-height: 48px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #f0f1f4; color: var(--nrm-blue); padding: 11px 15px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.page-cyber-faq .faq-tabs__tab:hover { background: #e8eaf4; }
.page-cyber-faq .faq-tabs__tab[aria-selected="true"] { border-color: var(--nrm-blue); background: #fff; box-shadow: inset 0 3px 0 var(--nrm-red); font-weight: 700; }
.page-cyber-faq .faq-panel { border: 1px solid var(--nrm-blue); border-top: 0; border-radius: 0 0 var(--radius-large) var(--radius-large); padding: 34px; }
.js .page-cyber-faq .faq-panel[hidden] { display: none; }
.page-cyber-faq .faq-panel__header { max-width: 820px; margin-bottom: 26px; }
.page-cyber-faq .faq-panel__number { margin-bottom: 7px; color: var(--nrm-red); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.page-cyber-faq .faq-panel__header h2 { margin-bottom: 8px; font-size: clamp(1.55rem, 2.2vw, 1.9rem); }
.page-cyber-faq .faq-panel__header p:last-child { margin-bottom: 0; color: var(--muted); }
.page-cyber-faq .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.page-cyber-faq .faq-card { border: 1px solid var(--line); border-radius: var(--radius-medium); background: #fff; overflow: clip; box-shadow: var(--shadow-small); scroll-margin-top: 112px; padding: 0; }
.page-cyber-faq .faq-card.is-open { border-color: #aeb4dc; background: var(--surface-blue); box-shadow: 0 10px 24px rgba(2,6,111,0.10); }
.page-cyber-faq .faq-card.is-search-target { box-shadow: 0 0 0 4px rgba(237,21,93,0.18), var(--shadow-medium); }
.page-cyber-faq .faq-card__heading { margin: 0; font-family: var(--font-body); font-size: inherit; }
.page-cyber-faq .faq-card__trigger { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(0,1fr) 28px; gap: 16px; align-items: center; border: 0; background: transparent; padding: 18px 20px; color: var(--text); text-align: left; font-weight: 700; cursor: pointer; }
.page-cyber-faq .faq-card__trigger:hover { background: rgba(2,6,111,0.035); }
.page-cyber-faq .faq-card__indicator { position: relative; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.page-cyber-faq .faq-card__indicator::before,
.page-cyber-faq .faq-card__indicator::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: var(--nrm-blue); transform: translate(-50%,-50%); transition: transform var(--transition-fast); }
.page-cyber-faq .faq-card__indicator::after { transform: translate(-50%,-50%) rotate(90deg); }
.page-cyber-faq .faq-card.is-open .faq-card__indicator::after { transform: translate(-50%,-50%) rotate(0deg); }
.page-cyber-faq .faq-card__answer { border-top: 1px solid var(--line); }
.js .page-cyber-faq .faq-card__answer[hidden] { display: none; }
.page-cyber-faq .faq-card__answer-inner { padding: 20px; color: #454650; }
.page-cyber-faq .faq-card__answer-inner > p:last-child { margin-bottom: 0; }
.page-cyber-faq .faq-card__policy-note { margin-top: 18px; border-left: 3px solid var(--nrm-gold); border-radius: 0 var(--radius-small) var(--radius-small) 0; background: var(--surface-gold); padding: 13px 15px; }
.page-cyber-faq .faq-card__policy-note strong { display: block; margin-bottom: 4px; color: #765812; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.page-cyber-faq .faq-card__policy-note p { margin-bottom: 0; color: #5b5340; font-size: 0.9rem; }
.no-js .page-cyber-faq .faq-tabs { display: none; }
.no-js .page-cyber-faq .faq-panel { border-top: 1px solid var(--nrm-blue); margin-bottom: 28px; }
.no-js .page-cyber-faq .faq-card__trigger { cursor: default; }
.no-js .page-cyber-faq .faq-card__indicator { display: none; }

.page-cyber-faq .advisory-cta { background: var(--nrm-blue); color: #fff; border-top: 3px solid var(--nrm-red); }
.page-cyber-faq .advisory-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-block: 46px; }
.page-cyber-faq .advisory-cta h2 { margin-bottom: 10px; color: #fff; }
.page-cyber-faq .advisory-cta p:last-child { max-width: 760px; margin-bottom: 0; color: #e4e6f3; }
.page-cyber-faq .advisory-cta__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }

.page-cyber-faq .site-footer { background: #2d2d2d; color: #b9bac2; border-bottom: 3px solid var(--nrm-taco-blue); }
.page-cyber-faq .site-footer__inner { padding-block: 34px; text-align: center; }
.page-cyber-faq .site-footer__contact { margin-bottom: 20px; font-size: 0.77rem; line-height: 1.9; }
.page-cyber-faq .site-footer__contact a { color: #d6b874; }
.page-cyber-faq .site-footer__disclaimer { max-width: 860px; margin: 0 auto; font-size: 0.75rem; line-height: 1.8; }

@media (max-width: 1023px) {
  .page-cyber-faq .faq-hero__inner { grid-template-columns: 1fr; gap: 30px; padding-block: 52px; }
  .page-cyber-faq .faq-hero__note { max-width: 760px; }
  .page-cyber-faq .faq-search-section__inner { grid-template-columns: 1fr; gap: 28px; }
  .page-cyber-faq .faq-grid { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
  .page-cyber-faq .advisory-cta__inner { align-items: flex-start; }
}
@media (max-width: 820px) {
  .page-cyber-faq .faq-grid { grid-template-columns: 1fr; }
  .page-cyber-faq .faq-content__intro { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-cyber-faq .advisory-cta__inner { flex-direction: column; gap: 28px; }
}
@media (max-width: 767px) {
  .page-cyber-faq .l-container { width: min(calc(100% - 32px), var(--container-max)); }
  .page-cyber-faq .site-header__inner { min-height: 66px; }
  .page-cyber-faq .site-brand img { width: 118px; }
  .page-cyber-faq .site-header__label { display: none; }
  .page-cyber-faq .faq-hero__inner { padding-block: 40px; }
  .page-cyber-faq .faq-hero__note { border-left: 0; border-top: 2px solid rgba(255,255,255,0.25); padding: 20px 0 0; }
  .page-cyber-faq .faq-search-section__inner { padding-block: 40px; }
  .page-cyber-faq .faq-search input { min-height: 54px; padding-right: 48px; }
  .page-cyber-faq .faq-search__clear { position: static; width: 100%; margin-top: 8px; border: 1px solid var(--line); background: #fff; }
  .page-cyber-faq .faq-search__control { display: block; }
  .page-cyber-faq .faq-search__icon { top: 19px; }
  .page-cyber-faq .faq-content { padding-block: 42px 56px; }
  .page-cyber-faq .faq-tabs { margin-right: -16px; padding-right: 16px; }
  .page-cyber-faq .faq-tabs__tab { min-height: 46px; padding-inline: 13px; }
  .page-cyber-faq .faq-panel { padding: 22px 16px 18px; }
  .page-cyber-faq .faq-card__trigger { min-height: 68px; padding: 16px; }
  .page-cyber-faq .faq-card__answer-inner { padding: 17px 16px; }
  .page-cyber-faq .advisory-cta__inner { padding-block: 38px; }
  .page-cyber-faq .advisory-cta__actions,
  .page-cyber-faq .advisory-cta__actions .button { width: 100%; }
}
@media (min-width: 1440px) {
  .page-cyber-faq .faq-panel { padding: 40px; }
  .page-cyber-faq .faq-grid { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-cyber-faq,
  .page-cyber-faq *,
  .page-cyber-faq *::before,
  .page-cyber-faq *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mobile QA patch v1.0: preserve search-result readability with enlarged text. */
@media (max-width: 767px) {
  .page-cyber-faq .faq-search-results__button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    justify-content: initial;
  }

  .page-cyber-faq .faq-search-results__question,
  .page-cyber-faq .faq-search-results__category {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-cyber-faq .faq-search-results__category {
    justify-self: start;
    white-space: normal;
  }
}