/* =====================================================================
   BLOG UI STANDARD — aligned to flicknexs.com
   Values below were measured off the live marketing site on 2026-08-20,
   not invented here. The blog and the main site should not look like two
   different companies.

     UI / body font   Hanken Grotesk
     Heading font     Cormorant Garamond   (h1 38px, weight 400, ls -0.57px)
     Body             15px / 1.65 on the main site; the blog runs larger
                      because it carries long-form reading, not landing copy
     Button           #3F2170, white, Hanken Grotesk 16px/600,
                      padding 14px 32px, radius 2px, no shadow

   Correction to an earlier version of this file: it tried to retire
   Cormorant Garamond and forced 8px radius with a drop shadow on buttons.
   Both were wrong. Cormorant is the brand heading face, and the brand
   button is flat with a 2px radius.
   ===================================================================== */

:root{
  --fnx-font-ui:   "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fnx-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fnx-font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --fnx-purple: #3F2170;
  --fnx-ink:    #17121F;
  --fnx-rule:   #E6E4EA;

  --fnx-r-btn: 2px;    /* matches flicknexs.com */
  --fnx-r-sm:  4px;
  --fnx-r-md:  8px;    /* cards, images, tables */
  --fnx-r-pill: 999px;
}

/* --- buttons: identical to the main site ----------------------------- */
.wp-block-button__link, .wp-element-button,
a.btn, .btn, button:not(.plain), input[type="submit"]{
  font-family: var(--fnx-font-ui) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  padding: 14px 32px !important;
  border-radius: var(--fnx-r-btn) !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.wp-block-button__link:not(.is-style-outline), .wp-element-button{
  background: var(--fnx-purple) !important;
  color: #fff !important;
  border: 0 !important;
}

/* --- type: brand faces ----------------------------------------------- */
html body h1, html body h2, html body h3, html body h4,
html body .wp-block-post-title{
  font-family: var(--fnx-font-head) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}
html body nav, html body .wp-block-navigation,
html body .widget, html body .breadcrumb, html body .rank-math-breadcrumb,
html body .post-meta, html body figcaption, html body .fnx-summarize-label{
  font-family: var(--fnx-font-ui) !important;
}

/* Heading scale. The site was running h1 32px against h2 29.6px, a 1.08x
   step, which reads as an accident rather than a hierarchy. */
html body .wp-block-post-title{ font-size: 40px !important; line-height: 1.12 !important; }
html body .wp-block-post-content h2{ font-size: 30px !important; line-height: 1.25 !important; }
html body .wp-block-post-content h3{ font-size: 24px !important; line-height: 1.3 !important; }

/* --- radius ---------------------------------------------------------- */
.wp-block-image img, figure img, .wp-block-post-featured-image img,
.wp-block-embed iframe, .wp-block-video video,
.wp-block-table table, .wp-block-quote, .wp-block-code, pre{
  border-radius: var(--fnx-r-md);
}
code:not(pre code), .tag, .post-categories a{ border-radius: var(--fnx-r-sm); }
.avatar, img[class*="avatar"]{ border-radius: var(--fnx-r-pill) !important; }
.wp-block-site-logo img, img[class*="logo"], .fnx-summarize-link svg{ border-radius: 0 !important; }

hr, .wp-block-separator, .wp-block-table td, .wp-block-table th{ border-color: var(--fnx-rule); }

@media (max-width: 781px){
  html body .wp-block-post-title{ font-size: 30px !important; }
  html body .wp-block-post-content h2{ font-size: 24px !important; }
  html body .wp-block-post-content h3{ font-size: 20px !important; }
  .wp-block-button__link, .wp-element-button{ padding: 12px 24px !important; font-size: 15px !important; }
}