/*
Theme Name:   Fraction Research
Description:  Fraction Research child theme — extends Kadence
Template:     kadence
Version:      1.0.0
Author:       Fraction Research
Text Domain:  fraction-research
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --fr-navy:          #1a2744;
  --fr-navy-dark:     #0d1b2e;
  --fr-navy-hover:    #243358;
  --fr-ice:           #A8D8EA;
  --fr-ice-light:     #e6f4f9;
  --fr-white:         #ffffff;
  --fr-bg-subtle:     #f5f7fb;
  --fr-bg-muted:      #edf0f8;
  --fr-text-1:        #0d1b2e;
  --fr-text-2:        #4b607e;
  --fr-text-3:        #8fa0bb;
  --fr-border:        #dde4f0;
  --fr-border-strong: #b8c8df;
  --fr-mono:          'JetBrains Mono', monospace;
  --fr-sans:          'Work Sans', sans-serif;
  --fr-r:             8px;
  --fr-shadow-sm:     0 1px 3px rgba(13,27,46,0.07), 0 1px 2px rgba(13,27,46,0.04);
  --fr-shadow-md:     0 4px 16px rgba(13,27,46,0.09), 0 2px 6px rgba(13,27,46,0.05);
  --fr-trans:         0.2s ease;
}

/* ============================================================
   BASE + KADENCE OVERRIDES
   ============================================================ */
body {
  font-family: var(--fr-sans) !important;
  color: var(--fr-text-1);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fr-sans) !important;
  color: var(--fr-navy-dark);
}
p { color: var(--fr-text-2); }
a { color: var(--fr-navy); }

/* Announcement / Top Bar */
.site-top-bar, .kadence-top-bar-wrap {
  background: var(--fr-navy) !important;
}
.site-top-bar *, .kadence-top-bar-wrap * {
  font-family: var(--fr-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.78) !important;
}
.site-top-bar strong, .kadence-top-bar-wrap strong {
  color: #ffffff !important;
}

/* Header */
#masthead, .site-header, header.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--fr-border);
  transition: box-shadow var(--fr-trans);
}
.fr-scrolled #masthead,
.fr-scrolled .site-header {
  box-shadow: var(--fr-shadow-sm);
}

/* Kadence nav links */
.kadence-navigation .menu-item a,
.main-navigation .menu-item a,
.nav--toggle-sub a {
  font-family: var(--fr-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fr-text-2) !important;
  transition: color var(--fr-trans) !important;
}
.kadence-navigation .menu-item a:hover,
.main-navigation .menu-item a:hover {
  color: var(--fr-navy-dark) !important;
}

/* Category nav strip (second header row in Kadence) */
.secondary-navigation, .fr-cat-nav {
  background: var(--fr-bg-subtle);
  border-bottom: 1px solid var(--fr-border);
}
.secondary-navigation .menu-item a {
  font-family: var(--fr-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--fr-text-3) !important;
  text-transform: uppercase !important;
}

/* Cart icon & header buttons */
.header-cart-button, .header-search-button {
  border: 1px solid var(--fr-border) !important;
  border-radius: 7px !important;
  color: var(--fr-text-2) !important;
  transition: all var(--fr-trans) !important;
}
.header-cart-button:hover, .header-search-button:hover {
  border-color: var(--fr-border-strong) !important;
  color: var(--fr-navy) !important;
  background: var(--fr-bg-subtle) !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.fr-hero {
  padding: 64px 0 56px !important;
  background: var(--fr-white) !important;
  border-bottom: 1px solid var(--fr-border) !important;
}
.wp-block-columns.fr-hero-grid {
  gap: 80px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.fr-hero-label {
  font-family: var(--fr-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fr-ice); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.fr-hero-label::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--fr-ice);
}
.wp-block-heading.fr-hero-h1 {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 700 !important; letter-spacing: -0.025em !important;
  line-height: 1.12 !important; color: var(--fr-navy-dark) !important;
  margin-bottom: 18px !important;
}
p.fr-hero-sub {
  font-size: 15px !important; color: var(--fr-text-2) !important;
  line-height: 1.75 !important; margin-bottom: 36px !important;
  max-width: 400px !important;
}
.wp-block-buttons.fr-hero-actions { gap: 10px !important; flex-wrap: wrap !important; }

/* Primary button */
.fr-btn-primary .wp-block-button__link,
.fr-btn-primary .wp-element-button {
  background: var(--fr-navy) !important;
  color: #fff !important;
  border: 1.5px solid var(--fr-navy) !important;
  border-radius: var(--fr-r) !important;
  font-size: 14px !important; font-weight: 600 !important;
  padding: 13px 24px !important;
  transition: background var(--fr-trans), transform var(--fr-trans) !important;
  box-shadow: none !important;
}
.fr-btn-primary .wp-block-button__link:hover {
  background: var(--fr-navy-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Secondary button */
.fr-btn-secondary .wp-block-button__link,
.fr-btn-secondary .wp-element-button {
  background: transparent !important;
  color: var(--fr-navy) !important;
  border: 1.5px solid var(--fr-border-strong) !important;
  border-radius: var(--fr-r) !important;
  font-size: 14px !important; font-weight: 600 !important;
  padding: 12px 24px !important;
  transition: background var(--fr-trans), border-color var(--fr-trans) !important;
  box-shadow: none !important;
}
.fr-btn-secondary .wp-block-button__link:hover {
  background: var(--fr-bg-subtle) !important;
  border-color: var(--fr-navy) !important;
  color: var(--fr-navy) !important;
}

/* Hero catalog panel */
.fr-hero-catalog {
  background: var(--fr-bg-subtle);
  border: 1px solid var(--fr-border);
  border-radius: 12px; overflow: hidden; display: block;
}
.fr-hero-catalog .catalog-header {
  padding: 14px 20px; border-bottom: 1px solid var(--fr-border);
  display: flex; align-items: center; justify-content: space-between;
}
.fr-hero-catalog .catalog-header-title {
  font-family: var(--fr-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-text-3);
}
.fr-hero-catalog .catalog-badge {
  font-family: var(--fr-mono); font-size: 10px; color: var(--fr-text-3);
}
.fr-hero-catalog .catalog-badge span { color: var(--fr-navy); font-weight: 500; }
.fr-hero-catalog .catalog-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-bottom: 1px solid var(--fr-border);
  text-decoration: none; color: inherit; transition: background var(--fr-trans);
}
.fr-hero-catalog .catalog-row:last-child { border-bottom: none; }
.fr-hero-catalog .catalog-row:hover { background: #edf2fb; }
.fr-hero-catalog .catalog-row:hover .row-arrow { opacity: 1; }
.fr-hero-catalog .row-name {
  font-size: 14px; font-weight: 600; color: var(--fr-navy-dark);
  display: flex; align-items: center; gap: 10px;
}
.fr-hero-catalog .row-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.fr-hero-catalog .row-right { display: flex; align-items: center; gap: 18px; }
.fr-hero-catalog .row-purity {
  font-family: var(--fr-mono); font-size: 12px; color: var(--fr-text-2);
}
.fr-hero-catalog .row-purity em { font-style: normal; color: var(--fr-navy); font-weight: 500; }
.fr-hero-catalog .row-arrow { color: var(--fr-text-3); opacity: 0; transition: opacity var(--fr-trans); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.fr-trust-strip {
  background: var(--fr-navy);
  padding: 22px 0;
}
.fr-trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1140px; margin: 0 auto; padding: 0 40px;
}
.fr-trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; border-right: 1px solid rgba(255,255,255,0.1);
}
.fr-trust-item:last-child { border-right: none; }
.fr-trust-icon { flex-shrink: 0; }
.fr-trust-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.fr-trust-desc {
  font-family: var(--fr-mono); font-size: 10px;
  color: rgba(255,255,255,0.5); letter-spacing: 0.06em;
}

/* ============================================================
   CATALOG SECTION HEADER + FILTERS
   ============================================================ */
.fr-catalog-section {
  padding: 72px 0 80px !important;
  background: var(--fr-white) !important;
}
.fr-section-header-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid var(--fr-border);
}
.fr-section-title {
  font-size: 20px; font-weight: 700; color: var(--fr-navy-dark);
  letter-spacing: -0.02em; margin: 0;
}
.fr-section-meta {
  font-family: var(--fr-mono); font-size: 11px;
  color: var(--fr-text-3); letter-spacing: 0.06em;
}
.fr-filter-bar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.fr-filter-pill {
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--fr-border); color: var(--fr-text-2);
  background: transparent; cursor: pointer;
  transition: all var(--fr-trans); white-space: nowrap;
  font-weight: 400;
}
.fr-filter-pill:hover { border-color: var(--fr-navy); color: var(--fr-navy); }
.fr-filter-pill.active { background: var(--fr-navy); border-color: var(--fr-navy); color: #fff; }

/* ============================================================
   COA SECTION
   ============================================================ */
.fr-coa-section {
  padding: 72px 0 !important;
  background: var(--fr-bg-subtle) !important;
  border-top: 1px solid var(--fr-border) !important;
  border-bottom: 1px solid var(--fr-border) !important;
}
.wp-block-columns.fr-coa-grid {
  gap: 80px !important; align-items: start !important; flex-wrap: nowrap !important;
}
.wp-block-heading.fr-coa-h2 {
  font-size: 24px !important; font-weight: 700 !important;
  letter-spacing: -0.025em !important; color: var(--fr-navy-dark) !important;
  margin-bottom: 12px !important; line-height: 1.2 !important;
}
p.fr-coa-p {
  font-size: 14px !important; color: var(--fr-text-2) !important;
  line-height: 1.8 !important; margin-bottom: 28px !important;
}

/* COA bullet points */
.fr-coa-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fr-coa-point { display: flex; align-items: flex-start; gap: 12px; }
.fr-coa-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fr-ice-light); flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.fr-coa-point-text { font-size: 14px; color: var(--fr-text-2); line-height: 1.65; }
.fr-coa-point-text strong { color: var(--fr-text-1); font-weight: 600; }
.fr-coa-note {
  margin-top: 24px; padding: 14px 18px;
  background: var(--fr-white); border: 1px solid var(--fr-border); border-radius: var(--fr-r);
}
.fr-coa-note p {
  font-family: var(--fr-mono) !important; font-size: 11px !important;
  color: var(--fr-text-3) !important; letter-spacing: 0.06em !important;
  line-height: 1.9 !important; margin: 0 !important;
}

/* COA panel */
.fr-coa-panel {
  background: var(--fr-white); border: 1px solid var(--fr-border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--fr-shadow-sm);
}
.fr-coa-panel-header {
  background: var(--fr-navy); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.fr-coa-panel-title {
  font-family: var(--fr-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.fr-coa-panel-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--fr-mono); font-size: 10px; color: #4ade80;
}
.fr-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 4px #4ade80;
  animation: fr-pulse 2s ease-in-out infinite;
}
@keyframes fr-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.fr-coa-row {
  display: flex; align-items: baseline;
  padding: 11px 20px; border-bottom: 1px solid var(--fr-border);
}
.fr-coa-row:last-of-type { border-bottom: none; }
.fr-coa-row-key {
  font-family: var(--fr-mono); font-size: 11px; color: var(--fr-text-3);
  letter-spacing: 0.06em; width: 150px; flex-shrink: 0;
}
.fr-coa-row-val {
  font-family: var(--fr-mono); font-size: 12px; color: var(--fr-text-1); font-weight: 500;
}
.fr-coa-row-val.pass { color: #16a34a; }
.fr-coa-row-val.pct  { color: var(--fr-navy); }
.fr-coa-row-val.lot  { color: #92400e; }
.fr-coa-divider { border: none; border-top: 1px solid var(--fr-bg-muted); margin: 0; }
.fr-coa-search {
  padding: 16px 20px; border-top: 1px solid var(--fr-border); display: flex; gap: 8px;
}
.fr-coa-input {
  flex: 1; height: 38px; border: 1px solid var(--fr-border);
  border-radius: 6px; padding: 0 12px;
  font-family: var(--fr-mono); font-size: 12px; color: var(--fr-text-1);
  outline: none; background: var(--fr-bg-subtle);
  transition: border-color var(--fr-trans);
}
.fr-coa-input:focus { border-color: var(--fr-navy); background: #fff; }
.fr-coa-input::placeholder { color: var(--fr-text-3); }
.fr-coa-submit {
  height: 38px; padding: 0 16px; background: var(--fr-navy); color: #fff;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--fr-mono); letter-spacing: 0.04em;
  transition: background var(--fr-trans);
}
.fr-coa-submit:hover { background: var(--fr-navy-hover); }

/* ============================================================
   PROCESS / HOW TO ORDER
   ============================================================ */
.fr-process-section {
  padding: 72px 0 !important;
  background: var(--fr-white) !important;
  border-bottom: 1px solid var(--fr-border) !important;
}
.wp-block-heading.fr-process-h2 {
  font-size: 20px !important; font-weight: 700 !important;
  color: var(--fr-navy-dark) !important; letter-spacing: -0.02em !important;
  margin-bottom: 48px !important;
}
.fr-process-grid-wrap {
  border: 1px solid var(--fr-border); border-radius: 12px; overflow: hidden;
}
.wp-block-columns.fr-process-cols { gap: 0 !important; flex-wrap: nowrap !important; }
.wp-block-column.fr-process-step {
  padding: 32px 28px !important;
  border-right: 1px solid var(--fr-border) !important;
  background: var(--fr-white); transition: background var(--fr-trans);
}
.wp-block-column.fr-process-step:last-child { border-right: none !important; }
.wp-block-column.fr-process-step:hover { background: var(--fr-bg-subtle); }
.fr-step-num {
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--fr-ice); margin-bottom: 16px; font-weight: 500;
}
.wp-block-heading.fr-step-title {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--fr-navy-dark) !important; margin-bottom: 8px !important;
}
p.fr-step-desc {
  font-size: 13px !important; color: var(--fr-text-2) !important;
  line-height: 1.75 !important; margin: 0 !important;
}

/* ============================================================
   COMPLIANCE SECTION
   ============================================================ */
.fr-compliance-section {
  padding: 48px 0 !important;
  background: var(--fr-bg-subtle) !important;
  border-bottom: 1px solid var(--fr-border) !important;
}
.fr-compliance-inner {
  display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap;
}
.fr-compliance-icon { flex-shrink: 0; margin-top: 3px; }
.fr-compliance-body { flex: 1; min-width: 260px; }
.fr-compliance-body h4 {
  font-size: 15px; font-weight: 700; color: var(--fr-navy-dark); margin-bottom: 8px;
}
.fr-compliance-body p {
  font-size: 13px; color: var(--fr-text-2); line-height: 1.8; max-width: 620px; margin: 0;
}
.fr-compliance-stamp {
  flex-shrink: 0; border: 1px solid var(--fr-border-strong);
  border-radius: var(--fr-r); padding: 14px 20px;
}
.fr-stamp-line {
  font-family: var(--fr-mono); font-size: 10px; color: var(--fr-text-3);
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 2.2; display: block;
}
.fr-stamp-line.bold { color: var(--fr-text-2); font-weight: 500; }

/* ============================================================
   FOOTER — Kadence Footer Builder overrides
   ============================================================ */
.site-footer, #colophon {
  background: var(--fr-navy-dark) !important;
}
.site-footer *, #colophon * {
  font-family: var(--fr-sans) !important;
}
.site-footer a, #colophon a {
  color: rgba(255,255,255,0.55) !important;
  transition: color var(--fr-trans) !important;
}
.site-footer a:hover, #colophon a:hover {
  color: #fff !important;
}
.site-footer p, #colophon p {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}
.footer-widget-title, .widgettitle {
  font-family: var(--fr-mono) !important;
  font-size: 10px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important;
  margin-bottom: 16px !important;
}
.footer-bottom-wrap {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.footer-bottom-wrap * {
  font-family: var(--fr-mono) !important;
  font-size: 10px !important; color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.fr-reveal { opacity: 0; transition: opacity 0.55s ease; }
.fr-reveal.fr-visible { opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .wp-block-columns.fr-hero-grid { flex-wrap: wrap !important; gap: 40px !important; }
  .fr-hero-catalog { display: none; }
  .wp-block-columns.fr-coa-grid { flex-wrap: wrap !important; gap: 40px !important; }
  .wp-block-columns.fr-process-cols { flex-wrap: wrap !important; }
  .wp-block-column.fr-process-step { border-right: none !important; border-bottom: 1px solid var(--fr-border) !important; }
  .wp-block-column.fr-process-step:last-child { border-bottom: none !important; }
}
@media (max-width: 768px) {
  .fr-hero { padding: 40px 0 36px !important; }
  .fr-trust-grid { grid-template-columns: 1fr 1fr !important; padding: 0 22px !important; }
  .fr-trust-item:nth-child(2) { border-right: none !important; }
  .fr-trust-item:nth-child(3) { border-right: none !important; }
  .fr-compliance-inner { flex-direction: column; }
}
@media (max-width: 540px) {
  .fr-trust-grid { grid-template-columns: 1fr !important; }
  .fr-trust-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-reveal { opacity: 1 !important; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}