/*
Theme Name: Vitlamdata
Theme URI: https://vitlamdata.com
Description: Child of Twenty Twenty-Five for vitlamdata.com. Block theme: the
  homepage and ad landing page are block patterns in patterns/, so the site
  design is a reviewable diff instead of clicks in the Site Editor.
Author: vitlamdata
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vitlamdata
*/

/* functions.php enqueues this file; WordPress does not load a block theme's
   style.css on its own.

   Keep rules here to what theme.json cannot express. Everything a block setting
   can do (colour, spacing, type scale) belongs in theme.json or the pattern. */


/* The highlighter under a key phrase. A background gradient, because no block
   setting draws a partial-height highlight. */
.vld-mark {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--accent-1) 58%);
	color: inherit;
	padding: 0 0.05em;
}

/* Small mono label above a section heading. */
.vld-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 0.5rem;
}

.vld-stats strong {
	display: block;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(1.3rem, 5vw, 1.75rem);
	white-space: nowrap;
	line-height: 1;
}
.vld-stats p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

/* A card on paper. A class rather than block settings: a column's border and
   padding settings do not reach the post-template group inside a Query Loop,
   and one rule keeps every card the same. */
.vld-card {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
}
.wp-block-post .vld-card {
	height: 100%;
}
.vld-card--soon {
	border-style: dashed;
}

/* A list without bullets: no list block setting removes the markers. */
.vld-plain-list {
	list-style: none;
}
.vld-tag {
	display: inline-block;
	background: var(--wp--preset--color--accent-2);
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Lead-magnet signup. It posts to admin-post.php (mu-plugins/vld-mailing.php), so it is a core/html block and
   no block setting styles it. It sits on the ink section. */
.vld-signup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}
.vld-signup input[type="email"] {
	flex: 1 1 16rem;
	max-width: 24rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 6px;
	background: #2a2723;
	color: var(--wp--preset--color--base);
	font: inherit;
}
.vld-signup button {
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vld-signup button:hover,
.vld-signup button:focus-visible {
	filter: brightness(0.92);
}


/* The header menu sits at the right on desktop; the open mobile overlay stacks
   links and buttons down its left edge instead, where core would split them
   (links follow the menu's justification, buttons do not). */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-right {
	--navigation-layout-justification-setting: flex-start;
}

/* The footer is ink and the section above it often is too; the root block gap
   would show a strip of paper between them. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Tutor LMS. Its stylesheets read these variables: the older --tutor-* set on
   the course pages, and Tutor 4's surface/border tokens on the dashboard, login
   and learning screens. Tutor declares the tokens on :root, so setting them on
   body wins; functions.php keeps Tutor on its light theme. Button colours come
   from the brand_color option in provision.sh. */
body {
	--tutor-font-family-body: var(--wp--preset--font-family--be-vietnam-pro);
	--tutor-font-family-heading: var(--wp--preset--font-family--newsreader);
	--tutor-border-color: var(--wp--preset--color--accent-6);
	--tutor-body-color: var(--wp--preset--color--contrast);
	--tutor-text-primary: var(--wp--preset--color--contrast);
	--tutor-text-secondary: var(--wp--preset--color--accent-4);
	--tutor-surface-base: var(--wp--preset--color--base);
	--tutor-surface-sidebar-l1: var(--wp--preset--color--base);
	--tutor-surface-l1: var(--wp--preset--color--accent-5);
	--tutor-surface-l1-hover: var(--wp--preset--color--base);
	--tutor-surface-l2: var(--wp--preset--color--accent-6);
	--tutor-surface-l3: var(--wp--preset--color--base);
	--tutor-border-idle: var(--wp--preset--color--accent-6);
	--tutor-border-idle2: var(--wp--preset--color--accent-6);
	--tutor-border-tertiary: var(--wp--preset--color--accent-6);
}

/* Every Tutor box is a card on paper, like the homepage's. */
.tutor-course-card,
.tutor-sidebar-card,
.tutor-sidebar-card .tutor-card-body,
.tutor-single-course-sidebar-more,
.tutor-accordion-item,
.tutor-accordion-item-header,
.tutor-checkout-details,
.tutor-order-status-wrapper,
.tutor-page-wrap .tutor-card {
	background: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--accent-6);
	border-radius: 10px;
}
/* Surfaces inside those cards that Tutor paints grey or white directly. */
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body,
.tutor-course-details-page .tutor-course-details-widget,
.tutor-accordion-item-header.is-active,
.tutor-course-content-list-item,
.tutor-modal-content-white {
	background: var(--wp--preset--color--accent-5);
}
.tutor-form-control,
#tutor-login-form input.tutor-form-control,
#tutor-login-form input.tutor-form-control:placeholder-shown:not(:focus) {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-6);
}
/* The course-info list under the price is empty unless the course sets a
   duration or level; its empty footer would be a blank strip. */
.tutor-sidebar-card .tutor-card-footer:not(:has(li)) {
	display: none;
}

/* /khoa-hoc/ */
.vld-archive-head {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}
.vld-archive-head h1 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.5rem;
}
.vld-archive-head p:last-child {
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}
/* One instructor: the avatar and "Bởi admin" row says nothing. */
.tutor-course-card .tutor-meta:has(.tutor-avatar) {
	display: none;
}
.tutor-course-card .tutor-course-name a {
	text-decoration: none;
}

/* Course page. With four courses, categories carry no information, and
   wishlist and share are off, so the row above the image is empty. */
.tutor-course-details-top {
	display: none;
}
.tutor-course-sidebar-card-pricing .tutor-fs-4 {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 2rem;
}
.tutor-accordion-item-header {
	font-family: var(--wp--preset--font-family--newsreader);
}
@media (min-width: 1200px) {
	.tutor-single-course-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	}
}
/* Below Tutor's xl breakpoint the two columns stack. Unwrapping the columns lets
   the price box sit right under the image instead of after the whole
   description. */
@media (max-width: 1199.98px) {
	.tutor-course-details-page .tutor-row.tutor-gx-xl-5 {
		display: flex;
		flex-direction: column;
		margin: 0;
	}
	.tutor-course-details-page .tutor-row.tutor-gx-xl-5 > main,
	.tutor-course-details-page .tutor-row.tutor-gx-xl-5 > aside,
	.tutor-single-course-sidebar {
		display: contents;
	}
	.tutor-course-details-page .tutor-course-thumbnail {
		order: 1;
	}
	.tutor-course-details-page .tutor-sidebar-card {
		order: 2;
		margin-top: var(--wp--preset--spacing--40);
	}
	.tutor-course-details-page .tutor-course-details-tab {
		order: 3;
	}
	.tutor-course-details-page .tutor-single-course-sidebar-more {
		order: 4;
	}
}

/* Checkout: one column, summary first. */
.tutor-checkout-page .tutor-row.tutor-g-5 {
	flex-direction: column;
	max-width: 40rem;
	margin-inline: auto;
}
.tutor-checkout-page .tutor-row.tutor-g-5 > .tutor-col-md-6 {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
}

.tutor-checkout-page .tutor-checkout-details .tutor-checkout-details-inner,
.tutor-checkout-payment-options,
.tutor-checkout-page .tutor-payment-instructions {
	background: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--accent-6);
}
.tutor-checkout-payment-options .tutor-checkout-payment-item.active {
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}
/* The address fields are gone (functions.php), so the phone gets the whole row. */
.tutor-checkout-billing [class*="tutor-col"]:has([name=billing_phone]) {
	flex: 0 0 100%;
	max-width: 100%;
}

/* The empty cart's fixed-width button and illustration are wider than a phone. */
.tutor-cart-page .tutor-cart-empty-state a {
	width: 100%;
	max-width: 280px;
}
.tutor-cart-page .tutor-cart-empty-state img {
	max-width: 100%;
	height: auto;
}

/* The transfer details the payment mu-plugin adds under the order message. */
.vld-transfer {
	margin-top: 1.5rem;
	text-align: left;
}
.vld-transfer img {
	display: block;
	width: 240px;
	max-width: 100%;
	margin: 0 auto 1rem;
	border: 1px solid var(--wp--preset--color--accent-6);
}
.vld-transfer p {
	margin: 0.25rem 0;
}