/* Additions on top of the original JA Teline IV (T3) stylesheets in static/legacy/. */

/* Keyboard users. */
.skip-link { position: absolute; left: -10000px; }
.skip-link:focus { left: 10px; top: 10px; z-index: 1000; background: #fff; padding: 6px 10px; }
a:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid #9c152d; outline-offset: 2px; }

/* Helpers. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nickname { position: absolute; left: -10000px; }  /* honeypot field on forms */

/* Top bar: a small site search where the old template had an (unused) search slot. */
.topbar .ja-search { text-align: right; }
.topbar .topbar-search { margin: 0; }
.topbar .topbar-search input {
  width: 170px; margin: 4px 8px 0 0; padding: 1px 6px; height: 20px; font-size: 11px; line-height: 16px;
  border: 1px solid #ddd; border-radius: 0; box-shadow: none;
}

/* Header banner (the old slider showed one at a time, with a shadow). */
.head-advertisement { text-align: right; }
.head-advertisement .nivoSlider {
  display: inline-block; max-width: 100%; margin-bottom: 10px; line-height: 0;
  box-shadow: 0 1px 5px 0 #4a4a4a;
}
.connat-banner img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* Right-hand column banners (home page). */
.t3-mastcol .bannergroup .banneritem + .banneritem { margin-top: 12px; }
/* Video banners. */
.connat-video { width: 310px; max-width: 100%; margin: 0 auto; }
.connat-video iframe { display: block; width: 100%; aspect-ratio: 310 / 199; border: 0; }

/* Rich text images (Wagtail image formats). */
.richtext-image.left { float: left; margin: 0 1em 1em 0; max-width: 50%; height: auto; }
.richtext-image.right { float: right; margin: 0 0 1em 1em; max-width: 50%; height: auto; }
.richtext-image.full-width { max-width: 100%; height: auto; }
.richtext-image.centre { display: block; margin: 0 auto 1em; max-width: 100%; height: auto; }
/* A width chosen in the editor (width attribute); never wider than the column. */
.richtext-image.custom-size { max-width: 100%; height: auto; }
.richtext-image.full-width.custom-size { display: block; }
.richtext-image.centred { display: block; margin-left: auto; margin-right: auto; }
/* Floated article images were 150-200px wide on the old site. */
/* (Also in blog intros and home page boxes.) */
:is(.cn-body, .article-intro) .richtext-image.left:not(.custom-size, .natural-size),
:is(.cn-body, .article-intro) .richtext-image.right:not(.custom-size, .natural-size) { width: 150px; max-width: 50%; }
:is(.cn-body, .article-intro) .richtext-image.left, :is(.cn-body, .article-intro) .richtext-image.right { margin-bottom: 10px; }
:is(.cn-body, .article-intro) .richtext-image.right { margin-left: 20px; }
:is(.cn-body, .article-intro) .richtext-image.left { margin-right: 20px; }
.cn-body::after, .article-intro::after { content: ""; display: table; clear: both; }
/* In table cells (e.g. the Charity Search topics) a percentage cap would shrink logos to nothing. */
.cn-body td .richtext-image.left, .cn-body td .richtext-image.right,
.cn-body td .richtext-image.custom-size { max-width: none; }
/* (The old template.css caps every image with !important; it overrode that for these logos too.) */
.cn-body td .richtext-image:is(.custom-size, .natural-size) { max-width: none !important; }
/* Captioned images: the image and its caption (in italics underneath) float together. */
/* Imported raw HTML images that set their own margins or padding had no others on the old page (sides
   they didn't set were 0), so the float classes' margins don't apply to them (the issue image beside the
   home page's top banner: margin right/top/bottom 7px only). */
#bd img.richtext-image:is([style*="margin"], [style*="padding"]) { margin: 0; }
.richtext-figure { display: block; max-width: 100%; margin: 0 0 1em; }
.richtext-figure.left { float: left; margin: 0 20px 10px 0; }
.richtext-figure.right { float: right; margin: 0 0 10px 20px; }
.richtext-figure.centre { margin: 0 auto 1em; }
.richtext-figure.left:not(.custom-size), .richtext-figure.right:not(.custom-size) { width: 150px; max-width: 50%; }
.richtext-figure .richtext-image,
.cn-body .richtext-figure .richtext-image:is(.left, .right, .full-width, .centre) { display: block; float: none; width: 100%; max-width: 100%; height: auto; margin: 0; }
.richtext-caption { display: block; margin-top: 4px; text-align: center; font-style: italic; font-size: 0.9em; line-height: 1.35; color: #555; }

/* Embedded players and publications kept from old articles (YouTube, Vimeo, Issuu). */
.cn-body iframe.embed-frame { display: block; max-width: 100%; border: 0; }
.cn-body iframe.embed-frame:not([width]) { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; height: auto; margin: 10px 0; }
.cn-body iframe.embed-frame[src*="issuu.com"] { width: 100%; max-width: none; aspect-ratio: 16 / 10; min-height: 500px; height: auto; }

/* Pencil for logged-in staff: opens the item in the CMS (templates/_cms_edit_link.html). */
.cms-edit-link { display: inline-block; color: #9c152d; line-height: 0; }
.cms-edit-link:hover, .cms-edit-link:focus-visible { color: #2a2a2a; }
.article-tools .actions .cms-edit-link { margin-left: 8px; }

/* Printing an article prints just the article. */
@media print {
  .topbar, #t3-header, #t3-mainnav, .t3-sidebar, #t3-footer, .article-tools .actions, .skip-link, .cms-edit-link { display: none !important; }
  .t3-content { width: 100% !important; }
}

/* The old template was fixed-width (980px); on small screens the columns stack. */
@media (max-width: 767px) {
  body { padding: 0 10px; }
  .container, .topbar, #t3-header, #t3-mainnav { width: auto !important; }
  .row { margin-left: 0; }
  .row > [class*="span"], .row-fluid > [class*="span"] { float: none !important; width: auto !important; margin-left: 0 !important; }
  .topbar .ja-headline { display: none; }
  .head-advertisement { text-align: center; }
  .t3-megamenu .nav > li { float: none; display: inline-block; }
  img, iframe { max-width: 100%; height: auto; }
  #t3-header .logo, #t3-header .logo-image, #t3-header .logo-image a { width: auto !important; max-width: 100%; overflow: visible; }
  #t3-header .logo-img { max-width: 100%; height: auto; }
}

/* Home page. */
#dmm-search form { margin: 0; }
#dmm-search h2 span { color: #9c152d; background: #fff; padding: 0 12px; display: inline-block; }
#dmm-search .browse-button { width: fit-content; margin: auto; }
#dmm-search .btn { text-transform: uppercase; }
/* Boxes whose heading was a big striped one (Testimonials), like the section blocks' headings. */
.home-box-striped .home-box-heading {
  margin: 18px 0 18px 0 !important; padding: 0 !important; text-transform: uppercase;
  font: bold 175%/1 Arial, sans-serif; letter-spacing: -1px; text-indent: 5px;
  background: url("../legacy/templates/ja_teline_iv_t3/images/stripe-bg.png") repeat top;
}
.home-box-striped .home-box-heading span { color: #000; background: #fff; padding: 0 12px 0 4px; display: inline-block; }
.home-box-striped .module-ct { padding: 18px; border-top: 1px solid #ccc; }
/* The old news blocks positioned tabbed panels with JavaScript; keep them in normal flow. */
.linear .ja-zin .ja-articles { position: static; }

/* Section pages: links to the section's categories (the old site had a page per category). */
.section-categories { list-style: none; margin: 0 0 20px; padding: 0; }
.section-categories li { display: inline-block; margin: 0 6px 6px 0; }
.section-categories a { display: inline-block; padding: 2px 10px; background: #eee; color: #333; font-weight: bold; font-size: 11px; text-transform: uppercase; }
.section-categories a[aria-current], .section-categories a:hover { background: #9c152d; color: #fff; text-decoration: none; }
.blog .pagination { text-align: center; }
.blog .pagination .counter { margin-top: 6px; color: #888; }
.blog .article-aside dl { margin: 0; }

/* Directory (old SobiPro look; base rules come from legacy/components/com_sobipro/var/css/sobipro.css). */
#SobiPro div.lead a { color: inherit; text-decoration: none; }
#SobiPro h1.page-header img { width: auto; height: 32px; padding-right: 20px; vertical-align: middle; }
#SobiPro .spSectionDesc { margin: 20px 0; }
#SobiPro .spParentCat { margin: -5px 0 15px; }
#SobiPro .spAlphaSub { font-size: 16px; text-transform: uppercase; }
#SobiPro .spNoEntries { margin: 15px 0; }
/* Email addresses are revealed on request (no mailto in the page); the button looks like the old link. */
#SobiPro button.reveal-email { padding: 0; border: 0; background: none; color: #9c152d; font: inherit; text-transform: none; line-height: inherit; vertical-align: baseline; cursor: pointer; box-shadow: none; text-shadow: none; }
#SobiPro button.reveal-email:hover { text-decoration: underline; }
#SobiPro .spDetailEntry .spClassViewImage { float: right; margin: 0 0 10px 10px; }
#SobiPro .spDetailEntry .cms-edit-link { float: right; margin: 4px 0 0 10px; }
#SobiPro .spSearchMatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#SobiPro .spSearchMatch label:has(input:checked) { color: #fff; background-color: #933; border-color: #933; }
#SobiPro .spSearchMatch label:has(input:focus-visible) { outline: 2px solid #9c152d; outline-offset: 2px; }
#SobiPro #spSearchForm #id_q { display: inline-block; width: 250px; }

/* Get Listed: the old page's large blue introduction and its two-column form table. */
/* As the old intro's inline styles (lost in rich text): red bold lines, then the "PLEASE SELECT" line. */
.get-listed-intro p { font-size: 19px; line-height: 20px; margin-bottom: 0; }
.get-listed-intro p b { color: #701215; font-size: 20px; }
.get-listed-intro p + p { font-size: 20px; margin: 15px 0 10px; line-height: 30px; }
.get-listed-form { width: 510px; max-width: 100%; }
.get-listed-options { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px; margin: 0; }
.get-listed-option { display: block; font-size: 16px; line-height: 24px; text-transform: uppercase; margin: 0; }
.get-listed-option input { margin: 0 20px 0 0; }
.get-listed-option .option-name { display: inline-block; width: 130px; }
.get-listed-period { font-weight: bold; padding: 10px; margin: 0; border-bottom: 1px solid #ddd; }
.get-listed-row { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #ddd; }
.get-listed-row label { flex: 0 0 235px; text-transform: uppercase; padding-top: 4px; }
.get-listed-row .optional { text-transform: none; color: #888; }
.get-listed-input { flex: 1; }
.get-listed-input input, .get-listed-input textarea { width: 100%; box-sizing: border-box; height: auto; }
.get-listed-row.has-error input, .get-listed-row.has-error textarea { border-color: #b94a48; }
.get-listed-row .errorlist { color: #b94a48; margin: 4px 0 0; list-style: none; }
.get-listed-submit { text-align: center; margin-top: 20px; }
.get-listed-problem { color: #b94a48; font-weight: bold; }
@media (max-width: 767px) { .get-listed-row { display: block; } .get-listed-row label { display: block; } }

/* Directory search. */
#SobiPro #spSearchForm span.control-label { font-weight: normal; }
#SobiPro #spSearchForm .btn-primary { background: #933; border-color: #933; }

/* Side box of pages (Charity Search topics). */
.t3-sidebar .module .nav.menu { margin: 0; }
.t3-sidebar .module .nav.menu li a { padding: 2px 0; }
.subpages-back { margin-top: 15px; }

/* ------------------------------------------------------------------------------------------
   Site search. Not a copy of the old page: the T3 palette (#9c152d blue, #f7f7f7 grey,
   #f0f0f0 grey) and type (Arial, Georgia headlines), but laid out to be scanned easily.
   ------------------------------------------------------------------------------------------ */
.site-search { font-family: Arial, Helvetica, sans-serif; }
.site-search .search-form { margin: 0 0 18px; }
.search-bar { display: flex; max-width: 680px; }
.search-bar input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 16px;
  border: 2px solid #9c152d; border-right: 0; border-radius: 0; box-sizing: border-box; background: #fff;
}
.search-bar button {
  height: 40px; padding: 0 22px; border: 0; background: #9c152d; color: #fff; cursor: pointer;
  font: bold 13px Arial, Helvetica, sans-serif; text-transform: uppercase;
}
.search-bar button:hover { background: #2a2a2a; }
.search-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: 12px; color: #555; }
.search-controls select { height: 28px; font-size: 12px; max-width: 100%; }
.search-sort { display: inline-flex; margin-left: auto; border: 1px solid #ccc; }
.search-sort a { padding: 5px 12px; color: #333; background: #f0f0f0; }
.search-sort a + a { border-left: 1px solid #ccc; }
.search-sort a.is-current { background: #9c152d; color: #fff; font-weight: bold; }
.search-sort a:hover { text-decoration: none; background: #e2e2e2; }
.search-sort a.is-current:hover { background: #9c152d; }

.search-count { margin: 0 0 6px; font-size: 13px; color: #555; }
.search-count strong { color: #2a2a2a; }

/* Group headings borrow the home page's striped section headings. */
.search-group { margin-top: 22px; }
.search-group h2 {
  margin: 0 0 14px; padding: 0; text-transform: uppercase; font: bold 175%/1 Arial, sans-serif;
  letter-spacing: -1px; text-indent: 5px;
  background: url("../legacy/templates/ja_teline_iv_t3/images/stripe-bg.png") repeat top;
}
.search-group h2 span { display: inline-block; padding: 0 12px 0 4px; background: #fff; color: #000; }

/* Directory companies: small cards on the site's cream. */
.search-companies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.site-search .search-companies li {
  margin: 0; padding: 10px 12px; line-height: 1.4; overflow: visible; background: #f7f7f7; border: 1px solid #ece2bd; border-left: 4px solid #9c152d;
}
.search-company-name { display: block; font: bold 15px Georgia, Cambria, "Times New Roman", serif; color: #9c152d; }
.search-company-what, .search-company-where { display: block; font-size: 12px; color: #555; margin-top: 3px; }
.search-company-where { color: #888; }
.search-more { margin: 10px 0 0; font-size: 12px; }
.search-more a { font-weight: bold; }

/* Article and page results. */
.search-results { list-style: none; margin: 0; padding: 0; }
.site-search .search-results .search-result { display: flex; gap: 14px; margin: 0; padding: 14px 0; border-top: 1px dotted #ccc; background: none; line-height: 1.4; }
.site-search .search-results .search-result:first-child { border-top: 0; padding-top: 0; }
.search-result-image { flex: 0 0 120px; }
.search-result-image img { display: block; width: 120px; height: 90px; object-fit: cover; }
.search-result-text { flex: 1; min-width: 0; }
.search-result h3 { margin: 0 0 4px; font: bold 17px/1.25 Georgia, Cambria, "Times New Roman", serif; }
.search-result h3 a { color: #9c152d; }
.search-result-meta { margin: 0 0 6px; font-size: 11px; color: #888; text-transform: uppercase; }
.search-result-meta a { color: #555; }
.search-result-extract { margin: 0; font-size: 13px; line-height: 1.55; color: #333; }
.site-search mark { background: #e2efd4; color: inherit; padding: 0 1px; }
.search-result h3 mark { background: #e2efd4; }

.search-empty, .search-none { font-size: 13px; color: #333; }
.search-none ul { margin: 8px 0 0 18px; }
.search-browse-label { margin-top: 16px; font-weight: bold; }
.search-browse { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site-search .search-browse li { margin: 0; padding: 0; background: none; line-height: 1.4; }
.search-browse a { display: inline-block; padding: 5px 10px; border: 1px solid #ccc; background: #f0f0f0; color: #333; font-size: 12px; }
.search-browse a:hover { background: #9c152d; border-color: #9c152d; color: #fff; text-decoration: none; }

@media (max-width: 700px) {
  .search-companies { grid-template-columns: 1fr; }
  .search-sort { margin-left: 0; }
  .search-result-image { flex-basis: 80px; }
  .search-result-image img { width: 80px; height: 60px; }
}

/* Charity Search: "Select a category", right-aligned and pointing at the topics box (as on the old page). */
.select-category {
  text-align: right; font-size: 25px; line-height: 1.2; padding: 16px; margin: 0 0 15px;
  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.select-category .fa { margin-left: 12px; }
@media (max-width: 767px) {
  .cn-body td .richtext-image:is(.custom-size, .natural-size) { max-width: 100% !important; height: auto; }
}
/* Video files kept from old articles (e.g. on the Animals charity page). */
.cn-body video.embed-video { display: block; max-width: 100%; height: auto; margin-bottom: 15px; }
.cn-body video.embed-video.left { float: left; margin-right: 20px; }
.cn-body video.embed-video.right { float: right; margin-left: 20px; }

/* Construction National: the slider module hid its items until its script showed one; the new site shows one banner per slot. */
.tcvn-banner-slider .tcvn-banner-item.connat-banner { display: block; }
#ja-right .tcvn-banner-slider .tcvn-banner-item.connat-banner + .tcvn-banner-item.connat-banner { margin-top: 10px; }
/* The section filter buttons (added on the new site): no list bullets from the template. */
ul.section-categories li { background: none; padding-left: 0; }
/* The content-top slider's script floated it left of the box beside it (the "current issue" image). */
.ja-blocktab-content .tcvn-banner-slider { float: left; margin: 7px 0 0 7px; }
/* The old "Latest Issue" menu item was red (a#menu297 in template.css). */
#ja-megamenu a.mega[href="/#CurrentIssue"] { color: #9C152D; }
/* The old lists and entry pages showed SobiPro's thumbnail of the badge or logo (120px wide at most). */
#SobiPro img.field_sobi2_icon { max-width: 120px; height: auto; }