/*
Theme Name: Cricketlab
Theme URI: https://www.cricketlab.co
Author: Dr Richard Pybus
Description: Cricketlab block theme. Red and black livery, products first, every article sells its matching program.
Version: 1.0.6
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cricketlab
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group > * + * { margin-block-start: 0; }
.cl-wrap { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.cl-kicker { color: var(--wp--preset--color--red-bright); font-weight: 800; letter-spacing: 3px; font-size: 15px; text-transform: uppercase; margin: 0 0 10px; }
.cl-light .cl-kicker { color: var(--wp--preset--color--red); }
.cl-section { padding-top: 80px; padding-bottom: 80px; }
.cl-rule { border-top: 6px solid var(--wp--preset--color--red); }
.cl-light { background: #FFFFFF; color: #151515; }
.cl-light h1, .cl-light h2, .cl-light h3 { color: #151515; }
.cl-muted { color: #D4D4D8; }
.cl-light .cl-muted { color: #3F3F46; }
.cl-placeholder { background: #1C1C1C; border: 1px dashed #52525B; color: #A1A1AA; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; min-height: 300px; font-size: 15px; }

/* ---------- Buttons ---------- */
.wp-block-button.cl-buy .wp-block-button__link,
a.cl-buy { background: var(--wp--preset--color--red); color: #FFFFFF; border-radius: 0; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; padding: 14px 22px; text-decoration: none; display: inline-block; }
.wp-block-button.cl-buy .wp-block-button__link:hover, a.cl-buy:hover { background: #E10600; color: #FFFFFF; }
.wp-block-button.cl-guide .wp-block-button__link,
a.cl-guide { background: var(--wp--preset--color--yellow); color: #151515; border-radius: 15px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; padding: 18px 30px; font-size: 18px; text-decoration: none; display: inline-block; }
.wp-block-button.cl-ghost .wp-block-button__link { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; padding: 16px 26px; font-size: 18px; }
.cl-light .wp-block-button.cl-ghost .wp-block-button__link { color: #151515; border-color: #151515; }

/* ---------- Header ---------- */
.cl-header { background: #000; border-bottom: 6px solid var(--wp--preset--color--red); }
.cl-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 14px; padding-bottom: 14px; }
.cl-logo a { text-decoration: none; display: flex; flex-direction: column; }
.cl-logo .cl-word { font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; letter-spacing: 1px; color: #FFFFFF; }
.cl-logo .cl-word span { color: var(--wp--preset--color--red-bright); }
.cl-logo .cl-by { font-size: 12px; letter-spacing: 2px; color: #A1A1AA; text-transform: uppercase; font-style: normal; }
.cl-header .wp-block-navigation { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cl-header .wp-block-navigation a { color: #FFFFFF; text-decoration: none; }
.cl-header .wp-block-navigation .cl-nav-hi a { background: var(--wp--preset--color--yellow); color: #151515; padding: 6px 10px; }
.cl-header .wp-block-navigation__responsive-container.is-menu-open { background: #000; }

/* ---------- Hero ---------- */
.cl-hero { background: #111111; border-bottom: 6px solid var(--wp--preset--color--red); }
.cl-hero h1 { font-size: clamp(54px, 8vw, 104px); line-height: .9; margin: 0; }
.cl-hero h1 .cl-red, .cl-red { color: var(--wp--preset--color--red-bright); }
.cl-light .cl-red { color: var(--wp--preset--color--red); }

/* ---------- Bands ---------- */
.cl-band-red { background: var(--wp--preset--color--red); color: #FFFFFF; }
.cl-band-red h2, .cl-band-red h3, .cl-band-red p { color: #FFFFFF; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding-top: 28px; padding-bottom: 28px; }
.cl-stat b { display: block; font-weight: 900; font-size: 46px; line-height: 1; }
.cl-stat span { font-weight: 700; font-size: 16px; text-transform: uppercase; }
.cl-names { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 40px; padding-top: 28px; padding-bottom: 28px; background: #000; }
.cl-names span { font-weight: 900; font-size: 26px; letter-spacing: 1px; color: #FFFFFF; }
.cl-names .cl-label { font-size: 13px; letter-spacing: 3px; color: #A1A1AA; font-weight: 700; }

/* ---------- Product cards ---------- */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cl-card { background: #151515; display: flex; flex-direction: column; text-align: center; }
.cl-card .cl-cover { background: #262626; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #A1A1AA; font-size: 13px; padding: 12px; }
.cl-card .cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.cl-card .cl-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: center; flex-grow: 1; }
.cl-card h3 { margin: 0; font-size: 28px; line-height: 1; }
.cl-card .cl-sub { font-size: 15px; color: #D4D4D8; }
.cl-card .cl-price { font-weight: 900; font-size: 32px; margin-top: auto; padding-top: 6px; }
.cl-card .cl-price s { font-size: 16px; color: #A1A1AA; font-weight: 400; margin-right: 8px; }
.cl-card .cl-cta { align-self: stretch; }
.cl-card a.cl-buy { display: block; text-align: center; font-size: 16px; }
.cl-card .cl-cover { padding: 0; }
.cl-card .cl-body p:empty, .cl-grid > p:empty, .cl-grid br { display: none; }
.cl-academy { background: #FFFFFF; color: #151515; padding: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: center; margin-top: 36px; }
.cl-academy h3 { font-size: 48px; line-height: 1; margin: 0; color: #151515; }
.cl-academy .cl-big { font-weight: 900; font-size: 62px; line-height: 1; }
.cl-academy s { color: #52525B; font-size: 18px; margin-right: 12px; }

/* ---------- Method ---------- */
.cl-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; background: var(--wp--preset--color--red); }
.cl-method > div { background: #000; padding: 28px; }
.cl-method b { display: block; font-weight: 900; font-size: 50px; color: var(--wp--preset--color--red-bright); }
.cl-method h3 { font-size: 22px; margin: 6px 0; }
.cl-method p { color: #D4D4D8; margin: 0; }

/* ---------- Levels ---------- */
.cl-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cl-level { border: 3px solid #151515; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.cl-level b { font-weight: 900; font-size: 24px; }
.cl-level .cl-lp { font-weight: 900; font-size: 38px; margin-top: 8px; }
.cl-level.cl-l4 { background: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); color: #FFFFFF; }
.cl-level.cl-l4 a { color: #FFFFFF; }

/* ---------- Quiz ---------- */
.cl-quiz-q { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: #3F3F46; margin: 24px 0 12px; }
.cl-quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cl-quiz-opts button { font-family: inherit; font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 20px 16px; cursor: pointer; border: 3px solid #151515; background: #FFFFFF; color: #151515; }
.cl-quiz-opts button[aria-pressed="true"] { background: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); color: #FFFFFF; }
.cl-quiz-result { background: #000; color: #FFFFFF; border-top: 6px solid var(--wp--preset--color--red); padding: 32px; margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: center; }
.cl-quiz-result h3 { color: #FFFFFF; font-size: 44px; margin: 0; }
.cl-quiz-result[hidden], .cl-quiz-step[hidden] { display: none; }

/* ---------- Articles ---------- */
.cl-pills a { display: inline-block; color: #FFFFFF; text-decoration: none; border: 2px solid var(--wp--preset--color--red); padding: 10px 16px; font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 8px 8px 0; }
.cl-posts .wp-block-post-title a { color: #FFFFFF; text-decoration: none; }
.cl-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--red-bright); }
.cl-posts .wp-block-post-terms a { color: var(--wp--preset--color--red-bright); text-transform: uppercase; font-weight: 800; letter-spacing: 2px; font-size: 13px; text-decoration: none; }

/* ---------- Single article ---------- */
.cl-article { background: #FFFFFF; color: #151515; }
.cl-article h1, .cl-article h2, .cl-article h3 { color: #151515; }
.cl-article .wp-block-post-content a { color: var(--wp--preset--color--red); }
.cl-article .wp-block-post-content { font-size: 19px; line-height: 1.7; font-weight: 400; }
.cl-article .wp-block-post-content h2 { font-size: 34px; margin-top: 1.6em; }
.cl-box { border-top: 6px solid var(--wp--preset--color--red); background: #000; color: #FFFFFF; padding: 28px; margin: 40px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: center; }
.cl-box h3 { color: #FFFFFF !important; margin: 0 0 6px; font-size: 30px; line-height: 1.05; }
.cl-box p { margin: 0; color: #D4D4D8; font-size: 17px; line-height: 1.5; }
.cl-box .cl-boxprice { font-weight: 900; font-size: 36px; display: block; margin-bottom: 10px; }
.cl-box a.cl-buy, .cl-box a.cl-guide { color: #FFFFFF; }
.cl-box a.cl-guide { color: #151515; }
.cl-box.cl-free { background: var(--wp--preset--color--red); border-top-color: #000; }
.cl-box.cl-free p { color: #FFFFFF; }
.cl-coach { display: flex; gap: 18px; align-items: flex-start; border: 3px solid #151515; padding: 24px; margin: 40px 0; }
.cl-coach .cl-av { width: 88px; height: 88px; flex-shrink: 0; background: #151515; color: #FFFFFF; font-weight: 900; font-style: italic; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.cl-coach p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.cl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #000; border-top: 4px solid var(--wp--preset--color--red); padding: 10px 16px; display: none; justify-content: space-between; align-items: center; gap: 10px; }
.cl-sticky span { color: #FFFFFF; font-weight: 800; text-transform: uppercase; font-size: 14px; }
.cl-sticky a.cl-guide { padding: 10px 16px; font-size: 14px; }
@media (max-width: 781px) { .cl-sticky { display: flex; } body { padding-bottom: 70px; } }

/* ---------- Footer ---------- */
.cl-footer { background: #000; border-top: 6px solid var(--wp--preset--color--red); }
.cl-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 48px; font-size: 15px; }
.cl-footer-grid strong { display: block; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: #FFFFFF; }
.cl-footer-grid a { display: block; color: #A1A1AA; text-decoration: none; text-transform: uppercase; padding: 4px 0; }
.cl-footer-grid a:hover { color: #FFFFFF; }