/* ============================================================
   WatchGuard VPN — unique layer
   Loaded after every other stylesheet. Three jobs:
   1. Self-hosted neutral typeface (IBM Plex Sans, variable).
   2. Palette shifted ~5% deeper (trust blue, indigo, sky).
   3. Redesigned FAQ block for the homepage.
   ============================================================ */

/* ---------- 1. Typeface: IBM Plex Sans (variable, latin) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../webfonts/plex/ibm-plex-sans-var.woff2") format("woff2-variations"),
       url("../webfonts/plex/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Palette: everything a touch deeper (~5%) ---------- */
:root {
  --fx-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* fresh.css tokens */
  --fx-blue: #235edf;
  --fx-blue-dark: #1c4acd;
  --fx-indigo: #4b42da;
  --fx-sky: #35b4ec;
  --fx-ink: #1d2738;
  --fx-line: #d7dce4;
  --fx-grad: linear-gradient(135deg, #235edf, #4b42da);
  --fx-grad-hover: linear-gradient(135deg, #1c4acd, #4035c0);

  /* tokens fresh.css remaps from the layers below */
  --rf-blue: #235edf;
  --rf-blue-dark: #1c4acd;
  --rf-indigo: #4b42da;
  --rf-line: #d7dce4;
  --rf-grad: linear-gradient(135deg, #235edf, #4b42da);
  --ui-blue: #235edf;
  --ui-blue-dark: #1c4acd;
  --ui-line: #d7dce4;
  --theme-color: #35b4ec;
  --primary-color: #1d2738;
  --ink: #1d2738;
}

/* site.css re-declares tokens on .home-page — mirror the shift there too */
.home-page {
  --primary-color: #223046;
  --ink: #1e2736;
  --muted: #616a7e;
  --soft: #f5f8fc;
  --line: #dadee4;
}

/* article.css keeps a few hardcoded teal accents — deepen them by ~5% */
.article-hero .article-meta i {
  color: #148f9f;
}

.article-content .article-callout {
  border-left-color: #43acb8;
}

.article-content .article-related a {
  color: #087584;
}

/* ---------- 3. Homepage FAQ (redesigned) ---------- */
.home-v2 .faq-section {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
}

.faq-unic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  min-width: 0;
}

.faq-unic-h {
  margin: 0;
  font-size: inherit;
}

.faq-unic-item {
  height: fit-content;
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.faq-unic-item:hover {
  transform: translateY(-2px);
  border-color: #c6d7ff;
  box-shadow: var(--fx-shadow-sm);
}

.faq-unic-item:has(.collapse.show) {
  transform: none;
  border-color: #b7ccff;
  box-shadow: var(--fx-shadow-blue);
}

.faq-unic-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.faq-unic-num {
  flex: none;
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef4ff, #e9e7ff);
  color: var(--fx-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.faq-unic-text {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--fx-ink);
  transition: color .2s ease;
}

.faq-unic-q:hover .faq-unic-text {
  color: var(--fx-blue-dark);
}

.faq-unic-icon {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef4ff, #e9e7ff);
  color: var(--fx-blue);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.faq-unic-icon i {
  font-size: 11px;
}

.faq-unic-q[aria-expanded="true"] .faq-unic-text {
  color: var(--fx-blue-dark);
}

.faq-unic-q[aria-expanded="true"] .faq-unic-icon {
  background: var(--fx-grad);
  color: #fff;
}

.faq-unic-q[aria-expanded="true"] .faq-unic-icon i {
  transform: rotate(45deg);
}

.faq-unic-q:focus-visible {
  outline: 2px solid var(--fx-blue);
  outline-offset: -2px;
}

.faq-unic-body {
  padding: 0 22px 22px 58px;
  font-size: 15px;
  line-height: 1.75;
  color: #5b6b83;
}

.faq-unic-body a {
  color: var(--fx-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-unic-body a:hover {
  color: var(--fx-blue);
}

@media (max-width: 575.98px) {
  .faq-unic-q {
    padding: 18px;
  }

  .faq-unic-body {
    padding: 0 18px 20px 18px;
  }
}