/* SS Layout -- Public/Frontend Styles
   All values reference CSS custom properties.
   Token block is overridden per-install via wp_add_inline_style().
*/

:root {
  --ssl-card-radius:    10px;
  --ssl-card-padding:   16px;
  --ssl-grid-gap:       20px;
  --ssl-heading:        "Inter", -apple-system, system-ui, sans-serif;
  --ssl-body:           "Inter", -apple-system, system-ui, sans-serif;
  --ssl-color-heading:  #0B1E3F;
  --ssl-color-body:     #1F2937;
  --ssl-color-meta:     #5B6477;
  --ssl-color-cat:      #F5B800;
  --ssl-color-border:   #E4E8EE;
  --ssl-color-bg:       #FFFFFF;
  --ssl-color-paper:    #F6F8FB;
  --ssl-navy:           #0B1E3F;
  --ssl-yellow:         #F5B800;
  --ssl-line:           #E4E8EE;
  --ssl-color-btn-bg:   #F5B800;
  --ssl-color-btn-text: #0B1E3F;
  --ssl-widget-padding: 18px;
  --ssl-widget-title:   var(--ssl-color-heading);
  --ssl-shadow:         0 1px 2px rgba(11,30,63,.06), 0 4px 12px rgba(11,30,63,.04);
  --ssl-shadow-hover:   0 8px 24px rgba(11,30,63,.10);
  --ssl-img-ratio:      56.25%; /* 16:9 */
}

/* -- Global reset scoped to plugin output ------- */
.ssl-grid *,
.ssl-hero-wrap *,
.ssl-guide-list *,
.ssl-sidebar-list *,
.ssl-featured * {
  box-sizing: border-box;
}

/* -------------------------------------------------
   CARD GRID   [layout="grid"]
------------------------------------------------- */

.ssl-grid {
  display: grid;
  gap: var(--ssl-grid-gap);
  width: 100%;
}

.ssl-cols-1 { grid-template-columns: 1fr; }
.ssl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ssl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ssl-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* -- Card --------------------------------------- */

.ssl-card {
  background: var(--ssl-color-bg);
  border: 1px solid var(--ssl-color-border);
  border-radius: var(--ssl-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
  font-family: var(--ssl-body);
  -webkit-font-smoothing: antialiased;
}
.ssl-card:hover {
  box-shadow: var(--ssl-shadow-hover);
  transform: translateY(-2px);
}

/* Card image */
.ssl-card-img {
  display: block;
  overflow: hidden;
  position: relative;
  padding-top: var(--ssl-img-ratio);
  background: var(--ssl-color-paper);
}
.ssl-card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ssl-card:hover .ssl-card-img img { transform: scale(1.03); }

/* Placeholder when no image */
.ssl-img-placeholder {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssl-ph-gradient {
  background:
    linear-gradient(135deg, rgba(11,30,63,.06), rgba(11,30,63,.12)),
    repeating-linear-gradient(45deg,
      rgba(11,30,63,.03) 0 12px,
      transparent 12px 24px),
    var(--ssl-color-paper);
}
.ssl-ph-paper { background: var(--ssl-color-paper); }
.ssl-ph-navy  {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.04) 0 12px,
      transparent 12px 24px),
    var(--ssl-navy);
}

/* Card body */
.ssl-card-body {
  padding: var(--ssl-card-padding);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

/* Category label */
.ssl-card-cat {
  font-family: var(--ssl-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ssl-color-cat);
  text-decoration: none;
  display: block;
  line-height: 1;
}
.ssl-card-cat:hover { opacity: .8; }

/* Title */
.ssl-card-title {
  font-family: var(--ssl-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ssl-color-heading);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0 !important; /* theme h2/h3 margins bleed in otherwise */
}
.ssl-card-title a {
  color: inherit;
  text-decoration: none;
}
.ssl-card-title a:hover { color: var(--ssl-color-heading); text-decoration: underline; }

/* Excerpt */
.ssl-card-excerpt {
  font-family: var(--ssl-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ssl-color-body);
  margin: 0;
}

/* Meta line */
.ssl-card-meta {
  font-family: var(--ssl-body);
  font-size: 12px;
  color: var(--ssl-color-meta);
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ssl-meta-sep { opacity: .5; }

/* Author avatar */
.ssl-card-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ssl-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ssl-navy);
  color: var(--ssl-yellow);
  font-family: var(--ssl-heading);
  font-size: 8px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
  flex: 0 0 auto;
}

/* -------------------------------------------------
   HERO + GRID   [layout="hero"]
------------------------------------------------- */

.ssl-hero-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--ssl-grid-gap);
}

/* Hero card is a full-width horizontal card */
.ssl-card.ssl-card-hero {
  flex-direction: row;
  min-height: 0;
}
.ssl-card.ssl-card-hero .ssl-card-img {
  flex: 0 0 45%;
  padding-top: 0;
  min-height: 260px;
  position: relative;
  border-radius: 0;
}
.ssl-card.ssl-card-hero .ssl-card-img img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.ssl-card.ssl-card-hero .ssl-card-body { padding: 28px; }
.ssl-card.ssl-card-hero .ssl-card-title { font-size: 28px; line-height: 1.1; }
.ssl-card.ssl-card-hero .ssl-card-excerpt { font-size: 16px; line-height: 1.6; }

/* -------------------------------------------------
   GUIDE LIST   [layout="guide"]
------------------------------------------------- */

.ssl-guide-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--ssl-body);
}

.ssl-guide-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: var(--ssl-color-bg);
  border: 1px solid var(--ssl-color-border);
  border-radius: var(--ssl-card-radius);
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  -webkit-font-smoothing: antialiased;
}
.ssl-guide-item:last-child { margin-bottom: 0; }
.ssl-guide-item:hover {
  border-color: var(--ssl-navy);
  box-shadow: var(--ssl-shadow);
  text-decoration: none;
  color: inherit;
}

.ssl-guide-img {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: calc(var(--ssl-card-radius) - 2px);
  overflow: hidden;
  position: relative;
  background: var(--ssl-color-paper);
}
.ssl-guide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ssl-guide-img .ssl-img-placeholder {
  position: static;
  width: 100%;
  height: 100%;
}

.ssl-guide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.ssl-guide-title {
  font-family: var(--ssl-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ssl-color-heading);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.ssl-guide-excerpt {
  font-size: 13px;
  color: var(--ssl-color-body);
  line-height: 1.5;
}

/* -------------------------------------------------
   SIDEBAR LIST  [layout="sidebar"]
   Rendered as a self-contained widget card so it no
   longer needs a block background wrapper. Matches
   mockup .widget / .eyebrow / #homePop.
------------------------------------------------- */

/* Widget card shell */
.ssl-widget {
  background: var(--ssl-color-bg);
  border: 1px solid var(--ssl-color-border);
  border-radius: var(--ssl-card-radius);
  padding: var(--ssl-widget-padding);
  font-family: var(--ssl-body);
  -webkit-font-smoothing: antialiased;
}

/* Eyebrow heading (mockup .eyebrow, navy) */
.ssl-widget-eyebrow {
  font-family: var(--ssl-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ssl-widget-title);
  line-height: 1;
  margin: 0 0 12px !important; /* theme heading margins bleed in otherwise */
}

.ssl-sidebar-list {
  margin: 0 !important;  /* theme ol adds left margin */
  padding: 0 !important; /* theme ol adds left padding */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-family: var(--ssl-body);
  -webkit-font-smoothing: antialiased;
}

.ssl-sidebar-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ssl-sidebar-num {
  font-family: var(--ssl-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--ssl-color-cat);
  line-height: 1;
  width: 22px;
  flex: 0 0 22px;
}

.ssl-sidebar-body { flex: 1; min-width: 0; }

.ssl-sidebar-title {
  font-family: var(--ssl-heading);
  font-size: 14px;
  font-weight: 500;          /* matches mockup .widget li .x */
  color: var(--ssl-color-heading);
  line-height: 1.38;
  text-decoration: none;
  display: block;
}
.ssl-sidebar-title:hover { text-decoration: underline; color: var(--ssl-color-heading); }

/* -------------------------------------------------
   FEATURED POST  [layout="featured"]
   Matches homepage hero article -- large editorial
   display for the most important post.
------------------------------------------------- */

.ssl-featured {
  display: block;
  font-family: var(--ssl-body);
  -webkit-font-smoothing: antialiased;
}

.ssl-featured-img {
  display: block;
  width: 100%;
  height: 320px;
  border-radius: var(--ssl-card-radius);
  overflow: hidden;
  position: relative;
  background: var(--ssl-color-paper);
  text-decoration: none;
}

.ssl-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.ssl-featured:hover .ssl-featured-img img {
  transform: scale(1.02);
}

.ssl-featured-img .ssl-img-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ssl-featured-body {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Category eyebrow -- yellow uppercase, matches homepage .eyebrow.ye */
.ssl-featured-eyebrow {
  font-family: var(--ssl-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ssl-color-cat);
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.ssl-featured-eyebrow:hover { opacity: .8; }

/* Large editorial headline -- larger and heavier than card titles */
.ssl-featured-title {
  font-family: var(--ssl-heading);
  font-size: 40px;
  font-weight: 800;
  color: var(--ssl-color-heading);
  line-height: 1.07;
  letter-spacing: -.025em;
  margin: 0 !important; /* override theme h2 default margins */
}
/* Neutralise any theme link styles bleeding into the headline */
.ssl-featured-title a,
.ssl-featured-title a:link,
.ssl-featured-title a:visited,
.ssl-featured-title a:hover,
.ssl-featured-title a:focus {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Description -- slightly larger and more airy than card excerpts */
.ssl-featured-desc {
  font-family: var(--ssl-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ssl-color-meta);
  margin: 0 !important; /* theme p margins would break flex gap */
}

/* Byline */
.ssl-featured-byline {
  font-family: var(--ssl-body);
  font-size: 12px;
  color: var(--ssl-color-meta);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.ssl-featured-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ssl-color-heading);
}

/* Date Updated label (all layouts) */
.ssl-date-updated {
  font-size: inherit;
  color: inherit;
}

/* "Read the story ->" CTA button -- colours controlled by Design Tokens */
.ssl-featured-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-family: var(--ssl-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ssl-color-btn-text) !important;
  text-decoration: none !important;
  background: var(--ssl-color-btn-bg);
  padding: 10px 20px;
  border-radius: 6px;
  margin-top: 4px;
  transition: opacity .15s, transform .15s;
  line-height: 1;
}
.ssl-featured-cta:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */

@media (max-width: 1024px) {
  .ssl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ssl-featured-title { font-size: 28px; }
  .ssl-featured-desc  { font-size: 15px; }
  .ssl-featured-img   { height: 220px; }

  .ssl-cols-3,
  .ssl-cols-4 { grid-template-columns: repeat(2, 1fr); }

  .ssl-card.ssl-card-hero {
    flex-direction: column;
  }
  .ssl-card.ssl-card-hero .ssl-card-img {
    flex: none;
    padding-top: 56.25%;
    min-height: 0;
  }
  .ssl-card.ssl-card-hero .ssl-card-title { font-size: 22px; }
}

@media (max-width: 540px) {
  .ssl-cols-2,
  .ssl-cols-3,
  .ssl-cols-4 { grid-template-columns: 1fr; }

  .ssl-guide-img { flex: 0 0 64px; width: 64px; height: 64px; }
}

/* -------------------------------------------------
   COLOUR LOCKS + theme-link-bleed guards
   Every text element is pinned to its token with
   !important so it looks identical whether the markup
   renders it as <a> or <div> (e.g. .ssl-card-cat is a
   link in grids but a div in guides) and so Kadence's
   .entry-content a colours never override it. This is
   what keeps colours consistent across every layout and
   in dark mode.
------------------------------------------------- */
.ssl-card-cat, a.ssl-card-cat,
.ssl-card-cat:link, .ssl-card-cat:visited,
.ssl-featured-eyebrow, a.ssl-featured-eyebrow {
  color: var(--ssl-color-cat) !important;
  text-decoration: none !important;
}
.ssl-card-cat:hover, .ssl-featured-eyebrow:hover { color: var(--ssl-color-cat) !important; opacity: .82; }

.ssl-card-title, .ssl-card-title a,
.ssl-card-title a:link, .ssl-card-title a:visited,
.ssl-guide-title,
.ssl-sidebar-title, .ssl-sidebar-title:link, .ssl-sidebar-title:visited,
.ssl-featured-title, .ssl-featured-title a {
  color: var(--ssl-color-heading) !important;
}
.ssl-card-title a, .ssl-sidebar-title { text-decoration: none !important; }
.ssl-card-title a:hover, .ssl-sidebar-title:hover { text-decoration: underline !important; color: var(--ssl-color-heading) !important; }

.ssl-card-excerpt, .ssl-guide-excerpt { color: var(--ssl-color-body) !important; }
.ssl-featured-desc { color: var(--ssl-color-meta) !important; }
.ssl-card-meta, .ssl-card-meta time, .ssl-card-meta span,
.ssl-featured-byline, .ssl-featured-byline time { color: var(--ssl-color-meta) !important; }
.ssl-card-author, .ssl-featured-author { color: var(--ssl-color-heading) !important; }
.ssl-meta-sep { color: var(--ssl-color-meta) !important; }

/* -------------------------------------------------
   DARK THEME  (activates only under html[data-theme="dark"])
   Overrides the customization tokens directly so it beats
   the inline :root that build_inline_tokens() prints. Values
   match the SS Table dark palette for a consistent look and
   are chosen for WCAG AA body/heading/meta contrast.
------------------------------------------------- */
html[data-theme="dark"] {
  --ssl-color-bg:      #13213A;
  --ssl-color-paper:   #1C2C49;
  --ssl-color-heading: #EDF1F7;
  --ssl-color-body:    #C4CEDD;
  --ssl-color-meta:    #93A0B4;
  --ssl-color-cat:     #FFC21F;
  --ssl-color-border:  #283850;
  --ssl-line:          #283850;
  --ssl-navy:          #1A3056;
  --ssl-yellow:        #FFC21F;
  --ssl-shadow:        0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.4);
  --ssl-shadow-hover:  0 12px 30px rgba(0,0,0,.5);
}


/* -------------------------------------------------
   ARCHIVE MODE  (Load More / infinite scroll)
------------------------------------------------- */
.ssl-archive-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.ssl-load-more {
  font-family: var(--ssl-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ssl-color-btn-text);
  background: var(--ssl-color-btn-bg);
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.ssl-load-more:hover { opacity: .9; transform: translateY(-1px); }
.ssl-archive-sentinel { width: 100%; height: 1px; }
.ssl-archive-spinner { display: flex; justify-content: center; padding: 6px 0; }
.ssl-spin {
  width: 22px; height: 22px;
  border: 2px solid var(--ssl-color-border);
  border-top-color: var(--ssl-color-cat);
  border-radius: 50%;
  animation: ssl-spin .7s linear infinite;
}
@keyframes ssl-spin { to { transform: rotate(360deg); } }