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

@import url('https://fonts.googleapis.com/css2?family=Work+Sans: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: 'Work Sans', 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: 'Pinyon Script', cursive;
}

/* Hero subtitle stays in the clean sans, not script. */
.h1 span,
blockquote cite {
	font-family: 'Work Sans', sans-serif !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); }

/* 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: transparent;
	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: 'Work Sans', 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)
   ============================================================ */

/* On inner pages the site header is a solid brown bar (not a transparent overlay).
   Scoped to header.fixed so it never touches page-title <header> elements. */
body.silom-inner header.fixed {
	position: relative !important;
	top: 0 !important;
	background-color: #504037 !important;
}
body.silom-inner.admin-bar header.fixed { top: 0 !important; }

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

/* Mobile: extra space between the brown header bar and the first page title. */
@media (max-width: 1023px) {
	body.silom-inner:not(.page-promociones) .silom-inner-main:not(.silom-promo) {
		padding-top: 30px;
	}
}

.silom-page-title {
	font-family: 'Work Sans', 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 0; 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: 'Work Sans', 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: 'Work Sans', 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;
	}
}