/*
 * article.css
 * Standard article design (Klass Hub Article mock-up, Oct 2026).
 * Loaded only on posts containing [olg_article] (see inc/article-revamp.php), and every rule
 * is scoped to body.olg-article so other posts never change.
 *
 * Classes editors can add in the block editor (Block > Advanced > Additional CSS class);
 * the full how-to is at the top of inc/article-revamp.php:
 *   olg-callout       on a Group block: grey rounded panel (e.g. "Klass at a glance")
 *   olg-cta           on a Group block: closing call-to-action with a divider above
 *   olg-downloadpdf   on a Button: PDF download, with space before the next section
 *   olg-lastupdated   on the "Last Updated:" paragraph: sits on one line with the date
 *   is-style-outline  on a Button (or pick the "Outline" style): outline button
 * Enquiry pop-up styles are in enquiry.css.
 *
 * Everything is sized from the tokens below, so a change there applies to the whole article.
 */

body.olg-article {
  /* Brand */
  --olg-maroon: #94193b;
  --olg-maroon-dark: #7a1430;
  --olg-teal: #00a7b5;
  /* Teal used for text. Swap for a darker teal (e.g. #007984) if stricter contrast is needed. */
  --olg-teal-text: var(--olg-teal);
  --olg-ink: #333f48;
  --olg-muted: #6b7780;
  --olg-panel: #f5f5f3;
  --olg-row: #f7f7f5;
  --olg-row-alt: #ebebee;
  --olg-line: #dcdde0;

  /* Layout */
  --olg-measure: 960px;
  --olg-radius: clamp(12px, 1.6vw, 18px);
  --olg-gap: clamp(1rem, 2.5vw, 1.5rem);
  --olg-space-section: clamp(2.25rem, 4vw, 3rem);
  --olg-space-block: clamp(1.5rem, 3vw, 2rem);
  --olg-pad-panel: clamp(1.25rem, 3vw, 2rem);
  --olg-banner-height: clamp(280px, 52vw, 720px);
  --olg-banner-focus: center 40%;

  /* Type */
  --olg-font: var(--lp--custom-preset--font-family-main, 'isidora'), Arial, sans-serif;
  --olg-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --olg-fs-small: 0.875rem;
  --olg-fs-sub: 1.1875rem;
  --olg-fs-section: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --olg-fs-title: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
}

/* -------------------------------------------------------------------------- */
/* Theme parts replaced by the article                                         */
/* -------------------------------------------------------------------------- */

/* Theme hero: the article opens with its own banner, so the theme's dark banner is hidden.
   Its H1 stays in the page (visually hidden) for search engines and screen readers. */
body.olg-article #hero.hero {
  position: absolute !important;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.olg-article #hero .hero-background,
body.olg-article .element-breadcrumbs {
  display: none;
}

/* "Related Posts" carousel under the article: hidden for now (its images aren't downloaded either) */
body.olg-article .post-element.listing-element {
  display: none;
}

/* Lets the banner run edge to edge without a sideways scrollbar */
body.olg-article #body.body-content {
  overflow-x: clip;
}

body.olg-article .content-element > .inner-section {
  padding-top: 0;
}

/* -------------------------------------------------------------------------- */
/* Layout and type                                                            */
/* -------------------------------------------------------------------------- */

body.olg-article .content-element .hic-blurb {
  max-width: var(--olg-measure);
  margin: 0 auto;
  color: var(--olg-ink);
  font-family: var(--olg-font);
  font-size: var(--olg-fs-body);
  font-weight: 300;
  line-height: 1.75;
}

body.olg-article .hic-blurb > p:empty {
  display: none;
}

body.olg-article .hic-blurb p {
  margin: 0 0 1.25em;
}

body.olg-article .hic-blurb strong {
  font-weight: 600;
  color: var(--olg-ink);
}

body.olg-article .hic-blurb a:not(.wp-block-button__link) {
  color: var(--olg-maroon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.olg-article .hic-blurb a:not(.wp-block-button__link):hover {
  color: var(--olg-maroon-dark);
}

body.olg-article .hic-blurb :is(h1, h2, h3, h4) {
  font-family: var(--olg-font);
  text-wrap: balance;
  scroll-margin-top: 120px;
}

/* Section headings (h2 and h3 look the same, as in the mock-up) */
body.olg-article .hic-blurb :is(h2, h3).wp-block-heading {
  margin: var(--olg-space-section) 0 0.75rem;
  color: var(--olg-ink);
  font-size: var(--olg-fs-section);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Sub-headings in teal */
body.olg-article .hic-blurb h4.wp-block-heading {
  margin: 1.75rem 0 0.35rem;
  color: var(--olg-teal-text);
  font-size: var(--olg-fs-sub);
  font-weight: 700;
  line-height: 1.3;
}

body.olg-article .hic-blurb :is(h2, h3).wp-block-heading + h4.wp-block-heading {
  margin-top: 0.5rem;
}

body.olg-article .olg-dot {
  color: var(--olg-maroon);
}

/* -------------------------------------------------------------------------- */
/* Banner, breadcrumbs and title                                               */
/* -------------------------------------------------------------------------- */

/* Opening banner: full width, square corners, taller on small screens than its natural shape.
   Change --olg-banner-focus to keep a different part of the image in view. */
body.olg-article .hic-blurb > .wp-block-image:first-child {
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
}

body.olg-article .hic-blurb > .wp-block-image:first-child img {
  width: 100%;
  height: var(--olg-banner-height);
  object-fit: cover;
  object-position: var(--olg-banner-focus);
  border-radius: 0;
}

body.olg-article .olg-breadcrumbs {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.olg-article .olg-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.olg-article .olg-breadcrumbs li {
  margin: 0;
  color: var(--olg-muted);
}

body.olg-article .olg-breadcrumbs li + li::before {
  content: "/";
  margin: 0 0.6em;
  color: var(--olg-line);
}

body.olg-article .hic-blurb .olg-breadcrumbs a {
  color: var(--olg-muted);
  text-decoration: none;
}

body.olg-article .hic-blurb .olg-breadcrumbs a:hover {
  color: var(--olg-maroon);
  text-decoration: underline;
}

body.olg-article .olg-breadcrumbs [aria-current="page"] {
  color: var(--olg-teal-text);
}

/* Article title: kept to a comfortable width, with the part after the colon in teal */
body.olg-article .hic-blurb .olg-title.wp-block-heading,
body.olg-article .hic-blurb .olg-title {
  max-width: 18em;
  margin: 0.75rem 0 0.4rem;
  font-size: var(--olg-fs-title);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

body.olg-article .olg-accent {
  color: var(--olg-teal-text);
}

/* "written by OLG" under the title */
body.olg-article .hic-blurb .olg-title + p {
  margin-bottom: var(--olg-space-block);
  color: var(--olg-muted);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------- */
/* Lists                                                                      */
/* -------------------------------------------------------------------------- */

body.olg-article .hic-blurb :is(ul, ol).wp-block-list {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

body.olg-article .hic-blurb :is(ul, ol).wp-block-list li {
  margin: 0 0 0.4em;
  padding-left: 0.5rem;
}

body.olg-article .hic-blurb :is(ul, ol).wp-block-list li::marker {
  color: var(--olg-maroon);
}

/* -------------------------------------------------------------------------- */
/* Images                                                                     */
/* -------------------------------------------------------------------------- */

body.olg-article .hic-blurb .wp-block-image {
  margin: var(--olg-space-block) 0;
}

body.olg-article .hic-blurb .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--olg-radius);
}

body.olg-article .hic-blurb .wp-block-columns {
  gap: var(--olg-gap);
  margin: var(--olg-space-block) 0;
}

body.olg-article .hic-blurb .wp-block-column > .wp-block-image {
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Specification table                                                        */
/* -------------------------------------------------------------------------- */

body.olg-article .hic-blurb .wp-block-table {
  margin: 1rem 0 var(--olg-space-section);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.olg-article .hic-blurb .wp-block-table table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 2px;
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.5;
}

body.olg-article .hic-blurb .wp-block-table :is(thead, tbody, tr) {
  border: 0;
  background: none;
}

body.olg-article .hic-blurb .wp-block-table :is(th, td) {
  padding: 0.85rem 1rem;
  border: 0;
  text-align: left;
  vertical-align: middle;
}

body.olg-article .hic-blurb .wp-block-table thead th {
  background: var(--olg-maroon);
  color: #fff;
  font-weight: 600;
}

/* Body cells; the first cell of each row is a row header (th scope="row") */
body.olg-article .hic-blurb .wp-block-table tbody :is(th, td) {
  background: var(--olg-row);
  color: var(--olg-ink);
  font-weight: 300;
}

body.olg-article .hic-blurb .wp-block-table tbody tr:nth-child(even) :is(th, td) {
  background: var(--olg-row-alt);
}

body.olg-article .hic-blurb .wp-block-table tbody th {
  font-weight: 500;
}

body.olg-article .hic-blurb .wp-block-table :is(th, td):first-child {
  width: 30%;
}

/* -------------------------------------------------------------------------- */
/* Panels: callout (Group block with class olg-callout) and FAQ                */
/* -------------------------------------------------------------------------- */

body.olg-article .hic-blurb :is(.olg-callout, .rank-math-list) {
  padding: var(--olg-pad-panel);
  border-radius: var(--olg-radius);
  background: var(--olg-panel);
}

body.olg-article .hic-blurb .olg-callout {
  margin: 0 0 var(--olg-space-section);
}

body.olg-article .hic-blurb :is(.olg-callout, .olg-callout > .wp-block-group__inner-container) > :first-child {
  margin-top: 0;
}

body.olg-article .hic-blurb :is(.olg-callout, .olg-callout > .wp-block-group__inner-container) > :last-child {
  margin-bottom: 0;
}

/* First line of the panel reads as its label ("Klass at a glance").
   Group blocks may wrap their content in .wp-block-group__inner-container. */
body.olg-article .hic-blurb :is(.olg-callout, .olg-callout > .wp-block-group__inner-container) > p:first-child {
  margin-bottom: 0.35rem;
  color: var(--olg-teal-text);
  font-size: var(--olg-fs-sub);
  font-weight: 700;
}

/* FAQ (Rank Math FAQ block): two columns on a grey panel, one on small screens */
body.olg-article .hic-blurb .rank-math-block {
  margin: 0.75rem 0 var(--olg-space-section);
}

body.olg-article .hic-blurb .rank-math-list {
  column-count: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

body.olg-article .hic-blurb .rank-math-list-item {
  margin: 0 0 1.5rem;
  break-inside: avoid;
}

body.olg-article .hic-blurb .rank-math-question {
  margin: 0 0 0.25rem;
  color: var(--olg-teal-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

body.olg-article .hic-blurb .rank-math-answer p {
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Buttons and closing call to action                                          */
/* -------------------------------------------------------------------------- */

body.olg-article .hic-blurb .wp-block-buttons {
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
}

body.olg-article .hic-blurb .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 50px;
  padding: 0.75rem 2rem;
  border: 2px solid var(--olg-maroon);
  border-radius: 999px;
  background: var(--olg-maroon);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.olg-article .hic-blurb .wp-block-button__link:hover {
  border-color: var(--olg-maroon-dark);
  background: var(--olg-maroon-dark);
  color: #fff;
}

body.olg-article .hic-blurb .wp-block-button__link:focus-visible {
  outline: 3px solid var(--olg-teal);
  outline-offset: 3px;
}

/* Outline button: the core "Outline" style, or any button after the first in a row of columns */
body.olg-article .hic-blurb .is-style-outline > .wp-block-button__link,
body.olg-article .hic-blurb .wp-block-column + .wp-block-column .wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--olg-maroon);
}

body.olg-article .hic-blurb .is-style-outline > .wp-block-button__link:hover,
body.olg-article .hic-blurb .wp-block-column + .wp-block-column .wp-block-button__link:not(.has-background):hover {
  background: var(--olg-maroon);
  color: #fff;
}

/* Columns that only hold buttons sit side by side at their natural width */
body.olg-article .hic-blurb .wp-block-columns:has(> .wp-block-column > .wp-block-buttons) {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
}

body.olg-article .hic-blurb .wp-block-columns:has(> .wp-block-column > .wp-block-buttons) > .wp-block-column {
  flex: 0 0 auto;
  width: auto;
}

body.olg-article .hic-blurb .wp-block-columns:has(> .wp-block-column > .wp-block-buttons) .wp-block-buttons {
  margin-top: 0;
}

/* Download PDF button (class olg-downloadpdf): extra room before the next section */
body.olg-article .hic-blurb .wp-block-buttons:has(> .olg-downloadpdf) {
  margin: 2rem 0 0;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

body.olg-article .hic-blurb .olg-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: var(--olg-space-block) clamp(0rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--olg-line);
}

body.olg-article .hic-blurb :is(.olg-cta, .olg-cta > .wp-block-group__inner-container) > :is(h2, h3).wp-block-heading {
  margin-top: 0;
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}

/* "Last Updated: 29 October 2026" (paragraph with class olg-lastupdated, then the date block) */
body.olg-article .hic-blurb :is(.wp-block-post-date, .olg-lastupdated) {
  margin-top: var(--olg-space-section);
  color: var(--olg-muted);
  font-size: var(--olg-fs-small);
}

body.olg-article .hic-blurb .olg-lastupdated {
  display: inline-block;
  margin-right: 0.3em;
  margin-bottom: 0;
}

body.olg-article .hic-blurb .olg-lastupdated + .wp-block-post-date {
  display: inline-block;
}

/* -------------------------------------------------------------------------- */
/* Screen sizes                                                               */
/* -------------------------------------------------------------------------- */

/* Wider screens: the title breaks after the colon ("Klass Height Adjustable Desk:" / "The Specifier's Guide.") */
@media (min-width: 640px) {
  body.olg-article .olg-title .olg-accent {
    display: block;
  }
}

@media (max-width: 781px) {
  body.olg-article .hic-blurb .rank-math-list {
    column-count: 1;
  }
}

@media (max-width: 600px) {
  /* The title sits right below, so the trail stops at the section on phones */
  body.olg-article .olg-breadcrumbs [aria-current="page"] {
    display: none;
  }

  body.olg-article .hic-blurb .wp-block-table table {
    font-size: var(--olg-fs-small);
  }

  body.olg-article .hic-blurb .wp-block-table :is(th, td) {
    padding: 0.7rem 0.75rem;
  }

  body.olg-article .hic-blurb .wp-block-table :is(th, td):first-child {
    width: 38%;
  }

  body.olg-article .hic-blurb .wp-block-columns:has(> .wp-block-column > .wp-block-buttons) > .wp-block-column,
  body.olg-article .hic-blurb .wp-block-button,
  body.olg-article .hic-blurb .wp-block-button__link {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.olg-article .hic-blurb .wp-block-button__link {
    transition: none;
  }
}

@media print {
  body.olg-article .hic-blurb > .wp-block-image:first-child img {
    height: auto;
  }

  body.olg-article .olg-breadcrumbs,
  body.olg-article .hic-blurb .wp-block-buttons {
    display: none;
  }
}