/* Dog training articles, dog breed pages and the newsletter pages served from the API, in the Kingdom of Pets look.
   Loaded after kop-base.css + kop-site.css. Handles the class names the old pages (and the API's HTML) carry. */

/* Old class names */
.site-main .underline { text-decoration: underline; }
.site-main .italic { font-style: italic; }
.site-main .clearboth, .site-main .align-center + .clearboth { clear: both; }
.site-main .align-center { text-align: center; }
.site-main img.pull-right, .site-main .imageright img { float: right; margin: 4px 0 14px 22px; max-width: 45%; }
.site-main img.pull-left { float: left; margin: 4px 22px 14px 0; max-width: 45%; }
.site-main .imageright { float: right; margin: 4px 0 14px 22px; max-width: 45%; }
.site-main .imageright img { float: none; margin: 0; max-width: 100%; }
.site-main img.img-polaroid { padding: 4px; background: #fff; border: 1px solid #d6dfec; border-radius: 6px; box-shadow: 0 2px 6px rgba(15, 79, 120, .12); }
.site-main .johnson { overflow: hidden; }
.site-main .style4, .site-main .style5, .site-main .biggerboldbodytext, .site-main .testimonials { font: inherit; color: inherit; }
.site-main .row-fluid, .site-main .sidespace { display: block; width: auto; }
.site-main .span10, .site-main .span8, .site-main .span9 { width: auto; float: none; margin: 0; }
@media (max-width: 600px) {
  .site-main img.pull-right, .site-main img.pull-left, .site-main .imageright { float: none; display: block; max-width: 100%; margin: 0 auto 1em; }
}

/* Lists inside the articles */
.site-main ul.blue-triangle-list, .site-main ul.blue.underline, .site-main ul.green-tick-list { padding-left: 1.3em; }
.site-main ul.blue-triangle-list li::marker { content: "\25B8  "; color: var(--kop-blue-deep); }
.site-main ul.green-tick-list li::marker { content: "\2713  "; color: #2a8a3a; font-weight: 700; }
.site-main ul.blue.underline a { text-decoration: underline; }
.site-main ul.green-tick-list { columns: 2; column-gap: 32px; }
.site-main ul.green-tick-list li { break-inside: avoid; }
@media (max-width: 560px) { .site-main ul.green-tick-list { columns: 1; } }

/* Articles index: one card per article */
.site-main ul.article-cards { list-style: none; margin: 0 0 1.6em; padding: 0; display: grid; gap: 12px; }
.site-main ul.article-cards li { margin: 0; padding: 16px 20px; background: #fff; border: 1px solid var(--kop-line); border-radius: 10px; }
.site-main ul.article-cards a.article-title { display: block; margin-bottom: 4px; font: 700 19px/1.35 var(--kop-sans); }
.site-main ul.article-cards li > span { display: block; font-size: 16.5px; line-height: 1.55; color: var(--kop-text); }

/* More articles / more breeds, at the end of each page */
.site-main .more-reading { margin: 2.2em 0 0; padding-top: 1.2em; border-top: 1px solid var(--kop-line); }
.site-main .more-reading h2 { margin-top: 0; }
.site-main .more-reading .site-nav-list { margin-bottom: 0; }
.site-main .site-nav-list.in-columns { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.site-main .site-nav-list li { margin: 0; }
.site-main .site-nav-list a { text-decoration: none; }

/* Dog breeds index */
.site-main .blue-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 1.4em 0 2em; padding: 20px 22px; background: var(--kop-sky-2); border: 1px solid var(--kop-line); border-radius: 12px; }
.site-main .blue-box h2 { margin: 0 0 .5em; font-size: 20px; color: var(--kop-blue-ink); }
.site-main .blue-box .site-nav-list { margin: 0; }
.site-main .blue-box .site-nav-list a { padding: 9px 14px; font-size: 15.5px; }
.site-main .johnson p:last-child { margin-bottom: 0; }

/* Breed pages: the small facts lines under the title, and photo tables */
.site-main #content > h3:first-child, .site-main > h3:first-child { margin-top: 0; }
.site-main table[border="0"] { display: table; table-layout: fixed; width: 100%; }
.site-main table[border="0"] td { border-bottom: 0; text-align: center; padding: 8px 6px; font-size: 15px; }
.site-main table[border="0"] td img { max-width: 100%; height: auto; }
.site-main table[border="0"] td div { text-align: center; }

/* Newsletter pages served from the API (newsletters.php): its own HTML keeps the old two-column wrapper.
   The article column comes first and the side list of articles/breeds goes underneath, as a tidy list. */
.nl-content .row-fluid { display: block; }
.nl-content .sidespace { display: flex; flex-direction: column; }
.nl-content .span9, .nl-content .span12 { order: 1; width: auto; float: none; margin: 0; }
.nl-content .span3 { order: 2; width: auto; float: none; margin: 2.2em 0 0; padding: 1.2em 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--kop-line) !important; border-radius: 0 !important; }
.nl-content .span3 h3 { margin: 0 0 .6em; font-size: 24px; }
.nl-content .span3 ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.nl-content .span3 li { margin: 0; }
.nl-content .span3 li a { display: block; padding: 12px 16px; background: #fff; border: 1px solid var(--kop-line); border-radius: 8px; text-decoration: none; font: 600 16px/1.35 var(--kop-sans); }
.nl-content .span3 li a:hover, .nl-content .span3 li.article-active a { background: var(--kop-sky); }
.nl-content ul.blue-triangle-list { padding-left: 1.3em; }
.nl-content ul.blue-triangle-list li::marker { content: "\25B8  "; color: var(--kop-blue-deep); }
.nl-content .span3 ul.blue-triangle-list li::marker { content: none; }
.nl-content img[src*="bib250200"] { display: none; }   /* seal dropped site-wide */
.nl-content .align-center { text-align: center; }
.nl-content .underline { text-decoration: underline; }
.nl-content .italic { font-style: italic; }
.nl-content img.pull-right { float: right; margin: 4px 0 14px 22px; max-width: 45%; }
.nl-content img.pull-left { float: left; margin: 4px 22px 14px 0; max-width: 45%; }
.nl-content img.img-polaroid { padding: 4px; background: #fff; border: 1px solid #d6dfec; border-radius: 6px; }
.site-main ul.article-cards a.article-title { text-decoration: none; }
.nl-content h4 { margin: 1.5em 0 .5em; font-size: clamp(21px, 2.4vw, 25px); font-weight: 800; }
.nl-content .span3 ul.blue-triangle-list { padding-left: 0; }
.nl-content h3 { margin: 1.4em 0 .5em; font-size: clamp(22px, 2.6vw, 27px); font-weight: 800; }
.nl-content .span3 h3 { margin-top: 0; font-size: 24px; }