:root{
  --oc-bg:#fbfdff;
  --oc-card:#ffffff;
  --oc-text:#0b1220;
  --oc-muted:#475569;
  --oc-border:rgba(15,23,42,.10);
  --oc-accent:#0ea5a4;

  /* Modern serif-ish: prefer system serif stacks */
  --oc-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
  --oc-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}

/* Page background */
body, .site, .viewport, .gh-site{
  background: var(--oc-bg) !important;
  color: var(--oc-text) !important;
}

/* Header */
.gh-head{
  background: rgba(251,253,255,.92) !important;
  border-bottom:1px solid var(--oc-border) !important;
  backdrop-filter: blur(10px);
}
.gh-head a{color: var(--oc-text) !important;}

/* Publication header image: reduce dominance */
.gh-header.has-image .gh-header-image{filter:saturate(85%) contrast(95%); opacity:.18}
.gh-header.is-classic{min-height:auto}
.gh-header-inner{padding-top:42px !important; padding-bottom:16px !important}

/* Editorial typography */
.gh-header-title,
.gh-card-title,
.gh-article-title,
.gh-container-title,
.gh-article h1,
.gh-article h2,
.gh-article h3{
  font-family: var(--oc-serif) !important;
  letter-spacing: -0.02em;
}

/* Article title sizing balance (title was overpowering body) */
.gh-article-title{
  /* -6px vs original */
  font-size: clamp(24px, 3.4vw, 40px) !important;
  line-height: 1.06 !important;
}
@media (max-width: 720px){
  /* -6px vs original */
  .gh-article-title{font-size: clamp(20px, 7.2vw, 30px) !important;}
}

/* Body text */
body,
.gh-card-excerpt,
.gh-article-excerpt,
.gh-content,
.gh-content p,
.gh-content li{
  font-family: var(--oc-sans) !important;
  color: rgba(11,18,32,.86);
}

/* Container widths for magazine feel */
.gh-inner{max-width: 1120px !important;}
.gh-container.is-list .gh-container-inner{padding-top:18px !important;}

/* Feed layout */
.gh-feed{gap:16px !important;}
.gh-card{
  background: var(--oc-card) !important;
  border:1px solid var(--oc-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}
.gh-card-image img{border-radius:14px;}
.gh-card-meta,
.gh-card-author,
.gh-card-date{color: rgba(71,85,105,.85) !important; font-size:12px !important;}

/* Accent elements */
a:hover{color: var(--oc-accent) !important;}
.gh-btn-primary, .gh-button-primary{
  background: linear-gradient(135deg, rgba(14,165,164,.95), rgba(14,165,164,.60)) !important;
  border-color: rgba(14,165,164,.40) !important;
  color:#062a2a !important;
}

/* Section title styling */
.gh-container-title{
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(71,85,105,.9) !important;
}

/* Regulatory watch widget should still match */
.oc-widget{border:1px solid var(--oc-border);background:var(--oc-card);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(2,6,23,.05)}
.oc-item{background:rgba(2,6,23,.02)}

@media (max-width: 720px){
  .gh-inner{max-width: 100% !important;}
  .gh-header-inner{padding-top:28px !important;}
}

/* --- Professional polish (Oceanick) --- */

/* Slightly tighter, more editorial nav */
.gh-head{
  box-shadow: 0 10px 30px rgba(2,6,23,.05);
}
.gh-head-logo{
  font-family: var(--oc-serif) !important;
  letter-spacing: -0.02em;
}

/* Make cards feel less "app-like" and more magazine */
.gh-card{
  box-shadow: 0 12px 30px rgba(2,6,23,.05);
}
.gh-card-title{line-height:1.18;}
.gh-card-excerpt{line-height:1.55;}

/* Post/page typography polish */
.gh-content{
  /* +2px vs previous */
  font-size: calc(1.10rem + 2px);
  line-height: 1.75;
}
.gh-content h2{margin-top:2.2em;}
.gh-content h3{margin-top:1.8em;}
.gh-content a{color: #0b1220; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}
.gh-content a:hover{color: var(--oc-accent) !important;}

/* Footer: make it look like a real publication */
.gh-footer{
  border-top: 1px solid var(--oc-border) !important;
  background: rgba(251,253,255,.92) !important;
}
.gh-footer-menu a{color: rgba(15,23,42,.78) !important;}
.gh-footer-menu a:hover{color: var(--oc-accent) !important;}

/* Slider + widgets spacing harmony */
#latestNewsSlider, .regwatch-box, #guidelinesFinder{
  margin-top: 18px;
}

/* --- Option B: Newspaper/Magazine layout enhancements --- */

/* Make section title feel like a newspaper kicker */
.gh-container-title{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.gh-container-title:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:2px;
  background: linear-gradient(90deg, var(--oc-accent), rgba(14,165,164,0));
}

/* Subtle page rules */
.gh-container.is-list .gh-container-inner{
  border-top: 1px solid rgba(15,23,42,.06);
}

/* Feed as 2-column on desktop (magazine grid) */
@media (min-width: 980px){
  .gh-feed{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .gh-card{
    height: 100%;
  }
}

/* Slightly more compact cards */
.gh-card{border-radius: 16px !important;}
.gh-card-content{padding: 18px !important;}

/* Typography more "print" */
.gh-card-title{font-size: 22px !important;}
@media (max-width: 720px){
  .gh-card-title{font-size: 20px !important;}
}

/* Unify card text formatting to match Latest News slider */
/* (Use high-specificity home scoping so Ghost theme CSS can't override it) */
body.home-template .gh-card-title,
body.home-template .gh-card-title.is-title{
  font-family: var(--oc-serif) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

body.home-template .gh-card-excerpt,
body.home-template .gh-card-excerpt.is-body{
  color: rgba(11,18,32,.72) !important;
  line-height: 1.55 !important;
}

body.home-template .gh-card-meta,
body.home-template .gh-card-author,
body.home-template .gh-card-date{
  font-size: 12px !important;
  color: rgba(71,85,105,.85) !important;
}

/* Match small kicker/title style used by Latest News */
.oc-section-kicker,
.oc-section-link{
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Widget sections: match cards */
.regwatch-box, #guidelinesFinder, #latestNewsSlider{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(2,6,23,.05);
}

/* Top story + sectioned homepage */
.oc-section-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(71,85,105,.88);
  margin: 18px 0 10px;
}
.oc-topstory{
  /* More breathing room around Top Story */
  margin: 16px 0 26px;
  padding: 10px 12px;
}
@media (max-width: 720px){
  .oc-topstory{padding: 8px 8px;}
}
.oc-topstory-card .gh-card{
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
}
@media (min-width: 980px){
  .oc-topstory-card .gh-card-title{font-size: 30px !important;}
  .oc-topstory-card .gh-card-excerpt{font-size: 16px;}
}

/* Sections: 3 side-by-side blocks on desktop */
.oc-sections{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px){
  .oc-sections{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.oc-section{
  margin: 0;
  border: 1px solid rgba(15,23,42,.10);
  background: var(--oc-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.oc-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;}
.oc-section-title{font-family: var(--oc-serif) !important; font-size: 18px; margin:0; letter-spacing:-0.02em;}
.oc-section-link{font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: rgba(71,85,105,.9) !important; text-decoration:none !important;}
.oc-section-link:hover{color: var(--oc-accent) !important;}

/* Inside each section: keep posts as a vertical list so cards stay readable */
.oc-section-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Make section cards slightly tighter */
.oc-section-grid .gh-card-title{font-size: 18px !important;}
.oc-section-grid .gh-card-excerpt{display:none;}

/* Latest section: align left/right edges with sections above */
.oc-latest{margin-top: 18px;}
.oc-latest .gh-container,
.oc-latest .gh-container.is-list{margin: 0 !important;}
.oc-latest .gh-container-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Widgets: top lane (full width) */
#ocHomeWidgetsTop{display:block; width:100%; clear:both; margin-top:18px;}

/* Widgets: dedicated 2-col lane */
#ocHomeWidgets{
  display:grid;
  width:100%;
  clear:both;
  gap:16px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}
@media (min-width: 980px){
  #ocHomeWidgets{grid-template-columns: 1fr 1fr; align-items:start;}
}

#ocWidgetLeft, #ocWidgetRight{min-width:0;}

/* Keep individual widgets full width within their column */
#ocHomeWidgets #regwatch,
#ocHomeWidgets #guidelinesFinder{width:100%;}

/* Slider is in top lane */
#ocHomeWidgetsTop .news-slider{width:100%;}

/* Equal-height widgets (Guidelines + RegWatch) with internal scroll */
:root{ --oc-widget-fixed-h: 560px; }

@media (min-width: 980px){
  #ocHomeWidgets #guidelinesFinder,
  #ocHomeWidgets #regwatch{
    height: var(--oc-widget-fixed-h);
    display:flex;
    flex-direction:column;
  }

  /* Make the content areas scroll */
  #ocHomeWidgets #guidelinesFinder .guidelines-results{
    flex:1;
    overflow:auto;
    min-height:0;
    padding-right: 6px;
  }
  #ocHomeWidgets #regwatch .oc-list{
    flex:1;
    overflow:auto;
    min-height:0;
    padding-right: 6px;
  }

  /* Optional: nicer scrollbar */
  #ocHomeWidgets #guidelinesFinder .guidelines-results::-webkit-scrollbar,
  #ocHomeWidgets #regwatch .oc-list::-webkit-scrollbar{width:10px}
  #ocHomeWidgets #guidelinesFinder .guidelines-results::-webkit-scrollbar-thumb,
  #ocHomeWidgets #regwatch .oc-list::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.18);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  #ocHomeWidgets #guidelinesFinder .guidelines-results::-webkit-scrollbar-track,
  #ocHomeWidgets #regwatch .oc-list::-webkit-scrollbar-track{background: transparent;}

  #ocHomeWidgets #guidelinesFinder .guidelines-results{scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.18) transparent;}
  #ocHomeWidgets #regwatch .oc-list{scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.18) transparent;}
}
