/* ==========================================================================
   Freedom from Headaches — home page styles
   Everything you are likely to want to change lives in :root below.
   ========================================================================== */

:root {
  /* --- Colors (taken from the live WordPress site) --- */
  --color-page-bg:     #FFFFFF;  /* page background                        */
  --color-panel-bg:    #D6DDD7;  /* the pale sage panels                   */
  --color-heading:     #65768B;  /* section headings (slate blue)          */
  --color-body-text:   #5F5B5B;  /* paragraph text (warm grey)             */
  --color-small-text:  #333333;  /* footer / disclaimer                    */
  --color-post-title:  #333333;  /* blog card titles                       */
  --color-meta:        #8A8A8A;  /* blog card dates & comment counts       */
  --color-rule:        #E2E6E3;  /* hairline dividers                      */

  /* --- Type --- */
  --font-heading: "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Prompt", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --size-heading: 32px;
  --size-body:    20px;
  --leading-body: 1.4;

  /* --- Layout --- */
  --panel-pad-y:   4.5rem;   /* top/bottom padding inside a text panel */
  --panel-pad-in:  5rem;     /* padding on the outer edge of a text panel */
  --panel-pad-out: 3.5rem;   /* padding on the centre-facing edge */
  --panel-min-h:   520px;    /* minimum height of each split row */
  --content-max:   1140px;   /* max width of the blog / footer content */
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-body-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--font-heading); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-heading); }

/* -------------------------------------------------------------- header -- */
/* Logo on the left, menu on the right — matching the original site.        */

.site-header {
  background: var(--color-page-bg);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-header__brand { display: block; line-height: 0; }

.site-header__logo {
  width: 320px;          /* rendered size on the live site */
  max-width: 70vw;
  height: auto;
}

/* --- the menu ------------------------------------------------------------
   Items are <li> elements in index.html and friends. The colours come from
   the variables at the top of this file.                                   */

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-heading);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}

.site-nav a:hover,
.site-nav a.is-current { border-bottom-color: var(--color-heading); }

/* --------------------------------------------------------------- split -- */
/* Each .split is one full-width row: a half of text and a half of image.
   Add the class `split--reverse` to put the image on the LEFT.             */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--panel-min-h);
}

.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--panel-pad-y) var(--panel-pad-out) var(--panel-pad-y) var(--panel-pad-in);
}

/* Pale sage background — remove this class from a panel to make it white. */
.split__text--panel { background: var(--color-panel-bg); }

.split__image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px;
}

/* Image on the left, text on the right. */
.split--reverse .split__text  { order: 2; padding: var(--panel-pad-y) var(--panel-pad-in) var(--panel-pad-y) var(--panel-pad-out); }
.split--reverse .split__image { order: 1; }

.split__text h2 {
  font-size: var(--size-heading);
  font-weight: 500;
  line-height: 1;
  color: var(--color-heading);
  margin-bottom: 1.25rem;
}

/* A bolder lead-in line inside body copy (e.g. "Is this familiar?"). */
.lede { margin-bottom: 1.4em; }

/* ---------------------------------------------------------- blog cards -- */

.posts {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.post-card__thumb { width: 100%; height: 200px; object-fit: cover; }

.post-card__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-post-title);
  margin: 1rem 0 .5rem;
}

.post-card__meta {
  font-size: 13px;
  color: var(--color-meta);
  margin-bottom: .75rem;
}
.post-card__meta span + span::before { content: "\00a0\00a0·\00a0\00a0"; }

.post-card__excerpt { font-size: 16px; margin-bottom: .75rem; }

.post-card__more { font-size: 14px; text-decoration: none; }
.post-card__more:hover { text-decoration: underline; }

/* -------------------------------------------------------------- footer -- */

.site-footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-small-text);
  border-top: 1px solid var(--color-rule);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  :root { --panel-pad-in: 3rem; --panel-pad-out: 3rem; }
}

@media (max-width: 900px) {
  .posts { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  :root { --panel-pad-in: 1.75rem; --panel-pad-out: 1.75rem; --panel-pad-y: 3rem; --size-heading: 28px; --size-body: 18px; }

  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__image { min-height: 300px; }

  /* On small screens every row stacks image-on-top, text-below. */
  .split__text  { order: 2; }
  .split__image { order: 1; }
  .split--reverse .split__text  { order: 2; padding: var(--panel-pad-y) var(--panel-pad-in); }
  .split--reverse .split__image { order: 1; }
}

/* ==========================================================================
   PAGES ADDED LATER — Articles listing, single articles, Podcast
   ========================================================================== */

:root {
  --color-podcast-script: #127898;   /* teal handwriting heading on Podcast */
  --color-read-more:      #9F541C;   /* "Read More »" brown, from the blog   */
  --color-meta-grey:      #ADADAD;   /* episode dates                        */
  --color-about-bg:       #E5E9EF;   /* pale panel behind the About Us bios  */
  --font-script: "Shadows Into Light Two", "Bradley Hand", cursive;
}

main { display: block; }

/* ------------------------------------- YOUR OWN NOTE (home page) -------- */
/* The editable block at the top of index.html, above the original page
   content. Same idea and same class name as the one on the Eureka T'ai Chi
   home page, so the two sites work the same way.

   Not to be confused with .page-intro just below, which is the heading
   block on articles.html. They are deliberately separate so restyling one
   never disturbs the other.                                               */

.intro {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3.5rem 2rem 2.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;      /* four points smaller than the page's body text (20px).
                           Change this one number to resize your note.
                           Was 20px originally, then 18px, now 16px.           */
  line-height: 1.6;     /* a touch looser, so the smaller text still breathes  */
  color: var(--color-body-text);
}

.intro__heading {
  font-family: var(--font-heading);
  font-size: var(--size-heading);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-heading);
  margin: 0 0 1.25rem;
}

/* Text is held to a comfortable reading width rather than the full page. */
.intro p { max-width: 760px; margin: 0 auto 1.2em; }
.intro p:last-child { margin-bottom: 0; }

/* To left-align your note instead of centring it, change the
   text-align line in .intro above from center to left.                    */

/* ------------------------------------------------- shared page intro ---- */

.page-intro {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3.5rem 2rem 0;
  text-align: center;
}

.page-intro h1 {
  font-size: var(--size-heading);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.page-intro p { max-width: 640px; margin: 0 auto; }

/* --------------------------------------------- articles listing cards --- */
/* Reuses .posts / .post-card from the home page. These few rules restyle
   the titles as links and match the blog page's own colours.               */

.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--color-heading); }
.post-card__thumb { transition: opacity .15s ease; }
.post-card a:hover .post-card__thumb { opacity: .88; }
.post-card__more { color: var(--color-read-more); font-weight: 700; }

/* ---------------------------------------------------- single article ---- */

.entry {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 2rem 1rem;
}

.entry__title {
  font-size: var(--size-heading);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: .6rem;
}

.entry__meta {
  font-size: 14px;
  color: var(--color-meta);
  margin-bottom: 2rem;
}

.entry__lead { width: 100%; margin: 0 0 2rem; }

.entry p  { margin: 0 0 1.2em; }
.entry ul, .entry ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.entry li { margin-bottom: .5em; }

.entry h2, .entry h3, .entry h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.25;
  margin: 1.8em 0 .6em;
}
.entry h2 { font-size: 26px; font-weight: 500; }
.entry h3 { font-size: 21px; font-weight: 500; }
.entry h4 { font-size: 18px; font-weight: 600; }

.entry img { margin: 1.6em auto; }
.entry figure { margin: 1.6em 0; }
.entry figcaption { font-size: 14px; color: var(--color-meta); margin-top: .5em; }

.entry blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--color-panel-bg);
  color: var(--color-meta);
}

.back {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  font-size: 15px;
}
.back a { text-decoration: none; }
.back a:hover { text-decoration: underline; }

/* Responsive 16:9 wrapper for any embedded video. */
.video { position: relative; padding-bottom: 56.25%; height: 0; margin: 1.8em 0; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------- about us --- */
/* Two biographies side by side on a pale panel. Each round portrait floats
   left and the paragraphs wrap around it, exactly as on the live site.      */

.bios {
  background: var(--color-about-bg);
  padding: 3.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.bio { max-width: 520px; }

.bio__portrait {
  float: left;
  width: 200px;
  height: auto;
  margin: 0 1.25rem .5rem 0;
  /* The live site wraps text in a straight rectangle beside the portrait.
     For text that hugs the round edge instead, add:
         shape-outside: circle(50%);                                       */
}

.bio p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-small-text);
  margin: 0 0 1.1em;
}

.bio::after { content: ""; display: block; clear: both; }

/* ---------------------------------------------------------- podcast ----- */

.podcast-hero {
  /* the soft gradient panel from the live site */
  background-image: linear-gradient(145deg,
                      rgba(232, 239, 207, 0.58) 24%,
                      rgba(177, 188, 201, 0.67) 51%);
  padding: 4rem 2rem;

  /* text on the left, round cover art on the right */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.podcast-hero__text { text-align: center; }

.podcast-hero__art {
  width: 400px;
  max-width: 100%;
  height: auto;
}

.podcast-hero h1 {
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-heading);
  margin-bottom: 1.2rem;
}

.podcast-hero__tagline {
  font-family: var(--font-heading);
  font-size: 24px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-body-text);
  margin: 0;
}

.podcast-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 2rem 1rem;
  text-align: center;
}

/* The teal handwriting-style heading. */
.script {
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-podcast-script);
  margin-bottom: 1.4rem;
}

.episodes {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1rem;
}

.episode {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-rule);
}
.episode:last-child { border-bottom: 0; }

.episode__art { width: 100%; border-radius: 6px; }

.episode__title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  color: var(--color-post-title);
  margin-bottom: .6rem;
}
.episode__title a { color: inherit; text-decoration: none; }
.episode__title a:hover { color: var(--color-heading); }

.episode__listen {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-body-text);
  text-decoration: none;
}
.episode__listen:hover { color: var(--color-read-more); }

.episode__date { font-size: 12px; color: var(--color-meta-grey); margin: .5rem 0 0; }

.episode__number {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin-bottom: .5rem;
}

/* The Spotify player is a fixed-height bar, not a 16:9 video. */
.player { margin: 2rem 0; }
.player iframe { width: 100%; height: 152px; border: 0; border-radius: 12px; }

.shownotes { list-style: none; margin: 0 0 1.5em; padding: 0; }
.shownotes li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .5rem;
  padding: .55em 0;
  border-bottom: 1px solid var(--color-rule);
}
.shownotes .ts {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-heading);
}

.listen {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  text-align: center;
}
.listen__lead { font-size: 17px; line-height: 1.7; margin-bottom: 1.5rem; }
.listen__logos { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin: 0; }
.listen__logos img { height: 44px; width: auto; }

/* ------------------------------------------------------- responsive ----- */

@media (max-width: 800px) {
  /* On phones the page's own body text drops to 18px too, so step the note
     down again to keep it a little smaller than the content below it.      */
  .intro { font-size: 15px; padding: 2.5rem 1.5rem 2rem; }

  .site-header { justify-content: center; padding: 1rem 1.25rem; }
  .site-nav ul { gap: 1.5rem; }

  .podcast-hero { padding: 3rem 1.5rem; gap: 2rem; }
  .podcast-hero h1 { font-size: 34px; }
  .podcast-hero__tagline { font-size: 19px; }
  .podcast-hero__art { width: 260px; order: -1; }   /* art above the text */
  .script { font-size: 26px; }

  .bios { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; }
  .bio__portrait { width: 150px; margin-right: 1rem; }

  .episode { grid-template-columns: 1fr; gap: 1rem; }
  .episode__art { max-width: 240px; }

  .entry, .back { padding-left: 1.5rem; padding-right: 1.5rem; }
  .shownotes li { grid-template-columns: 56px 1fr; }
}