/* Silom skin overrides: fonts + small fixes layered on top of the mirrored layout.css */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Self-hosted Pinyon Script (replaces Google Fonts + Silom mirror Freebooter Script). */
@font-face {
	font-family: 'Pinyon Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/PinyonScript-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Freebooter Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/PinyonScript-Regular.ttf') format('truetype');
}

body,
button,
input,
select,
textarea,
.text-block,
.menu__list,
.footer__title {
	font-family: 'Raleway', sans-serif;
}

.font-heading,
.font-display,
.h1,
.h1.font-display,
h1.font-display,
.h2.font-display,
.h3.font-display,
.h4.font-display,
h1,
blockquote {
	font-family: 'Cinzel', serif;
}

/* Hero subtitle stays in the clean sans, not script. */
.h1 span,
blockquote cite {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.0rem, 2vw, 1.3rem) !important;
}

/* WordPress admin bar offset so the fixed transparent header isn't hidden. */
body.admin-bar header.fixed {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar header.fixed {
		top: 46px;
	}
}

/* Neutralise the one mirror texture we don't ship (kept subtle/transparent). */
.bg-pattern-horizontal { background-color: rgb(80 64 55); }
/* Remove the gold zigzag triangle strip at the top of the featured-treatments section */
.bg-pattern-horizontal:before { display: none !important; content: none !important; }

/* Fix flower backgrounds: layout.css points the image at a .webp that we don't ship
   (its url() override would 404 and hide the pattern). Force our generated .jpg and
   make the pattern clearly visible. */
.bg-flowers--yellow:before {
	background-image: url('/wp-content/plugins/chiangmai-silom-skin/assets/mirror/images/backgrounds/bg-treatments.jpg') !important;
	opacity: .6 !important;
}
.bg-flowers-secondary--yellow:after {
	background-image: url('/wp-content/plugins/chiangmai-silom-skin/assets/mirror/images/backgrounds/bg-about-home.jpg') !important;
	opacity: .5 !important;
}

/* Header contacts + language switch: silom's Tailwind build only ships xl: variants,
   so we drive the lg breakpoint ourselves (numbers in the header from 1024px, a bottom
   bar below that). */
/* PC / desktop (>=1024px): language switch + contact numbers live in the header. */
@media (min-width: 1024px) {
	[data-desktop="nav-right"] #language-nav { display: block !important; visibility: visible !important; }
	#cmHeaderContacts,
	#cmHeaderContacts * { visibility: visible !important; }
	#cmHeaderContacts { display: flex !important; }
	#cmHeaderContacts a { white-space: nowrap; flex-shrink: 0; }
	#cmHeaderContacts a.button-ghost { padding-left: 1rem; padding-right: 1rem; }
	#whatsappContactButton { display: none !important; }
}
/* Tablet (768-1023px): floating bottom-right bar WITH numbers. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	#cmHeaderContacts { display: none !important; }
	#whatsappContactButton { display: flex !important; }
	#whatsappContactButton .cm-bottom-num { display: inline !important; }
}
/* Mobile (<768px): floating bottom-right bar, icons only. */
@media (max-width: 767.98px) {
	#cmHeaderContacts { display: none !important; }
	#whatsappContactButton { display: flex !important; }
	#whatsappContactButton .cm-bottom-num { display: none !important; }
}

/* Footer location maps: two illustrated maps, transparent, with a small gap,
   centred in the column and nudged up to align with the other footer columns. */
.cm-centros { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: -14px auto 0; max-width: 250px; }
.cm-centro { display: block; text-decoration: none; line-height: 0; width: 100%; }
.cm-centro__map {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: rgba(80, 64, 55, .82);
	border: 0;
	transition: opacity .2s ease;
}
.cm-centro:hover .cm-centro__map { opacity: .9; }

/* Treatments category cards: readable centered label on a solid brown plate. */
.silom-treatment-card__label {
	font-family: 'Raleway', sans-serif;
	font-size: 1.2rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .01em;
	display: inline-block;
	background: rgba(80, 64, 55, .82);

	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	max-width: 86%;
	box-shadow: 0 10px 24px -14px rgba(0,0,0,.6);
}
.silom-treatment-card { min-height: 220px; }
.silom-treatment-card__veil { background: rgba(74,59,50,.42); transition: background .5s ease; }
.silom-treatment-card:hover .silom-treatment-card__veil { background: rgba(74,59,50,.18); }

/* Make sure the self-contained front page has no stray parent margins. */
#generalCont { overflow-x: hidden; }

/* Hide leftover Soledad/Elementor chrome injected after our self-contained markup. */
body.silom-front #close-sidebar-nav,
body.silom-front #sidebar-nav,
body.silom-front #sidebar-sidebar-cart,
body.silom-front .penci-sidebar-cart-close,
body.silom-front .penci-canvas-menu,
body.silom-front .gtranslate_wrapper {
	display: none !important;
}

/* ============================================================
   Universal inner pages (legal, gallery, blog, single posts)
   ============================================================ */

/* Inner pages keep their native fixed + transparent header that turns solid
   white on scroll (driven by the global .header--fixed scroll script), exactly
   like the home page. Product pages already use this same native behaviour, so
   no header override is needed for them here. */

/* Push inner-page content below the now-fixed header so the page title is not
   hidden underneath it. The Promociones hero (.silom-promo) is meant to sit
   behind a transparent header like the home page, so it is skipped. */
body.silom-inner:not(.silom-pdp-page) .silom-inner-main:not(.silom-promo) {
	padding-top: 5rem;
}
@media (min-width: 768px) {
	body.silom-inner:not(.silom-pdp-page) .silom-inner-main:not(.silom-promo) {
		padding-top: 6rem;
	}
}
@media (min-width: 1024px) {
	body.silom-inner:not(.silom-pdp-page) .silom-inner-main:not(.silom-promo) {
		padding-top: 8rem;
	}
}

/* Transparent (top-of-page) state keeps the theme default GOLD menu text and
   buttons, matching the home page. Brown was too low-contrast over the dark
   hero images, so no colour override is applied — gold is the default in both
   the transparent and the scrolled-white states. */

.silom-inner-main {
	background-color: #f6efdd;
	min-height: 60vh;
}

.silom-page-title {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	letter-spacing: .04em;
	font-size: clamp(2rem, 5vw, 2.9rem);
	color: #504037;
	margin: 0;
}
.silom-page-rule { display: block; width: 54px; height: 3px; margin: 18px auto 2rem; background: #c8b783; border-radius: 2px; }
.silom-page-intro { color: #6b5a4c; font-size: 1.05rem; line-height: 1.7; margin-top: 1.4rem; }

/* Legal / article typography (restores readable text after the Tailwind reset). */
.silom-legal { color: #4a3b32; font-size: 1rem; line-height: 1.85; }
.silom-legal h1, .silom-legal h2, .silom-legal h3 { color: #504037; font-weight: 700; line-height: 1.3; margin: 1.8em 0 .55em; }
.silom-legal h2 { font-size: 1.5rem; }
.silom-legal h3 { font-size: 1.2rem; }
.silom-legal h4, .silom-legal h5 { color: #9c7b4f; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; margin: 1.9em 0 .5em; }
.silom-legal p { margin: 0 0 1.1em; }
.silom-legal a { color: #b8893f; text-decoration: underline; }
.silom-legal ul, .silom-legal ol { margin: 0 0 1.2em 1.4em; padding: 0; }
.silom-legal ul { list-style: disc; }
.silom-legal ol { list-style: decimal; }
.silom-legal li { margin: .4em 0; }
.silom-legal strong { color: #504037; }

/* Gallery grid + lightbox thumbnails. */
.silom-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.silom-gallery-item { display: block; position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 1 / 1; box-shadow: 0 6px 18px rgba(80,64,55,.12); }
.silom-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.silom-gallery-item:hover img { transform: scale(1.07); }
@media (max-width: 1024px) { .silom-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .silom-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Blog cards. */
.silom-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1024px) { .silom-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .silom-blog-grid { grid-template-columns: 1fr; } }
.silom-blog-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(80,64,55,.12); display: flex; flex-direction: column; }
.silom-blog-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.silom-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.silom-blog-card:hover .silom-blog-card__media img { transform: scale(1.06); }
.silom-blog-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.silom-blog-card__title { font-size: 1.15rem; line-height: 1.35; margin: 0 0 .6rem; }
.silom-blog-card__title a { color: #504037; text-decoration: none; }
.silom-blog-card__title a:hover { color: #b8893f; }
.silom-blog-card__excerpt { color: #6b5a4c; font-size: .95rem; line-height: 1.6; margin: 0 0 1.2rem; flex: 1; }
.silom-blog-card__btn { align-self: flex-start; }

.silom-single-media { border-radius: 14px; overflow: hidden; margin-bottom: 2.5rem; }
.silom-single-media img { width: 100%; height: auto; display: block; }

/* Pagination. */
.silom-pagination { margin-top: 3rem; text-align: center; }
.silom-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 4px; border-radius: 999px; border: 1px solid rgba(200,183,131,.6); color: #504037; text-decoration: none; }
.silom-pagination .page-numbers.current { background: #504037; color: #f6f1e1; border-color: #504037; }
.silom-pagination .page-numbers:hover { background: #c8b783; color: #fff; }

/* Hero CTA spacing: guarantee a clear gap between the two buttons even when
   the silom Tailwind build hasn't compiled the gap-* utilities. */
.cm-hero-cta { gap: 2.5rem !important; }
.cm-hero-cta > a { margin: 0 !important; }
@media (max-width: 575.98px) {
	.cm-hero-cta { gap: 1.25rem !important; }
}

/* Hero promo button overrides (lock colors so hover doesn't switch to purple) */
.button-promo, .button-promo:hover, .button-promo:focus {
	background-color: #f6ede1 !important;
	border-color: #f6ede1 !important;
	color: #504037 !important;
}

/* ============================================================
   Header nav on shop/category/product pages — match homepage
   (parent WooCommerce CSS can load on inner pages and inflate
   menu / dropdown typography vs the self-contained front page).
   ============================================================ */
body.silom-inner header.fixed .menu__item > a,
body.silom-inner header.fixed .menu__item > span,
body.silom-pdp-page header.fixed .menu__item > a,
body.silom-pdp-page header.fixed .menu__item > span {
	font-family: 'Raleway', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.75 !important;
	font-weight: 400 !important;
}

body.silom-inner header.fixed .menu__item.dropdown .dropdown__menu li a,
body.silom-inner header.fixed .menu__item.dropdown .dropdown__menu li a span,
body.silom-pdp-page header.fixed .menu__item.dropdown .dropdown__menu li a,
body.silom-pdp-page header.fixed .menu__item.dropdown .dropdown__menu li a span {
	font-family: 'Raleway', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}

@media (min-width: 1024px) {
	body.silom-inner header.fixed .menu__item > a,
	body.silom-inner header.fixed .menu__item > span,
	body.silom-pdp-page header.fixed .menu__item > a,
	body.silom-pdp-page header.fixed .menu__item > span {
		padding: 0.75rem 0 !important;
	}

	body.silom-inner header.fixed .menu__item.dropdown .dropdown__menu li a,
	body.silom-pdp-page header.fixed .menu__item.dropdown .dropdown__menu li a {
		padding: 0.75rem 1.25rem !important;
	}
}

@media (max-width: 1023.98px) {
	body.silom-inner header.fixed .menu__item > a,
	body.silom-inner header.fixed .menu__item > span,
	body.silom-pdp-page header.fixed .menu__item > a,
	body.silom-pdp-page header.fixed .menu__item > span {
		padding: 0.75rem 1.5rem !important;
	}

	body.silom-inner header.fixed .menu__item.dropdown .dropdown__menu li a,
	body.silom-pdp-page header.fixed .menu__item.dropdown .dropdown__menu li a {
		padding: 0.625rem 1.25rem !important;
	}
}

/* Remove brown square behind treatments grid */
.section-treatments span[aria-hidden="true"] {
	background: transparent !important;
	display: none !important;
}


/* ----------------------------------------------------------------
   Homepage quote ("section-treatments"): remove the beige box for a clean
   background, and show the phrase in dark brown in an easy-to-read font
   instead of the script style.
   ---------------------------------------------------------------- */
.section-treatments .bg-secondary-500 {
	background-color: transparent !important;
}
.section-treatments blockquote {
	color: #504037 !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}
.section-treatments .max-w-xl {
	max-width: 60rem !important;
}
.section-treatments blockquote cite {
	color: #504037 !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
}
.section-treatments blockquote:before {
	display: none !important;
	content: none !important;
}


/* ----------------------------------------------------------------
   Homepage decorative icons -> lotus flower.
   Brown lotus on the light/cream sections, gold lotus on the dark
   "Tratamientos destacados" section, for good contrast.
   ---------------------------------------------------------------- */
body.silom-front h2.detailed--dark:before,
body.silom-front .h2.detailed--dark:before {
	background-image: url("img/silom-icon-lotus-brown.png") !important;
	width: 14rem !important;
	height: 9.5rem !important;
}
body.silom-front h2.detailed--light:before,
body.silom-front .h2.detailed--light:before {
	background-image: url("img/silom-icon-lotus.png") !important;
	width: 14rem !important;
	height: 9.5rem !important;
}


/* === Client font lock: Cinzel titles + Raleway text === */
.cmcn-locinfo-title { font-family: 'Cinzel', serif; }
.cmcn-locinfo-content,
.cmcn-locinfo-content p,
.cmcn-locinfo-content a { font-family: 'Raleway', sans-serif; }
.silom-legal h1,
.silom-legal h2,
.silom-legal h3,
.silom-legal h4,
.silom-legal h5 { font-family: 'Cinzel', serif; }
.silom-legal,
.silom-legal p,
.silom-legal li,
.silom-legal a,
.silom-legal strong { font-family: 'Raleway', sans-serif; }

/* ============================================================
   Fixed/sticky header background (client request 2026-06).
   Replaces the white Silom "franja blanca" that stays fixed on
   scroll with the brand brown. Only the scrolled (.header--fixed)
   state changes; the header stays transparent at the top of the
   page so the hero shows through. Nav links / icons / contacts are
   forced to light cream so they stay legible on the brown bar.
   ============================================================ */
header.header--fixed {
	background-color: #504037 !important;
}
header.header--fixed .menu__item > a,
header.header--fixed .menu__item > span,
header.header--fixed #cmHeaderContacts,
header.header--fixed #cmHeaderContacts *,
header.header--fixed .lang__link {
	color: #f1ecd1 !important;
}
header.header--fixed .menu-toggle__item {
	background-color: #f1ecd1 !important;
}
header.header--fixed .icon,
header.header--fixed svg {
	color: #f1ecd1 !important;
}

/* ============================================================
   GTranslate: the header ES / CA / EN switcher drives translation
   (silom_gtranslate_bootstrap sets the googtrans cookie + reloads).
   Hide the GTranslate plugin's own widget everywhere, and suppress
   Google's injected top banner / body shift on translated pages.
   ============================================================ */
.gtranslate_wrapper,
.gt_float_switcher,
.gt_switcher_wrapper,
#gt-wrapper,
#cm-gt-hidden {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}
.goog-te-banner-frame,
.skiptranslate {
	display: none !important;
}
body {
	top: 0 !important;
}


/* =========================================================================
   Client request (PDF 2026-06-22)
   ========================================================================= */

/* Remove the decorative lotus flowers above the homepage section titles
   ("Experiencia" / "Tratamientos destacados") and above treatment cards. */
body.silom-front h2.detailed:before,
body.silom-front .h2.detailed:before {
	display: none !important;
}

/* ---- Homepage FAQ accordion (brown section) ---- */
.silom-faqs {
	background: #504037;
	padding: 64px 0 72px;
}
.silom-faqs__title {
	color: #f1ecd1;
	text-align: center;
	margin: 0 0 36px;
}
.silom-faqs__list {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	align-items: start;
}
.silom-faq {
	margin-bottom: 0;
}
/* Client request 2026-06-23: let the last FAQ span the full width of the
   two-column grid so the odd bottom item stays balanced. */
.silom-faqs__list .silom-faq:last-child {
	grid-column: 1 / -1;
}
@media (max-width: 768px) {
	.silom-faqs__list { grid-template-columns: 1fr; }
}
.silom-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	background: #f1ecd1;
	color: #504037;
	border-radius: 999px;
	padding: 17px 28px;
	font-weight: 600;
	line-height: 1.35;
	transition: background .25s ease, color .25s ease, border-radius .25s ease;
}
.silom-faq__q::-webkit-details-marker { display: none; }
.silom-faq__q:hover { background: #e7dfba; }
.silom-faq[open] > .silom-faq__q {
	background: #c8b783;
	color: #ffffff;
	border-radius: 22px;
}
.silom-faq__ic {
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
	font-weight: 400;
}
.silom-faq__ic::after { content: "+"; }
.silom-faq[open] > .silom-faq__q .silom-faq__ic::after { content: "\00d7"; }
.silom-faq__a {
	color: #f1ecd1;
	padding: 16px 30px 8px;
	line-height: 1.6;
}
.silom-faq__a p { margin: 0 0 10px; }
.silom-faq__a a { color: #c8b783; text-decoration: underline; }
@media (max-width: 640px) {
	.silom-faq__q { padding: 15px 20px; border-radius: 22px; }
}

/* ============================================================
   Client request 2026-06-23: drop the granate/purple hover on
   the header CTA buttons — keep them entirely in the gold family.
   ============================================================ */
.button-ghost:hover,
.button-ghost:focus,
.button-ghost--white:hover,
.button-ghost--white:focus {
	background-color: #c8b783 !important;
	border-color: #c8b783 !important;
	color: #ffffff !important;
}
.button-primary:hover,
.button-primary:focus,
.button-primary--white:hover,
.button-primary--white:focus,
.button-primary--soft:hover,
.button-primary--soft:focus {
	background-color: #b8893f !important;
	border-color: #b8893f !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   Mobile menu legibility: the slide-in panel is white but the
   nav links inherit the gold meant for the transparent desktop
   header, so they were nearly invisible. Darken top-level links
   and the open (X) toggle below the lg breakpoint.
   ------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	#mainMenu .menu__list > .menu__item > a,
	#mainMenu .menu__list > .menu__item > span {
		color: #504037 !important;
	}
	#mainMenu .menu__list > .menu__item > a:hover,
	#mainMenu .menu__list > .menu__item > span:hover {
		color: #b8893f !important;
	}
	#mainMenu .menu__item.dropdown .icon svg path {
		stroke: #504037 !important;
	}
	.menu-toggle.open .menu-toggle__item {
		background-color: #504037 !important;
	}
}

/* ------------------------------------------------------------
   Client request 2026-06-27: remove the purple/maroon line under
   the "Ven a disfrutar" visit band on the single product pages.
   The line came from .silom-visit2__card { border-bottom: 10px solid #8a3a57 }
   in silom-shop.css. Neutralize it here.
   ------------------------------------------------------------ */
.silom-pdp-page .silom-visit2__card {
	border-bottom: 0 !important;
}