/*
* demo-restaurant.css - AISLADO para proyecto Muma
* Todas las reglas están scoped bajo html.demo-restaurant para garantizar que:
* - NO afecten a otros proyectos/demos (multi-tenant)
* - Solo apliquen cuando cd-system.theme.demo === 'demo-restaurant'
*
* Brandbook Muma:
* PRIMARY: Helvetica Regular + kerning -70
* SECONDARY: Helvetica Light (body/descriptions)
*/

/* Variables solo cuando demo-restaurant está activo */
/* Fonts vienen del sistema (--font-family-primary/secondary/tertiary) */
/* El proyecto puede overridear via admin > Apariencia > Tipografía */
html.demo-restaurant {
	--font-family: var(--font-family-tertiary, "Open Sans", sans-serif);
	--font-headings: var(--font-family-secondary, "Lexend", sans-serif);
	--muma-kerning-headings: -0.02em;
}

/* Base: body font */
html.demo-restaurant body,
html.demo-restaurant {
	font-family: var(--font-family) !important;
	font-weight: 300;
	line-height: 1.6;
}

/* Títulos: Helvetica Regular + kerning -70 (PRIMARY TYPEFACE) */
html.demo-restaurant h1, html.demo-restaurant h2, html.demo-restaurant h3,
html.demo-restaurant h4, html.demo-restaurant h5, html.demo-restaurant h6,
html.demo-restaurant .h1, html.demo-restaurant .h2, html.demo-restaurant .h3,
html.demo-restaurant .h4, html.demo-restaurant .h5, html.demo-restaurant .h6 {
	font-family: var(--font-headings) !important;
	font-weight: 400;
	letter-spacing: var(--muma-kerning-headings);
	line-height: 1.3;
}

/* Títulos destacados Bold */
html.demo-restaurant h1 strong, html.demo-restaurant h2 strong, html.demo-restaurant h3 strong,
html.demo-restaurant .font-weight-bold,
html.demo-restaurant .font-weight-extra-bold,
html.demo-restaurant strong {
	font-weight: 700 !important;
}

/* Cuerpo y descripciones — solo font-family, NO font-weight
   (el peso lo controla cada componente/sección) */
html.demo-restaurant p, html.demo-restaurant span, html.demo-restaurant div,
html.demo-restaurant li, html.demo-restaurant td, html.demo-restaurant th,
html.demo-restaurant .text, html.demo-restaurant .description, html.demo-restaurant .lead,
html.demo-restaurant a, html.demo-restaurant label, html.demo-restaurant input,
html.demo-restaurant textarea, html.demo-restaurant select, html.demo-restaurant button {
	font-family: var(--font-family) !important;
}

/* Override alternative-font-4: 100% Helvetica (no Poppins) */
html.demo-restaurant .alternative-font-4 {
	font-family: var(--font-headings) !important;
}
html.demo-restaurant h1.alternative-font-4, html.demo-restaurant h2.alternative-font-4,
html.demo-restaurant h3.alternative-font-4, html.demo-restaurant h4.alternative-font-4,
html.demo-restaurant h5.alternative-font-4, html.demo-restaurant h6.alternative-font-4 {
	letter-spacing: var(--muma-kerning-headings);
}

/* custom-secondary-font: items de menú */
html.demo-restaurant .custom-secondary-font {
	font-family: var(--font-headings) !important;
	font-weight: 600;
}

/* Navegación del header — font de headings con bold */
html.demo-restaurant .header-nav-main nav > ul > li > a {
	font-family: var(--font-headings) !important;
	font-weight: 700 !important;
	letter-spacing: var(--muma-kerning-headings);
}

/* Navegación y menús internos */
html.demo-restaurant .menu-item, html.demo-restaurant .menu-link {
	font-family: var(--font-headings) !important;
	letter-spacing: var(--muma-kerning-headings);
}

/* Botones */
html.demo-restaurant .btn, html.demo-restaurant button, html.demo-restaurant .button {
	font-family: var(--font-headings) !important;
}

/* Breadcrumbs, hero labels, page headers */
html.demo-restaurant .custom-font-secondary {
	font-family: var(--font-headings) !important;
	font-weight: 400;
	letter-spacing: var(--muma-kerning-headings);
}

/* Layout y componentes demo-restaurant */
html.demo-restaurant .custom-big-font-size-1 {
	font-size: 56px;
	font-size: 3.5rem;
}

@media (min-width: 576px) {
	html.demo-restaurant .custom-big-font-size-1 {
		font-size: 5.5rem;
	}
}

@media (min-width: 992px) {
	html.demo-restaurant .custom-negative-margin-top-1 {
		margin-top: -360px;
	}
}

@media (max-width: 575px) {
	html.demo-restaurant .pl-xs-1 {
		padding-left: .25rem !important;
	}
}

html.demo-restaurant .custom-border-radius-1 {
	border-radius: 7px !important;
}

html.demo-restaurant .custom-btn-style-1 {
	position: relative;
	border-radius: 7px;
	padding: 10px 20px;
	transition: ease transform 300ms;
}

html.demo-restaurant .custom-btn-style-1 > span {
	position: relative;
	z-index: 1;
}

html.demo-restaurant .custom-btn-style-1:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	opacity: 0.4;
	border-radius: inherit;
	transform: translate3d(5px, 5px, 0);
	transition: ease transform 300ms;
	z-index: 0;
}

html.demo-restaurant .custom-btn-style-1:hover {
	transform: translate3d(2.5px, 2.5px, 0);
}

html.demo-restaurant .custom-btn-style-1:hover:before {
	transform: translate3d(0, 0, 0);
}

html.demo-restaurant .overlay:before {
	background: #2C2C2C;
}

html.demo-restaurant .custom-line {
	width: 50px;
	border-bottom: 2px solid var(--grey-500);
	border-bottom-color: var(--primary);
}

html.demo-restaurant .custom-divider-size-1 {
	height: 3px;
}

/* Header */
html.demo-restaurant #header .header-top,
html.demo-restaurant #header .header-top span,
html.demo-restaurant #header .header-top a {
	font-family: var(--font-headings) !important;
	font-weight: 300;
}

@media (min-width: 992px) {
	html.demo-restaurant #header .header-nav-main nav > ul > li > a {
		font-size: 16px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	html.demo-restaurant #header .header-nav-main nav > ul > li > a {
		font-size: 14px;
	}
}

/* Testimonials */
html.demo-restaurant .custom-testimonial-style-1.testimonial-with-quotes blockquote:before,
html.demo-restaurant .custom-testimonial-style-1.testimonial-with-quotes blockquote:after {
	font-family: var(--font-headings) !important;
	font-weight: 700;
	font-size: 40px;
	font-size: 2.5rem;
	color: #212121;
	top: 10px;
}

html.demo-restaurant .custom-testimonial-style-1.testimonial-with-quotes.custom-testimonial-style-1-quote-big blockquote:before,
html.demo-restaurant .custom-testimonial-style-1.testimonial-with-quotes.custom-testimonial-style-1-quote-big blockquote:after {
	font-size: 64px;
	font-size: 4rem;
	top: -6px;
}

/* Custom Menu Item */
html.demo-restaurant .custom-menu-item .custom-menu-item-details {
	display: flex;
	justify-content: space-between;
	position: relative;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-title {
	position: relative;
	padding-bottom: 10px;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-price {
	position: relative;
	top: -5px;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-price strong {
	font-size: 20.8px;
	font-size: 1.3rem;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-price strong > span {
	font-size: 0.6em;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-line {
	position: absolute;
	width: 100%;
	bottom: 0;
	border-bottom: dashed 1px #777;
}

html.demo-restaurant .custom-menu-item .custom-menu-item-desc {
	position: relative;
	margin-top: 5px;
}

html.demo-restaurant .custom-menu-item + .custom-menu-item {
	margin-top: 25px;
}

/* Blog Post Date */
html.demo-restaurant .custom-date-style-1 {
	position: relative;
	border-radius: 7px;
	transition: ease transform 300ms;
}

html.demo-restaurant .custom-date-style-1:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: inherit;
	opacity: 0.7;
	transform: translate3d(5px, 5px, 0);
	transition: ease transform 300ms;
	z-index: 0;
}

html.demo-restaurant .custom-date-style-1 > span > span {
	font-size: 0.5em;
	letter-spacing: 3px;
}

html.demo-restaurant .custom-link-hover-effects:hover .custom-date-style-1 {
	transform: translate3d(2.5px, 2.5px, 0);
}

html.demo-restaurant .custom-link-hover-effects:hover .custom-date-style-1:before {
	transform: translate3d(0, 0, 0);
}

html.demo-restaurant .breadcrumb > li + li:before {
	opacity: 0.8;
	font-size: 0.8em;
	padding: 0 13px 0 7px;
}

/* Footer */
html.demo-restaurant #footer {
	background: #2c2c2c;
	font-family: var(--font-family) !important;
}

html.demo-restaurant #footer h1, html.demo-restaurant #footer h2,
html.demo-restaurant #footer h3, html.demo-restaurant #footer h4,
html.demo-restaurant #footer h5, html.demo-restaurant #footer h6 {
	font-family: var(--font-headings) !important;
	font-weight: 400;
	letter-spacing: var(--muma-kerning-headings);
}

html.demo-restaurant #footer p, html.demo-restaurant #footer span,
html.demo-restaurant #footer li,
html.demo-restaurant #footer a:not(.btn):not(.no-footer-css) {
	color: #969696;
	font-family: var(--font-family) !important;
	font-weight: 300;
}

html.demo-restaurant #footer .footer-copyright {
	background: #2c2c2c;
}

/* ========================================================
   MODULE THEME OVERRIDES — Light Hospitality Theme
   --------------------------------------------------------
   Módulos compartidos (blog, services, gallery, faqs, etc.)
   usan inline styles con var(--secondary), var(--dark), etc.
   que asumen un tema oscuro.

   skin-restaurant define:
     --secondary: #658D2D (verde) → no sirve como background
     --quaternary: #1E1E1E (casi negro) → muy oscuro para texto muted

   Estas reglas convierten el tema oscuro de módulos a uno
   claro, siguiendo el patrón de demo-construction-2.css.
   ======================================================== */

/* === 1. Section Backgrounds → Blanco ===
   Módulos usan style="background-color: var(--secondary)" */
html.demo-restaurant .main section[style*="--secondary"]:not(.page-header) {
	background-color: #fff !important;
}

/* === 2. Card/Panel Backgrounds → Blanco ===
   Módulos usan style="background-color: var(--dark)" */
html.demo-restaurant .main section div[style*="background-color: var(--dark)"],
html.demo-restaurant .main section aside [style*="background-color: var(--dark)"] {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

/* === 3. Blog/Service/Project cards → Blanco ===  */
html.demo-restaurant .main section[style*="--secondary"] .blog-card,
html.demo-restaurant .main section[style*="--secondary"] .service-card,
html.demo-restaurant .main section[style*="--secondary"] .project-card {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

html.demo-restaurant .main section[style*="--secondary"] .blog-card:hover,
html.demo-restaurant .main section[style*="--secondary"] .service-card:hover,
html.demo-restaurant .main section[style*="--secondary"] .project-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* === 4. Text colors: revertir light→dark ===
   Headings y body text usan color: var(--light) sobre fondo oscuro.
   Los convertimos a oscuro sobre fondo claro. */
html.demo-restaurant .main section[style*="--secondary"] [style*="color: var(--light)"] {
	color: #212529 !important;
}

html.demo-restaurant .main section[style*="--secondary"] [style*="color: var(--quaternary)"] {
	color: #777 !important;
}

html.demo-restaurant .main section[style*="--secondary"] strong[style*="--light"] {
	color: #212529 !important;
}

/* === 5. Hardcoded cyan borders (herencia digital-agency) → Gris === */
html.demo-restaurant .main [style*="rgba(0, 240, 255"] {
	border-color: #e8e8e8 !important;
}

html.demo-restaurant .main [style*="border: 1px solid rgba(0, 240, 255"] {
	border: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .main [style*="background-color: rgba(0, 240, 255"] {
	background-color: #f7f7f7 !important;
	border-color: #ddd !important;
}

/* === 6. Badges → legibles en tema claro === */
html.demo-restaurant .main .badge[style*="color: var(--primary)"] {
	color: var(--primary) !important;
}

html.demo-restaurant .main .badge[style*="color: var(--quaternary)"] {
	color: #777 !important;
}

/* === 7. Sidebar nav links → oscuro === */
html.demo-restaurant .main section[style*="--secondary"] .nav-link {
	color: #212529 !important;
}

html.demo-restaurant .main section[style*="--secondary"] .nav-link.active,
html.demo-restaurant .main section[style*="--secondary"] .nav-link:hover {
	color: var(--primary) !important;
}

/* === 8. Pagination → legible en claro === */
html.demo-restaurant .main section[style*="--secondary"] .pagination .page-link {
	color: #212529;
	background-color: #fff;
	border-color: #e8e8e8;
}

html.demo-restaurant .main section[style*="--secondary"] .pagination .page-item.active .page-link {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* === 9. Empty state / fallback gradients → neutro === */
html.demo-restaurant .main [style*="linear-gradient(135deg, var(--dark)"] {
	background: #fff !important;
}

/* === 10. Story & Contact section images — aspect ratio control ===
   Prevents distortion when user uploads images of any size.
   Template ratios: main=262:443 (portrait), small=290:218 / 291:245 (landscape) */

/* Story section (welcome) — 3 images next to "Our Story" text */
html.demo-restaurant #aboutus .col-6.col-md-4.col-lg-3.align-self-start > img {
	aspect-ratio: 262 / 443;
	object-fit: cover;
	width: 100%;
}

html.demo-restaurant #aboutus .col-6.col-md-4.col-lg-3.align-self-start.mb-5 > img:first-child {
	aspect-ratio: 290 / 218;
	object-fit: cover;
	width: 100%;
}

html.demo-restaurant #aboutus .col-6.col-md-4.col-lg-3.align-self-start.mb-5 > img:last-child {
	aspect-ratio: 291 / 245;
	object-fit: cover;
	width: 100%;
}

/* Contact section — 3 images next to contact info */
html.demo-restaurant #contact ~ .container .col-7.col-lg-4 > img {
	aspect-ratio: 391 / 483;
	object-fit: cover;
	width: 100%;
}

html.demo-restaurant #contact ~ .container .col-5.col-lg-3 > img:first-child {
	aspect-ratio: 290 / 218;
	object-fit: cover;
	width: 100%;
}

html.demo-restaurant #contact ~ .container .col-5.col-lg-3 > img:last-child {
	aspect-ratio: 291 / 245;
	object-fit: cover;
	width: 100%;
}

/* === 11. Gallery module — filter pills + tags === */
html.demo-restaurant .main .btn-outline-light {
	color: #555 !important;
	border-color: #ccc !important;
	background: #fff !important;
}

html.demo-restaurant .main .btn-outline-light:hover {
	color: var(--primary) !important;
	border-color: var(--primary) !important;
	background: var(--primary-rgba-10) !important;
}

html.demo-restaurant .main .text-muted {
	color: #777 !important;
}

html.demo-restaurant .main .portfolio-grid-item {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* === 11. Blog inline overrides (tipografía ya en bloque superior) ===
   Las cards del blog que usan card-img-top con background-image
   quedan intactas — solo el contenedor cambia de oscuro a claro */
html.demo-restaurant .main .blog-card .card-body {
	background-color: #fff;
}

html.demo-restaurant .main .blog-card .card-title a {
	color: #212529 !important;
}

html.demo-restaurant .main .blog-card .card-title a:hover {
	color: var(--primary) !important;
}

/* ========================================================
   FAQs MODULE — Light Theme Override
   --------------------------------------------------------
   El módulo FAQs tiene un <style> inline con tema oscuro
   (var(--dark), var(--secondary), cyan borders).
   Estas reglas lo convierten a tema claro hospitalario.
   ======================================================== */

/* Section background */
html.demo-restaurant .faq-category-section {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
}

/* FAQ items */
html.demo-restaurant .faq-item {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

html.demo-restaurant .faq-item:hover {
	background: #fff !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
	border-color: #ddd !important;
}

/* Question header */
html.demo-restaurant .faq-question {
	background: #f7f7f7 !important;
	border-bottom: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .faq-question h5 {
	color: #212529 !important;
}

html.demo-restaurant .faq-question:hover h5 {
	color: var(--primary) !important;
}

/* Answer body */
html.demo-restaurant .faq-answer {
	background: #fff !important;
	border-top: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .faq-content {
	color: #555 !important;
}

/* Category header */
html.demo-restaurant .category-header h4 {
	color: #212529 !important;
}

/* Sidebar card */
html.demo-restaurant .main aside.card {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

html.demo-restaurant .main aside .card-header {
	background-color: #f7f7f7 !important;
	border-bottom: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .main aside .card-header h5 {
	color: #212529 !important;
}

/* Category navigation */
html.demo-restaurant .category-nav-item {
	color: #555 !important;
	border: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .category-nav-item:hover {
	background: var(--primary-rgba-10) !important;
	color: var(--primary) !important;
	border-color: var(--primary-rgba-20) !important;
}

html.demo-restaurant .category-nav-item.active {
	background: var(--primary) !important;
	color: #fff !important;
	border-color: var(--primary) !important;
}

html.demo-restaurant .category-nav-item.active .badge-count {
	background: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
}

html.demo-restaurant .badge-count {
	background: #f0f0f0 !important;
	color: #777 !important;
}

/* Quick actions */
html.demo-restaurant .quick-actions {
	background: #f7f7f7 !important;
	border: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .quick-actions h6 {
	color: #212529 !important;
}

html.demo-restaurant .quick-actions .btn {
	background: #fff !important;
	border: 1px solid #ddd !important;
	color: #555 !important;
}

html.demo-restaurant .quick-actions .btn:hover {
	background: #f0f0f0 !important;
	color: #212529 !important;
}

/* FAQ actions */
html.demo-restaurant .faq-actions {
	border-top: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .faq-actions .btn {
	background: #f7f7f7 !important;
	border: 1px solid #ddd !important;
	color: #555 !important;
}

/* Search results */
html.demo-restaurant .search-results {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .search-results .faq-question {
	background: #f7f7f7 !important;
	border-bottom: 1px solid #e8e8e8 !important;
}

html.demo-restaurant .search-results .faq-question h5 {
	color: #212529 !important;
}

html.demo-restaurant .search-results .faq-content {
	color: #555 !important;
}

/* No results */
html.demo-restaurant .no-results {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
}

/* Category stats */
html.demo-restaurant .category-stats small {
	color: #777 !important;
}