/*
 Theme Name: Country Window
 Theme URI: https://www.countrywindow.ca
 Description: Custom Astra child theme for Eric E. Wright, author. Sage-and-white palette, centred wordmark header, and a three-column layout that puts the main content first on small screens.
 Author: BWD Graphics
 Author URI: https://bwd-graphics.net
 Template: astra
 Version: 1.0.8
 Requires PHP: 7.4
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: country-window
 Tags: author, books, three-column, responsive
*/

/* ========================================
   1. ROOT COLOR PALETTE & CSS CUSTOM PROPERTIES
   ======================================== */

:root {
  /* Greens — sage / olive direction */
  --color-primary: #4f7355;        /* deep sage — header, headings, links */
  --color-primary-dark: #3c5a41;   /* hover / footer */
  --color-primary-light: #8faa8b;  /* sage — rules, borders, meta */
  --color-secondary: #6f9275;      /* mid sage — secondary buttons */
  --color-accent: #b08d3f;         /* antique brass — buy buttons, emphasis */
  --color-accent-dark: #91722f;

  /* Neutrals */
  --color-white: #ffffff;
  --color-band: #f6f8f4;           /* pale green-white section band */
  --color-band-alt: #eef2ec;
  --color-dark: #26332a;           /* body text */
  --color-muted: #5f6b61;
  --color-border: #dfe6dc;

  /* Typography */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;

  /* Layout */
  --sidebar-left-width: 220px;
  --sidebar-right-width: 250px;
  --column-gap: 34px;
  --content-max: 1180px;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* Border radius */
  --radius-subtle: 3px;
  --radius-small: 6px;

  /* Transitions */
  --transition-smooth: all 0.3s ease;
  --transition-fast: all 0.15s ease;
}

/* ========================================
   2. GLOBAL RESET & BASE STYLES
   ======================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* stop iOS from inflating text in landscape */
  -webkit-text-size-adjust: 100%;
}

/* `html body` rather than `body`: with some Astra container settings the
   theme's own body background outranks a bare `body {}` rule. */
html body {
  background-color: var(--color-band);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden; /* belt-and-braces against wide embeds */
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* The old Artisteer theme let tables and pasted markup blow past the
   viewport on phones. Keep wide things scrollable inside their own box. */
.entry-content table,
.entry-content pre {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* ========================================
   3. TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.95rem; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

p { margin-bottom: var(--spacing-md); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Visible keyboard focus — the old theme had none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

blockquote {
  font-family: var(--font-accent);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--color-primary-dark);
  border-left: 4px solid var(--color-primary-light);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-xl) 0;
}

/* ========================================
   4. HEADER — CENTRED WORDMARK OVER MENU
   ======================================== */

.site-header {
  background-color: var(--color-white);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 1px 6px rgba(38, 51, 42, 0.08);
}

/* Astra's header rows: stack the branding above the nav and centre both. */
.ast-primary-header-bar,
.site-primary-header-wrap .ast-builder-grid-row,
.ast-header-break-point .ast-primary-header-bar {
  background-color: transparent;
}

.site-branding,
.ast-site-identity {
  text-align: center;
  padding: var(--spacing-md) 0 var(--spacing-xs);
}

.site-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

.site-title a {
  color: var(--color-primary);
  text-decoration: none;
}

.site-title a:hover { color: var(--color-primary-dark); }

.site-description,
.site-header .site-description {
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin: 0.15em 0 0;
}

/* ---- Intro line under the tagline --------------------------------
   Eric's positioning sentence. Add it as an HTML element in the Above
   Header row (Customize → Header Builder → Above Header), marked up as:

     <p class="cw-header-intro">Eric Wright brings 55 years of …</p>

   The rules below let the Above Header row wrap so the element drops onto
   its own line beneath the wordmark and tagline rather than sitting
   alongside them. Plain paragraphs in that element are styled too, so it
   still looks right if the class is forgotten.
   ------------------------------------------------------------------- */

.site-above-header-wrap .site-header-above-section-center,
.site-above-header-wrap .ast-builder-grid-row {
  flex-wrap: wrap;
  justify-content: center;
}

.site-above-header-wrap .ast-header-html {
  flex: 1 0 100%;
  text-align: center;
}

.cw-header-intro,
.site-above-header-wrap .ast-header-html p {
  /* Wide enough for Eric's 165-character sentence to land on two lines
     rather than three. Capped in px as well so it never outruns the
     wordmark on a very wide monitor. */
  max-width: min(92ch, 860px);
  margin: 0.2em auto 0.6em;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-style: normal;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

@media (max-width: 921px) {
  .cw-header-intro,
  .site-above-header-wrap .ast-header-html p {
    font-size: 0.88rem;
    max-width: 46ch;
  }
}

/* ---- Banner between the wordmark and the menu ---------------------
   Set Customize → Country Window Settings → Header Banner → Banner
   Position to "Wordmark, photo, then menu" and the theme adds the
   `cw-banner-between` body class.

   The banner prints on `astra_masthead_bottom`, so in the DOM it is the
   last child of #masthead — after both builder rows. Rather than fight
   Astra's markup, #masthead becomes a flex column and the row wrapper is
   flattened with `display: contents`, which lets the three pieces be
   ordered freely. Desktop only: below Astra's breakpoint the mobile
   header takes over and the banner belongs after it anyway.

   Note: if a sticky header is ever switched on, revisit the
   `display: contents` line — Astra positions #ast-desktop-header itself.
   ------------------------------------------------------------------- */

@media (min-width: 922px) {
  .cw-banner-between #masthead {
    display: flex;
    flex-direction: column;
  }

  .cw-banner-between #masthead > #ast-desktop-header {
    display: contents;
  }

  .cw-banner-between .ast-above-header-wrap { order: 1; }
  .cw-banner-between .cw-header-banner      { order: 2; }
  .cw-banner-between .ast-main-header-wrap  { order: 3; }
  .cw-banner-between .ast-below-header-wrap { order: 4; }

  /* The menu now sits under the photo, so the green rule belongs at the
     bottom of the header rather than under the banner. */
  .cw-banner-between .cw-header-banner {
    border-bottom: 0;
    border-top: 1px solid var(--color-border);
  }
}

/* Custom logo: keep it from ballooning on phones. */
.site-logo-img img,
.custom-logo-link img {
  max-height: 92px;
  width: auto;
}

/* ---- Header banner photo ------------------------------------------
   Eric's butterfly-on-joe-pye-weed shot (butterfly.jpg, web-optimised).
   The subject sits at roughly 48% across and 31% down, so the band is
   anchored there and stays on the butterfly at every width instead of
   sliding off the top the way a plain `center` would.
   Swap the image by changing --cw-banner-image below (or, once it's set
   as the WordPress header image, the inline style Astra prints wins).
   ------------------------------------------------------------------- */

:root {
  --cw-banner-image: url('https://www.countrywindow.ca/wp-content/uploads/2026/08/butterfly.jpg');
  --cw-banner-focus: 48% 24%;
  --cw-banner-height: 320px;
  /* Sizing note: in the 1800x1350 file the butterfly spans 14%-48% of the
     frame height — about a third of the picture. A band shorter than ~320px
     on a 1440px screen has to clip either the wing tips or the flowers, so
     320px is the shortest height that still reads as a whole butterfly.
     Shorten it only alongside a re-crop of the source photo. */
}

.cw-header-banner {
  display: block;
  width: 100%;
  height: var(--cw-banner-height);
  background-image: var(--cw-banner-image);
  background-size: cover;
  background-position: var(--cw-banner-focus);
  background-repeat: no-repeat;
  background-color: var(--color-band-alt); /* shown while the photo loads */
  border-top: 1px solid var(--color-border);
  border-bottom: 3px solid var(--color-primary);
  line-height: 0;
}

/* Same band, but as a real <img> so it can carry alt text and srcset.
   Preferred once the photo is uploaded to the media library. */
.cw-header-banner--img {
  height: auto;
  max-height: var(--cw-banner-height);
  overflow: hidden;
  background-image: none;
}

.cw-header-banner--img img {
  width: 100%;
  height: var(--cw-banner-height);
  object-fit: cover;
  object-position: var(--cw-banner-focus);
}

/* Variant: wordmark sitting ON the photo. The white scrim keeps the
   lettering readable over the flowers — without it the tagline
   disappears into the blossom detail. */
.cw-header-banner--overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cw-header-banner--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

.cw-header-banner--overlay .cw-header-banner__inner {
  position: relative;
  line-height: 1.2;
  padding: var(--spacing-md);
}

/* ========================================
   5. NAVIGATION
   ======================================== */

.main-header-bar-navigation,
.ast-builder-menu-1 {
  display: flex;
  justify-content: center;
}

.main-navigation ul,
.main-header-menu {
  justify-content: center;
}

/* Astra's Header Builder emits its menu colours at
   `.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link`
   — five classes. Anything shorter loses and you get Astra's default blue on
   hover. Every rule below therefore leads with `.ast-builder-menu-1` to match
   that weight; the child sheet loads later, so a tie goes to us.
   Astra also sets `line-height: 80px` on menu links to centre them in the
   header row, which makes each link 107px tall and turns the current-page
   highlight into a full-height slab. We set our own line-height and let
   padding define the height instead. */

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link,
.main-navigation .menu-item > a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--color-dark);
  /* 0.8em, not the usual 1.15em: the eight-item menu measures ~1,134px at this
     spacing, which keeps it on one line inside Astra's 1,200px site width.
     Widen this only if the menu loses an item. */
  padding: 0.85em 0.8em;
  border-radius: var(--radius-subtle);
  transition: var(--transition-fast);
}

.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.focus > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
}

/* The dropdown caret is a separate element and keeps its own colour. */
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .ast-menu-toggle,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .ast-menu-toggle {
  color: var(--color-white);
}

/* Let the header row hug the menu instead of holding Astra's 80px minimum. */
.ast-primary-header-bar.ast-primary-header {
  min-height: 0;
}

/* Dropdowns */
.main-header-menu .sub-menu {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 6px 18px rgba(38, 51, 42, 0.14);
  min-width: 240px;
}

.main-header-menu .sub-menu .menu-link {
  color: var(--color-dark);
  padding: 0.7em 1.1em;
  font-weight: 400;
}

.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:hover {
  background-color: var(--color-band);
  color: var(--color-primary);
}

/* Mobile toggle — big enough to hit with a thumb. */
.ast-mobile-menu-trigger-minimal,
.menu-toggle,
.ast-mobile-menu-buttons .menu-toggle {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-subtle);
  min-width: 48px;
  min-height: 48px;
}

.ast-header-break-point .main-header-menu .menu-link {
  padding: 1em 1.2em;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.05rem;
}

/* ========================================
   6. THREE-COLUMN LAYOUT
   ------------------------------------------------------------------
   Desktop order:  [ left widgets | main content | right widgets ]
   Phone order:    main content FIRST, then right, then left.
   Done with grid-template-areas so DOM order is irrelevant — the
   left sidebar can stay first in the markup and still land last.
   ======================================== */

#content > .ast-container,
.ast-container--narrow {
  max-width: var(--content-max);
}

#content > .ast-container {
  display: grid;
  grid-template-columns: var(--sidebar-left-width) minmax(0, 1fr) var(--sidebar-right-width);
  grid-template-areas: "cwleft cwmain cwright";
  column-gap: var(--column-gap);
  row-gap: var(--spacing-xl);
  align-items: start;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xxl);
}

/* Kill Astra's float/percentage widths — grid owns the geometry now. */
#content > .ast-container > #primary,
#content > .ast-container > #secondary,
#content > .ast-container > .cw-sidebar-left {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#content > .ast-container > .cw-sidebar-left { grid-area: cwleft; }
#content > .ast-container > #primary        { grid-area: cwmain; }
#content > .ast-container > #secondary      { grid-area: cwright; }

/* Main column reads as a white sheet on the pale green page. */
#primary .ast-article-single,
#primary .ast-article-post,
.cw-content-sheet {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--spacing-xl);
}

/* With both rails showing, the centre column is 602px and 48px of padding
   either side is too expensive. Buy the measure back. */
.cw-three-column #primary .ast-article-single,
.cw-three-column #primary .ast-article-post {
  padding: var(--spacing-lg);
}

/* Single-sidebar pages (right only) still behave. */
.cw-no-left-sidebar #content > .ast-container {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-right-width);
  grid-template-areas: "cwmain cwright";
}

.cw-no-sidebars #content > .ast-container,
.ast-no-sidebar #content > .ast-container {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cwmain";
}

/* ========================================
   7. SIDEBAR WIDGETS
   ======================================== */

.widget-area .widget,
.cw-sidebar-left .widget,
#secondary .widget {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* Astra emits its own widget-title typography from the Customizer at a
   specificity that beats anything class-based — `body .widget .widget-title`
   still loses to it. Both rails are addressed by id here, which wins without
   resorting to !important. Keep the id selectors if you touch this. */
#secondary .widget-title,
#cw-secondary-left .widget-title,
.widget-title,
.widget .widget-title,
.widget h2 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-light);
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  padding: 0.4em 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.widget ul li:last-child { border-bottom: 0; }

.widget img {
  display: block;
  margin: 0 auto var(--spacing-sm);
  border-radius: var(--radius-subtle);
}

/* Book-cover thumbnails in the left rail */
.cw-sidebar-left .widget img {
  box-shadow: 0 3px 10px rgba(38, 51, 42, 0.18);
  transition: var(--transition-smooth);
}

.cw-sidebar-left .widget a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(38, 51, 42, 0.26);
}

/* Social icon row */
.cw-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
  align-items: center;
}

.cw-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cw-social-links a:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.cw-social-links svg { width: 20px; height: 20px; }

/* ========================================
   8. BOOK CARDS & LISTINGS
   ======================================== */

.cw-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.cw-book {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.cw-book:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 8px 22px rgba(38, 51, 42, 0.12);
  transform: translateY(-3px);
}

.cw-book__cover {
  display: block;
  padding: var(--spacing-md) var(--spacing-md) 0;
  text-align: center;
}

.cw-book__cover img {
  max-height: 300px;
  width: auto;
  box-shadow: 0 4px 14px rgba(38, 51, 42, 0.2);
}

.cw-book__body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cw-book__title,
.entry-content .cw-book__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  /* Astra colours headings #1e293b and the shortcode's h3 was inheriting it,
     so book titles came out near-black instead of sage. */
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0 0 0.2em;
}

.cw-book__title a {
  color: inherit;
  text-decoration: none;
}

.cw-book__title a:hover {
  color: var(--color-accent);
}

.cw-book__tagline {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-muted);
  margin: 0 0 var(--spacing-sm);
}

.cw-book__meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: var(--spacing-sm);
}

.cw-book__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Buttons inside a book row sit in a ~364px column, so they run at a
   slightly smaller size — two fit on a line instead of one. */
.cw-book-row .cw-btn,
.cw-book__actions .cw-btn {
  font-size: 0.88rem;
  padding: 0.6em 1.05em;
}

/* wpautop wraps the shortcode's action paragraph, so it needs the flex
   treatment whether it arrives as <p> or as a div. */
p.cw-book__actions {
  margin-bottom: 0;
}

/* ---- Book laid out beside its cover -------------------------------
   Used by [cw_book] on the category landing pages and the book pages.

   Sizing note: in the three-column layout the centre column is 602px, and
   the article's own padding takes 2x32px off that. A 150px cover plus a
   24px gap leaves ~364px for the blurb — about 55 characters, which is a
   readable measure. The earlier 190px cover left only 282px and the text
   wrapped every five words.
   ------------------------------------------------------------------- */

.cw-book-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.cw-book-row:last-child { border-bottom: 0; }

/* A row opening a section sits under its own heading, not a rule. */
.entry-content h2 + .cw-book-row,
.entry-content h3 + .cw-book-row {
  padding-top: var(--spacing-md);
}

.cw-book-row img {
  box-shadow: 0 4px 14px rgba(38, 51, 42, 0.2);
  border-radius: var(--radius-subtle);
}

.cw-book-row__body > :first-child { margin-top: 0; }
.cw-book-row__body > :last-child  { margin-bottom: 0; }

/* Backstop for the wpautop <br> strays the shortcode also strips — a real
   line break inside a blurb lives inside a <p>, never as a direct child. */
.cw-book-row__body > br { display: none; }

.cw-book-row__body p {
  margin-bottom: var(--spacing-sm);
}

/* ========================================
   9. BUTTONS
   ======================================== */

.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.cw-btn {
  /* inline-flex, not inline-block: min-height only centres the label if the
     button is a flex container. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-subtle);
  padding: 0.75em 1.5em;
  min-height: 44px;          /* touch target */
  cursor: pointer;
  transition: var(--transition-fast);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.cw-btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* Buy / order — brass, so it stands apart from navigation green */
.cw-btn--buy {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.cw-btn--buy:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* Secondary / outline — sample chapters, "read more" */
.cw-btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.cw-btn--outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.cw-btn--block {
  /* flex, not block — .cw-btn is inline-flex so its label is centred by
     align-items; switching to display:block would drop that and leave the
     text sitting on the top edge of the 44px minimum height. */
  display: flex;
  width: 100%;
}

/* ---- Standalone call to action ------------------------------------
   A banded block for the buy / sample buttons on a book page.

   Eric's pages were built over thirteen years and no two are laid out
   the same way — floated covers, centred publisher blocks, 400-line
   tables of contents. A button dropped into that flow disappears: on the
   Practical Theology page it sat flush against the "TABLE OF CONTENTS"
   heading with zero margin, reading as part of it.

   So the CTA gets its own ground rather than relying on the surrounding
   content to give it room. `clear: both` matters more than it looks —
   several pages float a cover image right, and without it the band tucks
   in beside one.

   Usage:  <p class="cw-cta">[cw_buy …] [cw_buy … style="outline"]</p>
   Add    cw-cta--left   to left-align instead of centre.
   ------------------------------------------------------------------- */

.cw-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  clear: both;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md);
  background-color: var(--color-band-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.cw-cta--left { justify-content: flex-start; }

.cw-cta > * { margin: 0; }

/* wpautop likes to leave a <br> inside a paragraph that holds only
   shortcodes — same strays the book rows had. */
.cw-cta br { display: none; }

/* Fallback for a button pasted into content with no wrapper. No band,
   but at least its own line with air around it rather than margin: 0. */
.entry-content > .cw-btn {
  display: flex;
  width: fit-content;
  margin: var(--spacing-xl) auto;
  clear: both;
}

@media (max-width: 544px) {
  .cw-cta {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-sm);
  }
}

/* ========================================
   10. FOOTER
   ======================================== */

.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.site-primary-footer-wrap {
  background-color: var(--color-primary-dark);
  color: #e7ede8;
}

.site-footer a,
.site-primary-footer-wrap a,
.site-below-footer-wrap a {
  color: #dbe7dc;
}

.site-footer a:hover,
.site-primary-footer-wrap a:hover,
.site-below-footer-wrap a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.cw-footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-xl);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--spacing-md) var(--spacing-lg);
}

.footer-widget-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin: 0 0 var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-light);
}

.cw-footer-widgets .widget {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.cw-footer-widgets .widget ul li {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.cw-colophon {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
  font-size: 0.85rem;
  padding: var(--spacing-md);
  color: #c9d6cb;
}

/* ========================================
   11. FORMS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  color: var(--color-dark);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  padding: 0.7em 0.85em;
  min-height: 46px;
  transition: var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 115, 85, 0.15);
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.3em;
  color: var(--color-dark);
}

textarea { min-height: 160px; }

/* Contact-form container (whatever plugin replaces si-contact-form) */
.cw-form,
.wpcf7,
.fscf-div {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--spacing-lg);
}

/* ========================================
   12. UTILITY CLASSES
   ======================================== */

.cw-band {
  background-color: var(--color-band-alt);
  padding: var(--spacing-xl) var(--spacing-md);
}

.cw-center      { text-align: center; }
.cw-muted       { color: var(--color-muted); }
.cw-accent      { color: var(--color-accent); }
.cw-lead        { font-size: 1.15rem; line-height: 1.6; }
.cw-mt-0        { margin-top: 0; }
.cw-mb-0        { margin-bottom: 0; }
.cw-stack > * + * { margin-top: var(--spacing-md); }

.cw-rule {
  height: 2px;
  width: 90px;
  background-color: var(--color-primary-light);
  border: 0;
  margin: var(--spacing-md) auto;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ========================================
   13. RESPONSIVE
   ======================================== */

/* Tablet / small laptop — drop the left rail below the fold, keep the
   right rail alongside the content. */
@media (max-width: 1100px) {
  #content > .ast-container {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-right-width);
    grid-template-areas:
      "cwmain  cwright"
      "cwleft  cwleft";
  }

  .cw-sidebar-left .widget {
    /* the left rail becomes a horizontal band of cards */
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - var(--spacing-md));
    margin-right: var(--spacing-md);
  }
}

/* Astra's own breakpoint — single column from here down.
   CONTENT FIRST, then the right rail, then the left rail. */
@media (max-width: 921px) {
  #content > .ast-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cwmain"
      "cwright"
      "cwleft";
    column-gap: 0;
    row-gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
  }

  .cw-sidebar-left .widget,
  #secondary .widget {
    display: block;
    width: auto;
    margin-right: 0;
  }

  /* Below the fold the rails read better as a 2-up card grid than as a
     single very long column of thumbnails. */
  .cw-sidebar-left,
  #secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
    align-items: start;
  }

  .cw-sidebar-left .widget,
  #secondary .widget { margin-bottom: 0; }

  .site-branding,
  .ast-site-identity { padding: var(--spacing-sm) 0; }

  .site-title { font-size: 1.85rem; }
  .site-description { font-size: 1rem; }

  /* The old theme hid the wordmark entirely on phones. Keep it. */
  .site-logo-img img,
  .custom-logo-link img { max-height: 64px; }

  :root { --cw-banner-height: 150px; }

  #primary .ast-article-single,
  #primary .ast-article-post,
  .cw-content-sheet { padding: var(--spacing-md); }

  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.35rem; }

  .cw-book-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .cw-book-row img { max-width: 200px; }
}

@media (max-width: 544px) {
  body { font-size: 16px; }

  :root { --cw-banner-height: 118px; }
  .site-title { font-size: 1.5rem; }

  .cw-book-grid { grid-template-columns: minmax(0, 1fr); }

  .cw-sidebar-left,
  #secondary { grid-template-columns: minmax(0, 1fr); }

  .cw-footer-widgets {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
  }

  .cw-btn,
  .button,
  input[type="submit"] { width: 100%; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   14. ASTRA OVERRIDES
   ======================================== */

/* Astra sets these as percentages with floats; we've gone to grid. */
.ast-separate-container #primary,
.ast-separate-container #secondary,
.ast-left-sidebar #primary,
.ast-right-sidebar #primary,
.ast-left-sidebar #secondary,
.ast-right-sidebar #secondary {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.ast-separate-container {
  background-color: var(--color-band);
}

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  border-radius: var(--radius-small);
}

/* Page title block */
.ast-single-post .entry-title,
.entry-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

.ast-archive-description {
  background-color: var(--color-band-alt);
  border-left: 4px solid var(--color-primary-light);
}

/* Astra's default link colour inside content */
.entry-content a { text-decoration: underline; }
.entry-content a:hover { color: var(--color-accent); }

/* …but a button is not a link in a sentence. Without this, every
   Buy / View Details / Read a Sample on a landing page came out underlined,
   and hovering turned the white label brass-on-sage. */
.entry-content a.cw-btn,
.entry-content a.button,
.entry-content .wp-block-button__link,
.entry-content .cw-social-links a {
  text-decoration: none;
}

.entry-content a.cw-btn:hover,
.entry-content a.button:hover,
.entry-content .wp-block-button__link:hover {
  text-decoration: none;
  color: var(--color-white);
}

.entry-content a.cw-btn--outline:hover {
  color: var(--color-white);
}

/* ---- Page intro -----------------------------------------------------
   The opening line on a landing page. Set apart from the book blurbs
   below it so the page has a voice before it becomes a list.
   --------------------------------------------------------------------- */

.cw-lead,
.entry-content p.cw-lead {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 60ch;
  margin: 0 0 var(--spacing-md);
}

.cw-lead::after {
  content: "";
  display: block;
  width: 90px;
  height: 2px;
  background-color: var(--color-primary-light);
  margin-top: var(--spacing-md);
}

/* Section headings between groups of books need air above them —
   Astra leaves h2 with no top margin at all. */
.entry-content h2 {
  margin-top: var(--spacing-xl);
}

.entry-content > h2:first-child,
.entry-content .cw-lead + h2 {
  margin-top: var(--spacing-lg);
}

/* Breadcrumbs / scroll-to-top */
.ast-scroll-top {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-subtle);
}

.ast-scroll-top:hover { background-color: var(--color-accent) !important; }

/* ========================================
   15. PRINT
   ======================================== */

@media print {
  .site-header,
  .site-footer,
  .cw-sidebar-left,
  #secondary,
  .ast-scroll-top,
  .cw-header-banner { display: none !important; }

  #content > .ast-container {
    display: block;
    max-width: 100%;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

/* ========================================
   16. SITE-SPECIFIC OVERRIDES
   (append one-off fixes below this line)
   ======================================== */