/* Swift Support Pro - alignment and colour grading pass
 * Loads after the readability layer. Deep Field tokens only.
 */

:root{
  --ssp-edge: 1280px;
  --ssp-gutter: max(20px, 4vw);
}

/* ============================================================
   1. ONE EDGE
   The header, nav and banner shipped on a 1660px container while
   every content section used 1280px. Unify so the logo, the menu,
   the article and the footer all share one left edge.
   ============================================================ */

.ssp-theme .section-wrapper,
.ssp-theme .site-header .blog-gen-top-header .section-wrapper,
.ssp-theme .site-header .blog-gen-header .navigation-outer-wrapper .blog-gen-navigation .section-wrapper,
.ssp-theme .banner-section .section-wrapper,
.ssp-theme .blog-gen-container-wrapper{
  max-width:var(--ssp-edge);
  margin-inline:auto;
  padding-inline:var(--ssp-gutter);
  box-sizing:border-box;
}

/* Article furniture aligns to the same left edge as its body copy. */
.ssp-reading .entry-header,
.ssp-reading .entry-meta,
.ssp-reading .entry-footer,
.ssp-reading .post-thumbnail,
.ssp-reading .single-post-thumbnail-caption{
  max-width:var(--ssp-measure);
  margin-inline:auto;
}

/* ============================================================
   2. COLOUR GRADING
   Three navy grounds, stepped. No gradients, no glow, one accent.
   ============================================================ */

.ssp-theme .site-header,
.ssp-theme .site-footer{background-color:#060D18;}

.ssp-theme .site-header{border-bottom:1px solid #25324D;}
.ssp-theme .site-footer{border-top:1px solid #25324D;}

/* Selection reads as the accent, not the browser default. */
.ssp-theme ::selection{background:#2E63F6;color:#FFFFFF;}

/* Hairlines are one value everywhere. */
.ssp-theme hr,
.ssp-theme .wp-block-separator{
  border:none;
  border-top:1px solid #25324D;
  margin-block:var(--ssp-gap-xl,80px);
  opacity:1;
}

/* Images sit on the ground with a hairline so they do not float. */
.ssp-theme .entry-content img,
.ssp-theme .post-thumbnail img{
  border:1px solid #25324D;
  border-radius:6px;
}

/* Form fields, per the direction. */
.ssp-theme input[type="text"],
.ssp-theme input[type="email"],
.ssp-theme input[type="url"],
.ssp-theme input[type="search"],
.ssp-theme input[type="tel"],
.ssp-theme textarea,
.ssp-theme select{
  background:#121C30;
  border:1px solid #25324D;
  border-radius:6px;
  color:#B9C6DE;
  padding:.7rem .9rem;
  font-family:"Public Sans",sans-serif;
  font-size:1rem;
}
.ssp-theme ::placeholder{color:#8494B0;opacity:1;}
.ssp-theme input:focus,
.ssp-theme textarea:focus,
.ssp-theme select:focus{border-color:#2E63F6;}

/* Buttons: solid accent, 6px, no shadow. */
.ssp-theme button,
.ssp-theme input[type="submit"],
.ssp-theme .wp-block-button__link{
  background:#2E63F6;
  color:#FFFFFF;
  border:1px solid #2E63F6;
  border-radius:6px;
  box-shadow:none;
  font-family:"Work Sans",sans-serif;
  font-weight:700;
  padding:.8rem 1.6rem;
}
.ssp-theme button:hover,
.ssp-theme input[type="submit"]:hover,
.ssp-theme .wp-block-button__link:hover{
  background:#7BA6FF;
  border-color:#7BA6FF;
  color:#060D18;
}

/* Scrollbar joins the palette instead of fighting it. */
.ssp-theme{scrollbar-color:#25324D #0B1220;}
.ssp-theme ::-webkit-scrollbar{width:10px;height:10px;}
.ssp-theme ::-webkit-scrollbar-track{background:#0B1220;}
.ssp-theme ::-webkit-scrollbar-thumb{background:#25324D;border-radius:6px;}
.ssp-theme ::-webkit-scrollbar-thumb:hover{background:#2E63F6;}

/* ============================================================
   3. TYPE REFINEMENT
   ============================================================ */

.ssp-theme body{
  font-feature-settings:"kern" 1,"liga" 1;
  font-variant-ligatures:common-ligatures;
}

/* Figures align in columns instead of drifting. */
.ssp-theme .wp-block-table table,
.ssp-theme .ssp-verdict,
.ssp-theme .ssp-keyfacts{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Small caps furniture: category, meta, labels. */
.ssp-theme .entry-meta,
.ssp-theme .cat-links,
.ssp-theme .ssp-reading-time,
.ssp-theme .widget-title{
  letter-spacing:.02em;
}

.ssp-theme .widget-title,
.ssp-theme .widget h2{
  font-family:"Work Sans",sans-serif;
  font-weight:700;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8494B0;
  padding-bottom:.7rem;
  border-bottom:1px solid #25324D;
  margin-bottom:1.1rem;
}

/* The site title carries the brand, so it gets the display face. */
.ssp-theme .site-title,
.ssp-theme .site-title a{
  font-family:"Work Sans",sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#FFFFFF;
}
.ssp-theme .site-title a:hover{color:#7BA6FF;}
.ssp-theme .site-description{
  color:#8494B0;
  font-size:.92rem;
  letter-spacing:.01em;
}

/* Navigation: even rhythm, one weight, accent only on the active item. */
.ssp-theme .main-navigation a,
.ssp-theme .menu-item > a{
  font-family:"Work Sans",sans-serif;
  font-weight:600;
  font-size:.97rem;
  letter-spacing:.01em;
  color:#B9C6DE;
}
.ssp-theme .main-navigation a:hover,
.ssp-theme .menu-item > a:hover{color:#FFFFFF;}
.ssp-theme .current-menu-item > a,
.ssp-theme .current_page_item > a{color:#7BA6FF;}

/* ============================================================
   4. VERTICAL RHYTHM
   ============================================================ */

.ssp-theme .site-main > *:first-child{margin-top:0;}
.ssp-theme .site-footer{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem);}
.ssp-theme .widget{margin-bottom:clamp(2rem,1.4rem + 2vw,3rem);}

@media (max-width:768px){
  .ssp-theme .widget-title,
  .ssp-theme .widget h2{font-size:.88rem;}
}