/* ============================================================
   ERLER LAB — Custom CSS
   Paste into: Appearance → Customize → Additional CSS
   Last updated: May 2026
   ============================================================ */


/* ── 1. GOOGLE FONTS ─────────────────────────────────────────
   Only needed if you haven't set these in
   Astra Customizer → Global → Typography already.
   If you have, delete these two lines.               ──────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600&display=swap');


/* ── 2. COLOUR VARIABLES ─────────────────────────────────────
   Change colours here — they update everywhere.      ──────── */
:root {
  --navy:        #0D1B2A;
  --teal:        #4AADBB;
  --teal-light:  #E4F5F7;
  --text:        #444444;
  --text-muted:  #888888;
  --border:      #EEEEEE;
  --bg-light:    #F7F8FA;
}


/* ── 3. GLOBAL TYPOGRAPHY ────────────────────────────────────*/
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--navy);
  line-height: 1.25;
  font-weight: 400;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem;   }
h3 { font-size: 1.5rem; }

/* H4 stays in Inter — used for sub-section labels */
h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
}

a            { color: var(--teal); }
a:hover      { color: var(--navy); text-decoration: none; }
p            { margin-bottom: 1.2rem; }


/* ── 4. HEADER ───────────────────────────────────────────────*/
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  transition: box-shadow 0.25s ease;
}

/* Swap border for shadow when sticky */
.ast-sticky-active .site-header,
.ast-sticky-active .main-header-bar {
  border-bottom: none !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
}


/* ── 5. NAVIGATION ───────────────────────────────────────────*/
.main-header-menu .menu-item > a,
.main-navigation .menu-item > a {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px !important;
  font-weight: 400;
  color: #666666 !important;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  transition: color 0.15s;
}

.main-header-menu .menu-item > a:hover,
.main-navigation .menu-item > a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
  color: var(--navy) !important;
}

/* Dropdown */
.main-header-menu .sub-menu {
  border-top: 2px solid var(--teal) !important;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.main-header-menu .sub-menu .menu-item > a {
  font-size: 13px !important;
  padding: 8px 18px;
}


/* ── 6. HEADER CTA BUTTON ────────────────────────────────────*/
.ast-header-custom-widget .ast-custom-button,
.ast-button-wrap .ast-custom-button,
#masthead .ast-custom-button {
  background:    var(--navy) !important;
  color:         #ffffff !important;
  border:        none !important;
  border-radius: 7px !important;
  padding:       9px 20px !important;
  font-family:   'Inter', sans-serif !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  letter-spacing: 0.01em;
  transition:    background 0.2s ease !important;
}

.ast-header-custom-widget .ast-custom-button:hover,
.ast-button-wrap .ast-custom-button:hover {
  background: #1a2e4a !important;
}


/* ── 7. PAGE BUTTONS / CTAs ──────────────────────────────────*/

/* Filled button */
.wp-block-button .wp-block-button__link {
  background:    var(--navy) !important;
  color:         #ffffff !important;
  border-radius: 7px !important;
  padding:       12px 28px !important;
  font-family:   'Inter', sans-serif !important;
  font-size:     14px !important;
  font-weight:   500 !important;
  border:        none !important;
  transition:    background 0.2s, transform 0.15s !important;
}

.wp-block-button .wp-block-button__link:hover {
  background:  #1a2e4a !important;
  transform:   translateY(-1px);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background:  transparent !important;
  color:       var(--navy) !important;
  border:      1.5px solid var(--navy) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background:  var(--navy) !important;
  color:       #ffffff !important;
  transform:   translateY(-1px);
}


/* ── 8. BLOCKQUOTES → research sub-section cards ─────────────
   The Research page uses blockquotes for sub-topics.
   This transforms them from pull-quotes into styled cards.  ─ */
blockquote {
  border-left:  3px solid var(--teal) !important;
  background:   var(--teal-light) !important;
  border-radius: 0 8px 8px 0 !important;
  padding:      18px 22px !important;
  margin:       1.5rem 0 !important;
  font-style:   normal !important;
  color:        var(--text) !important;
}

blockquote p {
  font-size:    14.5px !important;
  line-height:  1.7 !important;
  margin-bottom: 0.6rem !important;
}

blockquote p:last-child { margin-bottom: 0 !important; }

/* Bold text inside blockquote becomes the sub-section heading */
blockquote strong {
  display:        block;
  font-family:    'Inter', sans-serif;
  font-size:      11.5px;
  font-weight:    600;
  color:          var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom:  6px;
}


/* ── 9. PAGE CONTENT LAYOUT ──────────────────────────────────*/
.entry-content {
  max-width: 840px;
}

.entry-content p {
  font-size:   16px;
  line-height: 1.8;
  color:       var(--text);
}

/* Images */
.wp-block-image img,
.entry-content img {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* Horizontal rules */
hr,
.wp-block-separator {
  border:      none !important;
  border-top:  0.5px solid var(--border) !important;
  margin:      2.5rem 0 !important;
}


/* ── 10. HIDE BLOG/POST JUNK ON PAGES ────────────────────────
   Removes date, author, comments, share buttons on pages.  ─ */

/* Post meta (date, author, categories) */
.page .entry-meta,
.page .posted-on,
.page .byline,
.page .cat-links,
.page .tags-links {
  display: none !important;
}

/* Comments section */
.page .comments-area,
.page #comments,
.page .comment-respond {
  display: none !important;
}

/* WordPress.com share / like widgets */
.sharedaddy,
.sd-sharing-enabled,
.sd-block.sd-like,
.wpl-button,
.wpl-likebox,
.post-likes-widget-placeholder,
div[class*="jp-relatedposts"],
.wp-block-jetpack-like {
  display: none !important;
}

/* WordPress.com "Create a website" footer link */
a[href*="wordpress.com/ref=footer"],
a[href*="wordpress.com/?ref=footer"],
#footer-thankyou {
  display: none !important;
}

/* "View post in Reader / Report content" bar */
.wp-toolbar,
#wpadminbar {
  /* Keep this — it's your admin toolbar, visible only to you */
}


/* ── 11. FOOTER ──────────────────────────────────────────────*/
.site-footer,
footer.site-footer {
  background: var(--navy) !important;
  color:      rgba(255, 255, 255, 0.55) !important;
}

.site-footer p,
.site-footer li,
.site-footer span {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13.5px;
}

.site-footer a {
  color:      rgba(255, 255, 255, 0.7) !important;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: var(--teal) !important;
}

/* Footer widget headings */
.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
  font-family:    'Inter', sans-serif !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          #ffffff !important;
  margin-bottom:  12px;
}

/* Footer bottom bar */
.ast-footer-copyright {
  color:         rgba(255, 255, 255, 0.3) !important;
  font-size:     12px !important;
  border-top:    0.5px solid rgba(255, 255, 255, 0.1) !important;
  padding-top:   14px !important;
  margin-top:    14px;
}


/* ── 12. MOBILE ───────────────────────────────────────────────*/
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.25rem; }

  .entry-content {
    padding-left:  16px;
    padding-right: 16px;
  }

  blockquote {
    padding: 14px 16px !important;
  }
}

/* Counter number */
.uagb-counter__number,
.uagb-counter-block .uagb-counter-title-wrap .uagb-counter-block-date {
  color: #0D1B2A !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Counter label */
.uagb-counter__title,
.uagb-counter-block .uagb-counter-block-title {
  color: #666666 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}