/* WordPress additions to the prototype stylesheet (main.css is used unchanged). */

/* Admin bar: keep the sticky / fixed header and the mobile drawer below it. */
.admin-bar .site-header { top: 32px; }
.admin-bar .primary-nav { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .primary-nav { top: calc(var(--header-h) + 46px); }
}
@media (max-width: 600px) { /* the admin bar scrolls away on phones */
  .admin-bar .site-header { top: 0; }
  .admin-bar .primary-nav { top: var(--header-h); }
}

/* Spam trap on forms: off-screen, still in the form. */
.pa-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Screen-reader text used by WordPress itself. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000; background: #fff; color: #000; padding: .8rem 1rem; }

/* Images WordPress prints with width/height attributes inside our cards keep the card's aspect handling.
   Card images are left out: they fill the card's image area (main.css: height 100%, object-fit cover). */
.gallery__item img, .strip img, .portrait img, .page-hero__bg img, .hero__media img { height: auto; }
.card__media > img, .yt > img { width: 100%; }

/* A download cover fills the card's image area (its own 4:3 was cut off at the bottom of the 16:9 card). */
.card__media > .res-cover { position: absolute; inset: 0; aspect-ratio: auto; }

/* Card images: "Image fit" and "Align" from the Download details / Destination card boxes. */
.card__media img.pa-fit-contain, .res-cover--img img.pa-fit-contain { object-fit: contain; }
.card__media img.pa-fit-fill, .res-cover--img img.pa-fit-fill { object-fit: fill; }
.card__media img.pa-pos-top, .res-cover--img img.pa-pos-top { object-position: 50% 0; }
.card__media img.pa-pos-bottom, .res-cover--img img.pa-pos-bottom { object-position: 50% 100%; }
.card__media img.pa-pos-left, .res-cover--img img.pa-pos-left { object-position: 0 50%; }
.card__media img.pa-pos-right, .res-cover--img img.pa-pos-right { object-position: 100% 50%; }
.card__media img.pa-fit-width, .res-cover--img img.pa-fit-width { position: absolute; inset: 50% auto auto 0; width: 100%; height: auto; max-width: none; translate: 0 -50%; }
.card__media img.pa-fit-width.pa-pos-top, .res-cover--img img.pa-fit-width.pa-pos-top { top: 0; translate: none; }
.card__media img.pa-fit-width.pa-pos-bottom, .res-cover--img img.pa-fit-width.pa-pos-bottom { top: auto; bottom: 0; translate: none; }
.card__media img.pa-fit-height, .res-cover--img img.pa-fit-height { position: absolute; inset: 0 auto auto 50%; width: auto; height: 100%; max-width: none; translate: -50% 0; }
.card__media img.pa-fit-height.pa-pos-left, .res-cover--img img.pa-fit-height.pa-pos-left { left: 0; translate: none; }
.card__media img.pa-fit-height.pa-pos-right, .res-cover--img img.pa-fit-height.pa-pos-right { left: auto; right: 0; translate: none; }

/* Content written in the editor (blog posts, episode notes). */
.prose .aligncenter, .prose .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.prose .alignleft { float: left; margin: .3rem 1.4rem 1rem 0; max-width: 50%; }
.prose .alignright { float: right; margin: .3rem 0 1rem 1.4rem; max-width: 50%; }
.prose img { height: auto; border-radius: var(--radius); }
.prose figure { margin: 1.6rem 0; }
.prose figcaption, .prose .wp-caption-text, .prose .wp-element-caption { font-size: var(--fs-sm); color: var(--muted); margin-top: .5rem; }
.prose .wp-block-embed iframe, .prose iframe { max-width: 100%; border-radius: var(--radius); }
.prose .wp-block-embed__wrapper { position: relative; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.prose pre { overflow: auto; padding: 1rem; border-radius: var(--radius); background: var(--deep); }
.prose::after { content: ""; display: table; clear: both; }

/* Archive paging. */
.pa-pager { margin-top: 2rem; }
.pa-pager ul { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; padding: 0; margin: 0; }
.pa-pager a, .pa-pager span { display: inline-flex; min-width: 2.6rem; justify-content: center; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.pa-pager .current { background: var(--cyan); color: var(--abyss); border-color: transparent; }

/* Cookie banner (GDPR Cookie Compliance) in the site's font: its own Nunito would be two more font downloads. */
#moove_gdpr_cookie_info_bar, #moove_gdpr_cookie_modal { font-family: var(--font-body) !important; }

/* A form returning from the server with an error. */
.form [role="alert"] { margin-top: .6rem; }

/* Contact Form 7 forms (contact, Work With Me, free downloads) in the prototype's form design. */
.wpcf7 .hidden-fields-container { display: none; }
.pa-cf7 .wpcf7-form-control-wrap { display: grid; gap: .35rem; }
body .wpcf7 .pa-cf7 .wpcf7-not-valid-tip { color: #FFB4AB; font-size: var(--fs-xs); font-weight: 400; }
body .section--light .wpcf7 .pa-cf7 .wpcf7-not-valid-tip { color: #B3261E; }
body .wpcf7 .pa-cf7 .wpcf7-list-item { display: block; margin: 0; }
.pa-cf7 .wpcf7-list-item > label { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; font-size: var(--fs-sm); cursor: pointer; }
.pa-cf7 .field--check .wpcf7-list-item > label { font: 500 var(--fs-xs)/1.5 var(--font-body); }
.pa-cf7 .wpcf7-list-item input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: .15rem 0 0; padding: 0; accent-color: var(--cyan); }
body .wpcf7 form.pa-cf7 .wpcf7-response-output { margin: 0; padding: .8rem 1rem; border-radius: 12px; border: 1px solid #FF8A80; background: rgba(255, 138, 128, .08); font-size: var(--fs-sm); }
body .wpcf7 form.pa-cf7.sent > :not(.form__success), body .wpcf7 form.pa-cf7.sent .wpcf7-response-output { display: none !important; }
body .wpcf7 form.pa-cf7.sent .form__success { display: block; }
.pa-cf7.submitting button[type="submit"] { opacity: .65; pointer-events: none; }
.pa-cf7 label.ebd_input { display: none; }
/* Email Before Download's "download it now" link. */
.pa-ebd .ebd_results { margin-top: 1rem; }
.pa-ebd .ebd_before { margin: 0 0 .6rem; font-size: var(--fs-sm); }
.pa-ebd .ebd_link > div { display: contents !important; }
.pa-ebd .ebd_results br { display: none; }

/* Episode notes: each panel has its own place. Above / below the notes sit in the notes column. */
.notes-in { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.notes-in > .content-upgrade { grid-column: 1 / -1; margin: 0; }
.notes-in--above { margin-bottom: 2rem; }
.notes-in--below { margin-top: 2rem; }
/* Top of the page (full width), and sidebars on both sides. */
.notes-above { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.notes-above > .content-upgrade { grid-column: 1 / -1; margin: 0; }
@media (min-width: 900px) {
  .notes-layout--both { grid-template-columns: 1.25fr 1fr; }
  .notes-layout--both .notes-main { grid-row: span 2; }
  .notes-layout--both .notes-side { grid-column: 2; }
}
@media (min-width: 1200px) {
  .notes-layout--both { grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr) minmax(15rem, 1fr); }
  .notes-layout--both .notes-main { grid-row: 1; grid-column: 2; }
  .notes-layout--both .notes-side--left { grid-row: 1; grid-column: 1; }
  .notes-layout--both .notes-side--right { grid-row: 1; grid-column: 3; }
}