/**
 * Vet-Approved Article Template Styles
 * For veterinary-written pet care articles
 */
/* ===========================
   Vertical rhythm
   =========================== */
/* sureflap.less gives every .container 46px of top AND bottom padding, so each
   section on this page contributed ~92px of white space and the article read as
   mostly empty. Tightened to 12px, scoped to `body.vet-approved-article` so the
   global rule is untouched everywhere else on the site.
   Stacked selectors (not a `.container` descendant rule) because these sections
   ARE the containers — they are not nested inside one. */
body.vet-approved-article .container-breadcrumb,
body.vet-approved-article .container-vet-article-header,
body.vet-approved-article .container-vet-article,
body.vet-approved-article .container-vet-profile,
body.vet-approved-article .container-social-share {
  padding-top: 12px;
  padding-bottom: 12px;
  /* The xs/sm branch of the global rule sets 50px/10px; match the desktop
           intent on small screens too rather than inheriting that asymmetry. */
}
@media (max-width: 749px) {
  body.vet-approved-article .container-breadcrumb,
  body.vet-approved-article .container-vet-article-header,
  body.vet-approved-article .container-vet-article,
  body.vet-approved-article .container-vet-profile,
  body.vet-approved-article .container-social-share {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
/* ===========================
   Breadcrumb bar
   =========================== */
/* The grey came from Bootstrap's own `.breadcrumb` default (#f5f5f5 with a 4px
   radius) sitting on the <ul>, which is a col-xs-10 inside the centred row: on a
   1600px screen that painted a 975px grey pill floating mid-page rather than a
   bar. Moving the fill onto nav.container-breadcrumb — already full-bleed — makes
   the band span the page, while the text stays in the content column because the
   .row inside it is still the centred 1170px one (SUREFLAP-2128). */
body.vet-approved-article .container-breadcrumb {
  background: #f5f5f5;
}
body.vet-approved-article .container-breadcrumb ul.breadcrumb {
  background: transparent;
  border-radius: 0;
  /* Bootstrap's 20px bottom margin would otherwise sit INSIDE the
               band, leaving the text high in a needlessly deep bar. */
  margin-bottom: 0;
}
/* ===========================
   Body text colour
   =========================== */
/* The mockup PDF sets body copy in pure black (fill operator `0 g`), with teal
   #02a6b6 reserved for headings. Locally `.article-body` asked for #333 but a
   bare `p { color: #838383 }` in forms.less won on specificity, so paragraphs
   rendered light grey — noticeably washed out against the PDF. Both are now
   black, and `.article-body p` is explicit so it beats that global `p` rule. */
/* ===========================
   Header Image
   =========================== */
.container-vet-article-header {
  padding: 0;
  margin-bottom: 30px;
  /* At the artwork's own 4.1:1 ratio the banner is only ~90px deep on a 375px
       phone, which reads as a stripe rather than a header. Doubling the depth
       means halving the ratio: the current artwork is 2340x571, so the doubled
       box is 2340x1142 = 2.049:1. Expressed as aspect-ratio rather than a pixel
       height so it holds at every phone width, and object-fit keeps the artwork
       undistorted — the extra depth is bought by cropping the sides, centred.
       If a banner's subject sits off-centre, override object-position rather
       than the ratio. */
}
.container-vet-article-header img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 749px) {
  .container-vet-article-header img {
    height: auto;
    /* Escaped so Less passes the ratio through as written instead of
               dividing it into a bare decimal. */
    aspect-ratio: 2340 / 1142;
    object-fit: cover;
    object-position: center;
  }
}
/* ===========================
   Vet Badge & Credentials
   =========================== */
/* The badge sits in the narrow left column, so the pill graphic straddles the
   top edge of a bordered box holding the photo and credentials. */
.vet-badge-section {
  margin-bottom: 25px;
}
.vet-badge-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  /* The grid keeps this a 3-of-12 column all the way down to 749px, so between
       750 and 970px the box narrows to ~155px and there is not enough room for
       the portrait and the credentials side by side. Wrap instead, so the
       credentials drop below the portrait rather than spilling over the border. */
  flex-wrap: wrap;
  /* Room for the pill, which is pulled up over the top border. */
  padding: 30px 15px 15px;
  border: 2px solid #02a6b6;
  border-radius: 8px;
}
.vet-badge-image {
  position: absolute;
  /* Half the pill's height, so it straddles the border. */
  top: -18px;
  left: 15px;
  width: 175px;
  max-width: calc(100% - 30px);
  height: auto;
}
/* Small inline portrait shown beside "Written by:" in the badge box. */
.vet-badge-photo {
  flex-shrink: 0;
}
.vet-badge-photo img {
  width: 72px;
  height: 82px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.vet-credentials {
  /* Basis, not min-width: it is the basis that decides whether this sits beside
       the portrait or wraps under it. 95px is the narrowest that still fits
       "Veterinarian" and "PGCertSAM" on one line, so the box stays two-up at the
       full 263px sidebar width and only stacks once it genuinely cannot fit. */
  flex: 1 1 95px;
  min-width: 0;
  /* Backstop: the qualification string has no break opportunities, so without
       this it would cross the border rather than wrap. */
  overflow-wrap: break-word;
}
.vet-credentials p {
  margin: 2px 0;
  line-height: 1.35;
}
.vet-credentials .vet-written-by {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}
.vet-credentials .vet-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.vet-credentials .vet-title {
  font-size: 14px;
  font-weight: 700;
  color: #02a6b6;
}
.vet-credentials .vet-qualifications {
  font-size: 13px;
  color: #333;
  font-weight: 600;
}
.article-last-updated {
  font-size: 13px;
  color: #333;
  margin: 0 0 25px 0;
}
.article-last-updated strong {
  font-weight: 700;
}
/* ===========================
   Left column (badge + date + quick links)
   =========================== */
@media (max-width: 749px) {
  .vet-article-aside {
    margin-bottom: 30px;
  }
}
/* ===========================
   Quick Links Sidebar
   =========================== */
@media (max-width: 749px) {
  .quick-links-wrapper {
    position: static;
  }
}
.quick-links-title {
  font-size: 18px;
  font-weight: 700;
  color: #02a6b6;
  margin: 0 0 15px 0;
}
.article-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Every top-level entry is an H2 from the article, and all of them are teal.
       Previously only the active one was, which at the top of the page meant the
       first link alone looked teal and the rest black — read as a bug, not as a
       position indicator (SUREFLAP-2128).
       Child selectors, so the nested H3 entries below keep their own colour: two
       classes beat one class plus three elements. */
  /* Nested H3 entries (e.g. the individual tips under a numbered section). */
}
.article-toc ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}
.article-toc li {
  margin-bottom: 10px;
  line-height: 1.6;
  /* The scroll spy marks the section in view (vet-approved-article.js:155).
           It no longer carries the colour: every top-level entry is teal now, so
           weight is the only thing left to distinguish "you are here" with. */
}
.article-toc li a {
  color: #000000;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}
.article-toc li a:hover {
  color: #02a6b6;
  text-decoration: underline;
}
.article-toc li.active a {
  font-weight: 600;
}
.article-toc > ol > li > a {
  color: #02a6b6;
}
.article-toc .article-toc-sub {
  list-style: lower-alpha;
  padding-left: 18px;
  margin: 8px 0 0 0;
}
.article-toc .article-toc-sub li {
  margin-bottom: 6px;
}
.article-toc .article-toc-sub li a {
  font-size: 14px;
  /* Was #555 — the nested tips looked disabled next to the
                   top-level entries. Same black, distinguished by size only. */
  color: #000000;
}
/* ===========================
   Article title
   =========================== */
/* The <h1> used to live inside .article-body, which on a phone put it below the
   badge box, the last-updated date and the quick links — the reader met all the
   furniture before the headline. It now has its own column at the top of the
   row, so phones get banner then title with no other change to the order.
   Same rendered type as before: 36px desktop, 24px phone. */
.vet-article-title h1 {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  line-height: 1.3;
}
/* Restoring the two-column layout from the new source order.
   Floats cannot do it: the title comes BEFORE the aside in the DOM but has to
   render to its right, with the aside spanning the title and the body. So from
   the width where the aside becomes a 3-of-12 column, the row is a grid whose
   tracks are the same 25%/75% the column classes give — the rendered layout at
   these widths is unchanged.
   750px, not Bootstrap's stock 992px: this build's breakpoints are 750/970/1170
   (bootstrap.css:1089/1247/1405), so .col-md-3 already narrows the aside at
   750px, which is also where every mobile query in this file stops. */
@media (min-width: 750px) {
  body.vet-approved-article .container-vet-article > .row {
    display: grid;
    grid-template-columns: 25% 75%;
    /* Without this the aside stretches down the full row and its background
           box would grow past the credentials. */
    align-items: start;
  }
  body.vet-approved-article {
    /* The column classes still set width:25%/75% and float:left. Inside a
           grid the width would resolve against the track and shrink each item
           to a quarter of its own column, so hand sizing back to the tracks. */
  }
  body.vet-approved-article .vet-article-title {
    grid-column: 2;
    grid-row: 1;
    /* .vet-article-content adds 30px on top of the column's own 15px;
               match it so the title stays flush with the body copy. */
    padding-left: 30px;
  }
  body.vet-approved-article .vet-article-aside {
    grid-column: 1;
    /* Beside both the title and the article, as it is today. Escaped:
               unescaped, Less reads the slash as division and emits
               "1 span 2", which the browser drops — the aside then
               auto-places into row 2 and starts a title's height too low. */
    grid-row: 1 / span 2;
  }
  body.vet-approved-article .vet-article-content {
    grid-column: 2;
    grid-row: 2;
  }
  body.vet-approved-article .vet-article-title,
  body.vet-approved-article .vet-article-aside,
  body.vet-approved-article .vet-article-content {
    width: auto;
    float: none;
  }
}
/* ===========================
   Main Article Content
   =========================== */
.container-vet-article {
  margin-bottom: 50px;
}
.vet-article-content {
  padding-left: 30px;
}
@media (max-width: 749px) {
  .vet-article-content {
    padding-left: 15px;
  }
}
.article-body {
  /* 1.1em against the inherited 16px = 17.6px. Deliberately em, not rem:
       html is 10px on this site, so 1.1rem would SHRINK the text to 11px. */
  font-size: 1.1em;
  line-height: 1.8;
  color: #000000;
  /* forms.less carries a bare `p { color: #838383 }`, which outranks the
       inherited colour above — so paragraphs need naming explicitly. */
}
.article-body p,
.article-body li,
.article-body span,
.article-body td,
.article-body th {
  color: #000000;
}
.article-body .article-intro {
  font-size: 18px;
  color: #555;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.7;
}
.article-body h2 {
  font-size: 28px;
  font-weight: 700;
  color: #02a6b6;
  margin: 40px 0 20px 0;
  padding-top: 20px;
  line-height: 1.4;
  scroll-margin-top: 100px;
}
@media (max-width: 749px) {
  .article-body h2 {
    font-size: 22px;
  }
}
.article-body h3 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 30px 0 15px 0;
  line-height: 1.4;
}
@media (max-width: 749px) {
  .article-body h3 {
    font-size: 18px;
  }
}
.article-body p {
  margin-bottom: 20px;
}
.article-body ul,
.article-body ol {
  margin-bottom: 20px;
  padding-left: 30px;
}
.article-body ul li,
.article-body ol li {
  margin-bottom: 10px;
  line-height: 1.7;
}
.article-body strong {
  font-weight: 700;
  color: #222;
}
.article-body a {
  color: #02a6b6;
  text-decoration: underline;
}
.article-body a:hover {
  color: #018a97;
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 4px;
}
/* ===========================
   Vet Author Profile Section
   =========================== */
.container-vet-profile {
  background-color: #f0f8f9;
  padding: 40px 0;
  margin-bottom: 30px;
}
.vet-profile-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.vet-profile-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 25px 0;
  text-align: center;
}
.vet-profile-content {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 749px) {
  .vet-profile-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.vet-profile-content .vet-photo {
  flex-shrink: 0;
}
.vet-profile-content .vet-photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.vet-profile-content .vet-profile-text {
  flex: 1;
}
.vet-profile-content .vet-profile-text p {
  margin: 8px 0;
  line-height: 1.7;
}
.vet-profile-content .vet-profile-text .vet-profile-name {
  font-size: 20px;
  font-weight: 700;
  color: #02a6b6;
  margin-bottom: 5px;
}
.vet-profile-content .vet-profile-text .vet-profile-credentials {
  font-size: 15px;
  font-weight: 600;
  color: #555;
  margin-bottom: 15px;
}
.vet-profile-content .vet-profile-text .vet-profile-bio {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}
/* ===========================
   Social Share Section
   =========================== */
.container-social-share {
  padding: 40px 0;
  text-align: center;
}
.social-share-wrapper {
  max-width: 600px;
  margin: 0 auto;
}
.social-share-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 25px 0;
}
.social-share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  /* Instagram has no web share endpoint, so this is a styled profile link
       sized to sit alongside the Facebook/Twitter widget buttons. */
}
.social-share-buttons .social-button {
  display: inline-block;
}
.social-share-buttons .instagram-share-button {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  background-color: #02a6b6;
  border-radius: 3px;
  text-decoration: none;
}
.social-share-buttons .instagram-share-button:hover,
.social-share-buttons .instagram-share-button:focus {
  background-color: #018a97;
  color: #fff;
  text-decoration: none;
}
/* ===========================
   Mobile Responsive Adjustments
   =========================== */
@media (max-width: 749px) {
  .quick-links-wrapper {
    position: static;
  }
  .vet-article-title h1 {
    font-size: 24px;
  }
  .article-body .article-intro {
    font-size: 16px;
  }
  .article-body h2 {
    font-size: 20px;
  }
  .vet-profile-content .vet-photo img {
    width: 120px;
    height: 120px;
  }
}