/* ==========================================================================
   LeafyCard blog - a port of the approved design's styles.css, scoped under .leafy-blog.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../App_Themes/AppTheme/font/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.leafy-blog {
  --forest: #0d4a2a;
  --lime: #6bbf1f;
  --navy: #12243a;
  --line: rgba(18, 36, 58, 0.1);
  --muted: rgba(18, 36, 58, 0.55);
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  line-height: 1.6;
}

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

.leafy-blog h1,
.leafy-blog h2,
.leafy-blog h3,
.leafy-blog h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0;
}

.leafy-blog a { color: inherit; }
.leafy-blog img { max-width: 100%; display: block; }
.leafy-blog button { font: inherit; }

.leafy-blog .wrap { max-width: 1104px; margin: 0 auto; padding: 0 24px; }
.leafy-blog .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.leafy-blog .hidden { display: none !important; }

/* ------------------------------------------------------------ page intro -- */
.leafy-blog .intro { padding: 56px 0 0; max-width: 640px; }
.leafy-blog .eyebrow {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; margin: 0 0 12px;
  width: fit-content;
  background: linear-gradient(to right, var(--forest), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.leafy-blog .intro h1 { font-size: clamp(34px, 5vw, 48px); }
.leafy-blog .intro p { margin: 16px 0 0; font-size: 18px; color: var(--muted); }

/* --------------------------------------------------------------- featured -- */
.leafy-blog .featured {
  margin-top: 48px; display: grid; gap: 32px; align-items: center;
  border: 1px solid var(--line); border-radius: 24px; padding: 24px;
  background: #fff; box-shadow: 0 1px 2px rgba(18, 36, 58, 0.04);
}
@media (min-width: 820px) {
  .leafy-blog .featured { grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px; }
}
.leafy-blog .featured .cover { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.leafy-blog .featured .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.leafy-blog .featured .cover:hover img { transform: scale(1.02); }
.leafy-blog .featured h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 12px; }
.leafy-blog .featured h2 a { text-decoration: none; }
.leafy-blog .featured h2 a:hover { color: var(--forest); }
.leafy-blog .featured .excerpt { color: rgba(18, 36, 58, 0.65); margin-top: 16px; }
.leafy-blog .featured .excerpt p { margin: 0 0 12px; }
.leafy-blog .read-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-weight: 600; color: var(--forest); text-decoration: none;
}
.leafy-blog .read-more:hover { gap: 12px; }
.leafy-blog .date { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ grid -- */
.leafy-blog .post-grid {
  margin-top: 56px; display: grid; gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .leafy-blog .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .leafy-blog .post-grid { grid-template-columns: repeat(3, 1fr); } }

.leafy-blog .card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  transition: transform .2s, box-shadow .2s;
}
.leafy-blog .card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(18, 36, 58, 0.1); }
.leafy-blog .card .cover { aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.leafy-blog .card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.leafy-blog .card:hover .cover img { transform: scale(1.03); }
.leafy-blog .card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.leafy-blog .card h3 { font-size: 17px; line-height: 1.35; }
.leafy-blog .card h3 a { text-decoration: none; }
.leafy-blog .card h3 a:hover { color: var(--forest); }
.leafy-blog .card .snippet {
  margin: 12px 0 0; font-size: 14px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.leafy-blog .card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.leafy-blog .card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(18,36,58,.05); }

.leafy-blog .byline { display: flex; align-items: center; gap: 12px; }
.leafy-blog .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.leafy-blog .avatar-fallback {
  width: 36px; height: 36px; border-radius: 50%; background: var(--forest);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.leafy-blog .byline .name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.leafy-blog .byline .when { font-size: 13px; color: var(--muted); line-height: 1.3; }

/* The cover is a link. Holding an <img> there is nothing to underline, so the site's
   link underline went unnoticed - until a post with no cover put the placeholder's
   "LeafyCard" text inside the same anchor and the line appeared under it. Set here on
   the anchor because a descendant cannot cancel a decoration it inherited. */
.leafy-blog .cover,
.leafy-blog .cover:hover,
.leafy-blog .cover:focus { text-decoration: none; }

/* ------------------------------------------------------ long author text -- */
/* Everything here is typed by a writer, so it can hold a pasted URL or any other run
   with nothing to break at. Such a value sets the min-content width of the grid track
   holding it, which widens the track, the grid and finally the page - the card clips
   its own overflow but the layout has already been stretched by then. Breaking the
   value inside its own box is what keeps the columns their intended width. */
.leafy-blog .featured h2,
.leafy-blog .featured .excerpt,
.leafy-blog .card h3,
.leafy-blog .card .snippet,
.leafy-blog .byline .name,
.leafy-blog .article h1,
.leafy-blog .article .lede,
.leafy-blog .article-body {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* A grid item will not shrink below its longest word unless it is told it may, so the
   rule above needs this to take effect inside the two grids. */
.leafy-blog .featured > *,
.leafy-blog .post-grid > * { min-width: 0; }

/* A pasted link inside the article body is the same story, and an oversized <pre> or
   table would push the column out too - each scrolls inside itself instead. */
.leafy-blog .article-body pre,
.leafy-blog .article-body table { max-width: 100%; overflow-x: auto; }
.leafy-blog .article-body img { max-width: 100%; height: auto; }

.leafy-blog .placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--forest), var(--lime));
  display: grid; place-items: center; color: rgba(255,255,255,.7);
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
}

/* ------------------------------------------------------------ pagination -- */
.leafy-blog .pagination { margin: 48px 0; display: flex; justify-content: center; gap: 8px; }
.leafy-blog .pagination a, .leafy-blog .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(18,36,58,.15); color: var(--muted);
  background: none;
}
.leafy-blog .pagination a:hover { border-color: var(--forest); color: var(--forest); }
.leafy-blog .pagination .current { background: var(--forest); color: #fff; border-color: var(--forest); }
.leafy-blog .pagination .disabled { opacity: .35; border-color: transparent; }

/* --------------------------------------------------------------- article -- */
/* padding-top only - the shorthand would reset the side padding wrap-narrow sets. */
.leafy-blog .article { padding-top: 40px; }
.leafy-blog .back-link { font-size: 14px; font-weight: 600; color: var(--forest); text-decoration: none; }
.leafy-blog .back-link:hover { text-decoration: underline; }
.leafy-blog .article h1 { font-size: clamp(32px, 4.5vw, 46px); margin-top: 24px; line-height: 1.15; }
.leafy-blog .article .lede { font-size: 18px; color: var(--muted); margin-top: 20px; }
.leafy-blog .author-block {
  margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.leafy-blog .author-block .avatar, .leafy-blog .author-block .avatar-fallback { width: 48px; height: 48px; font-size: 16px; }
.leafy-blog .author-block .meta { flex: 1; }
.leafy-blog .author-block .role { font-size: 14px; color: var(--muted); }
.leafy-blog .author-block .dates { font-size: 14px; color: var(--muted); text-align: right; }
.leafy-blog .article-cover { margin-top: 32px; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.leafy-blog .article-cover img { width: 100%; height: 100%; object-fit: cover; }

.leafy-blog .article-body { margin-top: 40px; font-size: 17px; line-height: 1.85; color: rgba(18,36,58,.88); }
.leafy-blog .article-body > * + * { margin-top: 1.25em; }
.leafy-blog .article-body h2 { font-size: 26px; margin-top: 2.2em; }
.leafy-blog .article-body h3 { font-size: 20px; margin-top: 1.8em; }
.leafy-blog .article-body ul { list-style: disc; padding-left: 1.4em; }
.leafy-blog .article-body ol { list-style: decimal; padding-left: 1.4em; }
.leafy-blog .article-body li + li { margin-top: .4em; }
.leafy-blog .article-body a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.leafy-blog .article-body blockquote {
  border-left: 4px solid var(--lime); padding-left: 1.1em; margin-left: 0;
  font-size: 19px; font-style: italic; color: rgba(18,36,58,.75);
}
.leafy-blog .article-body img { border-radius: 16px; max-width: 100%; height: auto; }

/* The editor stores the chosen size as a percentage of the article column. That column
   is less than half as wide on a phone, so a 25% image lands at about 85px. Below the
   tablet breakpoint the width is dropped and every body image fills the column.
   !important because the percentage is an inline style written by the editor. */
@media (max-width: 640px) {
  .leafy-blog .article-body img { width: 100% !important; }
}
.leafy-blog .article-body strong { font-weight: 700; color: var(--navy); }

.leafy-blog .about-author { margin-top: 56px; border-radius: 16px; background: rgba(18,36,58,.04); padding: 24px; }
.leafy-blog .about-author .label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(18,36,58,.4);
}
.leafy-blog .about-author p { margin: 0 0 8px; }
.leafy-blog .about-author p:last-child { margin-bottom: 0; }
.leafy-blog .related { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.leafy-blog .related h2 { font-size: 24px; margin-bottom: 24px; }

.leafy-blog .empty { padding: 48px; text-align: center; color: var(--muted); }

/* Only the blog band is painted; the storefront master supplies the chrome. */
.leafy-blog { padding-bottom: 80px; }

/* ----------------------------------------------------------- preview mode -- */
/* Shown only when the admin opens an article through a preview link. */
.leafy-blog .preview-banner {
  margin: 24px 0 8px; padding: 12px 16px; border-radius: 12px;
  background: #fef3c7; color: #92400e; font-size: 14px; line-height: 1.5;
  border: 1px solid #fcd34d;
}
.leafy-blog .preview-banner strong { color: #78350f; }