/*
 * shownotes.css — show-notes styles that exist only on shownotes.tuxcare.com.
 *
 * Everything shared with tuxcare.com (global.css, main.css, responsive.css,
 * style.css) is copied verbatim from the TuxCare theme by sync-from-tuxcare.sh
 * and must not be edited here. This file carries what the two show-notes
 * templates need on top of that. It loads last.
 *
 * Every selector is scoped to #main (the landmark the shared header opens and
 * the footer closes) so nothing here can restyle the header, mega menu or
 * footer, which must stay identical to tuxcare.com.
 *
 * Origin: the rule-level difference between this site's previous main.css and
 * responsive.css and the TuxCare ones, kept only where a selector can match the
 * show-notes markup. Regenerate with tools/build-shownotes-css.js if needed.
 */

#main .section-padding {
  padding:65px 0;
}
#main .banner.banner--page h1 {
  font-size:50px;
  color:#fff;
  line-height:62px;
  font-weight:700;
  margin-bottom:30px;
}
.txc-wrap #main .banner--page h4 {
  color:#fff;
  font-weight:600;
  margin-bottom:30px;
}
#main .banner.banner--page > .container > .row {
  align-items:center;
  position:relative;
}
#main .banner-single-post-author .tcl-head-meta .tcl-h-m-d .author-name {
  color:#fff;
  font-size:20px;
  line-height:normal;
  font-weight:700;
  margin:0 0 5px;
}
#main .banner-single-post-author .tcl-head-meta .tcl-h-m-d .author-name span {
  font-size:14px;
  font-weight:400;
  margin-bottom:8px;
  display:inline-block;
}
#main .swags-content-detail-media-video .swag-slide iframe {
  max-width:100%;
  max-height:400px;
}
#main .banner-single-post-detail .meta ul li {
  margin-right:9px;
}
#main .banner-single-post-detail .meta ul li a[href] {
  font-weight:700;
}
@media (max-width: 991.98px) {
  .txc-wrap #main .heading h2 {
    font-size:30px;
    line-height:37px;
  }
  #main .banner.banner--page {
    top:0;
  }
  #main .banner.banner--page h1 {
    font-size:32px;
    line-height:normal;
  }
  #main .section-padding {
    padding:30px 0;
  }
  .txc-wrap #main h3 {
    font-size:25px;
    line-height:36px;
    text-align:center;
  }
  .txc-wrap #main p {
    margin-bottom:25px;
  }
  #main .banner.banner--page ul {
    display:block;
  }
  #main .banner.banner--page p strong {
    font-size:18px;
  }
  #main .txc--els-php-detail.section-padding {
    padding-bottom:0;
  }
  #main .banner.banner--page .banner_item.left {
    margin-bottom:35px;
  }
  #main .txc--single-post.generic-content .container .row {
    flex-direction:column-reverse;
  }
  #main .banner.banner--page {
    padding-top:65px;
  }
  #main .banner.banner--page ul li {
    margin-right:0;
    margin-bottom:20px;
  }
  #main .banner-single-post-detail h1 {
    font-size:26px;
    line-height:normal;
  }
  #main .banner-single-post-author .tcl-head-meta {
    margin-top:30px;
  }
  #main .banner-single-post-author .tcl-head-meta .tcl-h-m-d .author-name {
    font-size:18px;
  }
  #main .tcl-details {
    padding-top:0;
  }
  #main .tcl-m-content table {
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  #main .banner.banner--page.banner--page-els.els-php.banner-shownotes {
    padding:50px 0;
  }
  #main .banner_item.latest_shownotes_in_banner {
    bottom:0;
    background:#fff;
    border-radius:17px;
    background-image:none !important;
  }
  #main .latest_shownotes_in_banner .shownote-card {
    padding:20px;
  }
  #main .txc--els-php-detail.section-padding {
    padding-bottom:0;
    padding-top:50px;
  }
  #main #shownote-filter #search-term {
    min-width:100%;
  }
  #main #shownote-filter select {
    width:100%;
    margin-bottom:10px;
  }
  #main #shownote-filter .filter_by {
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    display:block;
    margin-top:20px;
  }
  #main #latest-shownotes .shownote-card-wrap {
    grid-template-columns:repeat(1, 1fr);
  }
  #main #shownote-results #previous-shownotes, #main #shownote-results #speakers {
    padding-top:0;
  }
  #main .previous-shownotes-table tbody tr td a {
    font-size:15px;
  }
  #main .shownote-card-wrap {
    display:block;
  }
  #main .shownote-card-wrap .speaker-card {
    max-width:100%;
  }
  #main .banner.banner--page .post-social ul {
    display:flex;
    gap:15px;
    flex-wrap:wrap; /* five icons no longer clip at 320px (WCAG 1.4.10) */
  }
  #main .swag-video {
    margin-bottom:20px;
  }
  #main .prize-thumb img {
    margin:0 auto;
  }
  #main .banner.banner--page.banner--page-els.els-php.banner-shownotes {
    background:#081C2E;
  }
  #main .shownote-card .meta span {
    margin-right:10px;
  }
}

/* Embeds inside a show note's body (WordPress oEmbed cards, third-party iframes) can
   carry a fixed width of 600px or more and pushed the page sideways on phones. The old
   theme hid that with a site-wide overflow-x:hidden; this keeps the fix to the content. */
#main .tcl-m-content iframe {
  max-width: 100%;
}

/* One link per card (WCAG 2.4.4). The title is the card's only <a>; its ::after stretches
   the hit area over the whole card, so a click anywhere opens the talk while assistive
   tech and the tab order see a single link named by the title. "See Shownotes →" is
   plain text inside that area, styled as it was when it was a link. */
#main .shownote-card {
  position: relative;
}
#main .shownote-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
#main .shownote-card__cta {
  color: var(--txc-text-blue);
}
/* The banner card styles every span as a block meta line; keep the CTA text inline as before. */
#main .latest_shownotes_in_banner .shownote-card__cta {
  display: inline;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}
/* Keyboard focus rings the whole card, not just the title. Browsers without :has() keep
   the default ring on the title link. */
#main .shownote-card:has(.shownote-card__link:focus-visible) {
  outline: 3px solid #359CF3;
  outline-offset: 3px;
}

/* Text colours that meet WCAG 1.4.3 (AA, 4.5:1). The brand blue #359CF3 stays for fills,
   icons and backgrounds, but as text it reaches only 2.91:1 on white and 2.65:1 on the
   #E9F6FF tint. --txc-text-blue (#0A64B8) gives 5.95:1 and 5.41:1. The giveaway box's
   orange and the muted banner date get the same treatment. */
#main {
  --txc-text-blue: #0A64B8;     /* brand blue, darkened for text on light backgrounds */
  --txc-text-orange: #AE4E14;   /* the giveaway "get notified" accent, darkened for white */
  --txc-banner-muted: #C9D3DD;  /* muted date on the navy-to-purple banner */
}
#main #shownote-filter #search-term,
#main #shownote-filter select,
#main .shownote-card .meta,
#main .latest_shownotes_in_banner .shownote-card span,
#main .previous-shownotes-table thead tr th,
#main .swag-form.tcl-widget p.os-n span {
  color: var(--txc-text-blue);
}
#main #shownote-filter #search-term::placeholder {
  color: var(--txc-text-blue);
  opacity: 1;
}
/* Filter selects: taller and capped in width (the shared main.css has 5px 8px and no cap). */
#main #shownote-filter select {
  padding: 12px 10px;
  max-width: 240px;
}
@media (max-width: 991.98px) {
  /* On phones the selects stack full-width (rule near the top of this file); no cap there. */
  #main #shownote-filter select {
    max-width: none;
  }
}
#main .swag-form.tcl-widget p.notify span {
  color: var(--txc-text-orange);
}
#main .banner-single-post-detail .date-time,
#main .banner-single-post-detail .date-time .date {
  color: var(--txc-banner-muted);
}

/* The plain link under a slides embed, the accessible alternative to the player. */
#main .swag-slide .slides-link {
  margin: 10px 0 0;
  font-size: 15px;
}
#main .swag-slide .slides-link a {
  color: var(--txc-text-blue);
  text-decoration: underline;
}

/* Heading levels fixed for WCAG 1.3.1 (one h1, no skipped levels). The tags changed, the
   look did not: these rules give the new tags the sizes the shared CSS gave the old ones. */
/* Post: section labels were <h4> (32px/30px), the giveaway label 29px/38px centred. */
#main .swag-slide h2,
#main .swag-video h2,
#main .swag-resources h2 {
  font-size: 32px;
  line-height: 30px;
  font-weight: 700;
  margin: 0 0 20px;
}
#main .swag-prize h2 {
  font-size: 29px;
  line-height: 38px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px;
}
#main .swag-slide .slides-note {
  margin: 0 0 15px;
}
/* Listing: the banner card title was an <h3> (18px/27px), speaker names <h4> (23px, centred). */
#main .latest_shownotes_in_banner .shownote-card h2 {
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  margin: 0 0 15px;
}
#main .latest_shownotes_in_banner .shownote-card h2 a {
  color: #081c2e;
}
#main .shownote-card-wrap .speaker-card h3 {
  font-size: 23px;
  line-height: normal;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px;
}
@media (max-width: 991.98px) {
  #main .latest_shownotes_in_banner .shownote-card h2 {
    font-size: 25px;
    line-height: 36px;
    text-align: center;
  }
  #main .shownote-card-wrap .speaker-card h3 {
    font-size: 23px;
    line-height: normal;
  }
}

/* HubSpot "Subscribe" button in the giveaway box: the shared main.css paints it #359CF3, which
   is 2.9:1 with its white label (WCAG 1.4.3). Same AA blue as the text token; darker on hover. */
#main .swag-form .cta-form .hs-submit input.hs-button.primary.large[type="submit"] {
  background: var(--txc-text-blue) !important;
}
#main .swag-form .cta-form .hs-submit input.hs-button.primary.large[type="submit"]:hover,
#main .swag-form .cta-form .hs-submit input.hs-button.primary.large[type="submit"]:focus-visible {
  background: #084F92 !important;
}

/* Visually hidden, still read by assistive tech (the live result count under the filters). */
#main .shownote-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The search box is type="search" now; keep the browser from restyling it. */
#main #shownote-filter #search-term {
  -webkit-appearance: none;
  appearance: none;
}
#main #shownote-filter #search-term::-webkit-search-decoration,
#main #shownote-filter #search-term::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Optional transcript block under the resources, same rhythm as the other sections. */
#main .swag-transcript {
  margin-top: 30px;
}
#main .swag-transcript h2 {
  font-size: 32px;
  line-height: 30px;
  font-weight: 700;
  margin: 0 0 20px;
}