/*
Theme Name:     Save a Playa Blocks
Theme URI:      https://saveaplaya.co/
Description:    Standalone block theme (Full-Site Editing) for the Save a Playa store. Faithful modernization of the legacy Divi build: teal ocean palette, script logo, ticker bar, video hero and yellow pill CTAs. Fonts bundled: Sofia Sans and Instrument Serif (SIL OFL, substitutes for the commercial Sofia Pro and Perfectly Nineties), Gravitas One (SIL OFL).
Author:         Save a Playa
Version:        1.0.0
Requires at least: 6.5
Tested up to:   7.0
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:    saveaplaya-blocks
*/

/* ==========================================================================
   Ticker (free-shipping marquee)
   ========================================================================== */
.sap-ticker {
	overflow: hidden;
}
.sap-ticker .sap-marquee {
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
}
.sap-ticker .sap-marquee span {
	text-transform: uppercase;
	white-space: nowrap;
	will-change: transform;
	animation: sap-marquee 20s linear infinite;
	font-family: var(--wp--preset--font-family--ticker), Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	margin-right: 30px;
}
.sap-ticker .sap-marquee span a {
	color: #fff;
}
@keyframes sap-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(calc(-100% - 30px)); }
}
@media (prefers-reduced-motion: reduce) {
	.sap-ticker .sap-marquee span { animation: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.sap-header-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--forest);
}

/* ==========================================================================
   Video hero
   ========================================================================== */
.sap-hero {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: var(--sap-hero-poster);
	min-height: min(100vh, 900px);
	display: grid;
	align-content: center;
}
.sap-hero > video.sap-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important; /* the constrained layout clamps direct children */
	margin: 0 !important;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
	will-change: opacity;
}
.sap-hero > video.sap-hero-video.is-playing {
	opacity: 1;
}
.sap-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2);
	z-index: 2;
	pointer-events: none;
}
.sap-hero > *:not(video) {
	position: relative;
	z-index: 3;
}
.sap-hero-logo {
	width: min(640px, 80vw);
	margin-left: auto;
	margin-right: auto;
}
.sap-hero-logo svg {
	width: 100%;
	height: auto;
	display: block;
}
.sap-hero-logo .st0,
.sap-hero-logo .st1 { fill: #fff; }
.sap-hero-logo .st2 { font-family: sans-serif; font-weight: bold; }
.sap-hero-logo .st3 { font-size: 16px; }
.sap-hero-logo .st4 { font-family: Arial, sans-serif; }
.sap-hero-logo .st5 { font-size: 10px; }

/* Legacy logo wrapper used inside converted landing-page content */
.saveaplaya-logo-container {
	width: min(640px, 80vw);
	margin: 0 auto 20px;
}
.saveaplaya-logo-container svg { width: 100%; height: auto; display: block; }
.saveaplaya-logo-container .st0,
.saveaplaya-logo-container .st1 { fill: #fff; }
.saveaplaya-logo-container .st2 { font-family: sans-serif; font-weight: bold; }
.saveaplaya-logo-container .st3 { font-size: 16px; }
.saveaplaya-logo-container .st4 { font-family: Arial, sans-serif; }
.saveaplaya-logo-container .st5 { font-size: 10px; }
@media (max-width: 767px) {
	.saveaplaya-logo-container { width: min(322px, 85vw); }
}
@media (max-width: 767px) {
	.sap-hero-logo { width: min(322px, 85vw); }
}

/* Responsive banner GIF pairs (legacy desktop/mobile variants) */
@media (max-width: 767px) {
	.sap-show-desktop { display: none !important; }
}
@media (min-width: 768px) {
	.sap-show-mobile { display: none !important; }
}

/* ==========================================================================
   Legacy CTA button + wrapper (ported from RandomVideoHeaderCSS snippet;
   markup inside converted page content still uses these classes)
   ========================================================================== */
.sap-cta-wrapper {
	display: block !important;
	width: 100%;
	text-align: center !important;
}
.sap-hero-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans), sans-serif;
	font-weight: bold;
	box-shadow: 2px 2px 2px #000;
	background-color: #f1d27a;
	color: #000;
	border-radius: 50px;
	padding: 10px 20px;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
}
@media only screen and (max-width: 767px) {
	.sap-hero-btn { font-size: 16px; }
}

/* ==========================================================================
   Testimonial strips (.dp-carousel is initialized by assets/js/carousels.js)
   ========================================================================== */
.dp-carousel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ==========================================================================
   Buttons — yellow pill CTA is the default (legacy .sap-hero-btn look)
   ========================================================================== */
.wp-block-button__link {
	box-shadow: 2px 2px 2px #000;
	transition: filter .2s ease;
}
.wp-block-button__link:hover {
	filter: brightness(1.05);
}
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	box-shadow: none;
}

/* ==========================================================================
   FAQ (details blocks)
   ========================================================================== */
.sap-faq details {
	border-bottom: 1px solid rgba(34, 59, 53, .15);
	padding: .5em 0;
}
.sap-faq summary {
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   Contact form (replaces the legacy Divi contact module)
   ========================================================================== */
.sap-contact-form input[type="text"],
.sap-contact-form input[type="email"],
.sap-contact-form input[type="tel"],
.sap-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: #fff;
	color: #1a1a1a;
	font: inherit;
	font-weight: 700;
	border-radius: 4px;
}
.sap-contact-form label { font-weight: 700; }
.sap-contact-form button.sap-hero-btn { border: 0; cursor: pointer; }
.sap-form-status { font-weight: 700; padding: 10px 14px; border-radius: 6px; }
.sap-form-ok { background: #e7f6ec; color: #1a5632; }
.sap-form-error { background: #fdecea; color: #8a1f11; }

/* ==========================================================================
   Checkout (ported classic override)
   ========================================================================== */
.sap-checkout-section { padding: 2rem 0; }
.sap-checkout-row {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin: 0 auto 2rem;
	padding: 0 5%;
}

/* ==========================================================================
   Free-shipping badge on product-grid images (ported from the
   envio_gratis_icon snippet, retargeted from the old diwe grid)
   ========================================================================== */
ul.products li.product a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
}
ul.products li.product a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 90px;
	height: 48px;
	background-image: url("/wp-content/uploads/2025/12/EnvioGratisIcon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 10;
	pointer-events: none;
}

/* ==========================================================================
   Misc
   ========================================================================== */
.sap-social-icons a { text-decoration: none; }

/* ==========================================================================
   Responsive visibility (ports Divi's per-module disabled_on flags)
   ========================================================================== */
@media (max-width: 767px)  { .sap-hide-phone   { display: none !important; } }
@media (min-width: 768px) and (max-width: 980px) { .sap-hide-tablet { display: none !important; } }
@media (min-width: 981px)  { .sap-hide-desktop { display: none !important; } }

/* ==========================================================================
   Click-to-load video facade (replaces the divi-nitro deferred-YouTube module).
   Nothing is requested from YouTube until the visitor presses play.
   ========================================================================== */
.sap-video { position: relative; width: 100%; }
.sap-video-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	position: relative;
	line-height: 0;
	border-radius: 8px;
	overflow: hidden;
}
.sap-video-btn img { width: 100%; height: auto; display: block; }
.sap-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	transition: background 0.2s ease;
}
.sap-video-play::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-42%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
}
.sap-video-btn:hover .sap-video-play,
.sap-video-btn:focus-visible .sap-video-play { background: var(--wp--preset--color--accent-blue, #53abbc); }
.sap-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: 8px; }

/* ==========================================================================
   Landing-page cards (the four cross-sell covers at the foot of the homepage)
   ========================================================================== */
.sap-landing-card { align-items: flex-end; }
.sap-landing-card .sap-card-subhead {
	font-size: clamp(1.8rem, 4vw, 3.125rem);
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.sap-landing-card .wp-block-cover__inner-container { padding-bottom: 12px; }

/* ==========================================================================
   Blog grid (replaces the Divi blog module on /blog/)
   ========================================================================== */
.sap-blog-grid .wp-block-post-title { margin: 0.6em 0 0.2em; }
.sap-blog-grid .wp-block-post-date { opacity: 0.6; }

/* ==========================================================================
   Legacy font-family aliases.

   The site's long-standing CSS snippets (LegacyCSS, landings_css_priority, …)
   ask for "sofiapro" / "perfectlynineties" / "OpenSans-*" / "Baloo-*". Those
   used to be commercial webfonts served out of the retired Divi-child theme.
   The names are kept so that existing snippet CSS keeps working, but they now
   resolve to this theme's own bundled, openly licensed substitutes — which is
   what makes the theme self-contained.

     sofiapro          -> Sofia Sans      (SIL OFL)
     perfectlynineties -> Instrument Serif (SIL OFL)
   ========================================================================== */
@font-face {
	font-family: "sofiapro";
	src: url("assets/fonts/sofiasans-normal-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
}
@font-face {
	font-family: "sofiapro";
	src: url("assets/fonts/sofiasans-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
}
@font-face {
	font-family: "perfectlynineties";
	src: url("assets/fonts/instrumentserif-normal-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: "perfectlynineties";
	src: url("assets/fonts/instrumentserif-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: "OpenSans-Regular";
	src: url("assets/fonts/sofiasans-normal-latin.woff2") format("woff2");
	font-weight: 100 1000;
	font-display: swap;
}
@font-face {
	font-family: "OpenSans-Bold";
	src: url("assets/fonts/sofiasans-normal-latin.woff2") format("woff2");
	font-weight: 700 1000;
	font-display: swap;
}
@font-face {
	font-family: "Baloo-Regular";
	src: url("assets/fonts/instrumentserif-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
}

/* ==========================================================================
   Section background images and heights.

   Divi stored these per breakpoint on the section itself. Block markup has no
   media queries, so the converted sections publish them as custom properties
   and these two rules do the responsive work.
   ========================================================================== */
.sap-bg {
	background-image: var(--sap-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sap-minh { min-height: var(--sap-minh); }

@media (max-width: 980px) {
	.sap-minh { min-height: var(--sap-minh-tablet, var(--sap-minh)); }
}
@media (max-width: 767px) {
	.sap-bg   { background-image: var(--sap-bg-phone, var(--sap-bg)); }
	.sap-minh { min-height: var(--sap-minh-phone, var(--sap-minh-tablet, var(--sap-minh))); }
}

/* An image-backed landing header centres its logo/copy like the video hero. */
.landing_image_header.sap-minh {
	display: grid;
	align-content: center;
}

/* ==========================================================================
   Product grid.

   The legacy Divi shop module was styled by the LegacyCSS snippet through
   "#home-section5 .et_pb_shop li.product". The grid is now WooCommerce's own
   [products] output, so the base card look is carried here instead.

   Specificity is deliberately kept low (no id): the site's newer snippets
   ("el_mas_comprado", "llevalo_a_tu_carrito") target ul.products li.product
   with :has() and must keep winning for the highlighted favourite card.
   ========================================================================== */
.woocommerce ul.products li.product,
ul.products li.product {
	background: #fff;
	padding: 25px;
	border-radius: 5px;
	text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	line-height: 1.35;
}