/*
Theme Name: TalkingHubs Kadence Child
Theme URI: https://talkinghubs.com/
Description: A custom blue-and-white visual layer for TalkingHubs, built on Kadence.
Author: TalkingHubs
Template: kadence
Version: 1.0.0
Text Domain: talkinghubs-kadence-child
*/

/*
 * TalkingHubs visual foundation.
 * This file intentionally changes presentation only. It does not alter
 * WordPress data, LMS logic, assessment attempts, or speaking uploads.
 */

:root {
  --th-blue-950: #082b55;
  --th-blue-900: #0b376b;
  --th-blue-800: #104b8d;
  --th-blue-700: #1765b3;
  --th-blue-600: #2479cf;
  --th-blue-100: #eaf3ff;
  --th-blue-050: #f5f9ff;
  --th-white: #ffffff;
  --th-ink: #182b43;
  --th-muted: #63748a;
  --th-border: #dce6f2;
  --th-surface: #ffffff;
  --th-radius-sm: 10px;
  --th-radius-md: 16px;
  --th-radius-lg: 24px;
  --th-shadow-sm: 0 4px 16px rgba(8, 43, 85, 0.06);
  --th-shadow-md: 0 12px 32px rgba(8, 43, 85, 0.10);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--th-ink);
  background: var(--th-blue-050);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--th-white);
  background: var(--th-blue-700);
}

a {
  color: var(--th-blue-700);
  text-underline-offset: 0.18em;
  transition: color 160ms ease;
}

a:hover,
a:focus-visible {
  color: var(--th-blue-950);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--th-blue-950);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

h1 { letter-spacing: -0.04em; }

/* Kadence content surfaces */
.site,
.site-container {
  background: transparent;
}

.site-main,
.content-container {
  min-width: 0;
}

.entry-content,
.entry-content-wrap,
.content-bg,
.site-content {
  color: var(--th-ink);
}

.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns {
  margin-block: 1.5rem;
}

/* Header and navigation */
.site-header-row-container-inner,
.site-header-row-container {
  background: var(--th-white);
}

.site-header-row-container-inner {
  border-bottom: 1px solid rgba(220, 230, 242, 0.9);
}

.site-header-item .primary-menu-container > ul > li > a,
.header-navigation .header-menu-container > ul > li > a {
  font-weight: 650;
  transition: color 160ms ease, background-color 160ms ease;
}

.site-header-item .primary-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li > a:hover {
  color: var(--th-blue-700);
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.kt-button,
.kb-button {
  border-radius: 999px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.wp-block-button__link,
.kt-button,
.kb-button,
input[type="submit"] {
  box-shadow: 0 5px 14px rgba(23, 101, 179, 0.16);
}

.wp-block-button__link:hover,
.kt-button:hover,
.kb-button:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
  max-width: 100%;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-sm);
  background: var(--th-white);
  color: var(--th-ink);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--th-blue-600);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus {
  border-color: var(--th-blue-600);
  box-shadow: 0 0 0 3px rgba(36, 121, 207, 0.12);
}

/* Reusable card treatment for WordPress blocks and common LMS output */
.wp-block-group.is-style-card,
.wp-block-query .wp-block-post,
.wp-block-post-template > li,
.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #payment {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-surface);
  box-shadow: var(--th-shadow-sm);
}

.wp-block-post-template > li,
.woocommerce ul.products li.product {
  padding: 1rem;
  overflow: hidden;
}

/* Media */
img,
video,
iframe {
  max-width: 100%;
}

img {
  border-radius: 8px;
}

/* Footer */
.site-footer {
  color: #eaf3ff;
  background: var(--th-blue-950);
}

.site-footer a {
  color: #ffffff;
}

.site-footer a:hover {
  color: #b9d9ff;
}

/* Accessibility and responsive spacing */
:focus-visible {
  outline: 3px solid rgba(36, 121, 207, 0.7);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  body {
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  h2 {
    font-size: clamp(1.55rem, 6vw, 2.25rem);
  }

  .entry-content > .wp-block-group,
  .entry-content > .wp-block-cover,
  .entry-content > .wp-block-columns {
    margin-block: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* TalkingHubs program detail and live courses additions */
/* TalkingHubs program detail and live courses */
.th-program-detail,.th-live-page{max-width:1160px;margin:0 auto;padding:36px 20px 64px;color:#12304f}
.th-program-detail-hero,.th-live-heading{padding:clamp(28px,5vw,56px);border-radius:24px;background:linear-gradient(135deg,#082b55,#1765b8);color:#fff;margin:20px 0 42px}
.th-program-detail-hero h1,.th-live-heading h1{font-size:clamp(2rem,4vw,3.3rem);line-height:1.1;color:#fff;margin:12px 0}
.th-program-detail-hero p,.th-live-heading p{font-size:1.08rem;max-width:760px;color:rgba(255,255,255,.88)}
.th-program-detail .th-eyebrow,.th-live-page .th-eyebrow{font-size:.75rem;letter-spacing:.14em;font-weight:800;color:#9fd4ff}
.th-program-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.th-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:12px 19px;text-decoration:none!important;font-weight:700;transition:transform .2s,opacity .2s}
.th-button:hover{transform:translateY(-2px);opacity:.92}
.th-button-primary{background:#1765c0;color:#fff!important;border:1px solid #1765c0}
.th-button-outline{background:transparent;color:inherit!important;border:1px solid currentColor}
.th-program-detail-hero .th-button-primary,.th-live-heading .th-button-primary{background:#fff;color:#0b376b!important;border-color:#fff}
.th-program-detail-hero .th-button-outline{color:#fff!important}
.th-back-link{display:inline-block;margin:0 0 12px;color:#1765b8;text-decoration:none;font-weight:700}
.th-program-levels>h2,.th-live-section-title h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:8px;color:#12304f}
.th-program-grid,.th-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.th-program-card,.th-live-card{border:1px solid #dce7f3;border-radius:16px;background:#fff;padding:24px;box-shadow:0 8px 28px rgba(8,43,85,.06);min-width:0}
.th-program-card h3,.th-live-card h3{font-size:1.25rem;line-height:1.35;margin:12px 0;color:#12304f}
.th-program-card p,.th-live-card p{color:#53677c;line-height:1.65}
.th-program-label{display:inline-block;font-size:.72rem;letter-spacing:.09em;font-weight:800;color:#1765b8}
.th-page-message,.th-live-empty{border:1px solid #dce7f3;border-radius:16px;padding:28px;background:#f7faff;margin:18px 0}
.th-live-section{margin:42px 0}
.th-live-section-title p{color:#60748a;margin-top:0}
.th-live-status{display:inline-flex;border-radius:999px;background:#e6f2ff;color:#14569b;font-size:.75rem;font-weight:800;padding:6px 10px}
.th-live-class-name{font-weight:700;color:#1765b8!important;margin-bottom:14px}
.th-live-meta{display:grid;gap:9px;margin:15px 0;color:#425a72;font-size:.93rem}
.th-live-card .th-button{margin-top:8px}
@media(max-width:900px){.th-program-grid,.th-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.th-program-detail,.th-live-page{padding:22px 14px 42px}.th-program-grid,.th-live-grid{grid-template-columns:1fr}.th-program-detail-hero,.th-live-heading{border-radius:16px;padding:26px 20px}.th-program-detail-actions .th-button{width:100%}}

/* Homepage layout: restores the layout classes used by [th_homepage]. */
.th-homepage{width:min(1160px,calc(100% - 40px));margin-inline:auto;padding:24px 0 64px}
.th-homepage *{box-sizing:border-box}
.th-homepage section{margin-block:34px}
.th-homepage p{margin-block:0 14px}
.th-homepage .th-eyebrow{display:inline-block;color:var(--th-blue-700);font-size:.76rem;font-weight:800;letter-spacing:.12em;line-height:1.4}
.th-homepage .th-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:clamp(28px,5vw,64px);min-height:420px;margin-top:12px;padding:clamp(30px,5vw,62px);overflow:hidden;border:1px solid #dce9f8;border-radius:var(--th-radius-lg);background:radial-gradient(circle at 85% 18%,rgba(36,121,207,.13),transparent 28%),linear-gradient(135deg,#fff 0%,#f0f7ff 100%);box-shadow:var(--th-shadow-md)}
.th-homepage .th-hero-content{min-width:0}
.th-homepage .th-hero h1{margin:16px 0;max-width:700px;color:var(--th-blue-950);font-size:clamp(2.35rem,4.2vw,4.25rem);line-height:1.07;letter-spacing:-.045em}
.th-homepage .th-hero h1 span{display:block;color:var(--th-blue-700)}
.th-homepage .th-hero-description{max-width:650px;color:#53677c;font-size:1.08rem}
.th-homepage .th-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.th-homepage .th-button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:12px 19px;border:1px solid transparent;border-radius:10px;font-weight:750;text-decoration:none!important}
.th-homepage .th-button-primary{color:#fff;background:var(--th-blue-700);border-color:var(--th-blue-700);box-shadow:0 8px 18px rgba(23,101,179,.18)}
.th-homepage .th-button-primary:hover{color:#fff;background:var(--th-blue-900)}
.th-homepage .th-button-outline{color:var(--th-blue-950);background:#fff;border-color:#b8cce2}
.th-homepage .th-button-outline:hover{color:var(--th-blue-700);border-color:var(--th-blue-600)}
.th-homepage .th-hero-note{margin-top:16px;color:var(--th-muted);font-size:.92rem}
.th-homepage .th-hero-visual{position:relative;display:grid;min-height:290px;place-items:center}
.th-homepage .th-visual-circle{display:grid;width:min(300px,100%);aspect-ratio:1;place-items:center;border:1px solid rgba(36,121,207,.18);border-radius:50%;background:radial-gradient(circle,#fff 15%,#e6f2ff 68%,#d5e8ff 100%);box-shadow:inset 0 0 0 18px rgba(255,255,255,.45),0 20px 48px rgba(8,43,85,.1)}
.th-homepage .th-visual-card{display:flex;width:72%;min-height:170px;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:22px;border:1px solid #e0eaf5;border-radius:18px;background:#fff;box-shadow:var(--th-shadow-md);transform:rotate(-3deg)}
.th-homepage .th-visual-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;color:#fff;background:var(--th-blue-700);font-weight:900}
.th-homepage .th-visual-card strong{color:var(--th-blue-950);font-size:1.05rem;line-height:1.35}
.th-homepage .th-visual-card>span:last-child{color:var(--th-muted);font-size:.82rem}
.th-homepage .th-floating-label{position:absolute;right:-4px;bottom:14px;padding:11px 15px;border:1px solid #dce7f3;border-radius:12px;color:var(--th-blue-950);background:#fff;box-shadow:var(--th-shadow-sm);font-size:.86rem;font-weight:750}
.th-homepage .th-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.th-homepage .th-benefit{display:flex;align-items:flex-start;gap:14px;padding:22px;border:1px solid var(--th-border);border-radius:var(--th-radius-md);background:#fff;box-shadow:var(--th-shadow-sm)}
.th-homepage .th-benefit-icon{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:12px;color:var(--th-blue-700);background:var(--th-blue-100);font-size:.8rem;font-weight:850}
.th-homepage .th-benefit h3{margin:2px 0 6px;font-size:1.05rem;letter-spacing:-.02em}
.th-homepage .th-benefit p{margin:0;color:var(--th-muted);font-size:.93rem}
.th-homepage .th-section-heading{max-width:760px;margin-bottom:22px}
.th-homepage .th-section-heading h2,.th-homepage .th-placement h2,.th-homepage .th-final-cta h2{margin:10px 0;font-size:clamp(1.8rem,3vw,2.55rem)}
.th-homepage .th-section-heading p{color:var(--th-muted)}
.th-homepage .th-program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.th-homepage .th-program-card{display:flex;min-width:0;flex-direction:column;padding:24px;border:1px solid var(--th-border);border-radius:var(--th-radius-md);background:#fff;box-shadow:var(--th-shadow-sm);transition:transform 180ms ease,box-shadow 180ms ease}
.th-homepage .th-program-card:hover{transform:translateY(-3px);box-shadow:var(--th-shadow-md)}
.th-homepage .th-program-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.th-homepage .th-program-symbol{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;color:#fff;background:var(--th-blue-700);font-size:.78rem;font-weight:900}
.th-homepage .th-program-label{color:var(--th-blue-700);font-size:.68rem;font-weight:850;letter-spacing:.08em}
.th-homepage .th-program-card h3{margin:8px 0 10px;font-size:1.22rem}
.th-homepage .th-program-card p{flex:1;color:var(--th-muted);font-size:.95rem}
.th-homepage .th-program-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:800;text-decoration:none}
.th-homepage .th-program-empty{padding:30px;border:1px dashed #b9cde3;border-radius:var(--th-radius-md);background:#fff}
.th-homepage .th-program-empty h3{margin-top:0}
.th-homepage .th-placement{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:clamp(26px,4vw,42px);border-radius:var(--th-radius-lg);color:#fff;background:linear-gradient(120deg,var(--th-blue-950),var(--th-blue-700))}
.th-homepage .th-placement .th-eyebrow{color:#b8dcff}
.th-homepage .th-placement h2{color:#fff}
.th-homepage .th-placement p{max-width:700px;margin-bottom:0;color:rgba(255,255,255,.84)}
.th-homepage .th-button-light{flex:0 0 auto;color:var(--th-blue-950);background:#fff;border-color:#fff}
.th-homepage .th-button-light:hover{color:var(--th-blue-700)}
.th-homepage .th-final-cta{padding:34px 0 10px}
.th-homepage .th-final-cta>p{max-width:700px;color:var(--th-muted)}
.th-homepage .th-final-cta .th-button-outline{background:transparent}

@media(max-width:900px){.th-homepage .th-hero{grid-template-columns:1fr}.th-homepage .th-hero-visual{min-height:250px}.th-homepage .th-benefits{grid-template-columns:1fr}.th-homepage .th-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.th-homepage{width:calc(100% - 28px);padding-top:12px}.th-homepage .th-hero{gap:20px;padding:28px 20px;border-radius:16px}.th-homepage .th-hero h1{font-size:clamp(2.15rem,10vw,3.2rem)}.th-homepage .th-hero-actions{flex-direction:column;align-items:stretch}.th-homepage .th-hero-actions .th-button{width:100%}.th-homepage .th-hero-visual{min-height:220px}.th-homepage .th-visual-circle{width:220px}.th-homepage .th-floating-label{right:0;bottom:0}.th-homepage .th-program-grid{grid-template-columns:1fr}.th-homepage .th-placement{align-items:stretch;flex-direction:column}.th-homepage .th-placement .th-button{width:100%}}

/* Homepage live-courses preview */
.th-home-live-courses { margin-block: 42px; }
.th-home-live-courses .th-section-heading { max-width: 760px; margin-bottom: 24px; }
.th-home-live-courses .th-section-heading h2 { margin: 10px 0; color: var(--th-blue-950); font-size: clamp(1.8rem, 3vw, 2.55rem); }
.th-home-live-courses .th-section-heading p,
.th-home-live-title p { color: var(--th-muted); }
.th-home-live-section { margin: 28px 0; }
.th-home-live-title h3 { margin: 0 0 6px; color: var(--th-blue-950); font-size: 1.35rem; }
.th-home-live-title p { margin: 0 0 16px; }
.th-home-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.th-home-live-card { display: flex; min-width: 0; flex-direction: column; padding: 22px; border: 1px solid var(--th-border); border-radius: var(--th-radius-md); background: #fff; box-shadow: var(--th-shadow-sm); }
.th-home-live-card h3 { margin: 12px 0 8px; color: var(--th-blue-950); font-size: 1.15rem; }
.th-home-live-card p { color: var(--th-muted); }
.th-home-live-card .th-home-live-class { margin-bottom: 8px; color: var(--th-blue-700); font-weight: 700; }
.th-home-live-status { align-self: flex-start; padding: 6px 10px; border-radius: 999px; color: #14569b; background: var(--th-blue-100); font-size: .74rem; font-weight: 800; }
.th-home-live-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 12px; color: #425a72; font-size: .9rem; }
.th-home-live-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-weight: 800; text-decoration: none; }
.th-home-live-empty { padding: 20px 22px; border: 1px dashed #b9cde3; border-radius: var(--th-radius-md); background: #fff; }
.th-home-live-empty p { margin: 0; color: var(--th-muted); }
.th-home-live-actions { margin-top: 24px; }
@media (max-width: 900px) { .th-home-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .th-home-live-grid { grid-template-columns: 1fr; } }

/* Live-course cards styled to match the Programs cards */
.th-home-live-courses {
    padding: 18px 0 28px;
}
.th-home-live-courses .th-section-heading {
    max-width: none;
    margin-bottom: 30px;
}
.th-home-live-courses .th-section-heading h2 {
    margin: 10px 0 14px;
    color: #0e3159;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    font-weight: 800;
}
.th-home-live-courses .th-section-heading p {
    font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    line-height: 1.6;
}
.th-home-live-section { margin: 32px 0; }
.th-home-live-title h3 {
    margin: 0 0 8px;
    color: #0e3159;
    font-size: 1.55rem;
    font-weight: 750;
}
.th-home-live-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.th-home-live-card {
    display: flex;
    min-width: 0;
    min-height: 350px;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 48px;
    border: 2px solid #dce6f2;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 45, 80, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.th-home-live-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(15, 45, 80, .09);
}
.th-home-live-status {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 0;
    border-radius: 0;
    color: #2168b8;
    background: transparent;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.th-home-live-card h3 {
    margin: 0 0 10px;
    color: #12345a;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 750;
}
.th-home-live-card .th-home-live-class {
    margin: 0 0 12px;
    color: #2168b8;
    font-size: 1rem;
    font-weight: 700;
}
.th-home-live-card p {
    color: #657890;
    font-size: 1.1rem;
    line-height: 1.65;
}
.th-home-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 12px;
    color: #657890;
    font-size: .95rem;
}
.th-home-live-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
    color: #2168b8;
    font-size: 1.25rem;
    font-weight: 750;
    text-decoration: none;
}
.th-home-live-link:hover { color: #12345a; }
.th-home-live-empty {
    padding: 24px 28px;
    border: 2px solid #dce6f2;
    border-radius: 28px;
    background: #fff;
}
.th-home-live-actions { margin-top: 28px; }
@media (max-width: 1024px) {
    .th-home-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .th-home-live-card { padding: 32px; }
}
@media (max-width: 640px) {
    .th-home-live-grid { grid-template-columns: 1fr; }
    .th-home-live-card { min-height: auto; padding: 28px; border-radius: 24px; }
    .th-home-live-card h3 { font-size: 1.55rem; }
    .th-home-live-link { font-size: 1.1rem; }
}

/* TalkingHubs homepage course carousel */
.th-homepage .th-program-carousel {
    position: relative;
    margin-top: 22px;
}

/* Simple arrow controls - no circles, borders, or shadows */
.th-homepage .th-program-carousel-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    margin: 0 2px 14px;
}

.th-homepage .th-course-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 30px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #1765b8;
    background: transparent;
    box-shadow: none;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.th-homepage .th-course-arrow:hover:not(:disabled),
.th-homepage .th-course-arrow:focus-visible {
    color: #0d3d70;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: translateX(3px);
}

.th-homepage .th-course-prev:hover:not(:disabled),
.th-homepage .th-course-prev:focus-visible {
    transform: translateX(-3px);
}

.th-homepage .th-course-arrow:disabled {
    opacity: .25;
    cursor: not-allowed;
}

.th-homepage .th-program-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 18px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.th-homepage .th-program-grid .th-program-card {
    display: flex;
    flex: 0 0 calc((100% - 40px) / 3);
    flex-direction: column;
    width: calc((100% - 40px) / 3);
    min-width: 0;
    min-height: 330px;
    scroll-snap-align: start;
}

.th-homepage .th-course-description-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
}

.th-homepage .th-course-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 4px;
}

.th-homepage .th-course-description.is-expanded {
    display: block;
    overflow: visible;
}

.th-homepage .th-course-readmore {
    padding: 0;
    border: 0;
    color: #1765b8;
    background: transparent;
    font-size: .88rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: underline;
}

.th-homepage .th-program-card .th-program-link {
    margin-top: auto;
    padding-top: 16px;
}

@media (max-width: 900px) {
    .th-homepage .th-program-grid .th-program-card {
        flex-basis: calc((100% - 20px) / 2);
        width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 600px) {
    .th-homepage .th-program-carousel-controls {
        gap: 18px;
        margin-bottom: 10px;
    }

    .th-homepage .th-course-arrow {
        font-size: 29px;
    }

    .th-homepage .th-program-grid .th-program-card {
        flex-basis: 85%;
        width: 85%;
        min-height: 320px;
    }
}


/* General English level cards with English File Fifth Edition covers */
.th-program-detail .th-general-english-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
.th-program-detail .th-learning-level-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    min-width: 0;
}
.th-program-detail .th-level-cover-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 22px;
    background: #f4f7fb;
}
.th-program-detail .th-level-cover {
    display: block;
    width: auto;
    max-width: 100%;
    height: 205px;
    object-fit: contain;
    box-shadow: 0 8px 22px rgba(13, 43, 77, .13);
}
.th-program-detail .th-level-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
}
.th-program-detail .th-level-cefr {
    display: inline-flex;
    align-items: center;
    margin: 2px 0 12px;
    padding: 5px 11px;
    border-radius: 20px;
    color: #145da8;
    background: #eaf3ff;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .3px;
}
.th-program-detail .th-level-short-description {
    flex: 1;
    margin: 0 0 18px;
    color: #63758d;
    line-height: 1.65;
}
.th-program-detail .th-level-details-trigger {
    margin-top: auto;
    cursor: pointer;
}
.th-level-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.th-level-modal.is-open { display: flex; }
.th-level-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 24, 45, .72);
}
.th-level-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: min(88vh, 850px);
    overflow: auto;
    padding: 34px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}
.th-level-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    color: #173b60;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.th-level-modal-layout {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}
.th-level-modal-image-wrap {
    display: flex;
    justify-content: center;
    padding: 14px;
    border-radius: 14px;
    background: #f4f7fb;
}
.th-level-modal-image-wrap img {
    display: block;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    object-fit: contain;
    box-shadow: 0 8px 22px rgba(13, 43, 77, .13);
}
.th-level-modal-content h2 {
    margin: 10px 42px 8px 0;
    color: #12345a;
}
.th-level-modal-content h3 {
    margin: 22px 0 10px;
    color: #12345a;
    font-size: 1.1rem;
}
.th-level-modal-content p,
.th-level-modal-content li {
    color: #5f7188;
    line-height: 1.7;
}
.th-level-modal-content ul {
    margin: 0 0 24px;
    padding-left: 22px;
}
body.th-level-modal-open { overflow: hidden; }

@media (max-width: 900px) {
    .th-program-detail .th-general-english-level-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .th-program-detail .th-general-english-level-grid {
        grid-template-columns: 1fr;
    }
    .th-program-detail .th-level-cover-wrap {
        min-height: 210px;
    }
    .th-program-detail .th-level-cover {
        height: 185px;
    }
    .th-level-modal {
        padding: 12px;
    }
    .th-level-modal-dialog {
        padding: 28px 20px 22px;
        border-radius: 16px;
    }
    .th-level-modal-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .th-level-modal-image-wrap img {
        max-height: 230px;
    }
}