/*
Theme Name:   Softrecs
Theme URI:    https://softrecs.com/
Description:  Child theme for Kadence. Research-publication design system for softrecs.com — warm paper ground, Newsreader + IBM Plex Sans/Mono, hairline rules, no shadows, and two semantic colours ("cited" / "absent") that carry the site's actual subject. Overrides the Kadence defaults that make WordPress business sites recognisable.
Author:       Alauddin Chowdhury
Version:      1.0.0
Template:     kadence
Text Domain:  softrecs
*/

/* =========================================================
   1. TOKENS
   Light values live on :root. Dark mode is a token swap only,
   driven by Kadence's Colour Palette Switch, which stamps
   body.color-switch-dark. Never hard-code a hex in the editor —
   always pick a palette slot, or dark mode will not follow.
   ========================================================= */

:root{
  --sr-paper:#FBFAF6;
  --sr-surface:#FFFFFF;
  --sr-surface-2:#F2F0EA;
  --sr-rule:#E2DDD1;
  --sr-rule-2:#C6BFAF;
  --sr-ink:#171512;
  --sr-ink-2:#4A453C;
  --sr-ink-3:#7A7365;
  --sr-accent:#17475F;
  --sr-accent-soft:#E4EDF2;
  --sr-cited:#2C6B45;
  --sr-cited-soft:#E4EFE7;
  --sr-absent:#9B3826;
  --sr-absent-soft:#F7E7E2;
  --sr-ochre:#8A5A0F;
  --sr-ochre-soft:#F6EEDD;

  --sr-measure:700px;
  --sr-wide:1120px;
  --sr-radius:2px;

  --sr-font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --sr-font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sr-font-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  color-scheme:light;
}

body.color-switch-dark{
  --sr-paper:#101211;
  --sr-surface:#171A19;
  --sr-surface-2:#1E2220;
  --sr-rule:#2A2E2C;
  --sr-rule-2:#3F4441;
  --sr-ink:#EDEBE5;
  --sr-ink-2:#B6B2A8;
  --sr-ink-3:#857F73;
  --sr-accent:#83B9D3;
  --sr-accent-soft:#142A36;
  --sr-cited:#74C291;
  --sr-cited-soft:#16281D;
  --sr-absent:#E28E79;
  --sr-absent-soft:#2E1A15;
  --sr-ochre:#D8A65E;
  --sr-ochre-soft:#2C2211;
  color-scheme:dark;
}

/* Respect the OS preference for visitors who have not used the toggle. */
@media (prefers-color-scheme:dark){
  body:not(.color-switch-light):not(.color-switch-dark){
    --sr-paper:#101211;
    --sr-surface:#171A19;
    --sr-surface-2:#1E2220;
    --sr-rule:#2A2E2C;
    --sr-rule-2:#3F4441;
    --sr-ink:#EDEBE5;
    --sr-ink-2:#B6B2A8;
    --sr-ink-3:#857F73;
    --sr-accent:#83B9D3;
    --sr-accent-soft:#142A36;
    --sr-cited:#74C291;
    --sr-cited-soft:#16281D;
    --sr-absent:#E28E79;
    --sr-absent-soft:#2E1A15;
    --sr-ochre:#D8A65E;
    --sr-ochre-soft:#2C2211;
    color-scheme:dark;
  }
}

/* =========================================================
   2. UNDO THE KADENCE LOOK
   These four rules do most of the visual work. The default
   card shadow, the 16-20px radius, the centred three-column
   feature row and the oversized container are what make a
   Kadence site recognisable as a Kadence site.
   ========================================================= */

.entry-content .wp-block-group,
.entry-content .kt-blocks-info-box-link-wrap,
.kadence-column-inner,
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap,
.wp-block-kadence-column,
.entry-content-wrap,
.content-bg,
.post-thumbnail-inner,
.wp-block-image img,
.kb-testimonial-item-wrap{
  box-shadow:none !important;
  border-radius:var(--sr-radius) !important;
}

.site .content-container,
.site .entry-content-wrap{
  background:transparent;
  padding:0;
}

/* Kadence's default info-box card becomes a hairline row. */
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap{
  border:none;
  border-top:1px solid var(--sr-rule);
  padding:20px 0;
  background:transparent !important;
}

/* =========================================================
   3. BASE
   ========================================================= */

body{
  background:var(--sr-paper);
  color:var(--sr-ink);
  font-family:var(--sr-font-display);
  font-size:18px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

.entry-content > *{
  max-width:var(--sr-measure);
  margin-left:auto;
  margin-right:auto;
}
.entry-content > .alignwide,
.entry-content > .wp-block-table,
.entry-content > .sr-wide{
  max-width:var(--sr-wide);
}
.entry-content > .alignfull{max-width:none}

h1,h2,h3,h4,h5,h6{
  font-family:var(--sr-font-display);
  font-weight:600;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--sr-ink);
}
h1{font-size:clamp(31px,4.6vw,50px);line-height:1.06;letter-spacing:-.022em}
h2{font-size:clamp(23px,2.9vw,31px);line-height:1.16;margin-top:2em}
h3{font-size:21px;margin-top:1.8em}
h4{font-family:var(--sr-font-ui);font-size:16px;letter-spacing:0;margin-top:1.6em}

p{margin:.72em 0}
a{color:var(--sr-accent);text-underline-offset:2px}
strong{font-weight:600}
li::marker{color:var(--sr-ink-3)}

/* Typographic details almost nobody sets — and the reason
   this reads as considered rather than default. */
.entry-content p{font-variant-numeric:oldstyle-nums proportional-nums}
table,.sr-data,.sr-meta .v{font-variant-numeric:tabular-nums}

/* =========================================================
   4. HEADER, NAV, BUTTONS
   ========================================================= */

#main-header .site-container,
#masthead .site-container{max-width:var(--sr-wide)}

.site-branding .site-title{
  font-family:var(--sr-font-display);
  font-weight:600;
  letter-spacing:-.018em;
  font-size:20px;
}
.header-navigation .menu-container > ul > li > a{
  font-family:var(--sr-font-ui);
  font-size:14px;
  font-weight:400;
  color:var(--sr-ink-2);
  text-transform:none;
  letter-spacing:0;
}
.header-navigation .menu-container > ul > li > a:hover,
.header-navigation .menu-container > ul > li.current-menu-item > a{color:var(--sr-accent)}

/* Kadence underlines/highlights the active item with a thick bar. */
.header-navigation .menu-container > ul > li > a:after{display:none !important}

.wp-block-button__link,
.button,
button,
input[type="submit"]{
  font-family:var(--sr-font-ui);
  font-size:13.5px;
  font-weight:500;
  border-radius:var(--sr-radius);
  border:1px solid var(--sr-accent);
  background:var(--sr-accent);
  color:var(--sr-paper);
  padding:8px 16px;
  box-shadow:none;
  text-transform:none;
  letter-spacing:0;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--sr-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--sr-accent-soft)}
.wp-block-button__link:hover{background:var(--sr-ink);border-color:var(--sr-ink)}

/* =========================================================
   5. TABLES — a first-class element on this site
   ========================================================= */

.sr-scroll{overflow-x:auto;margin:22px 0}
.entry-content table,
.wp-block-table table{
  border-collapse:collapse;
  width:100%;
  font-family:var(--sr-font-ui);
  font-size:14px;
  line-height:1.5;
}
.entry-content th{
  text-align:left;
  font-family:var(--sr-font-data);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--sr-ink-3);
  padding:0 14px 8px 0;
  border-bottom:1px solid var(--sr-ink);
  white-space:nowrap;
  background:transparent;
}
.entry-content td{
  padding:9px 14px 9px 0;
  border-bottom:1px solid var(--sr-rule);
  vertical-align:top;
  background:transparent;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:transparent}
.entry-content td.n,.entry-content th.n{
  text-align:right;
  font-family:var(--sr-font-data);
  white-space:nowrap;
  padding-right:0;
}

/* Semantic colour — used only for presence/absence in an answer. */
.sr-cited{color:var(--sr-cited)}
.sr-absent{color:var(--sr-absent)}
.sr-bar{display:inline-block;height:7px;background:var(--sr-cited);vertical-align:middle;margin-right:9px}
.sr-bar.is-low{background:var(--sr-absent)}

/* =========================================================
   6. SITE COMPONENTS
   ========================================================= */

.sr-eyebrow{
  font-family:var(--sr-font-data);
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sr-accent);
  font-weight:500;
  display:block;
}
.sr-eyebrow.is-muted{color:var(--sr-ink-3)}

/* The masthead metric strip. */
.sr-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--sr-ink);border-bottom:1px solid var(--sr-rule)}
.sr-meta > div{flex:1 1 150px;padding:12px 20px 14px;border-right:1px solid var(--sr-rule)}
.sr-meta > div:last-child{border-right:none}
.sr-meta .k{font-family:var(--sr-font-data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sr-ink-3)}
.sr-meta .v{font-family:var(--sr-font-data);font-size:22px;font-weight:500;margin-top:4px}

/* Answer-first block — the 40–60 word extractable paragraph
   that every check and guide page opens with. */
.sr-answer{
  font-size:20px;
  line-height:1.5;
  color:var(--sr-ink);
  border-left:2px solid var(--sr-cited);
  padding-left:20px;
  margin:22px auto;
}

/* Visible last-updated line. Freshness is one of the few
   well-evidenced factors, and it has to be readable text,
   not only schema. */
.sr-updated{
  font-family:var(--sr-font-data);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sr-ink-3);
}

.sr-note{border-left:2px solid var(--sr-accent);padding:1px 0 1px 18px;margin:26px auto;color:var(--sr-ink-2)}
.sr-note.is-caution{border-left-color:var(--sr-ochre)}
.sr-note.is-stop{border-left-color:var(--sr-absent)}
.sr-note .label{
  display:block;font-family:var(--sr-font-ui);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--sr-ink-3);margin-bottom:5px;
}

/* Offer rows — replaces Kadence's three-column pricing cards. */
.sr-rows{border-top:1px solid var(--sr-ink)}
.sr-row{display:grid;grid-template-columns:1fr auto;gap:8px 26px;padding:18px 0;border-bottom:1px solid var(--sr-rule);align-items:start}
.sr-row h4{margin:0 0 5px;font-family:var(--sr-font-display);font-size:20px;font-weight:600}
.sr-row p{margin:0;color:var(--sr-ink-2);font-size:16.5px;max-width:58ch}
.sr-row .price{font-family:var(--sr-font-data);font-size:15px;font-weight:500;white-space:nowrap;text-align:right}
.sr-row .price small{display:block;font-size:11px;color:var(--sr-ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-weight:400}

/* Breadcrumbs, rendered as visible text — a chunk retrieved
   on its own carries no context otherwise. */
.rank-math-breadcrumb,
.kadence-breadcrumbs{
  font-family:var(--sr-font-data);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--sr-ink-3);
}
.rank-math-breadcrumb a,.kadence-breadcrumbs a{color:var(--sr-ink-3);text-decoration:none}
.rank-math-breadcrumb a:hover,.kadence-breadcrumbs a:hover{color:var(--sr-accent)}

/* Code and terminal transcripts. */
.entry-content pre,
.wp-block-code{
  font-family:var(--sr-font-data);
  font-size:12.5px;
  line-height:1.7;
  background:var(--sr-surface-2);
  border:1px solid var(--sr-rule);
  border-radius:0;
  padding:16px 18px;
  overflow-x:auto;
  color:var(--sr-ink-2);
}
.entry-content :not(pre) > code{
  font-family:var(--sr-font-data);
  font-size:.88em;
  background:var(--sr-surface-2);
  padding:1px 5px;
  border-radius:0;
}

footer.site-footer{
  background:var(--sr-paper);
  border-top:1px solid var(--sr-rule);
  font-family:var(--sr-font-ui);
  font-size:13px;
  color:var(--sr-ink-3);
}
footer.site-footer a{color:var(--sr-ink-3);text-decoration:none}
footer.site-footer a:hover{color:var(--sr-accent)}

/* =========================================================
   7. ACCESSIBILITY & MOTION
   ========================================================= */

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--sr-accent);
  outline-offset:3px;
  border-radius:var(--sr-radius);
}

/* There is no scroll animation on this site. A page that
   renders complete on first paint reads more expert than one
   that animates itself in, and it is what a crawler sees. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media (max-width:700px){
  body{font-size:17px}
  .sr-row{grid-template-columns:1fr}
  .sr-row .price{text-align:left}
}