/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
/* jost-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/jost-v20-latin/jost-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/jost-v20-latin/jost-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/jost-v20-latin/jost-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/jost-v20-latin/jost-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/jost-v20-latin/jost-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/jost-v20-latin/jost-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/jost-v20-latin/jost-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/jost-v20-latin/jost-v20-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/jost-v20-latin/jost-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Jost';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/jost-v20-latin/jost-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Use self-hosted Jost wherever Blocksy is set to "System Default" */
:root {
  --theme-font-stack-default: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Outline buttons: on hover, fill with the outline color and use white text */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
  --theme-button-background-hover-color: var(--theme-button-background-initial-color);
}
.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button .wp-block-button__link.is-style-outline:is(:hover, :focus-visible) {
  color: #fff !important;
}

/* Ghost buttons (header Log In / Sign Up etc.): fill with the outline color on hover */
.ct-button-ghost {
  --theme-button-background-hover-color: var(--theme-button-background-initial-color);
}

/* Header site title ("Tile Farm" next to the logo) on every header */
.ct-header .site-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}
.ct-header .site-title a {
  text-decoration: none;
}
@media (max-width: 999.98px) {
  .ct-header .site-title {
    font-size: 24px;
  }
}

/* Content buttons (block editor): one consistent size and border */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 3px !important;
  font-size: 18px !important;
  padding: 12px 44px !important;
  line-height: 1.2 !important;
}
.wp-block-buttons > .wp-block-button.has-custom-width {
  width: auto !important;
}

/* Menus: one active/hover color (brand blue) in header, sub-nav, mobile menu and footer */
.ct-header [data-id^="menu"],
.ct-header [data-id^="menu"] a,
[data-id="mobile-menu"],
[data-id="mobile-menu"] a,
.ct-footer [data-id="menu"],
.ct-footer [data-id="menu"] a {
  --menu-indicator-active-color: var(--theme-palette-color-1) !important;
  --theme-link-active-color: var(--theme-palette-color-1) !important;
}
.ct-footer [data-id="menu"] a {
  --theme-link-hover-color: var(--theme-palette-color-1) !important;
}

/* Footer site title (matches the header) */
.ct-footer .site-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}
.ct-footer .site-title a {
  text-decoration: none;
}

/* Typography scale — sizes grow smoothly from phone (360px wide) to desktop (1440px)
   H1 38->60, H2 28->34 (34px from ~1000px wide, as before, 2026-10-14; was 30->42), H3 22->26,
   body 17->18, lead ("medium") paragraphs 18->20 */
:root {
  --theme-font-size: clamp(17px, 16.67px + 0.093vw, 18px);
}
body {
  --wp--preset--font-size--medium: clamp(18px, 17.33px + 0.185vw, 20px);
}
h1,
.entry-header .page-title {
  --theme-font-size: clamp(38px, 30.67px + 2.037vw, 60px) !important;
}
h2 {
  --theme-font-size: clamp(28px, 24.63px + 0.9375vw, 34px);
}
h3 {
  --theme-font-size: clamp(22px, 20.67px + 0.37vw, 26px);
}

/* Page sections: consistent spacing instead of spacer blocks.
   Each section gets 28->48px top and bottom (phone -> desktop), so 56->96px between sections. */
.entry-content > .tf-section {
  margin-block: 0;
  padding-block: clamp(28px, 21.33px + 1.852vw, 48px);
}
.entry-content > .tf-section > :first-child {
  margin-top: 0;
}
.entry-content > .tf-section > :last-child {
  margin-bottom: 0;
}
.entry-content > .wp-block-separator {
  margin-block: 0;
}

/* NSF logo: keep it a supporting badge, not the focal point (homepage + About) */
img[src*="NSF_logo"] {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* Solid content buttons: same size as outline buttons (fill = primary, outline = secondary) */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  font-size: 18px !important;
  padding: 15px 44px !important;
  line-height: 1.2 !important;
}

/* Small text: keep the uppercase label style, but readable */
.entry-card .entry-meta,
.entry-header .entry-meta {
  --theme-font-size: 13px !important;
}
.ct-footer [data-id="copyright"] {
  --theme-font-size: 13px !important;
}

/* Theme buttons (contact forms, newsletter, WooCommerce, etc.) match the block buttons:
   18px bold, 52px tall, 44px side padding, 5px corners */
:root {
  --theme-button-font-size: 18px;
  --theme-button-min-height: 52px;
  --theme-button-padding: 12px 44px;
  --theme-button-line-height: 1.2;
  --theme-button-border-radius: 5px;
}
.wp-block-button__link {
  border-radius: 5px !important;
}

/* Newsletter box: Subscribe button uses the blue action color (was purple) */
.ct-newsletter-subscribe-container {
  --theme-button-background-initial-color: var(--tf-button-blue) !important;
}
.ct-newsletter-subscribe-form button {
  border-radius: 5px;
}

/* Filled buttons: slightly deeper blue so white text passes WCAG AA (4.9:1), darker blue on hover
   (6.9:1) instead of green. Outline/ghost buttons keep the brand blue border and fill with the
   accessible blue on hover. Brand blue (palette color 1) is unchanged everywhere else. */
:root {
  --tf-button-blue: #1478ad;
  --tf-button-blue-hover: #0f5f8a;
  --theme-button-background-initial-color: var(--tf-button-blue);
  --theme-button-background-hover-color: var(--tf-button-blue-hover);
}
.ct-button-ghost,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
  --theme-button-background-initial-color: var(--theme-palette-color-1);
  --theme-button-background-hover-color: var(--tf-button-blue);
}

/* Beveled ("chopped") button corners, echoing the clipped corners on images and cards.
   Only in browsers that support corner-shape (Chrome/Edge 139+); others keep 5px rounded corners. */
@supports (corner-shape: bevel) {
  :root {
    --theme-button-border-radius: 5px;
  }
  .wp-block-button__link,
  .ct-newsletter-subscribe-form button {
    border-radius: 5px !important;
  }
  .wp-block-button__link,
  .wp-element-button,
  .ct-button,
  .ct-button-ghost,
  .button,
  button[type="submit"],
  input[type="submit"],
  .ct-newsletter-subscribe-form button {
    corner-shape: bevel;
  }
}

/* Partners page: every partner logo sits in the same 300x300 box, logo scaled to fit (not cropped),
   so wide logos (LA STEM) shrink to match square ones (NSF) and card titles line up */
.entry-card.partner .ct-media-container {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.entry-card.partner .ct-media-container img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Readability: card text on Team (About) and Partners, breadcrumbs, store result count */
[data-prefix="person_archive"] .entry-excerpt,
[data-prefix="partner_archive"] .entry-excerpt {
  --theme-font-size: 15px !important;
}
.ct-breadcrumbs,
.woo-listing-top .woocommerce-result-count {
  --theme-font-size: 13px !important;
}

/* Bigger tap areas without changing how things look: mobile menu button, "Continue Reading" */
.ct-header-trigger,
.entry-card .entry-button {
  position: relative;
}
.ct-header-trigger::after {
  content: "";
  position: absolute;
  inset: -13px;
}
.entry-card .entry-button::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* Tables on phones: tighter so more columns fit before sideways scrolling */
@media (max-width: 689.98px) {
  .wp-block-table table {
    font-size: 14px;
  }
  .wp-block-table th,
  .wp-block-table td {
    padding: 8px 6px;
  }
}

/* Footer, two rows: logo + menu, then socials + copyright */
.ct-footer .site-title {
  font-size: 28px;
}
.ct-footer [data-id="menu"] > ul > li > a {
  --theme-font-size: 15px !important;
  --theme-font-weight: 600 !important;
  --theme-text-transform: none !important;
}
.ct-footer [data-id="socials"] {
  --theme-icon-size: 20px !important;
}
@media (min-width: 1000px) {
  .ct-footer [data-row*="top"] [data-id="menu"],
  .ct-footer [data-row*="top"] [data-id="menu"] > ul {
    justify-content: flex-end;
    margin-inline-start: auto;
  }
}
.ct-footer [data-id="copyright"] {
  --theme-text-transform: none !important;
  --theme-font-size: 14px !important;
}
/* Footer top row: tighter (was 108px tall for a 48px logo) */
.ct-footer [data-row*="top"] .ct-container {
  padding-block: 20px !important;
}
.ct-footer [data-id="logo"] .site-logo-container {
  --logo-max-height: 40px !important;
}

/* Header main row (desktop): keep the room above the logo, bring the line below closer.
   Was 100px with the logo centered (~26px above and below); now ~27px above, ~13px below. */
@media (min-width: 1000px) {
  .ct-header [data-row*="middle"] {
    --height: 74px !important; /* + 14px top padding = 88px row */
  }
  .ct-header [data-row*="middle"] > .ct-container {
    padding-top: 14px;
  }
}
/* Header main row (tablet/phone): 100px -> 72px, a little more room above the logo than below */
@media (max-width: 999.98px) {
  .ct-header [data-row*="middle"] {
    --height: 62px !important; /* + 10px top padding = 72px row */
  }
  .ct-header [data-row*="middle"] > .ct-container {
    padding-top: 10px;
  }
}
/* Small header buttons (Log In / Sign Up): smaller corner so the bevel stays subtle at 34px tall */
.ct-header .ct-button,
.ct-header .ct-button-ghost {
  border-radius: 3px !important;
}

/* Sticky header on scroll: stay black with white text (was white with dark text), plus a soft
   shadow so the bar stays distinct over dark hero sections */
.ct-header [data-sticky*="yes"] [data-row] {
  background-color: var(--theme-palette-color-4) !important;
}
.ct-header [data-sticky*="yes"] [data-row]:last-child {
  --theme-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  box-shadow: var(--theme-box-shadow);
}
.ct-header [data-sticky*="yes"] [data-id="text"] {
  --theme-text-color: var(--theme-palette-color-8) !important;
  --theme-link-initial-color: var(--theme-palette-color-8) !important;
  --theme-link-hover-color: var(--theme-palette-color-8) !important;
  --theme-heading-color: var(--theme-palette-color-8) !important;
}
.ct-header [data-sticky*="yes"] [data-id^="menu"] > ul > li > a {
  --theme-link-initial-color: var(--theme-palette-color-8) !important;
  --theme-link-hover-color: var(--theme-palette-color-1) !important;
}

/* Title band (page title area): was 100px above and below the title.
   Now 24->32px above and 28->40px below (phone -> desktop), title 30->40px */
.hero-section[data-type="type-2"] {
  --container-padding: clamp(24px, 21.33px + 0.741vw, 32px) 0 clamp(28px, 24px + 1.111vw, 40px) !important;
}
.hero-section[data-type="type-2"] .page-title {
  --theme-font-size: clamp(30px, 26.67px + 0.926vw, 40px) !important;
}
.hero-section[data-type="type-2"] > .entry-header {
  min-height: 0 !important; /* was a fixed 250px minimum */
}
/* Section sub-header bar: page title (H1) on the left, section links on the right */
.ct-header [data-row*="bottom"] [data-column="start"] {
  min-width: 0;
}
.ct-header .tf-bar-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--theme-palette-color-8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 999.98px) {
  .ct-header [data-row*="bottom"] {
    --height: 52px !important;
  }
  .ct-header .tf-bar-title {
    font-size: 20px;
  }
}

/* Soft shadow where the black header meets the page (invisible over black hero sections) */
#header {
  position: relative;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Phones: long bar titles wrap to a second line instead of being cut off */
@media (max-width: 999.98px) {
  .ct-header [data-row*="bottom"] [data-column="start"],
  .ct-header [data-row*="bottom"] [data-column="start"] > * {
    max-width: 100%;
    min-width: 0;
  }
  .ct-header .tf-bar-title {
    font-size: 18px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ct-header [data-row*="bottom"] {
    --height: auto !important;
  }
  .ct-header [data-row*="bottom"] > .ct-container {
    min-height: 52px;
    padding-block: 12px;
  }
}

/* Sticky bar branding: the Tile Farm icon slides in before the page title once the bar sticks */
.tf-bar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.tf-bar-logo {
  display: flex;
  flex: none;
  width: 0;
  margin-inline-end: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.25s ease, margin 0.25s ease, opacity 0.25s ease;
}
.tf-bar-logo img {
  width: 26px;
  height: 26px;
  max-width: none;
}
.ct-header [data-sticky*="yes"] .tf-bar-logo {
  width: 26px;
  margin-inline-end: 12px;
  opacity: 1;
}

/* Page area spacing: drop Blocksy's default 50px at the top/bottom of the content area when the page
   starts/ends with one of our sections or a full-width banner (they bring their own spacing).
   Fixes the light strip between a dark closing banner and the footer. */
.ct-container-full:has(> article > .entry-content > :is(.tf-section, .wp-block-cover.alignfull):first-child) {
  padding-top: 0 !important;
}
.ct-container-full:has(> article > .entry-content > :is(.tf-section, .wp-block-cover.alignfull):last-child) {
  padding-bottom: 0 !important;
}

/* Pilot request form (Explore a Pilot): one field per row (linear; Name | Role and School | Email
   side by side was dropped), 12px between rows; checkbox options flow in rows; shorter message box. */
.pilot-request-fieldset > p.form-row {
  margin: 0 0 12px;
}
.pilot-request-fieldset .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 6px;
}
.pilot-request-fieldset .wpcf7-list-item {
  margin: 0;
}
.pilot-request-fieldset textarea {
  --theme-form-field-height: 110px;
  height: 110px;
  min-height: 110px;
}

/* Sub-header links: on a child page (e.g. a grade-level standards page) highlight the closest
   parent tab (e.g. "Subjects & Standards"), styled like the active tab */
.ct-header [data-row*="bottom"] [data-id^="menu"] > ul > li.current-page-ancestor:not(:has(~ li.current-page-ancestor)):not(:has(~ li.current-menu-item)) > a {
  color: var(--theme-palette-color-1);
  box-shadow: inset 0 -2px 0 var(--theme-palette-color-1);
}

/* Grade-level standards pages: each standard (bold code + description) becomes a card in a
   3-column grid (2 on tablets, 1 on phones). Headings, intro text and images span the full row. */
.tf-standards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}
.tf-standards > * {
  grid-column: 1 / -1;
  margin-inline: 0 !important;
  max-width: 760px;
}
.tf-standards > h2 {
  margin-top: 48px;
}
.tf-standards > h3 {
  margin-top: 28px;
  margin-bottom: 16px;
  font-size: 20px;
}
.tf-standards > p:has(> b + b > br) {
  grid-column: auto;
  max-width: none;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--theme-palette-color-8);
  box-shadow: 0 4px 14px rgba(44, 62, 80, 0.07);
  font-size: 16px;
  line-height: 1.5;
}
.tf-standards > p:has(> b + b > br) > b:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--theme-palette-color-1);
}
.tf-standards > p:has(> b + b > br) > b + b {
  display: none;
}
@media (max-width: 999.98px) {
  .tf-standards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 689.98px) {
  .tf-standards {
    grid-template-columns: 1fr;
  }
}

/* Grade standards pages: intro text left (2/3) + image right (1/3) at the top;
   smaller topic headings; grade labels (h3) are now short ("Kindergarten", "Grade 1"…) */
@media (min-width: 1000px) {
  .tf-standards > p:first-child:has(img) {
    grid-column: 3;
    grid-row: 1 / span 4;
    max-width: none;
    margin: 0 0 0 20px !important;
  }
  .tf-standards > p:first-child:has(img) img {
    width: 100%;
    height: auto;
  }
  .tf-standards > p:not(:first-child):not(:has(> b + b > br)):not(h2 ~ *) {
    grid-column: 1 / 3;
    max-width: none;
  }
}
.tf-standards > h2 {
  --theme-font-size: clamp(26px, 24.67px + 0.37vw, 30px) !important;
}

/* Grade standards cards: green check before each code = "supported by Tile Farm Academy"
   (same green as the comparison-table checkmarks); decorative, hidden from screen readers */
.tf-standards > p:has(> b + b > br) > b:first-child::before {
  content: "✓" / "";
  margin-right: 6px;
  color: var(--theme-palette-color-9);
  font-weight: 800;
}

/* Overscroll / rubber-band area (above the header, below the footer) shows black instead of
   the page background: html gets its own background, so the body light grey only paints the page itself. */
html { background-color: var(--theme-palette-color-4); }
/* Safari blends the body background over the html one for its overscroll color, so body must be
   transparent; the page grey moves to #main-container (Blocksy gives it min-height 100vh). */
body { background-color: transparent !important; }
#main-container { background-color: var(--theme-palette-color-7); }

/* Footer menu on phones: two left-aligned columns (Home to About, then How It Works to Contact),
   centered under the logo, instead of one tall centered stack. */
@media (max-width: 689.98px) {
  #footer-menu > ul.menu { display: grid !important; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); grid-auto-flow: column; justify-content: center; justify-items: start; column-gap: 56px; row-gap: 12px; }
  #footer-menu > ul.menu > li { margin: 0 !important; padding: 0 !important; }
  #footer-menu > ul.menu > li > a { padding: 0 !important; justify-content: flex-start; }
}

/* Centered headings wrap into evenly balanced lines (no lone word on the last line). */
h1.has-text-align-center, h2.has-text-align-center, h3.has-text-align-center { text-wrap: balance; }

/* Footer copyright: each policy link stays on one line, so a narrow screen wraps between links, not inside one. */
.ct-footer-copyright a { white-space: nowrap; }

/* Contact page "Let’s Get Social" row: heading right / icons left meet in the middle on desktop;
   once the columns stack (under 782px) both are centered. */
@media (max-width: 781.98px) {
  .tf-social-row h3 { text-align: center !important; }
  .tf-social-row .ct-social-box { justify-content: center; }
}

/* Footer copyright: a little air between the copyright line and the policy links line. */
.ct-footer-copyright p { line-height: 1.8; }

/* Menus: active (current page) link is brand yellow instead of blue; hover stays blue, so
   yellow = "you are here" and blue = "clickable". Every menu sits on black/dark backgrounds
   (header, sub-nav, sticky bar, footer, mobile panel), where yellow is ~11:1 contrast. */
.ct-header [data-id^="menu"],
.ct-header [data-id^="menu"] a,
[data-id="mobile-menu"],
[data-id="mobile-menu"] a,
.ct-footer [data-id="menu"],
.ct-footer [data-id="menu"] a {
  --menu-indicator-active-color: var(--theme-palette-color-10) !important;
  --theme-link-active-color: var(--theme-palette-color-10) !important;
}
.ct-header [data-row*="bottom"] [data-id^="menu"] > ul > li.current-page-ancestor:not(:has(~ li.current-page-ancestor)):not(:has(~ li.current-menu-item)) > a {
  color: var(--theme-palette-color-10);
  box-shadow: inset 0 -2px 0 var(--theme-palette-color-10);
}

/* Blog sub-nav: WordPress marks the "All" tab (Blog page) as current_page_parent on category pages
   and single posts, and Additional CSS (meant for "Blog" in the top nav) colors that as active.
   In the sub-nav, "All" is active only on the Blog page itself. */
.ct-header [data-row*="bottom"] [data-id^="menu"] > ul > li.current_page_parent:not(.current-menu-item) > a:not(:hover, :focus-visible) {
  color: var(--theme-link-initial-color);
}

/* Blog page featured post hero (functions.php, blocksy:header:after): same look as the Merch hero
   (black band, text left, cut-corner image right); 100px above/below on desktop, less on phones */
/* Content widths Blocksy normally sets on the content block's <article> (a div here, so the
   blog card rules for article don't apply) */
.tf-featured-wrap > div {
  --theme-block-width: var(--theme-container-width);
  --theme-block-max-width: var(--theme-normal-container-max-width);
  --theme-block-wide-max-width: calc(var(--theme-normal-container-max-width) + var(--theme-wide-offset) * 2);
  --wp--style--global--content-size: var(--theme-block-max-width);
  --wp--style--global--wide-size: var(--theme-block-wide-max-width);
}
.tf-featured-post .wp-block-cover__inner-container {
  padding: clamp(48px, 8vw, 100px) 0;
  /* less above: the black sub-header bar visually merges with the gap */
  padding-top: clamp(32px, 5.5vw, 64px);
}
.tf-featured-post .wp-block-media-text {
  color: var(--theme-palette-color-8);
}
.tf-featured-post .tf-featured-label {
  margin: 0 0 12px;
  color: var(--theme-palette-color-10);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tf-featured-post .tf-featured-title {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.2;
}
.tf-featured-post .tf-featured-title a {
  color: var(--theme-palette-color-8);
  text-decoration: none;
}
.tf-featured-post .tf-featured-title a:is(:hover, :focus-visible) {
  color: var(--theme-palette-color-1);
}
.tf-featured-post .wp-block-buttons {
  margin-top: 28px;
}
.tf-featured-post .wp-block-media-text__media a {
  display: block;
}
@media (max-width: 600px) {
  .tf-featured-post .wp-block-media-text__content {
    padding: 0 0 32px !important;
  }
  .tf-featured-post .wp-block-media-text__media {
    min-height: 240px;
  }
}

/* Merch hero (content block 411): less space above, to match the Blog featured hero. The black
   sub-header bar visually merges with the gap above, so 100px read as too much. */
[data-block="hook:411"] .wp-block-cover__inner-container > .wp-block-spacer:first-child {
  height: clamp(32px, 5.5vw, 64px) !important;
}

/* Blog / category pagination: current page was the only purple on the page (Blocksy archive
   hover color). Now button blue with white number (4.9:1); hover = blue border + blue text.
   Next/Prev use the same text style as the numbers (were 12px uppercase). */
.ct-pagination {
  --theme-link-hover-color: var(--tf-button-blue);
}
.ct-pagination .page-numbers:not(.dots):not(.current):hover {
  color: var(--tf-button-blue);
}
.ct-pagination[data-pagination] .page-numbers:is(.prev, .next) {
  font-size: 14px;
  text-transform: none;
}

/* Blog + category cards: link hover was purple (Blocksy archive hover color) -> brand blue for
   title, category label and "Read article". Excerpt 16px (was 17.6px), arrow after the link
   (::before + order, because ::after is the link's enlarged tap area). */
:is([data-prefix="blog"], [data-prefix="categories"]) .entries {
  --theme-link-hover-color: var(--theme-palette-color-1);
}
:is([data-prefix="blog"], [data-prefix="categories"]) .entries .entry-excerpt {
  font-size: 16px;
}
:is([data-prefix="blog"], [data-prefix="categories"]) .entries .entry-button::before {
  content: "\2192" / "";
  order: 1;
}
/* "Read article" is already brand blue, and Blocksy sets its hover (purple) on the link itself:
   hover to the darker button blue so there's visible feedback */
:is([data-prefix="blog"], [data-prefix="categories"]) .entries .entry-button {
  --theme-link-hover-color: var(--tf-button-blue-hover);
}

/* Black page-top hero (cover block with class tf-dark-hero, e.g. How It Works): same spacing as
   the Blog featured hero */
.tf-dark-hero .wp-block-cover__inner-container {
  padding: clamp(48px, 8vw, 100px) 0;
  padding-top: clamp(32px, 5.5vw, 64px);
}

/* Short centered intro paragraph under a black hero (About): narrow column, slightly larger text */
.entry-content > .tf-lead > p {
  max-width: 680px;
  margin-inline: auto;
  font-size: 19px;
}
@media (max-width: 600px) {
  /* ~10 lines on phones: centered text gets hard to follow, so left-align */
  .entry-content > .tf-lead > p {
    text-align: left;
    font-size: 17px;
  }
}

/* Contact page: Contact Us card wider (55/45, tested 1100-1600px) and its message box shorter
   (170 -> 110px, ~4 lines, still resizable) so the left and right columns end at about the same
   height. Name + Email stay stacked (side by side was tried and dropped). */
@media (min-width: 1100px) {
  .entry-content .is-layout-grid:has(> .cut-violet) {
    grid-template-columns: 55fr 45fr !important;
  }
}
.cut-violet .wpcf7 textarea {
  height: 110px;
}

/* Explore a Pilot: form section under the black hero, one centered 680px column. The section
   heading replaces the form's own "Request a Pilot" legend (kept for screen readers) and the
   dashed box. scroll-margin keeps the heading clear of the sticky header for "Request a Pilot ↓". */
.entry-content > .tf-pilot-form > * {
  max-width: 680px;
  margin-inline: auto;
}
.tf-pilot-form {
  scroll-margin-top: 90px;
}
.tf-pilot-form .pilot-request-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.tf-pilot-form .pilot-request-fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* More breathing room between content sections (tf-section, all pages): padding 28->48px became
   36->64px, so the gap between sections is ~72px on phones, ~106px on laptops, 128px wide. */
.entry-content > .tf-section {
  padding-block: clamp(36px, 26.67px + 2.593vw, 64px);
}

/* Free Stuff (page 29) tool cards: icons were ~270x300 and pushed the names and buttons below the
   fold. Icons 160px tall (120px on phones); each card is a column with its button pinned to the
   bottom, so the three buttons line up even when a title wraps ("Tile Farm Studio"). */
.page-id-29 .wp-block-column:has(> .wp-block-image) {
  display: flex;
  flex-direction: column;
}
.page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-image img {
  width: auto !important;
  height: 160px !important;
  max-width: 100%;
}
.page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-buttons {
  margin-top: auto;
}
@media (max-width: 781px) {
  .page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-image img {
    height: 120px !important;
  }
}
.page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-image + h2 {
  margin-top: 0; /* flex column: margins add up (was 82px icon-to-title) */
}
.page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-image img {
  display: block;
  margin-inline: auto; /* Tribune image block wasn't set to centre like the others */
}
.page-id-29 .wp-block-column:has(> .wp-block-image) > .wp-block-image {
  text-align: center; /* Tribune image is inside a link, which shrinks to the image */
}

/* Merch (content block 411) and Free Stuff (page 29) hero headlines: were the homepage's 51px in a
   half-width column (5 and 4 lines). ~40px, closer to the other heroes (37px); Home stays the big one. */
[data-block="hook:411"] .wp-block-cover h1,
.page-id-29 .entry-content > .wp-block-cover:first-child h1 {
  font-size: clamp(30px, 3.9vw, 40px);
  line-height: 1.2;
}

/* Footer top edge, mirroring the header: a softer upward shadow where the black footer meets a light
   page (invisible after black sections), plus the header's thin divider line (#2c3b42, container
   width) so pages that end on a black section still show where the footer starts. */
.ct-footer {
  position: relative;
  z-index: 1;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
}
.ct-footer > [data-row="top"] > .ct-container {
  border-top: 1px solid var(--theme-palette-color-3);
}

/* Merch (content block 411) and Free Stuff heroes: photo in "fill" mode (grows with the text column and
   is cropped to fit), but never shorter than a 3:1.6 shape of its own width, so a short text column
   can't slice it into a flat strip. Photo width = half the media-text block (50cqw), the whole block
   when stacked on phones (100cqw); min-height = 1.6/3 of that. */
:is([data-block="hook:411"], .page-id-29 .entry-content > .wp-block-cover:first-child) .wp-block-media-text.is-image-fill-element {
  container-type: inline-size;
}
:is([data-block="hook:411"], .page-id-29 .entry-content > .wp-block-cover:first-child) .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
  min-height: calc(50cqw * 1.6 / 3);
}
@media (max-width: 600px) {
  :is([data-block="hook:411"], .page-id-29 .entry-content > .wp-block-cover:first-child) .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
    min-height: calc(100cqw * 1.6 / 3);
  }
}

/* Blog posts, title band: balanced line breaks (no single word alone on the last line); breadcrumb
   ends at the category (the post title right below it was repeated in capitals; still in the HTML for
   Google's breadcrumb data); a little space between breadcrumb and title (was 5px). */
.single-post .hero-section .page-title {
  text-wrap: balance;
}
.single-post .hero-section .ct-breadcrumbs .last-item,
.single-post .hero-section .ct-breadcrumbs > span:has(+ .last-item) > svg:last-child {
  display: none;
}
.single-post .hero-section .ct-breadcrumbs {
  margin-bottom: 16px;
}
/* Post title and breadcrumb in the same centred column as the article (posts use Blocksy's narrow
   no-sidebar layout, 800px), so title, image and text share one left edge. */
.single-post .hero-section .page-title,
.single-post .hero-section .ct-breadcrumbs {
  max-width: var(--theme-narrow-container-max-width, 800px);
  margin-inline: auto;
}

/* Blog categories are hidden from visitors (2026-10-14): post breadcrumb is just Home > Blog (the
   category link and the separator before it are hidden; still in the HTML for breadcrumb data). */
.single-post .hero-section .ct-breadcrumbs > span:has(+ .last-item),
.single-post .hero-section .ct-breadcrumbs > span:has(+ span + .last-item) > svg:last-child {
  display: none;
}

/* "Subscribe" link in the Blog sub-header bar (opens the sign-up popup): styled like the sub-nav links */
.ct-header .tf-sub-link {
  color: var(--theme-palette-color-8);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ct-header .tf-sub-link:is(:hover, :focus-visible) {
  color: var(--theme-palette-color-1);
}
.single-post .hero-section .ct-breadcrumbs {
  width: 100%; /* else it shrinks to its text and margin:auto centres it */
}

/* Tile Farm Tribune popup (content block "Popup: Tile Farm Tribune", class tf-tribune-popup):
   narrower logo column (the logo was half the popup), First | Last name side by side above Email,
   stacked again on phones. */
.wp-block-media-text.tf-tribune-popup {
  grid-template-columns: 1fr 200px !important;
}
.tf-tribune-popup .wp-block-media-text__media img {
  max-width: 200px;
  margin-inline: auto;
}
.tf-tribune-popup #mc_embed_signup_scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.tf-tribune-popup #mc_embed_signup_scroll > * {
  grid-column: 1 / -1;
}
.tf-tribune-popup #mc_embed_signup_scroll > .mc-field-group:has(#mce-FNAME),
.tf-tribune-popup #mc_embed_signup_scroll > .mc-field-group:has(#mce-LNAME) {
  grid-column: auto;
}
@media (max-width: 600px) {
  .wp-block-media-text.tf-tribune-popup {
    grid-template-columns: 100% !important;
  }
  .tf-tribune-popup .wp-block-media-text__media img {
    max-width: 120px;
  }
  .tf-tribune-popup #mc_embed_signup_scroll {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .tf-tribune-popup .wp-block-media-text__media {
    margin-bottom: 16px; /* logo sits above the heading on phones */
  }
}

/* Blog posts: breadcrumb hidden (it only said Home > Blog); the Blog sub-nav has a "Home" tab (blog list)
   instead. Yoast's breadcrumb schema is unaffected. */
.single-post .hero-section .ct-breadcrumbs {
  display: none;
}

/* End-of-post Tile Farm Tribune box (content block "Hook: Tile Farm Tribune (end of post)"): same layout
   as the Tribune popup (shares .tf-tribune-popup), shown as a white card in the 800px post column. */
.wp-block-media-text.tf-tribune-box {
  max-width: var(--theme-narrow-container-max-width, 800px);
  margin: 48px auto;
  padding: 36px 40px;
  background: var(--theme-palette-color-8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
@media (max-width: 600px) {
  .wp-block-media-text.tf-tribune-box {
    padding: 28px 22px;
  }
}


/* Homepage student strip under the hero (cover .tf-student-strip): space above the green line, text and
   a solid green "Play Now" button on one centred row (wraps on phones). Button = the top bar's Play Now. */
.tf-student-strip .wp-block-cover__inner-container {
  padding-top: clamp(32px, 4vw, 56px);
}
.tf-student-strip .wp-block-group > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}
.tf-student-strip a.tf-strip-btn {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 3px;
  background: #347f27;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.tf-student-strip a.tf-strip-btn:is(:hover, :focus-visible) {
  background: #2a6a1f;
  color: #fff;
}
@supports (corner-shape: bevel) {
  .tf-student-strip a.tf-strip-btn {
    border-radius: 5px;
    corner-shape: bevel;
  }
}
.entry-content > .tf-student-strip {
  margin-top: -1px; /* hide the hairline seam where it meets the hero at a fractional pixel */
}

/* All H2s: balanced line breaks (no single word alone on the last line), sitewide. */
h2 {
  text-wrap: balance;
}

/* Homepage hero video inside the iPad outline (2026-10-14). ipadOutline.png (media 7770, 1433x1098)
   has a transparent screen from x 82-1351, y 88-1009; the video sits in that opening (0.4% larger on
   each side so the bezel hides the edges), (2026-10-14: now ipadVideo.mp4,
   made to fit, so no zoom or clip). The outline is drawn on top. */
.mobile-video .wp-block-video {
  position: relative;
  aspect-ratio: 1434 / 1097;
  margin: 0;
}
.mobile-video .wp-block-video video {
  position: absolute;
  left: 4.18%;
  top: 5.01%;
  width: 91.7%;
  height: 89.97%;
  max-width: none;
  object-fit: cover;
}
.mobile-video .wp-block-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/wp-content/uploads/2026/10/ipadMockup.png") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* iPad video, round 2 (2026-10-14): outline swapped for ipadOutlineClearer.png (media 7771, same size and
   screen opening). The PNG has ~2% transparent margin around the device, so the figure is widened to
   1433/1374 of the column and pulled left: the device edges now line up with the column. On desktop the
   video column's 99px spacer becomes 57px (same as the text column), so the iPad runs from the top of the
   title to the end of the paragraph, above the button. */
.mobile-video .wp-block-video {
  width: 101.77%; /* ipadMockup.png (media 7776, 1434x1097): device x 12-1420 y 8-1084, screen x 60-1374 y 55-1041 */
  max-width: none;
  margin-left: -0.85%;
}
@media (min-width: 782px) {
  .mobile-video > .wp-block-spacer:first-child {
    height: 57px !important; /* iPad level with the title */
  }
}

/* Homepage "Interested in bringing Tile Farm Academy to your school?" (2026-10-14): one line needed 910px in a
   908px box, so it wrapped in some browsers and not others. Narrower max-width + text-wrap: balance = always
   breaks after "bringing" on wide screens. Class added in page 7122 (scripts/home-bringing-two-lines.php). */
h2.tf-h2-narrow {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* iPad video, capped (2026-10-14): on wide screens the column is up to 587px, which made the iPad ~67px taller
   than the title + text. Device capped at 510px wide (figure 519px = 510 * 1434/1409) and right-aligned, with
   the PNG's 14px right margin pulled out so the device edge stays on the column edge. */
@media (min-width: 782px) {
  .mobile-video .wp-block-video {
    max-width: 519px;
    margin-left: max(-0.85%, calc(100% - 514px)); /* capped: right-aligned, 5px PNG margin outside */
  }
}

/* iPad video column fixed at 510px once the iPad reaches its cap (2026-10-14): before, the column kept growing and
   the extra width became a 125-153px gap between the text and the iPad (vs ~35px below 1180px). Now the text
   column takes the extra width, so the gap stays the same. */
@media (min-width: 1180px) {
  .wp-block-columns > .mobile-video {
    flex: 0 0 510px !important;
  }
  .wp-block-columns > .mobile-text {
    flex: 1 1 0 !important;
  }
}

/* iPad video: soft shadow just inside the screen edge, so the screen looks set under the glass (2026-10-15, trial).
   Sits over the video, under the mockup PNG; same box as the screen opening, corner radius measured from the PNG
   (~26px of 1315 x 987). */
.mobile-video .wp-block-video::before {
  content: "";
  position: absolute;
  left: 4.18%;
  top: 5.01%;
  width: 91.7%;
  height: 89.97%;
  border-radius: 2% / 2.65%;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}
.mobile-video .wp-block-video::after {
  z-index: 2;
}

/* iPad video: soft white glow behind the device (2026-10-15; was blue .35, user asked for white, more subtle). drop-shadow follows the PNG's shape. */
.mobile-video .wp-block-video {
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.12));
}

/* Homepage hero video: pause/play button in the centre of the iPad screen (2026-10-15; script in functions.php;
   centred because the app UI in the video has its own buttons in every corner).
   Hidden while playing until hover or keyboard focus; always shown when paused. */
.mobile-video .wp-block-video {
  cursor: pointer;
}
.mobile-video .tf-video-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(7, 9, 10, 0.65);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-video .wp-block-video:hover .tf-video-toggle,
.mobile-video .tf-video-toggle:focus-visible,
.mobile-video .tf-video-toggle.is-paused {
  opacity: 1;
}
.mobile-video .tf-video-toggle:hover {
  background: rgba(7, 9, 10, 0.85);
}
.mobile-video .tf-video-toggle:focus-visible {
  outline: 2px solid #fdb913;
  outline-offset: 2px;
}
/* pause icon: two bars */
.mobile-video .tf-video-toggle::before,
.mobile-video .tf-video-toggle::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 5px;
  height: 18px;
  border-radius: 1px;
  background: currentColor;
}
.mobile-video .tf-video-toggle::before {
  left: 20px;
}
.mobile-video .tf-video-toggle::after {
  right: 20px;
}
/* play icon: triangle */
.mobile-video .tf-video-toggle.is-paused::after {
  display: none;
}
.mobile-video .tf-video-toggle.is-paused::before {
  left: 22px;
  top: 18px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent currentColor;
}

/* Homepage student bar above the header (restored 2026-10-15; markup + 7-day close in functions.php). One block
   with the final 2026-10-14 look: black like the header, 1px #2c3b42 divider, nav-style text, solid green
   "Play Now" sized like Log In / Sign Up, 61px tall; the whole bar is the link; "Student?" on phones. */
.tf-student-banner {
  position: relative;
  background: var(--theme-palette-color-4);
  border-bottom: 1px solid var(--theme-palette-color-3);
}
html.tf-sb-closed .tf-student-banner {
  display: none;
}
.tf-sb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 56px;
  color: var(--theme-palette-color-8);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.tf-sb-link:is(:hover, :focus-visible) {
  color: var(--theme-palette-color-8);
}
.tf-sb-short {
  display: none;
}
@media (max-width: 600px) {
  .tf-sb-long {
    display: none;
  }
  .tf-sb-short {
    display: inline;
  }
}
.tf-play-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 3px;
  background: #347f27;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  background: #2a6a1f;
}
@supports (corner-shape: bevel) {
  .tf-play-btn {
    corner-shape: bevel;
  }
}
.tf-sb-close {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.tf-sb-close:is(:hover, :focus-visible) {
  background: none;
  color: #fff;
}

/* Homepage hero: space under "Explore a Pilot" now that the student strip under the hero is gone (2026-10-15;
   the hero itself ends 17px under the button). */
.home .entry-content > .wp-block-cover:first-child {
  padding-bottom: clamp(40px, 6vw, 80px) !important; /* beats an inline .wp-block-cover { padding: 0 !important } */
}

/* Student bar in Tile Farm green so it stands out from the black header (2026-10-15, trial; was black). Bar #347f27
   (white text ~5:1), Play Now flips to a white button with green text. */
.tf-student-banner {
  background: #22501b; /* toned down from #347f27 (2026-10-15) */
  border-bottom: 0;
}
.tf-play-btn {
  background: #fff;
  color: #347f27;
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  background: #e3f1de;
  color: #2a6a1f;
}
.tf-sb-close {
  color: rgba(255, 255, 255, 0.85);
}

/* Student bar: draw the eye to Play Now (2026-10-15, trial). Once on load: a light green shine sweeps across the
   button (1s in), then the arrow nudges right 3 times; the arrow nudges again on hover. Nothing loops on its own,
   and none of it runs for "Reduce motion" visitors. Arrow span added in functions.php. */
.tf-play-btn {
  position: relative;
  overflow: hidden;
}
.tf-play-arrow {
  display: inline-block;
  margin-left: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .tf-play-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 50%;
    background: linear-gradient(105deg, transparent, rgba(98, 187, 70, 0.45), transparent);
    animation: tf-play-shine 1.1s ease-in-out 1s 1 both;
    pointer-events: none;
  }
  .tf-play-arrow {
    animation: tf-play-nudge 0.6s ease-in-out 2.2s 3;
  }
  .tf-sb-link:is(:hover, :focus-visible) .tf-play-arrow {
    animation: tf-play-nudge 0.6s ease-in-out infinite;
  }
}
@keyframes tf-play-shine {
  from { left: -70%; }
  to { left: 130%; }
}
@keyframes tf-play-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* Tile Farm Tribune form (popup + end-of-post box, both .tf-tribune-popup; Blocksy newsletter block): name, email
   and Subscribe were squeezed onto one row (fields 89-167px wide). Now always stacked, one per row, all the
   same width as the button (user preference: linear forms). 2026-10-15. */
.tf-tribune-popup .ct-newsletter-subscribe-form-elements {
  grid-template-columns: 1fr !important;
}

/* Tile Farm Tribune popup + end-of-post box: logo was an inline image, so margin-inline:auto didn't centre it.
   When stacked (phones, logo above the title), centre the logo, heading and intro text too; the form stays full
   width. 2026-10-15. */
.tf-tribune-popup .wp-block-media-text__media img {
  display: block;
}
@media (max-width: 600px) {
  .tf-tribune-popup .wp-block-media-text__content > :is(h1, h2, h3, h4, p) {
    text-align: center;
  }
}

/* Tile Farm Tribune popup: narrower (480px, was Blocksy "large" 900px) and always in the centred stacked layout
   (logo on top, heading + intro centred, form full width). Scoped by content, not the popup's ID, because the ID
   will differ on live. The end-of-post box keeps its side-by-side layout on wide screens. 2026-10-15. */
.ct-popup:has(.tf-tribune-popup) {
  --popup-max-width: 480px;
}
.ct-popup .wp-block-media-text.tf-tribune-popup {
  grid-template-columns: 100% !important;
}
.ct-popup .tf-tribune-popup .wp-block-media-text__media {
  grid-column: 1 !important; /* WP core puts it in column 2 (media on the right) */
  grid-row: 1 !important;
  margin-bottom: 16px;
}
.ct-popup .tf-tribune-popup .wp-block-media-text__content {
  grid-column: 1 !important;
  grid-row: 2 !important;
  padding-inline: 0;
}
.ct-popup .tf-tribune-popup .wp-block-media-text__media img {
  max-width: 120px;
}
.ct-popup .tf-tribune-popup .wp-block-media-text__content > :is(h1, h2, h3, h4, p) {
  text-align: center;
}

/* Homepage "From the Tile Farm Blog": Tribune line under the cards (opens the popup). 2026-10-15. */
.tf-blog-subscribe {
  margin-top: 40px;
}
.tf-blog-subscribe a {
  font-weight: 600;
  white-space: nowrap;
}

/* Blog cards are clickable as a whole (2026-10-15): Blog page + homepage blog section (.entry-card) and "More from
   the blog" under posts (.ct-related-posts article). The title link is stretched over the card, so the card is one
   link; "Read article" is off and the image is no longer its own link (theme mod blog_archive_order). Hover: slight
   lift + deeper shadow + blue title; keyboard focus outlines the whole card. */
.entries > .entry-card,
.ct-related-posts article {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.entries > .entry-card .entry-title a::after,
.ct-related-posts article .related-entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.entries > .entry-card:hover,
.entries > .entry-card:focus-within,
.ct-related-posts article:hover,
.ct-related-posts article:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(7, 9, 10, 0.12);
}
.entries > .entry-card:is(:hover, :focus-within) .entry-title a,
.ct-related-posts article:is(:hover, :focus-within) .related-entry-title a {
  color: var(--theme-palette-color-1);
}
.entries > .entry-card .entry-title a:focus-visible,
.ct-related-posts article .related-entry-title a:focus-visible {
  outline: none;
}
.entries > .entry-card:has(.entry-title a:focus-visible),
.ct-related-posts article:has(.related-entry-title a:focus-visible) {
  outline: 2px solid var(--theme-palette-color-1);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .entries > .entry-card,
  .ct-related-posts article {
    transition: none;
  }
  .entries > .entry-card:is(:hover, :focus-within),
  .ct-related-posts article:is(:hover, :focus-within) {
    transform: none;
  }
}

/* Student bar, round 3 (2026-10-15): standard Tile Farm green (#62bb46) with black text (white on this green is
   2.4:1, black ~8:1); bigger text and button (they looked small in the 61px bar); "Here for class? [Student Sign
   In ->]" (button is black, white text); close button removed, so no side padding reserved for it. */
.tf-student-banner {
  background: var(--theme-palette-color-9);
  border-bottom: 0;
}
.tf-sb-link {
  gap: 16px;
  padding: 10px 16px;
  color: var(--theme-palette-color-4);
  font-size: 18px;
  font-weight: 600;
}
.tf-sb-link:is(:hover, :focus-visible) {
  color: var(--theme-palette-color-4);
}
.tf-play-btn {
  min-height: 40px;
  padding: 0 18px;
  background: var(--theme-palette-color-4);
  color: #fff;
  font-size: 15px;
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  background: #2c3b42;
  color: #fff;
}
.tf-play-btn::after {
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); /* shine reads on the black button */
}
@media (max-width: 420px) {
  .tf-sb-link {
    gap: 12px;
    font-size: 16px;
  }
  .tf-play-btn {
    padding: 0 14px;
    font-size: 14px;
  }
}

/* Student bar, round 4 (2026-10-15, user's choice): white text on the Tile Farm green; white button with dark green
   text (#347f27, ~5:1 on white); green shine again (it shows on white). */
.tf-sb-link,
.tf-sb-link:is(:hover, :focus-visible) {
  color: #fff;
}
.tf-play-btn {
  background: #fff;
  color: #347f27;
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  background: #e3f1de;
  color: #2a6a1f;
}
.tf-play-btn::after {
  background: linear-gradient(105deg, transparent, rgba(98, 187, 70, 0.45), transparent);
}

/* Student bar, round 5 (2026-10-15): "Here for class?" removed, so the button stands alone and is a little wider. */
.tf-play-btn {
  padding: 0 32px;
}

/* Student bar, round 6 (2026-10-15): Student Sign In as a white outline button like the header's Log In / Sign Up
   (2px border, 3px bevelled corners): transparent, white text; fills white with green text on hover; white shine. */
.tf-play-btn {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  background: #fff;
  color: #347f27;
}
.tf-play-btn::after {
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* Student bar, round 7 (2026-10-15): purple background rgba(151,57,153,1) (white text ~6.7:1, passes); the button's
   hover text follows the purple. */
.tf-student-banner {
  background: rgba(151, 57, 153, 1);
}
.tf-sb-link:is(:hover, :focus-visible) .tf-play-btn {
  color: rgba(151, 57, 153, 1);
}

/* Team cards (About page, person posts): greyscale + pointy-top hexagon done in CSS, so the photos can be uploaded in
   full colour (2026-10-16: Elia, Lauren, Jim). The older photos already have a white hexagon baked in; the same
   clip-path lines up with it. Lauren's face sits right of centre in her photo, so her crop shifts right. */
.type-person .ct-media-container img {
  filter: grayscale(1);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.type-person.post-843 .ct-media-container img {
  object-position: 100% 50%;
}
.type-person.post-849 .ct-media-container img {
  object-position: 40% 50%;
}