/* Blog archive: the few things the precompiled Tailwind bundle doesn't cover.
   Kept hand-written because there is no Tailwind build step in this repo. */

/* Filter/search hiding. Own class rather than Tailwind's `hidden`, so it never
   depends on source order against the cards' `flex` utility. */
.is-hidden { display: none !important; }

.blog-chip {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: 1px solid #d8d3c9;
  background: #fff;
  color: #014D4E;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.blog-chip:hover { border-color: #f5bd16; }
.blog-chip.is-active {
  background: #014D4E;
  border-color: #014D4E;
  color: #fff;
}

#blog-search:focus {
  outline: none;
  border-color: #167c78;
  box-shadow: 0 0 0 3px rgba(70, 166, 159, .25);
}

/* Article body: the source archive is plain WordPress prose. */
.blog-body p { margin: 0; }
.blog-body blockquote { margin: 1.5rem 0; }
.blog-body a { word-break: break-word; }

/* ------------------------------------------------------------------
   Utilities the blog markup uses that are absent from the checked-in
   assets/css/tailwind.min.css bundle. That file is a build artifact and
   this repo has no Tailwind build step, so they are supplied by hand.
   Values are Tailwind's own defaults. Verified missing with:
     grep -o '\.pl-6[,{: ]' assets/css/tailwind.min.css
   Drop any of these if the bundle is ever regenerated to include them.
   ------------------------------------------------------------------ */
.sticky { position: sticky; }
.mt-auto { margin-top: auto; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pl-6 { padding-left: 1.5rem; }
.h-80 { height: 20rem; }
.max-w-4xl { max-width: 56rem; }
.list-decimal { list-style-type: decimal; }
.border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); }
.hover\:underline:hover { text-decoration-line: underline; }

@media (min-width: 640px) {
  .sm\:h-96 { height: 24rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* =====================================================================
   HEADER: navbar, breadcrumb and hero
   ---------------------------------------------------------------------
   Written as plain CSS with `blog-` prefixed component classes rather
   than Tailwind utilities. `assets/css/tailwind.min.css` is a checked-in
   build artifact and this repo has no Tailwind build step, so a class it
   wasn't built with will never resolve no matter how standard the name
   looks. The previous header depended on `md:flex`, which is absent from
   that bundle (only `.md\:flex-row` exists), so the nav links were
   display:none at every width on all 59 blog and author pages.

   Visual language is ported from assets/css/one-to-one-life-coaching.css
   (.ll-hero-wrapper, .ll-hero-badge-pill, the drifting ring motif) so the
   blog reads as part of the same brand as the newest marketing pages.
   Palette from tailwind.config.js: tealDark #014D4E, teal #167c78,
   gold #f5bd16, cream #FAF8F5.
   ===================================================================== */

/* ---------------------------------------------------------------- NAV */

/* The blog reuses the shared navbar component in assets/css/navbar.css, which
   owns the look: teal bar, white Cormorant wordmark, white links with the gold
   underline sweep, and the .glass-nav white state on scroll. Only layout,
   positioning and the responsive behaviour live here, so the blog cannot drift
   away from the rest of the site.

   What the blog deliberately omits is the tripwire strip the marketing pages
   carry above their navbar, with email, phone and the Lets Connect button.
   These are reading pages and carry no call to action in the header. */

.blog-nav {
  position: sticky;
  top: 0;
  z-index: 50;
}

.blog-nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* .logo in navbar.css supplies the Cormorant face, size and colour. */
.blog-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
}

.blog-brand img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* Hamburger. navbar.css sets .mobile-menu-btn to teal, which is unreadable on
   the teal bar, so it is white at rest and teal once the bar goes white. */
.blog-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  cursor: pointer;
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.blog-nav.glass-nav .blog-nav-toggle { color: #014D4E; }
.blog-nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.blog-nav-toggle:focus-visible { outline: 2px solid #f5bd16; outline-offset: 2px; }

.blog-nav-panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: #ffffff;
  box-shadow: 0 12px 24px -12px rgba(1, 77, 78, 0.35);
}

.blog-nav-panel a {
  display: block;
  padding: 0.95rem 1.25rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #014D4E;
  text-decoration: none;
  border-bottom: 1px solid rgba(1, 77, 78, 0.06);
}

.blog-nav-panel a:last-child { border-bottom: 0; }
.blog-nav-panel a:hover { color: #f5bd16; }
.blog-nav-panel a.is-active { font-weight: 700; border-left: 3px solid #f5bd16; }

@media (min-width: 640px) {
  .blog-brand img { width: 3.5rem; height: 3.5rem; }
}

@media (max-width: 767px) {
  .blog-nav-links { display: none; }
  .blog-nav-toggle { display: inline-flex; }
  .blog-nav-panel.is-open { display: block; }
  .blog-nav-inner { height: 4.25rem; }
  .blog-brand img { width: 2.25rem; height: 2.25rem; }
}

/* --------------------------------------------------------------- HERO */

.blog-hero {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2.5rem;
  background: linear-gradient(180deg, rgba(250, 248, 245, 0.98) 0%, rgba(243, 247, 246, 0.85) 100%);
}

/* Concentric rings that slowly drift across opposite corners, the same
   mindfulness ripple motif as .ll-hero-wrapper::before. Peak opacity is
   capped lower than the coaching page's because this is a reading
   surface, not a sales page. z-index keeps it behind all copy. */
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* ONE ring layer only. The 1:1 page stacks a teal set against a gold
     set from opposite corners; over this short, wide band the two crossed
     at shallow angles and read as dense hatching rather than texture.
     Teal alone: it is the primary brand accent and carries the ripple
     motif, where gold is the call-to-action colour and barely registers
     on cream. Radii are also smaller than the 1:1 page's, because that
     hero is tall enough for 180% circles to read as arcs and this one
     flattens them into stripes. */
  background-image:
    repeating-radial-gradient(circle at 6% -30%, rgba(22, 124, 120, 0.16) 0, rgba(22, 124, 120, 0.16) 1.5px, transparent 1.5px, transparent 32px);
  background-size: 100% 260%;
  background-position: 0% 0%;
  animation: blogRingsDrift 28s ease-in-out infinite alternate;
}

@keyframes blogRingsDrift {
  0%   { background-position: 0% 0%; opacity: 0.55; }
  100% { background-position: 14% 10%; opacity: 1; }
}

.blog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.05rem;
  border-radius: 9999px;
  background: rgba(22, 124, 120, 0.08);
  border: 1px solid rgba(22, 124, 120, 0.18);
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #014D4E;
}

.blog-badge-dot {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #167c78;
  flex-shrink: 0;
}

.blog-badge-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background-color: #167c78;
  opacity: 0.6;
  animation: blogPulseRing 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes blogPulseRing {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.blog-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  color: #014D4E;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 1rem 0 0;
}

.blog-hero h1 em { font-style: italic; color: #167c78; }

/* Teal-to-gold rule: the design system's most portable ornament, used
   today only on the 1:1 page's progress bar and active pagination dot. */
.blog-hero-rule {
  width: 5rem;
  height: 3px;
  border-radius: 9999px;
  margin: 1.15rem auto 0;
  background: linear-gradient(90deg, #167c78, #f5bd16);
}

.blog-hero-lede {
  font-family: Lato, sans-serif;
  font-size: 1.02rem;
  line-height: 1.75;
  font-weight: 300;
  color: #4b5563;
  max-width: 42rem;
  margin: 1.15rem auto 0;
}

/* Search + chips live inside the hero. Keeping them in the cream section
   below is what made the top of the page read as four flat stripes. */
.blog-hero-tools { margin-top: 2.25rem; }

#blog-search {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(1, 77, 78, 0.15);
  background: rgba(255, 255, 255, 0.9);
  font-family: Lato, sans-serif;
  font-size: 0.9rem;
  color: #014D4E;
}

#blog-search::placeholder { color: #8a9a99; }

#blog-search:focus {
  outline: none;
  border-color: #167c78;
  box-shadow: 0 0 0 3px rgba(70, 166, 159, .25);
}

.blog-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.blog-count {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  margin-top: 1rem;
}

/* Article pages: same wash and motif, left-aligned at the article measure. */
.blog-hero--article { padding: 2.5rem 0 2rem; }
.blog-hero--article .blog-hero-inner { max-width: 56rem; text-align: left; }
.blog-hero--article .blog-hero-rule { margin-left: 0; margin-right: 0; }
.blog-hero--article .blog-hero-lede { margin-left: 0; margin-right: 0; }

.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-family: Lato, sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
}

.blog-byline a {
  color: #014D4E;
  font-weight: 600;
  text-decoration: none;
}

.blog-byline a:hover { text-decoration: underline; }
.blog-byline .blog-byline-sep { color: #f5bd16; }

@media (min-width: 768px) {
  .blog-hero { padding: 4.5rem 0 3.25rem; }
  .blog-hero--article { padding: 3.25rem 0 2.5rem; }
  .blog-nav-inner { padding: 0 1.5rem; }
  .blog-hero-inner { padding: 0 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero::before {
    animation: none !important;
    opacity: 0.5;
    background-position: 0% 0%;
  }
  .blog-badge-dot::after { animation: none !important; opacity: 0.35; }
  .blog-nav, .nav-link, .nav-link::after { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Author page shim. /author/dhivya-kannan/ loads this file and used ten
   utilities that were never compiled into tailwind.min.css, which left
   its profile grid collapsed and its buttons overflowing their labels.
   Same situation as the header's `md:flex`, same hand-written fix.
   Values are Tailwind's own defaults.
   --------------------------------------------------------------------- */
.h-56 { height: 14rem; }
.w-56 { width: 14rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.pl-5 { padding-left: 1.25rem; }
.mr-1 { margin-right: 0.25rem; }
.text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); }
.hover\:bg-opacity-90:hover { --tw-bg-opacity: 0.9; }

@media (min-width: 640px) {
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}