/*
Theme Name: China Economic Review
Theme URI: https://chinaeconomicreview.com
Author: Earnshaw Books / Graham Earnshaw
Description: Custom homepage theme for the China Economic Review website. Reproduces the front-page design mockup exactly. Dynamic sections (Latest Briefs, CER Weekly, Archives search, Markets data) are wired to WordPress queries and a JSON data file — see front-page.php and inc/markets.json for dev notes.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: cer-theme
*/

/* ============================================================
   DESIGN TOKENS — change brand colours / fonts here
   ============================================================ */
:root {
  --ink:        #1C1B19;
  --paper:      #FCFBF7;
  --crimson:    #E11F28;
  --hair:       #D8D5CE;
  --hair-strong:#B9B5AC;
  --muted:      #6B675F;
  --up:         #137A4E;
  --down:       #B42318;
  /* Web fonts — loaded via Google Fonts in functions.php */
  --serif: "Baskervville", "GFS Baskerville", Georgia, serif;
  --body:  "Source Serif 4", "Bitstream Charter", Georgia, serif;
  --sans:  "Inter", "Liberation Sans", Arial, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #E8E6DF; }
body {
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   PAGE WRAPPER  (1180 px centred, 56 px side gutters)
   ============================================================ */
.cer-page {
  width: 1180px;
  margin: 36px auto 0;
  background: var(--paper);
  padding: 0 56px;
  box-shadow: 0 10px 40px rgba(0,0,0,.10);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 30px 0 14px;
}
.brand .namewrap {
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand .full {
  font-family: var(--serif);
  font-size: 44px;
  line-height: .96;
  letter-spacing: .005em;
}
.brand .logo-side {
  height: 52px;
  display: block;
}
.brand .tag {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.menubtn {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.burger { display: inline-block; width: 30px; }
.burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }

/* ============================================================
   NAV
   ============================================================ */
.rule-double {
  border-top: 3px solid var(--crimson);
  border-bottom: 1px solid var(--ink);
  height: 4px;
}
.cer-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--hair);
}
/* WordPress wp_nav_menu wraps in ul/li — flatten visually */
.cer-nav ul  { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; }
.cer-nav li  { display: block; }
.cer-nav a   { color: inherit; }
.cer-nav a:hover,
.cer-nav .current-menu-item > a,
.cer-nav .current-page-ancestor > a { color: var(--crimson); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 30px 0 16px;
}
.sec-head h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.sec-head .line  { flex: 1; height: 1px; background: var(--hair-strong); }
.sec-head .more  {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.date {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ============================================================
   NEWS BRIEFS  (3 columns)
   ============================================================ */
.briefs { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.briefs .col { padding: 0 26px; }
.briefs .col + .col { border-left: 1px solid var(--hair); }
.briefs .col:first-child { padding-left: 0; }
.briefs .col:last-child  { padding-right: 0; }

.brief {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.brief:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.brief h3 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  margin: 6px 0 7px;
}
.brief h3 a { color: var(--ink); }
.brief h3 a:hover { color: var(--crimson); }
.brief p    { font-size: 14px; line-height: 1.5; color: #3a3833; }
.brief .date { margin-top: 7px; display: block; }

/* ============================================================
   NEWSLETTER SIGNUP BAND
   ============================================================ */
.signup {
  margin: 30px -56px;
  padding: 30px 56px;
  background: #2F2E34;
  color: #F4F2EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.signup .txt { max-width: 600px; }
.signup .k {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C9A24A;
  margin-bottom: 7px;
}
.signup h3 {
  font-family: var(--serif);
  font-size: 27px;
  margin: 0 0 7px;
  font-weight: 700;
  line-height: 1;
}
.signup p {
  font-family: var(--body);
  font-size: 15.5px;
  color: #C9C6BE;
  line-height: 1.45;
}
.signup .signup-form { display: flex; flex: 0 0 auto; }
.signup input {
  width: 300px; height: 46px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
}
.signup button {
  height: 46px;
  padding: 0 26px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   CER WEEKLY
   ============================================================ */
.weekly { display: grid; grid-template-columns: 46% 54%; gap: 0; }
.weekly .pic { padding-right: 28px; }
.weekly .pic .frame {
  width: 100%; height: 248px;
  border: 1px solid var(--hair-strong);
  overflow: hidden;
  background: #0f1722;
}
.weekly .pic .frame img { width: 100%; height: 100%; object-fit: cover; }
.weekly .pic .cap {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 7px;
  letter-spacing: .02em;
}
.weekly .body { padding-left: 30px; border-left: 1px solid var(--hair); }
.weekly .body h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  margin: 6px 0 10px;
}
.weekly .body h3 a { color: var(--ink); }
.weekly .body h3 a:hover { color: var(--crimson); }
.weekly .body p {
  font-size: 15px;
  line-height: 1.55;
  color: #3a3833;
  margin-bottom: 14px;
}
.weekly .more-list { border-top: 1px solid var(--hair); padding-top: 10px; }
.weekly .more-list .it {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 15px;
}
.weekly .more-list .it:last-child { border-bottom: none; }
.weekly .more-list .it a { color: var(--ink); }
.weekly .more-list .it a:hover { color: var(--crimson); }
.weekly .more-list .it .date { font-family: var(--sans); }

/* ============================================================
   ARCHIVES  (dark band)
   ============================================================ */
.arch-section {
  background: #2F2E34;
  margin: 36px -56px;
  padding: 34px 56px 40px;
}
.arch-section .sec-head h2   { color: #F4F2EC; }
.arch-section .sec-head .line { background: rgba(255,255,255,.20); }
.arch-section .sec-head .more { color: #E1656B; }

.arch-search { margin-bottom: 0; }
.arch-search .arch-form { display: flex; max-width: 600px; }
.arch-search input {
  flex: 1; height: 48px;
  border: 1px solid var(--hair-strong);
  background: #fff;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
}
.arch-search button {
  height: 48px;
  padding: 0 28px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.arch-search .arch-hint {
  font-family: var(--body);
  font-size: 14.5px;
  color: #9C988F;
  margin-top: 12px;
}

/* ============================================================
   MARKETS  (3 columns)
   ============================================================ */
.markets { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.mkt-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin: -6px 0 16px;
  letter-spacing: .01em;
}
.markets .col { padding: 0 28px; }
.markets .col + .col { border-left: 1px solid var(--hair); }
.markets .col:first-child { padding-left: 0; }
.markets .col:last-child  { padding-right: 0; }
.markets h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}
.mkt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.mkt-row:last-child { border-bottom: none; }
.mkt-row .nm  { font-family: var(--body);   font-size: 14px; }
.mkt-row .px  { font-family: var(--sans);   font-size: 13px; text-align: right; }
.mkt-row .ch  { font-family: var(--sans);   font-size: 12px; text-align: right; width: 62px; }
.mkt-row .ch.u { color: var(--up); }
.mkt-row .ch.d { color: var(--down); }

/* ============================================================
   FOOTER
   ============================================================ */
.cer-footer {
  width: 1180px;
  margin: 0 auto;
  padding: 26px 56px 30px;
  background: #2F2E34;
  color: #CFCCC4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cer-footer .fmenu .flogo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cer-footer .fmenu .flogo-text {
  font-family: var(--serif);
  font-size: 20px;
  color: #F4F2EC;
  font-weight: 700;
}
.cer-footer .fmenu .flogo-text .cer { color: #E0696B; }
.cer-footer .fmenu .flogo img { height: 34px; }

.cer-footer .fmenu nav { display: flex; gap: 64px; max-width: 560px; }
/* WordPress menu inside footer — flatten ul/li */
.cer-footer .fmenu nav ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cer-footer .fmenu nav li { display: block; }
.cer-footer .fmenu nav a {
  color: #CFCCC4;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cer-footer .fmenu nav a:hover { color: #F4F2EC; }
.cer-footer .fmenu .cp {
  font-family: var(--sans);
  font-size: 11px;
  color: #7d7a72;
  margin-top: 16px;
  letter-spacing: .04em;
}

.cer-footer .fsign { text-align: right; }
.cer-footer .fsign .k {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C9A24A;
  margin-bottom: 9px;
}
.cer-footer .fsign .footer-form { display: flex; justify-content: flex-end; }
.cer-footer .fsign input {
  width: 220px; height: 40px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 14px;
}
.cer-footer .fsign button {
  height: 40px;
  padding: 0 18px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   BOTTOM SPACER
   ============================================================ */
.pad-bottom { height: 6px; }

/* ============================================================
   NEWSLETTER PLUGIN FORM OVERRIDES
   Styles whatever a WordPress newsletter plugin renders inside
   .signup-form (homepage band) and .footer-form (footer band).
   Tested against MailPoet and the Newsletter plugin; adjust
   selectors if your plugin outputs different markup.
   ============================================================ */
.signup-form form,
.signup-form > div { display: flex; }

.signup-form input[type="email"],
.signup-form input[type="text"] {
  width: 300px;
  height: 46px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
  border-radius: 0;
}
.signup-form input[type="submit"],
.signup-form button[type="submit"] {
  height: 46px;
  padding: 0 26px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
/* Hide plugin's own labels (they're replaced by the band heading) */
.signup-form label { display: none; }
/* MailPoet wrapper */
.signup-form .mailpoet_form { display: flex; }

.footer-form form,
.footer-form > div { display: flex; }

.footer-form input[type="email"],
.footer-form input[type="text"] {
  width: 220px;
  height: 40px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 14px;
  border-radius: 0;
}
.footer-form input[type="submit"],
.footer-form button[type="submit"] {
  height: 40px;
  padding: 0 18px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.footer-form label { display: none; }
.footer-form .mailpoet_form { display: flex; }

/* ============================================================
   RESPONSIVE — FLUID WRAPPER
   Below 1293 px (1180 + 2×56.5) the fixed-width wrapper goes
   fluid. Below that, padding and multi-column grids collapse
   in stages down to a single-column mobile layout.
   ============================================================ */

/* --- Full-width container below 1293 px ------------------- */
@media ( max-width: 1292px ) {
  .cer-page,
  .cer-footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .cer-page { margin-top: 0; }
}

/* --- Tablet-large  (≤ 1024 px) ---------------------------- */
@media ( max-width: 1024px ) {
  .cer-page    { padding: 0 40px; }
  .cer-footer  { padding: 26px 40px 30px; }
  .signup      { margin: 30px -40px; padding: 30px 40px; }
  .arch-section{ margin: 36px -40px; padding: 34px 40px 40px; }

  .brand .full          { font-size: 38px; }
  .weekly .body h3      { font-size: 24px; }
  .signup input,
  .signup-form input[type="email"],
  .signup-form input[type="text"] { width: 240px; }
}

/* --- Tablet  (≤ 768 px) ----------------------------------- */
@media ( max-width: 768px ) {
  .cer-page    { padding: 0 24px; }
  .cer-footer  { padding: 26px 24px 30px; }
  .signup      { margin: 30px -24px; padding: 30px 24px; }
  .arch-section{ margin: 36px -24px; padding: 34px 24px 40px; }

  /* Briefs: last col wraps full-width, shows its 2 posts side-by-side */
  .briefs { grid-template-columns: 1fr 1fr; }
  .briefs .col:nth-child(3) {
    grid-column: 1 / -1;
    display: flex;
    gap: 26px;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding: 18px 0 0;
  }
  .briefs .col:nth-child(3) .brief { flex: 1; }

  /* Weekly: stack image above body */
  .weekly { grid-template-columns: 1fr; }
  .weekly .pic { padding-right: 0; margin-bottom: 22px; }
  .weekly .body {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding-top: 20px;
  }

  /* Markets: 3 → 1 col */
  .markets { grid-template-columns: 1fr; }
  .markets .col { padding: 0; margin-bottom: 24px; }
  .markets .col:last-child { margin-bottom: 0; }
  .markets .col + .col {
    border-left: none;
    border-top: 1px solid var(--hair);
    padding-top: 16px;
  }

  /* Signup band: stack text above form */
  .signup { flex-direction: column; gap: 20px; }
  .signup .signup-form,
  .signup-form .mailpoet_form { flex-direction: column; gap: 8px; }
  .signup input,
  .signup-form input[type="email"],
  .signup-form input[type="text"]   { width: 100%; max-width: 480px; }
  .signup button,
  .signup-form input[type="submit"],
  .signup-form button[type="submit"] { width: 100%; max-width: 480px; }

  /* Archives form: stack */
  .arch-search .arch-form { flex-direction: column; gap: 8px; max-width: 100%; }
  .arch-search input  { width: 100%; }
  .arch-search button { width: 100%; height: 44px; }

  /* Footer: stack menu above signup */
  .cer-footer { flex-direction: column; gap: 28px; }
  .cer-footer .fsign { text-align: left; }
  .cer-footer .fsign .footer-form,
  .cer-footer .fsign .footer-form .mailpoet_form { justify-content: flex-start; }
  .footer-form input[type="email"],
  .footer-form input[type="text"] { width: 200px; }
}

/* --- Mobile  (≤ 640 px) ----------------------------------- */
@media ( max-width: 640px ) {
  .cer-page    { padding: 0 16px; }
  .cer-footer  { padding: 24px 16px 28px; }
  .signup      { margin: 30px -16px; padding: 28px 16px; }
  .arch-section{ margin: 36px -16px; padding: 28px 16px 36px; }

  /* Masthead: keep brand left, burger right */
  .masthead { padding: 18px 0 12px; position: relative; }
  .brand .full { font-size: 28px; }
  .menubtn { display:flex; position: absolute; top: 22px; right: 0; }

  /* Mobile nav: hidden by default; JS adds .is-open */
  .cer-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--hair);
    padding: 4px 0 8px;
  }
  .cer-nav.is-open { display: flex; }
  .cer-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .cer-nav li { width: 100%; }
  .cer-nav a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--hair);
    font-size: 13px;
  }
  .cer-nav li:last-child > a { border-bottom: none; }

  /* Burger → × animation when open */
  .menubtn.is-open .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menubtn.is-open .burger span:nth-child(2) { opacity: 0; }
  .menubtn.is-open .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .burger span { transition: transform .2s, opacity .2s; }

  /* Briefs: fully single-column */
  .briefs { grid-template-columns: 1fr; }
  .briefs .col { padding: 0; }
  .briefs .col:nth-child(2) { border-left: none; border-top: 1px solid var(--hair); padding-top: 18px; }
  .briefs .col:nth-child(3) {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Footer nav: stack columns */
  .cer-footer .fmenu nav { flex-direction: column; gap: 20px; }
}

/* --- Small phone  (≤ 380 px) ------------------------------ */
@media ( max-width: 380px ) {
  .brand .full { font-size: 22px; }
  .brand .tag  { font-size: 10px; }
  .weekly .body h3 { font-size: 20px; }
}