/*
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,
.brand .custom-logo {
  /* 2026-07-26: red backdrop restored — the logo image itself can be
     hard to see against the white masthead depending on which asset
     (custom logo vs. theme default) is active, so the block colour is
     forced here rather than relying on the image file alone. */
  height: 52px;
  display: block;
  background-color: #b5131a;
  border: 10px solid #b5131a;
  box-sizing: content-box;
}
.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. 2026-07-26 (Graham's request): the Menu
     button is removed entirely on mobile — nav links show stacked and
     always open below the masthead instead of behind a hamburger toggle.
     This also removes the earlier logo/button overlap, since there's no
     absolutely-positioned button left to collide with the logo. */
  .masthead { padding: 18px 0 12px; position: relative; }
  .brand .full { font-size: 28px; }
  .menubtn { display: none; }

  /* Mobile nav: always visible, stacked — no hamburger toggle */
  .cer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--hair);
    padding: 4px 0 8px;
  }
  .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; }

  /* 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; }
}