/* Design tokens come from theme.json. This file holds layout and shared components. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--wp--preset--color--surface);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.wrap {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(var(--wp--preset--spacing--20), 4vw, var(--wp--preset--spacing--40));
}

.site-main > .wrap,
.site-main > section {
	margin-block: clamp(var(--wp--preset--spacing--40), 5vw, var(--wp--preset--spacing--50));
}

.icon {
	flex: none;
	display: block;
}

/* Accessibility */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--10);
	inset-inline-start: var(--wp--preset--spacing--10);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	clip-path: none;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.button--primary {
	background: var(--wp--preset--color--primary);
}

.button--outline {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}

.button--outline:hover {
	border-color: var(--wp--preset--color--accent);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.icon-button {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.icon-button:hover {
	background: var(--wp--preset--color--surface);
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 68px;
}

.site-header__burger {
	display: none;
}

.site-title {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.custom-logo {
	max-height: 40px;
	width: auto;
}

.primary-nav {
	flex: 1;
}

.primary-nav__list {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list a {
	display: block;
	padding-block: 1.4rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}

.site-header__track {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.cart-link__count {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.site-search {
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.search-form {
	display: flex;
	position: relative;
	align-items: center;
	gap: 0.5rem;
}

.search-form__icon {
	position: absolute;
	inset-inline-start: 0.75rem;
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.search-form__input {
	flex: 1;
	padding: 0.75rem 0.75rem 0.75rem 2.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	font: inherit;
}

/* Section headings */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--35);
}

.section-head__title {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-large);
}

.section-head__subtitle {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Cards */

.card,
.guide-card,
.product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

.guide-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
}

.guide-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guide-card__badge {
	position: absolute;
	top: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 12px;
}

.guide-card__play {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	color: var(--wp--preset--color--base);
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.4));
}

.guide-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--35);
}

.guide-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.guide-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.guide-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.guide-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.guide-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.guide-card__save {
	padding: 4px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.guide-card__save[aria-pressed="true"] {
	color: var(--wp--preset--color--accent);
}

/* Accordion */

.accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.accordion__item {
	margin-bottom: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
}

.accordion__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

.accordion__mark {
	color: var(--wp--preset--color--muted);
}

.accordion__label {
	flex: 1;
}

.accordion__chevron {
	color: var(--wp--preset--color--muted);
	transition: rotate 0.15s ease;
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
	rotate: 180deg;
}

.accordion__panel {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/* Footer */

.site-footer {
	margin-top: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--primary);
	color: #dbe4f0;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

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

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
}

.site-footer__title {
	display: block;
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.site-footer__tagline {
	margin: 0.5rem 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.social-list {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-list__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 8px;
}

.site-footer__heading {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.site-footer__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.site-footer__bar {
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__copyright,
.site-footer__note {
	margin: 0;
}

/* WhatsApp button */

.whatsapp-fab {
	display: inline-flex;
	position: fixed;
	bottom: 20px;
	inset-inline-end: 20px;
	z-index: 40;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	background: #25d366;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
	color: #04361a;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}

/* Comments */

.comments {
	margin-top: var(--wp--preset--spacing--40);
}

.comments__list,
.comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments__list .children {
	margin-inline-start: var(--wp--preset--spacing--30);
}

.comments__list .comment-body {
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

.comment-form p {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="tel"],
.comment-form textarea {
	width: 100%;
	max-width: 32rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
}

.comment-form textarea {
	max-width: 100%;
	resize: vertical;
}

.comment-form .required {
	color: #b32d2e;
}

.comment-form .submit {
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	cursor: pointer;
}

@media (max-width: 64em) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 48em) {
	.site-header__burger {
		display: inline-flex;
	}

	.primary-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--wp--preset--spacing--20);
		border-bottom: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--base);
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.primary-nav__list a {
		padding-block: 0.75rem;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.site-header__track {
		display: none;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.whatsapp-fab__label {
		display: none;
	}
}