/*
Theme Name: YLP Articles
Theme URI: https://lifestyle-physician.com/articles
Author: Your Lifestyle Physician
Author URI: https://lifestyle-physician.com
Description: Custom WordPress theme for the Articles section of Your Lifestyle Physician, built from scratch to match the static main site's Petrol & Bronze brand system exactly (Source Serif 4 / Inter / DM Mono), so visitors see no visual seam moving between lifestyle-physician.com and the Articles section.
Version: 1.0.0
Requires at least: 6.0
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: ylp-articles
*/

/* ==========================================================================
   Brand system — values ported 1:1 from the static site's css/style.css.
   Do not hand-tune these independently; if the static site's values change,
   update them here to match rather than drifting the two apart.
   ========================================================================== */

:root {
  --petrol: #153B3B;
  --bronze: #A9713D;
  --charcoal: #2B2B2B;
  --grey: #6B6B6B;
  --cream: #EDEAE1;
  --white: #FFFFFF;

  --font-display: 'Source Serif 4', serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'DM Mono', monospace;

  --max-width: 1140px;
  --gutter: 1.5rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6.5rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

/* h1–h4 carry only shared defaults, same as the static site — deliberately
   no font-size here, so every heading still needs a role class below. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--petrol);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

p { max-width: 62ch; }
p + p { margin-top: 1em; }

h1, h2, h3, h4, p, li { text-align: left; }

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Buttons / Links (ported from the static site's .btn / .btn-disabled
   / .text-link — needed for the header's disabled CTA and any in-content
   links/buttons future articles add via the editor) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--petrol);
  border-radius: 2px;
  background: var(--petrol);
  color: var(--white);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: #0e2a2a; }

.text-link {
  display: inline-block;
  font-weight: 600;
  color: var(--petrol);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.1em;
}
.text-link:hover, .text-link:focus-visible { color: var(--bronze); }

.btn-disabled {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--grey);
  border-radius: 2px;
  color: var(--grey);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: not-allowed;
}
.btn-disabled:hover,
.btn-disabled:focus-visible {
  color: var(--grey);
  background: var(--cream);
}

/* ==========================================================================
   Header — ported verbatim from the static site, including the fixes for
   two previously-solved bugs. Do not change the mechanism of either:

   1. .site-header stays position:sticky on desktop but position:static on
      mobile (see the @media block below) — a real Chromium paint bug
      clips the logo at mobile widths for ANY non-static position
      (sticky/fixed/relative all tested and clipped), bisected directly on
      the static site. The mobile dropdown is position:fixed instead, so it
      doesn't need the header to be positioned.
   2. .site-header's height is calc()'d from --logo-height/--header-pad-*
      rather than left to auto-size — auto height combined with sticky is
      what caused the clipping in the first place.
   ========================================================================== */
:root {
  --logo-height: clamp(44px, 27px + 5.35vw, 90px);
  --header-pad-top: 0.6rem;
  --header-pad-bottom: 0.6rem;
}

.site-header {
  height: calc(var(--logo-height) + var(--header-pad-top) + var(--header-pad-bottom) + 1px);
  border-bottom: 1px solid #E4E0D6;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--header-pad-top) var(--header-pad-bottom);
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  height: var(--logo-height);
  width: auto;
  aspect-ratio: 4 / 1;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav ul {
  display: flex;
  gap: 1.75rem;
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--petrol);
  border-bottom-color: var(--bronze);
}

/* Disabled "Schedule a Consultation" CTA — specificity note ported as-is:
   .site-nav a (1 class + 1 element) ties .btn-disabled (1 class + 0
   elements) on the class tier then wins on the element tier, so color and
   border-bottom must be re-asserted here at 3 classes to safely outrank it. */
.site-nav .btn-disabled.nav-cta {
  margin-left: var(--space-xs);
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  color: var(--grey);
  border-bottom: 1px solid var(--grey);
}
.site-nav .btn-disabled.nav-cta:hover,
.site-nav .btn-disabled.nav-cta:focus-visible {
  color: var(--grey);
  border-bottom-color: var(--grey);
}

.nav-toggle {
  display: none;
  position: relative;
  background: none;
  border: none;
  padding: 0.5rem;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--petrol);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(21, 59, 59, 0.35);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--petrol);
  color: var(--cream);
  padding-block: var(--space-lg) var(--space-md);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.site-footer nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer a {
  color: var(--cream);
}
.site-footer a:hover, .site-footer a:focus-visible { color: var(--white); text-decoration: underline; }

.site-footer .footer-meta {
  font-size: 0.875rem;
  color: #B9C4C0;
}

/* Quiet social icons next to the contact details — thin single-weight
   outline glyphs, matching the static site's footer treatment exactly (the
   rounded-square frame is part of each mark's own recognizable shape, not
   a separate badge/background layer — the icons read as bare abstract
   lines without it). Explicit flex-direction/flex-wrap/flex-shrink rather
   than relying on defaults, so this can't collapse into a stacked column
   under any ancestor's flex context. */
.footer-social {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
/* .site-footer a (1 class + 1 element) would otherwise beat a bare
   .footer-social__link (1 class) on specificity — same trap the static
   site's header/nav CSS already documents — so this is scoped under
   .site-footer to safely outrank it. text-decoration:none is deliberate,
   not a leftover reset: .site-footer a:hover sets text-decoration:underline
   sitewide, and without overriding it here that underline was being
   computed against an anchor containing only a block-level SVG (no
   text/baseline), rendering as a stray dash near the icon on hover. */
.site-footer .footer-social__link {
  display: inline-flex;
  flex-shrink: 0;
  color: #B9C4C0;
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer .footer-social__link:hover,
.site-footer .footer-social__link:focus-visible {
  color: var(--white);
  text-decoration: none;
}
.footer-social__link svg {
  display: block;
  width: 30px;
  height: 30px;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: var(--space-md) auto 0;
  padding: var(--space-md) var(--gutter) 0;
  border-top: 1px solid #2B5252;
  font-size: 0.8rem;
  color: #9AABA6;
}

/* ==========================================================================
   Page-level layout — .articles-listing-wrapper / .single-article-wrapper
   take the place of the static site's outer <div class="container"> (same
   --max-width, gutter and vertical rhythm), now also holding the shared
   "All Articles" sidebar alongside the main content column.
   ========================================================================== */
.articles-listing-wrapper,
.single-article-wrapper {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-xl);
  display: flex;
  gap: 3rem;
}

.articles-listing {
  flex: 1;
  min-width: 0;
}

/* Card list — same bordered-card pattern as the static site's .writing-item,
   sized/spaced identically. Only the title is a link here (matching the
   exact archive.php markup given, which links just the h2, not the card). */
.article-card {
  display: block;
  padding: var(--space-md);
  border: 1px solid #E4E0D6;
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.article-card + .article-card {
  margin-top: var(--space-md);
}
.article-card:hover {
  border-color: var(--bronze);
  background: var(--cream);
}

.article-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  line-height: 1.25;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem); /* matches .section-subheading */
  margin-bottom: 0.4rem;
}
.article-card-title a:hover,
.article-card-title a:focus-visible {
  color: var(--bronze);
}

.article-card-excerpt {
  font-family: var(--font-body);
}
.article-card-excerpt p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 62ch;
}

.articles-pagination {
  margin-top: var(--space-lg);
}
.articles-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.articles-pagination .page-numbers {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--petrol);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.1em;
}
.articles-pagination .page-numbers:hover,
.articles-pagination .page-numbers:focus-visible {
  color: var(--bronze);
}
.articles-pagination .page-numbers.current {
  color: var(--grey);
  border-bottom-color: var(--grey);
  cursor: default;
}
.articles-pagination .page-numbers.dots {
  border-bottom: none;
  color: var(--grey);
}

/* ==========================================================================
   Single article (single.php) — .single-article keeps the same 68ch
   reading-width constraint .article-body used on the static site, now as a
   capped flex child of .single-article-wrapper rather than the page's own
   outer container (that role moved to the wrapper above).
   ========================================================================== */
.single-article {
  max-width: 68ch;
  flex: 1;
  min-width: 0;
}

.article-eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--petrol);
}

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  line-height: 1.2;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem); /* matches .section-subheading (the "Credentials" size on /about), not .page-title */
}

.article-content {
  margin-top: var(--space-lg);
}
.article-content p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.article-content h2,
.article-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  line-height: 1.25;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem); /* matches .section-subheading */
  margin-top: var(--space-lg);
}
.article-content > h2:first-child,
.article-content > h3:first-child { margin-top: 0; }
.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }
.article-content a {
  color: var(--petrol);
  font-weight: 600;
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.05em;
}
.article-content a:hover,
.article-content a:focus-visible { color: var(--bronze); }
.article-content ul,
.article-content ol {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}
.article-content ul li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--charcoal);
}
.article-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--bronze);
}

/* ==========================================================================
   Sidebar (sidebar-articles.php) — shared "All Articles" list, shown
   alongside both the listing page and every single article, so any article
   is reachable regardless of pagination.
   ========================================================================== */
.articles-sidebar {
  flex: 0 0 240px;
}

.sidebar-heading {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.sidebar-article-list li {
  border-bottom: 1px solid #E4E0D6;
}
.sidebar-article-list li:last-child { border-bottom: none; }

.sidebar-article-list a {
  display: block;
  padding-block: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal);
}
.sidebar-article-list a:hover,
.sidebar-article-list a:focus-visible {
  color: var(--bronze);
}

.sidebar-archive-link {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
}

/* .page-title — used by page-all-articles.php's <h1>. Matches the static
   site's own .page-title exactly (About Me, The Six Pillars, etc.) — the
   full page-heading size, not .article-title's smaller subheading size. */
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  line-height: 1.2;
  font-size: clamp(1.875rem, 2.2vw + 1.2rem, 2.5rem);
}

/* ==========================================================================
   All Articles (page-all-articles.php) — title-only listing at /all/, no
   dates or excerpts, paginated at 20 per page. Container styling matches
   .articles-listing (same max-width/gutter/vertical-rhythm treatment);
   this page has no sidebar, so it's applied directly rather than via a
   separate wrapper element.
   ========================================================================== */
.all-articles-listing {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-xl);
}

.all-articles-title-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-lg);
}
.all-articles-title-list li {
  border-bottom: 1px solid #E4E0D6;
}
.all-articles-title-list li:last-child {
  border-bottom: none;
}
.all-articles-title-list a {
  display: block;
  padding-block: 0.9rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--charcoal);
}
.all-articles-title-list a:hover,
.all-articles-title-list a:focus-visible {
  color: var(--bronze);
}

/* paginate_links() (used here) outputs the same page-numbers/current/dots
   classes the_posts_pagination() does on the main archive — this mirrors
   .articles-pagination's treatment exactly under the new wrapper class.
   Unlike the_posts_pagination(), paginate_links() doesn't wrap its output
   in its own nav/flex container, so that layout lives on the wrapper here. */
.all-articles-pagination {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.all-articles-pagination .page-numbers {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--petrol);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.1em;
}
.all-articles-pagination .page-numbers:hover,
.all-articles-pagination .page-numbers:focus-visible {
  color: var(--bronze);
}
.all-articles-pagination .page-numbers.current {
  color: var(--grey);
  border-bottom-color: var(--grey);
  cursor: default;
}
.all-articles-pagination .page-numbers.dots {
  border-bottom: none;
  color: var(--grey);
}

/* ==========================================================================
   Responsive — the one mobile/desktop nav breakpoint, ported verbatim from
   the static site, including the position:static workaround.
   ========================================================================== */
@media (max-width: 768px) {
  .site-nav ul {
    position: fixed;
    top: var(--dropdown-top, calc(var(--logo-height) + var(--header-pad-top) + var(--header-pad-bottom) + 1px));
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: var(--space-sm) var(--gutter) var(--space-md);
    gap: 0.25rem;
    border-bottom: 1px solid #E4E0D6;
    transform: translateY(-110%);
    transition: transform 0.2s ease;
    z-index: 50;
  }
  .site-nav[data-open="true"] ul {
    transform: translateY(0);
  }
  .site-nav ul a {
    display: block;
    padding-block: 0.9rem;
    font-size: 1.05rem;
    border-bottom: 1px solid #EFEFEF;
  }
  .site-nav ul li:last-child a { border-bottom: none; }

  .site-nav ul .btn-disabled.nav-cta {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
  }

  .nav-toggle { display: flex; }

  .site-nav[data-open="true"] ~ .nav-backdrop {
    display: block;
    opacity: 1;
  }

  :root {
    --header-pad-top: 0.85rem;
    --header-pad-bottom: 0.6rem;
  }

  .site-header {
    position: static;
  }

  .site-footer .container { flex-direction: column; gap: var(--space-md); }

  /* Sidebar drops below the main content rather than squeezing beside it. */
  .articles-listing-wrapper,
  .single-article-wrapper {
    flex-direction: column;
  }

  .articles-sidebar {
    flex: none;
    order: 2;
  }
}