/* ==========================================================================
   Our Wellness — custom overrides
   --------------------------------------------------------------------------
   Loaded AFTER style.css and responsive.css, so anything here wins.
   Keep all site-specific styling in this file. Do not edit style.css or
   responsive.css directly — that way template updates never wipe our work,
   and every change we've made is visible in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand colours
   The template's blue is #2490eb (--primary-color). We are not changing that
   globally, because it is used site-wide on links, icons and buttons. These
   variables let us apply our navy only where we want it.
   -------------------------------------------------------------------------- */

:root {
  --ow-navy: #13457a;
  --ow-button: #09214a;       /* buttons and the current pagination number */
  --ow-green: #2e9e5b;        /* hover colour: menu items and buttons */

  /* The HIGHLIGHTS summary box at the top of an article.
     Change these four lines and every article's box changes with them. */
  --ow-hl-bar:    #13457a;    /* header band - our navy */
  --ow-hl-body:   #f3f7fc;    /* the panel behind the list - a pale navy tint */
  --ow-hl-bullet: #2e9e5b;    /* the dot in front of each point - our green */
  --ow-hl-edge:   #dce6f2;    /* the thin outline */
}

/* --------------------------------------------------------------------------
   Header menu — active and hover colour
   -------------------------------------------------------------------------- */

/* The item for the page you are on stays navy. */
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item a,
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current_page_item a,
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-ancestor a {
  color: var(--ow-navy);
}

/* Hovering any item turns it green, including the current one, so the menu
   always reacts to the pointer. Listed after the rule above so it wins. */
header#pq-header .pq-bottom-header .navbar .navbar-nav li a:hover,
header#pq-header .pq-bottom-header .navbar .navbar-nav li a:focus,
header#pq-header .pq-bottom-header .navbar .navbar-nav li:hover a,
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item:hover a,
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current_page_item:hover a {
  color: var(--ow-green);
}

/* Fade rather than snap between colours. */
header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
  transition: color 0.25s ease-in-out;
}

/* --------------------------------------------------------------------------
   Buttons - site wide
   Covers Subscribe in the header, "Read More" on article cards, and the
   sidebar call-to-action. All navy, all turning green on hover.
   -------------------------------------------------------------------------- */

.pq-button {
  background: var(--ow-button);
  transition: background 0.25s ease-in-out;
}

.pq-button:hover,
.pq-button:focus {
  background: var(--ow-green);
}

/* style.css line 2009 styles the header button with a much more specific
   selector (header#pq-header.pq-header-default .pq-button), which outranks
   the plain .pq-button rule above and would put the template blue back.
   These two rules match that specificity so ours wins. */
header#pq-header.pq-header-default .pq-button {
  background: var(--ow-button);
}

header#pq-header.pq-header-default .pq-button:hover,
header#pq-header.pq-header-default .pq-button:focus,
header#pq-header.pq-header-default .pq-btn-container .pq-button:hover {
  background: var(--ow-green);
}

/* Keep the label and icon white on hover - the template switches button text
   colour on some states, and green needs white text to stay readable. */
.pq-button:hover,
.pq-button:hover .pq-button-text,
.pq-button:hover .text,
.pq-button:hover i {
  color: var(--white-color);
}

/* --------------------------------------------------------------------------
   Top bar promo message
   Full width, centred, sitting above the contact details and social icons.
   -------------------------------------------------------------------------- */

/* The blue bar itself is the anchor for the notice, because it spans the
   full browser width. .ow-topbar-inner must NOT be positioned, or it would
   capture the notice and pin it to the centred container instead - which is
   what put the notice 400px short of the right edge. */
header#pq-header .pq-top-header {
  position: relative;
}

/* style.css line 418 sets ".container { position: relative }". That made the
   centred 1300px container the anchor for the notice, so "40px from the right"
   meant 40px from the container's edge - hundreds of pixels short of the
   browser edge on a wide screen. Inside the blue bar only, make the container
   and its column transparent to positioning so the bar itself is the anchor. */
header#pq-header .pq-top-header .container,
header#pq-header .pq-top-header .col-12 {
  position: static;
}

/* Wide screens: the notice is pinned to the right on a single line, and the
   promo is given matching clear space on BOTH sides. Equal padding either
   side is what keeps the promo centred on the page while leaving the notice
   its own room - the two can never overlap or push each other off centre. */
@media (min-width: 1600px) {
  header#pq-header .pq-top-header .ow-topbar-notice {
    position: absolute;
    right: 40px;           /* 40px in from the right edge of the browser */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;   /* one line, never wrapped */
    text-align: right;
    padding: 0;
    max-width: none;
  }

  /* Equal clear space either side keeps the promo centred on the page, and
     keeps its text from running under the notice. The .ow-topbar-inner part
     is needed so this beats the plain .ow-topbar-message padding below. */
  .ow-topbar-inner .ow-topbar-message {
    padding-left: 220px;
    padding-right: 220px;
  }
}

.ow-topbar-notice {
  color: var(--white-color);
  font-family: var(--body-fonts);
  font-size: 13px;        /* smaller than the promo message */
  font-weight: 400;       /* and not bold */
  line-height: 18px;
  text-align: right;
  opacity: 0.92;
}

.ow-topbar-notice-link {
  color: var(--white-color);
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
}

.ow-topbar-notice-link:hover,
.ow-topbar-notice-link:focus {
  color: var(--ow-green);
}

/* Narrower than that there is no room beside the promo, so the notice drops
   onto its own line underneath it, centred. */
@media (max-width: 1599px) {
  .ow-topbar-notice {
    text-align: center;
    padding-bottom: 6px;
    font-size: 12px;
  }
}

.ow-topbar-message {
  text-align: center;
  color: var(--white-color);
  font-family: var(--title-fonts);
  font-size: 16px;          /* template default for this bar was 14px */
  font-weight: 700;
  line-height: 24px;
  padding: 4px 0;
}

.ow-topbar-message-link {
  color: var(--white-color);
  font-weight: 700;
  text-decoration: underline;
  margin-left: 4px;
  white-space: nowrap;      /* keeps "CLICK HERE" on one line */
  transition: color 0.25s ease-in-out;
}

.ow-topbar-message-link:hover,
.ow-topbar-message-link:focus {
  color: var(--ow-green);
}

/* The template hides the whole top bar on phones (responsive.css line 1753,
   "display: none !important"). We carry a promo message there, so bring it
   back. !important is needed to beat the template's own !important. */
@media (max-width: 767px) {
  header#pq-header.pq-header-default .pq-top-header {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile dropdown menu panel
   The template gives this panel a fixed 330px height with a permanent
   scrollbar (overflow-y: scroll), sized for its original menu of six items
   with sub-menus. Ours has five plain items and needs neither. It also had
   no padding, so the first item sat flush against the panel's top edge and
   could be clipped.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  header#pq-header .pq-bottom-header .navbar .navbar-collapse {
    /* Tall enough for the menu, capped so a longer one can still scroll. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;      /* scrollbar only when actually needed */
    padding: 10px 0;       /* keeps the first and last items off the edges */
  }

  /* Block layout rather than inline-block - inline-block list items sit on a
     text baseline, which can leave the first row a pixel or two high. */
  header#pq-header .pq-bottom-header .navbar .navbar-nav,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li {
    display: block;
  }

  /* Hover on the mobile menu is a full-width highlight bar, not just a colour
     change like the desktop menu. The template painted it in its own blue; we
     use our green. The current item is listed explicitly because it carries
     its own colour rule that would otherwise win and leave it looking dead. */
  header#pq-header .pq-bottom-header .navbar .navbar-nav li > a:hover,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li > a:focus,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li:hover > a,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item > a:hover,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item > a:focus,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item:hover > a,
  header#pq-header .pq-bottom-header .navbar .navbar-nav li.current_page_item:hover > a {
    background: var(--ow-green);
    color: var(--white-color);
  }
}

/* TEST - phones only: move the blue bar BELOW the logo/menu row, so the
   logo is the first thing seen and the ad sits under it.
   Both bars are children of <header>, so making the header a flex column
   lets us set their order without touching the HTML.
   To undo, delete this one block. */
@media (max-width: 767px) {
  header#pq-header.pq-header-default {
    display: flex;
    flex-direction: column;
  }

  header#pq-header.pq-header-default .pq-bottom-header { order: 1; }
  header#pq-header.pq-header-default .pq-top-header    { order: 2; }

  /* Reordering flex items also reorders which one is PAINTED on top: with
     order 2, the blue bar drew over the open menu panel, so its text landed
     across the first menu item. Stacking these puts the menu back in front. */
  header#pq-header.pq-header-default .pq-bottom-header {
    position: relative;
    z-index: 20;
  }

  header#pq-header.pq-header-default .pq-top-header {
    position: relative;
    z-index: 1;
  }
}

/* Step the size down on smaller screens so the line does not dominate. */
@media (max-width: 991px) {
  .ow-topbar-message {
    font-size: 15px;
    line-height: 23px;
  }
}

@media (max-width: 767px) {
  .ow-topbar-message {
    font-size: 14px;
    line-height: 21px;
    padding: 8px 0;
  }
}

/* --------------------------------------------------------------------------
   Footer menu - laid out in a row instead of a stacked list
   -------------------------------------------------------------------------- */

/* The template gives .pq-footer-top "padding: 70px 0 0" - no bottom padding
   at all, because its own footer ended with tall link columns. Ours ends with
   the logo and one menu row, which then sat right on the divider line above
   the copyright. Add breathing room underneath. */
footer#pq-footer .pq-footer-top {
  padding-bottom: 40px;
}

/* Phones: logo and menu stack, both centred. The template puts 45px under
   each footer block and another 30px under the logo - 75px of gap, sized
   for a four-column footer. Far too much for a logo above a single menu. */
/* The :first-child part is needed to outrank the template's own rule,
   which is written as .pq-footer-block:first-child. */
footer#pq-footer .pq-footer-top .pq-footer-block,
footer#pq-footer .pq-footer-top .pq-footer-block:first-child {
  text-align: center;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #pq-footer .pq-footer-top .pq-footer-logo {
    margin-bottom: 24px;
  }
}

/* Tablet and up: logo on the left, menu ranged right on the same line. */
@media (min-width: 768px) {
  #pq-footer .pq-footer-top .pq-footer-block {
    text-align: left;
    margin-bottom: 0;
  }

  /* The logo carries a 30px bottom margin from the template, sized for a
     stacked footer column. Left in place it makes the logo's box taller
     than it looks, so the row centres on the wrong point and the menu
     appears to sit low. */
  #pq-footer .pq-footer-top .pq-footer-logo {
    margin-bottom: 0;
    display: block;
  }

  #pq-footer .menu-useful-links-container ul.menu {
    justify-content: flex-end;
  }
}

/* Tablets are narrower, so close the gaps a little to keep one line. */
@media (min-width: 768px) and (max-width: 1199px) {
  #pq-footer .menu-useful-links-container ul.menu {
    gap: 10px 20px;
  }
}

#pq-footer .menu-useful-links-container ul.menu {
  display: flex;
  flex-wrap: wrap;          /* drops to a second line rather than overflowing */
  align-items: center;
  justify-content: center;  /* centred under the logo */
  gap: 12px 32px;           /* 12px between rows, 32px between items */
  margin: 0;
  padding: 0;
  list-style: none;
}

#pq-footer .menu-useful-links-container ul.menu li {
  margin: 0;
  padding: 0;
  width: auto;              /* template gives footer list items a fixed width */
  display: inline-block;
  white-space: nowrap;      /* keeps "What to Buy" from breaking mid-item */
}

/* The template makes footer links full-width blocks with a 15px left pad,
   meant for a stacked list. In a row that skews the spacing. */
#pq-footer .menu-useful-links-container ul.menu li a {
  width: auto;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Legal pages (Terms, and Privacy when it exists)
   Long text runs need a comfortable measure and clear heading rhythm.
   -------------------------------------------------------------------------- */

.ow-legal {
  max-width: 820px;      /* ~85 characters a line, comfortable to read */
  margin: 0 auto;
}

.ow-legal h1 {
  margin-bottom: 8px;
}

.ow-legal-updated {
  color: var(--secondary-color);
  font-size: 14px;
  margin-bottom: 40px;
}

.ow-legal h2 {
  font-size: 24px;
  line-height: 32px;
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--ow-navy);
}

.ow-legal p,
.ow-legal li {
  margin-bottom: 16px;
}

.ow-legal ul {
  padding-left: 22px;
  margin-bottom: 24px;
  list-style: disc;
}

/* --------------------------------------------------------------------------
   Pagination
   The current page number and the hover state both used the template blue.
   -------------------------------------------------------------------------- */

.pq-pagination .page-numbers li .page-numbers {
  transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

.pq-pagination .page-numbers li .page-numbers.current {
  background: var(--ow-button);
  border-color: var(--ow-button);
  color: var(--white-color);
}

.pq-pagination .page-numbers li .page-numbers:hover {
  background-color: var(--ow-green);
  border-color: var(--ow-green);
  color: var(--white-color);
}

/* --------------------------------------------------------------------------
   Header menu — larger text, centered list
   Desktop only. Below 1024px the template turns the menu into a stacked
   mobile list, which must keep its own full-width layout.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Template floats the list right; switch to flex so it can center. */
  header#pq-header .pq-bottom-header .navbar .navbar-nav {
    float: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  /* Drop the per-item float and margin — spacing is handled by gap below,
     so the row stays optically centered instead of sitting 15px off. */
  header#pq-header .pq-bottom-header .navbar .navbar-nav li {
    float: none;
    margin-right: 0;
  }
}

/* Spacing between menu items, tightened on narrower desktops. */
@media (min-width: 1400px) {
  header#pq-header .pq-bottom-header .navbar .navbar-nav {
    gap: 40px;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  header#pq-header .pq-bottom-header .navbar .navbar-nav {
    gap: 26px;
  }
}

/* --------------------------------------------------------------------------
   Banner band — show the full image, never cropped

   The template gave this band a fixed height (130px padding top and bottom)
   and let background-size:cover crop whatever didn't fit. Instead we set the
   band to the image's own aspect ratio, so the entire image is always visible
   and the band height scales with the browser width.

   IMPORTANT: the ratio below must match the banner image's real dimensions.
   Currently 1920 x 373. If you swap in an image of a different size, update
   this one value to match or it will crop again.
   -------------------------------------------------------------------------- */

.pq-breadcrumb {
  padding: 0;
  aspect-ratio: 1920 / 373;
  background-size: cover;
  background-position: center center;
}

/* --------------------------------------------------------------------------
   Section headings (SPOTLIGHT / LATEST)
   -------------------------------------------------------------------------- */

/* The template gives every <section> 130px of top padding, which left a large
   empty gap under the banner. Tighter, since the heading now fills that space. */
section#spotlight {
  padding-top: 70px;
}

.ow-section-head {
  margin-bottom: 40px;
}

/* Breathing room above the second heading, so LATEST reads as a new group
   rather than a caption on the article above it. */
.ow-section-head-latest {
  margin-top: 60px;
}

/* Stops the sticky header from covering the heading when the Spotlight menu
   link jumps to this section. Roughly the header's height. */
section#spotlight {
  scroll-margin-top: 120px;
}

/* Same idea for the Subscribe button jumping to the footer sign-up form. */
#subscribe {
  scroll-margin-top: 120px;
}

/* Menu item text size. Template default is 14px. */
@media (min-width: 1200px) {
  header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
    font-size: 17px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
    font-size: 16px;
  }
}


/* ==========================================================================
   ARTICLE FURNITURE
   The three repeatable blocks an article can drop into its body. Markup for
   all three is in pages/Landing-Page-Template-01.html, ready to copy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HIGHLIGHTS box — the summary panel that sits under the article title.

      <section class="ow-highlights">
         <h2>Highlights</h2>
         <ul>
            <li>One point per line.</li>
         </ul>
      </section>

   The heading is uppercased by CSS, so write it normally in the HTML.
   ".at-a-glance" is accepted too, so older drafts still render correctly.
   -------------------------------------------------------------------------- */

.ow-highlights,
.blog-single .at-a-glance {
  /* style.css line 413 gives every <section> 130px of padding top and bottom.
     That padding is inside our panel, so without this reset the box opens with
     130px of empty colour above the header band and another 130px below the
     list. Zero it here rather than using a <div>, so the box keeps its meaning
     as a labelled section for screen readers and for search engines. */
  padding: 0;
  background: var(--ow-hl-body);
  border: 1px solid var(--ow-hl-edge);
  border-radius: 8px;
  overflow: hidden;                 /* keeps the header band inside the corners */
  margin: 0 0 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.ow-highlights > h2,
.blog-single .at-a-glance > h2 {
  background: var(--ow-hl-bar);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
  padding: 15px 28px;
}

.ow-highlights > ul,
.blog-single .at-a-glance > ul {
  list-style: none;
  margin: 0;
  padding: 24px 28px;
}

.ow-highlights > ul > li,
.blog-single .at-a-glance > ul > li {
  position: relative;
  margin: 0 0 15px;
  padding: 0 0 0 24px;
  line-height: 1.6;
}

.ow-highlights > ul > li:last-child,
.blog-single .at-a-glance > ul > li:last-child {
  margin-bottom: 0;
}

/* The dot. Drawn rather than a list bullet so it lines up with the first
   line of text no matter how many lines the point runs to. */
.ow-highlights > ul > li::before,
.blog-single .at-a-glance > ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ow-hl-bullet);
}

@media (max-width: 575px) {
  .ow-highlights > h2,
  .blog-single .at-a-glance > h2 { padding: 13px 20px; font-size: 15px; }

  .ow-highlights > ul,
  .blog-single .at-a-glance > ul { padding: 20px; }
}

/* --------------------------------------------------------------------------
   2. Check-mark list — the template's own .pq-list-check, given a little more
      breathing room and a panel behind it so it reads as a block inside prose.
   -------------------------------------------------------------------------- */

.blog-single .ow-check-panel {
  background: var(--grey-color, #f4f7fc);
  border-radius: 8px;
  padding: 26px 30px;
  margin: 0 0 35px;
}

.blog-single .ow-check-panel > h4 {
  margin: 0 0 6px;
}

.blog-single .pq-list-check li {
  padding-top: 12px;
  line-height: 1.5;
}

/* The template draws these ticks in its own blue (#2490eb). Green is our
   accent, and it matches the dots in the Highlights box above. */
.blog-single .pq-list-check li i {
  color: var(--ow-green);
  margin-right: 12px;
}

@media (max-width: 575px) {
  .blog-single .ow-check-panel { padding: 22px; }
}

/* --------------------------------------------------------------------------
   3. Pull quote — the template's blockquote, tightened up for article use.
      The attribution line is a <cite>, which the template already styles.
   -------------------------------------------------------------------------- */

.blog-single blockquote {
  margin: 0 0 35px;
  padding: 22px 32px;
  border-left-color: var(--ow-green);
}

.blog-single blockquote p {
  font-size: 19px;
  line-height: 1.6;
}

.blog-single blockquote cite,
.blog-single blockquote strong {
  color: var(--ow-navy);
  font-size: 15px;
}

@media (max-width: 575px) {
  .blog-single blockquote { padding: 20px 22px; }
  .blog-single blockquote p { font-size: 17px; }
}


/* ==========================================================================
   ARTICLE FURNITURE, PART 2 — the blocks that break up a long read
   Nothing here needs an image. All four are drawn with CSS and the icon
   fonts the template already loads.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4. Section heading accent — a short green rule above every h2 in an
      article body. No markup needed: it applies itself to every section
      heading, which is what gives a long page its rhythm.
   -------------------------------------------------------------------------- */

.blog-single .pq-blog-contain > h2 {
  position: relative;
  margin-top: 45px;
  padding-top: 22px;
  font-size: 26px;
  line-height: 1.35;
}

.blog-single .pq-blog-contain > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;                   /* left aligned with the heading below it, */
  width: 100%;               /* running the full width of the article column */
  height: 4px;
  border-radius: 2px;
  background: var(--ow-green);
}

/* The Highlights box is a <section> with its own h2 inside, so it must not
   pick up the accent. The > selector above already excludes it, but this
   makes the intent explicit if the markup is ever nested differently. */
.blog-single .ow-highlights h2::before,
.blog-single .at-a-glance h2::before {
  display: none;
}

/* Space between the article headline and whatever follows it. The headline
   now lives in .ow-article-head, so the gap is supplied by that block's
   padding and by .pq-blog-contain's padding-top - see the article head rules
   near the bottom of this file. */
.blog-single .ow-article-head .pq-blog-title {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Icon row — two or three short points side by side, each with a round
      icon. Good for drawing a distinction the reader keeps mixing up.

      <div class="ow-icon-row row">
         <div class="col-md-4">
            <div class="pq-icon-box pq-style-5">
               <div class="pq-icon"><i class="fas fa-leaf"></i></div>
               <div class="pq-icon-box-content">
                  <h6 class="pq-icon-box-title">Title</h6>
                  <p class="pq-icon-box-description">One or two lines.</p>
               </div>
            </div>
         </div>
         ... two more columns ...
      </div>

   Icon names: any Font Awesome 6 free solid icon, e.g. fa-leaf, fa-seedling,
   fa-flask, fa-lightbulb, fa-utensils, fa-clock, fa-person-walking.
   -------------------------------------------------------------------------- */

.blog-single .ow-icon-row {
  margin: 0 0 38px;
}

.blog-single .ow-icon-row > [class^="col"] {
  margin-bottom: 18px;
}

.blog-single .ow-icon-row .pq-icon-box.pq-style-5 {
  height: 100%;
  background: var(--ow-hl-body);
  border: 1px solid var(--ow-hl-edge);
  border-radius: 8px;
  padding: 22px 20px;
}

/* The template draws this icon in its blue on a pale blue disc. Ours is
   white on a green disc, so the row reads as part of our palette. */
.blog-single .ow-icon-row .pq-icon-box.pq-style-5 .pq-icon {
  flex: 0 0 auto;
  margin-right: 14px;
}

.blog-single .ow-icon-row .pq-icon-box.pq-style-5 .pq-icon i {
  width: 42px;
  height: 42px;
  line-height: 42px;
  padding: 0;
  text-align: center;
  font-size: 17px;
  color: var(--white-color);
  background: var(--ow-green);
  border-radius: 50%;
}

.blog-single .ow-icon-row .pq-icon-box-title {
  color: var(--ow-navy);
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 6px;
}

.blog-single .ow-icon-row .pq-icon-box-description {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Numbered steps — a short ordered sequence with navy discs.

      <ol class="ow-steps">
         <li><strong>Step name.</strong> One sentence of detail.</li>
      </ol>

   The numbers come from the list itself, so adding or removing a step
   renumbers the rest automatically.
   -------------------------------------------------------------------------- */

.blog-single .ow-steps {
  counter-reset: ow-step;
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
}

.blog-single .ow-steps > li {
  /* style.css line 228 sets "ol li { list-style: decimal }", which is what put
     a second, small "1." in front of each blue disc. Our numbers come from the
     counter below, so the browser's own marker is switched off here. */
  list-style: none;
  counter-increment: ow-step;
  position: relative;
  min-height: 42px;
  margin: 0 0 20px;
  padding: 6px 0 0 62px;
  line-height: 1.6;
}

.blog-single .ow-steps > li:last-child {
  margin-bottom: 0;
}

.blog-single .ow-steps > li::before {
  content: counter(ow-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-family: var(--title-fonts);
  font-weight: 600;
  font-size: 17px;
  color: var(--white-color);
  background: var(--ow-navy);
  border-radius: 50%;
}

/* The faint line joining one step to the next. */
.blog-single .ow-steps > li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50px;
  bottom: -20px;
  width: 2px;
  background: var(--ow-hl-edge);
}

.blog-single .ow-steps > li:last-child::after {
  display: none;
}

.blog-single .ow-steps > li strong {
  color: var(--ow-navy);
}

/* --------------------------------------------------------------------------
   7. Tip callout — one practical aside, set apart from the paragraphs
      around it without taking up much room.

      <p class="ow-callout"><i class="fas fa-lightbulb"></i>
         <span>The tip itself, one or two sentences.</span></p>
   -------------------------------------------------------------------------- */

.blog-single .ow-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ow-hl-body);
  border-left: 4px solid var(--ow-green);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
}

.blog-single .ow-callout > i {
  flex: 0 0 auto;
  color: var(--ow-green);
  font-size: 20px;
  line-height: 1.5;
}

@media (max-width: 575px) {
  .blog-single .pq-blog-contain > h2 { font-size: 22px; margin-top: 38px; }
  .blog-single .ow-steps > li { padding-left: 54px; }
  .blog-single .ow-steps > li::before { width: 38px; height: 38px; line-height: 38px; font-size: 15px; }
  .blog-single .ow-steps > li::after { left: 18px; top: 46px; }
  .blog-single .ow-callout { padding: 16px 18px; }
}


/* --------------------------------------------------------------------------
   8. In-article image — a picture the body text wraps around.

      <figure class="ow-img-right">
         <img src="../assets/images/blog/name.webp" alt="Describe the picture">
      </figure>

   Put it directly after the <h2> of the section it belongs to, so the wrap
   starts at the top of that section. Use ow-img-left for the mirror image.
   On phones both versions stop floating and sit full width above the text.
   -------------------------------------------------------------------------- */

.blog-single .ow-img-right,
.blog-single .ow-img-left {
  max-width: 45%;
  margin: 0;
  padding-top: 40px;
  padding-bottom: 40px;
}

.blog-single .ow-img-right {
  float: right;
  padding-left: 40px;
}

.blog-single .ow-img-left {
  float: left;
  padding-right: 40px;
}

.blog-single .ow-img-right img,
.blog-single .ow-img-left img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Section headings start a clean line rather than squeezing in beside a
   float left over from the section above. This also keeps the green accent
   rule at the full width of the column instead of the narrowed text run. */
.blog-single .pq-blog-contain > h2 {
  clear: both;
}

@media (max-width: 767px) {
  .blog-single .ow-img-right,
  .blog-single .ow-img-left {
    float: none;
    max-width: 100%;
    padding: 15px 0 25px 0;
  }
}


/* ==========================================================================
   ARTICLE CARDS on the homepage and pagination pages
   --------------------------------------------------------------------------
   Two cards sit side by side in a row. Left to itself, whichever card has the
   longer title or excerpt makes its own box taller, and the pair stops lining
   up. These rules fix the shape of a card so its height never depends on how
   much text the article happens to have:

      - both cards in a row are the same height
      - the title is held to 2 lines
      - the excerpt is held to 2 lines, with an ellipsis if it runs longer
      - both reserve their 2 lines even when the text only fills one, so a
        short title cannot pull the Read More button up
      - Read More sits on the bottom edge of every card

   All of it is scoped to .pq-blog, the wrapper around the card grid, so the
   single-article pages are untouched.

   ON EXCERPT LENGTH
   The ellipsis is a safety net, not the plan. An excerpt of roughly 140
   characters fills the two lines without being cut. Longer than that and the
   reader loses the end of the sentence.
   ========================================================================== */

/* Equal-height columns, and the card fills its column. */
.pq-blog .row > [class*="col-"] {
  display: flex;
}

.pq-blog .pq-blog-post {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The text half becomes a column too, so the button can be pushed to the
   bottom of whatever space is left. The template sets this to inline-block. */
.pq-blog .pq-blog-post .pq-blog-contain {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Title: exactly two lines' worth of space, and never more than two lines.
   The three values below must be changed together - the reserved height is
   just the line height doubled. Get them out of step and the cards stop
   lining up.

   TEST, 29 August: card titles enlarged from the template's 24px/32px to
   28px/36px, part way towards the size health.com uses. To put it back,
   restore 24px / 32px / 64px on these three lines. */
.pq-blog .pq-blog-post .pq-blog-contain .pq-blog-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 28px;      /* was 24px */
  line-height: 36px;    /* was 32px */
  min-height: 72px;     /* was 64px - two lines at the new line height */
}

/* Excerpt: same treatment. 16px text on a doubled line height, so two lines
   is also 64px. Anything past the second line ends in an ellipsis. */
.pq-blog .pq-blog-post .pq-blog-info {
  min-height: 64px;
}

.pq-blog .pq-blog-post .pq-blog-info p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

/* Whatever height is left over goes above the button, not below it, so the
   Read More buttons line up across the row. */
.pq-blog .pq-blog-post .pq-btn-container {
  margin-top: auto;
  padding-top: 20px;
}

/* Narrow screens stack the cards one above the other, so there is nothing to
   line up with. Let both blocks shrink to the text they actually have. */
@media (max-width: 991px) {
  .pq-blog .pq-blog-post .pq-blog-contain .pq-blog-title,
  .pq-blog .pq-blog-post .pq-blog-info {
    min-height: 0;
  }
}


/* --------------------------------------------------------------------------
   Category pill on an article card
   The small rounded label above the title, naming the section the article
   belongs to. It is a link to that category's page.

   Generated by tools/build-site.py from the "category" line in posts.js, so
   there is nothing to add by hand - give an article a category and it gets a
   pill. Spotlight never appears here, because it is a position on the
   homepage rather than a category.
   -------------------------------------------------------------------------- */

:root {
  /* The same green the Subscribe button turns on hover, so the pill belongs
     to the palette rather than introducing a fifth colour.
     For a pale tinted pill instead - closer to the one on health.com - use:
        --ow-pill-bg: #e4f3ea;  --ow-pill-text: #1d6b3d; */
  --ow-pill-bg:    var(--ow-green);    /* #2e9e5b */
  --ow-pill-text:  var(--white-color);
  --ow-pill-hover: var(--ow-button);   /* navy, the button's resting colour */
}

.pq-blog .ow-card-category {
  /* .pq-blog-contain is a flex column (see the card rules above), and a flex
     item stretches to the full width of the column by default. That is what
     made the pill run edge to edge. align-self overrides that stretch so the
     pill is only as wide as its own text. */
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  border-radius: 999px;          /* a full pill at any font size */
  background: var(--ow-pill-bg);
  color: var(--ow-pill-text);
  font-family: var(--title-fonts);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
}

.pq-blog .ow-card-category:hover,
.pq-blog .ow-card-category:focus {
  background: var(--ow-pill-hover);
  color: var(--white-color);
}

@media (max-width: 575px) {
  .pq-blog .ow-card-category { font-size: 11px; padding: 5px 13px; margin-bottom: 12px; }
}


/* --------------------------------------------------------------------------
   TEST, 29 August: newsletter panel in the category-pill green
   The template paints this block in its own bright blue (#2490eb), the last
   place that colour still appears.

   Unlike the light green attempt, this needs one line only. The panel was
   designed for a dark background - white heading, translucent white input,
   white button - and our green is dark enough that all of it still reads.

   TO REVERT: delete this block. The template's blue comes back on its own.
   -------------------------------------------------------------------------- */

.pq-subscribe .pq-subscribe-bg {
  background: var(--ow-green);
}

/* The heading column carries 50px of padding on its right, which on a wide
   screen was pushing "Subscribe To Stay Informed" onto a second line. Below
   992px the two columns stack full width, which is why it read as one line on
   a tablet but wrapped on a desktop. Trimming the padding here, together with
   the 6/6 column split in footer.js, gives the heading the room it needs. */
@media (min-width: 992px) {
  .pq-subscribe .pq-subscribe-block .pq-subscribe-details {
    padding-right: 20px;
  }
}


/* ==========================================================================
   COMPARISON LANDING PAGE  (Advertisement-Template-01.html)
   --------------------------------------------------------------------------
   A ranked list of offers, in the format used by the big publisher comparison
   pages. Everything here is scoped to .ow-landing, so it cannot leak into an
   ordinary article page.

   BEFORE USING THIS LAYOUT, TWO THINGS ARE NOT OPTIONAL

   1. The disclosure block stays above the first offer. Not in the footer, not
      collapsed behind a link. It is what makes a paid ranking lawful rather
      than deceptive, and it is the first thing a regulator looks for.

   2. The scores, badges and "how we evaluated" criteria have to describe an
      evaluation you actually carried out. Inventing a 9.8 and a methodology
      to justify it is a fabricated review, whatever the disclosure says.
      If the ranking is really by commission, the honest version is an
      ordered list of options without invented scores.
   ========================================================================== */

.ow-landing {
  padding: 60px 0 90px;
}

/* ----- headline block ---------------------------------------------------- */

.ow-landing .ow-landing-head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: center;
}

.ow-landing .ow-landing-head h1 {
  font-size: 42px;
  line-height: 1.2;
  color: var(--ow-navy);
  margin: 0 0 16px;
}

.ow-landing .ow-landing-sub {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.ow-landing .ow-landing-updated {
  font-size: 14px;
  color: #7b8794;
  margin: 18px 0 0;
}

/* ----- the disclosure ---------------------------------------------------- */

.ow-landing .ow-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 20px;
  background: var(--ow-hl-body);
  border: 1px solid var(--ow-hl-edge);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}

.ow-landing .ow-disclosure > i {
  color: var(--ow-navy);
  font-size: 16px;
  line-height: 1.5;
  flex: 0 0 auto;
}

/* ----- one ranked offer -------------------------------------------------- */

.ow-landing .ow-rank {
  position: relative;
  max-width: 980px;
  margin: 0 auto 26px;
  background: var(--white-color);
  border: 1px solid var(--ow-hl-edge);
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 20, 9, .07);
}

.ow-landing .ow-rank-badge {
  display: inline-block;
  margin: -13px 0 0 24px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--ow-green);
  color: var(--white-color);
  font-family: var(--title-fonts);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ow-landing .ow-rank-body {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 18px 28px 28px;
}

/* rank number and brand */
.ow-landing .ow-rank-brand {
  flex: 0 0 190px;
  text-align: center;
}

.ow-landing .ow-rank-number {
  font-family: var(--title-fonts);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--ow-navy);
}

.ow-landing .ow-rank-name {
  margin: 8px 0 0;
  font-family: var(--title-fonts);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ow-navy);
}

/* the four benefit lines - reuses the template's check list */
.ow-landing .ow-rank-points {
  flex: 1 1 auto;
}

.ow-landing .ow-rank-points .pq-list-check li {
  padding-top: 8px;
  line-height: 1.45;
  font-size: 15px;
}

.ow-landing .ow-rank-points .pq-list-check li i {
  color: var(--ow-green);
  margin-right: 10px;
}

/* score and call to action */
.ow-landing .ow-rank-verdict {
  flex: 0 0 210px;
  text-align: center;
}

.ow-landing .ow-rank-score {
  font-family: var(--title-fonts);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--ow-navy);
}

.ow-landing .ow-rank-stars {
  margin: 6px 0 2px;
  color: #f5a623;
  font-size: 13px;
  letter-spacing: 1px;
}

.ow-landing .ow-rank-verdict-word {
  font-family: var(--title-fonts);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7b8794;
  margin-bottom: 14px;
}

.ow-landing .ow-rank-verdict .pq-button {
  width: 100%;
  justify-content: center;
}

.ow-landing .ow-rank-golink {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #7b8794;
  text-decoration: underline;
}

.ow-landing .ow-rank-golink:hover { color: var(--ow-green); }

/* the collapsible "why this one" note */
.ow-landing .ow-rank-more {
  border-top: 1px solid var(--ow-hl-edge);
  padding: 14px 28px;
  font-size: 14px;
}

.ow-landing .ow-rank-more summary {
  cursor: pointer;
  color: var(--ow-navy);
  font-weight: 600;
  list-style: none;
}

.ow-landing .ow-rank-more summary::-webkit-details-marker { display: none; }

.ow-landing .ow-rank-more summary::after {
  content: "\f078";                 /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
  font-size: 12px;
  color: #7b8794;
}

.ow-landing .ow-rank-more[open] summary::after { content: "\f077"; }

.ow-landing .ow-rank-more p { margin: 12px 0 0; line-height: 1.6; }

/* ----- the editorial half ------------------------------------------------ */

.ow-landing .ow-landing-body {
  max-width: 860px;
  margin: 60px auto 0;
}

.ow-landing .ow-landing-body h2 {
  position: relative;
  margin-top: 45px;
  padding-top: 22px;
  font-size: 26px;
  line-height: 1.35;
}

.ow-landing .ow-landing-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--ow-green);
}

/* ----- narrow screens ---------------------------------------------------- */

@media (max-width: 991px) {
  .ow-landing .ow-rank-body { flex-wrap: wrap; gap: 22px; }
  .ow-landing .ow-rank-brand { flex: 0 0 100%; text-align: left; display: flex; align-items: baseline; gap: 14px; }
  .ow-landing .ow-rank-name { margin: 0; }
  .ow-landing .ow-rank-points { flex: 1 1 100%; }
  .ow-landing .ow-rank-verdict { flex: 1 1 100%; }
}

@media (max-width: 575px) {
  .ow-landing { padding: 40px 0 60px; }
  .ow-landing .ow-landing-head h1 { font-size: 30px; }
  .ow-landing .ow-rank-body { padding: 16px 20px 22px; }
  .ow-landing .ow-rank-more { padding: 14px 20px; }
  .ow-landing .ow-landing-body h2 { font-size: 22px; }
}


/* ==========================================================================
   SEARCH RESULTS PAGE  (pages/search.html)
   --------------------------------------------------------------------------
   Results are a plain text list, not article cards. A search can return every
   article on the site, and a hundred cards would mean a hundred images.

   Everything here is body text size. The only emphasis is weight and colour,
   which is enough to separate a heading from a title from a snippet without
   the page turning into a wall of large type.
   ========================================================================== */

.ow-search-head {
  max-width: 720px;
  margin: 0 auto 45px;
}

.ow-search-form {
  display: flex;
  gap: 10px;
}

.ow-search-form input[type="search"] {
  flex: 1 1 auto;
  height: 50px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--ow-hl-edge);
  border-radius: 6px;
  background: var(--white-color);
  font-size: 16px;
  color: var(--ow-navy);
}

.ow-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--ow-green);
}

.ow-search-form button {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: 6px;
  background: var(--ow-button);
  color: var(--white-color);
  font-family: var(--title-fonts);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.25s ease-in-out;
}

.ow-search-form button:hover { background: var(--ow-green); }
.ow-search-form button i     { margin-right: 8px; }

.ow-search-summary {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #7b8794;
}

.ow-search-summary strong { color: var(--ow-navy); }

/* ----- the results themselves ------------------------------------------ */

#ow-search-results {
  max-width: 720px;
  margin: 0 auto;
}

/* "IN THE TITLE" and "MENTIONED IN THE ARTICLE". Body text size, bold.
   If these want to be a little larger after a look, this font-size is the
   only line to change. */
.ow-results-heading {
  margin: 40px 0 14px;
  font-family: var(--title-fonts);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ow-navy);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ow-hl-edge);
}

.ow-results-heading:first-child { margin-top: 0; }

.ow-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ow-result {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #eef2f6;
}

.ow-result:last-child { border-bottom: none; }

.ow-result-link {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ow-navy);
}

.ow-result-link:hover,
.ow-result-link:focus { color: var(--ow-green); }

/* The category, sitting quietly after the title rather than as a pill. */
.ow-result-cat {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a949f;
  white-space: nowrap;
}

.ow-result-cat:hover { color: var(--ow-green); }

.ow-result-text {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--secondary-color);
}

#ow-search-results mark {
  background: #d8f0e2;
  color: var(--ow-navy);
  padding: 0 2px;
  border-radius: 2px;
}

.ow-search-empty {
  margin: 0;
  color: #7b8794;
}

@media (max-width: 575px) {
  .ow-search-form { flex-wrap: wrap; }
  .ow-search-form button { width: 100%; }
  .ow-result-cat { display: block; margin: 4px 0 0; }
}

.ow-search-hint {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #8a949f;
}

.ow-search-hint strong { color: var(--ow-navy); font-weight: 600; }


/* --------------------------------------------------------------------------
   Space above the newsletter block
   The template leaves a large gap between the last article and the green
   subscribe panel. It is made of three numbers:

       .pq-blog-post   margin-bottom     30px   (listing pages only)
       .pq-pb-210      padding-bottom   210px
       .pq-subscribe   margin-top       -80px

   which comes to 160px of white on a listing page and 130px on an article.
   The values below halve both.

   !important is needed because responsive.css re-declares .pq-pb-210 with
   !important at two breakpoints. Without it the gap would come back on
   anything narrower than a desktop.
   -------------------------------------------------------------------------- */

/* Homepage, category pages, search: 30 + 130 - 80 = 80px */
section.pq-pb-210 {
  padding-bottom: 130px !important;
}

/* Article pages, which have no card margin: 145 - 80 = 65px */
.blog-single.pq-pb-210 {
  padding-bottom: 145px !important;
}


/* --------------------------------------------------------------------------
   Space above the first heading on narrow screens
   The template gives every <section> a generous top padding, which reads well
   on a wide screen and leaves the banner floating a long way above SPOTLIGHT
   on a phone or tablet. responsive.css already steps it down:

       up to 1199px   padding: 90px 0 !important
       up to  767px   padding: 60px 0 !important

   Halve the top of each. The bottom is left alone, because the rule above
   already sets it for the gap before the newsletter panel.

   !important again, to beat the template's own !important.
   -------------------------------------------------------------------------- */

/* Two ids share this section class:
       #category   category pages, homepage pagination, search
       #spotlight  the homepage itself
   They are separated here so the homepage can keep the template's roomier
   desktop spacing while the category pages sit closer under their banner.

   Note the ids appear in BOTH rules below. An id makes a selector far more
   specific, so a plain section.pq-pb-210 rule for phones would lose to an
   id rule for desktops and the phone value would never apply. */

/* Category, pagination and search: 45px from a phone upwards. */
section#category.pq-pb-210 { padding-top: 45px !important; }

@media (max-width: 767px) {
  section#category.pq-pb-210 { padding-top: 30px !important; }
}

/* Homepage: desktop untouched at the template's 130px, narrow screens
   reduced as before. */
@media (max-width: 1199px) {
  section#spotlight.pq-pb-210 { padding-top: 45px !important; }
}

@media (max-width: 767px) {
  section#spotlight.pq-pb-210 { padding-top: 30px !important; }
}


/* --------------------------------------------------------------------------
   Article pages: the headline above the hero image on a phone
   Same reasoning as the cards. The <h1> was inside .pq-blog-contain, which
   made it a nephew of the image rather than a sibling, and CSS cannot reorder
   across parents. It now sits in .ow-article-head, directly beside the image.

   Terms and Privacy have no hero image and no .ow-article-head, so none of
   this touches them.
   -------------------------------------------------------------------------- */

.blog-single .pq-blog-post {
  display: flex;
  flex-direction: column;
}

/* The template gave .pq-blog-contain 30px all round, and the h1 carried a
   32px bottom margin. Those two jobs are split across the two blocks now. */
.blog-single .ow-article-head {
  padding: 30px 30px 0;
}

.blog-single .pq-blog-contain {
  padding-top: 32px;
}

@media (max-width: 767px) {
  .blog-single .ow-article-head  { order: 1; padding: 22px 22px 0; }
  .blog-single .pq-post-media    { order: 2; margin-top: 18px; }
  .blog-single .pq-blog-contain  { order: 3; padding-top: 22px; }
}


/* --------------------------------------------------------------------------
   Article pages on a phone: the gap above the headline, and its size

   THE GAP
   .blog-single is a <div>, not a <section>, so the earlier rule that trimmed
   section.pq-pb-210 never touched it. Its own class supplies the top padding:

       .pq-pt-130     130px
       up to 1199px    90px   (responsive.css)
       up to  767px    60px   (responsive.css)

   Sixty pixels of white was reasonable when a photograph came first. Now the
   headline leads, and it wants to sit close under the banner.

   THE SIZE
   The template never reduces h1 below its desktop 40px/48px, which is a lot
   of type on a 375px screen - a five-line headline before any content.
   -------------------------------------------------------------------------- */

/* 45px at every width from a phone upwards. The template's 130px left the
   article floating a long way below the banner on a desktop, while the
   tablet breakpoint's 45px looked right - so that value now applies
   everywhere rather than only below 1200px. */
.blog-single.pq-pt-130 {
  padding-top: 45px;
}

@media (max-width: 767px) {
  .blog-single.pq-pt-130 { padding-top: 18px; }

  .blog-single .ow-article-head .pq-blog-title {
    font-size: 25px;
    line-height: 33px;
  }
}

/* Narrower still, where the headline has the least room to work with. */
@media (max-width: 400px) {
  .blog-single .ow-article-head .pq-blog-title {
    font-size: 23px;
    line-height: 30px;
  }
}