/* michelada.mx theme, loaded after the compiled michelada.css (which deploys never rebuild).
   Palette from the drink: chile, lime, tamarind and salt. */
:root {
	--mx-chile: #c2410c;
	--mx-chile-dark: #9a3412;
	--mx-lime: #8db33a;
	--mx-lime-dark: #6f8f2a;
	--mx-tamarindo: #3b2314;
	--mx-sal: #fff8ee;
	--mx-text: #2b211b;
	--mx-muted: #7a6a5f;
	--mx-radius: 12px;
}

/* Type: one sturdy family instead of light Roboto at .9rem in grey. */
body {
	font-family: "Rubik", system-ui, sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mx-text);
}
h1, h2, h3, h4, h5, h6, .h1-responsive, .h2-responsive, .h4-responsive, .h5-responsive, .section-heading {
	font-family: "Rubik", system-ui, sans-serif;
	font-weight: 700;
	color: var(--mx-tamarindo);
	letter-spacing: -.01em;
}
.section-heading { margin-bottom: .75rem; }
.section-description, .lead { color: var(--mx-muted); font-weight: 400; }
a { color: var(--mx-chile); }
a:hover { color: var(--mx-chile-dark); }

/* Heroes: full screen only on the homepage; inner pages show their content sooner. */
.view.hero { height: 62vh; min-height: 420px; }
#home-hero.view { height: 100vh; }
.hero h1, .hero .h1-responsive { color: #fff; font-weight: 700; text-transform: none; letter-spacing: -.02em; }
.hero h2, .hero .h2-responsive { color: #fff; font-weight: 500; }
.hero p { color: rgba(255, 255, 255, .9) !important; font-size: 1.05rem; }
.light-theme .hero h1, .light-theme .hero .h1-responsive { color: var(--mx-tamarindo); }
.light-theme .hero h2, .light-theme .hero .h2-responsive { color: var(--mx-tamarindo); }
.light-theme .hero p { color: var(--mx-text) !important; }
@media (max-width: 575px) {
	.hero h1, .hero .h1-responsive { font-size: 2.2rem; }
}

/* Buttons: pill-shaped, readable labels instead of tiny caps. */
.btn {
	border-radius: 999px;
	text-transform: none;
	font-weight: 500;
	letter-spacing: 0;
	box-shadow: none;
	padding: .6rem 1.4rem;
	font-size: .95rem;
}
.btn:hover, .btn:focus { box-shadow: 0 4px 12px rgba(59, 35, 20, .18); }
.btn-sm { padding: .4rem 1rem; font-size: .85rem; }
.btn-lg { padding: .8rem 1.8rem; font-size: 1.05rem; }
.btn-deep-orange { background-color: var(--mx-chile) !important; color: #fff !important; }
.btn-deep-orange:hover, .btn-deep-orange:focus, .btn-deep-orange:active { background-color: var(--mx-chile-dark) !important; }
.btn-elegant, .btn-dark { background-color: var(--mx-tamarindo) !important; color: #fff !important; }

/* Recipe section bars: chile and tamarind instead of lime and grey. */
.recipe h4.bg-green { background-color: var(--mx-lime) !important; color: #fff; border-radius: var(--mx-radius) var(--mx-radius) 0 0; }
.recipe h4.grey.darken-1 { background-color: var(--mx-tamarindo) !important; color: #fff; border-radius: var(--mx-radius) var(--mx-radius) 0 0; }
.recipe .ingredient i, .recipe .step { color: var(--mx-chile); }
.mx-products .mx-products-title { background: var(--mx-chile) !important; border-radius: var(--mx-radius) var(--mx-radius) 0 0; }
.mx-products .mx-product { border-radius: var(--mx-radius); border-bottom-color: var(--mx-lime); }

/* Cards: soft, rounded, left-aligned text. */
.card {
	border: 0;
	border-radius: var(--mx-radius);
	box-shadow: 0 2px 12px rgba(59, 35, 20, .08);
	overflow: hidden;
}
.card .card-header { background: var(--mx-sal); border-bottom: 0; font-weight: 500; }
.card .card-body { text-align: left; font-size: .95rem; }
.card .card-body p { font-size: .95rem; color: var(--mx-text); }
.recipe .ingredient, .recipe .direction { font-size: 1rem; color: var(--mx-text); }
.section-description { font-size: 1.1rem; }

/* Breadcrumbs and the green recipe band. */
#breadcrumbs, .breadcrumb { background-color: var(--mx-sal) !important; }
.breadcrumb-item a { color: var(--mx-chile); }
.lime, .light-green, section.recipes { background-color: var(--mx-lime) !important; }

/* Footer in tamarind instead of charcoal. */
footer, footer.page-footer, .page-footer { background-color: var(--mx-tamarindo) !important; }
footer .btn-floating { background-color: var(--mx-chile) !important; }

/* Images: the same rounding as cards (heroes stay full-bleed). */
.photography, .photography img, .img-rounded, .card img, .view.photography { border-radius: var(--mx-radius) !important; overflow: hidden; }
.mx-products .mx-product img { border-radius: 0 !important; }

/* Round icon buttons (footer social links) keep their circle; the pill .btn padding pushed the icon off-centre. */
.btn-floating {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0 !important;
	border-radius: 50% !important;
}
.btn-floating i { font-size: 1.25rem; line-height: 1; margin: 0; }

/* Inline SVG icons (elements/icons.twig) replace the Font Awesome webfont. */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }
.icon.d-block { display: block; margin: 0 auto .5rem; width: 1.75rem; height: 1.75rem; }
.icon-2x { width: 2em; height: 2em; }
.rotate-icon { transition: transform .2s; }
.collapsed .rotate-icon { transform: rotate(-90deg); }

/* Mobile side menu (site.js). */
.sidenav-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .5); }
.side-nav { transition: transform .3s ease; }

/* Phone header: the same MICHELADA wordmark as desktop, next to the menu button (.navbar-desktop is hidden below lg). */
.navbar .navbar-left { display: flex; align-items: center; }
.navbar-mobile-brand { margin-left: .75rem; font-size: 1.25rem; color: inherit; }
.navbar-mobile-brand:hover, .navbar-mobile-brand:focus { color: inherit; }
.navbar .nav-link .icon { width: 1.15em; height: 1.15em; }

/* Forms: bordered, rounded fields instead of MDB's bare underline. */
form label { display: block; margin-bottom: .35rem; font-weight: 500; color: var(--mx-tamarindo); font-size: .95rem; }
form .form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: .65rem .85rem;
	font: inherit;
	color: var(--mx-text);
	background: #fff;
	border: 1px solid #e3d8cc;
	border-radius: 10px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
form .form-control:focus { outline: none; border-color: var(--mx-chile); box-shadow: 0 0 0 3px rgba(194, 65, 12, .15); }
form textarea.form-control { min-height: 9rem; resize: vertical; }
form .form-group { margin-bottom: 1.1rem; }
form .form-control.is-invalid { border-color: #c62828; }
form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }
form .invalid-feedback { color: #c62828; font-size: .85rem; margin-top: .3rem; }
form .alert { border-radius: 10px; border: 0; padding: .8rem 1rem; }
form .alert-warning { background: #fff4e5; color: #8a4b00; }
form .alert-success { background: #edf6e0; color: #3f5f12; }
#contact-form { background: var(--mx-sal); padding: 1.5rem; border-radius: var(--mx-radius); }

/* Footer (elements/footer.twig). */
/* The old CSS pinned a 145px footer with position:absolute (and padded body for it); let it size to its content. */
body { padding-bottom: 0 !important; }
.mx-footer { position: static !important; height: auto !important; padding: 0 !important; margin-top: 3rem; background: var(--mx-tamarindo) !important; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.mx-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.mx-footer a:hover, .mx-footer a:focus { color: #fff; }
.mx-footer-main { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.mx-footer-brand img { display: block; height: auto; max-width: 186px; }
.mx-footer-brand p { margin: .75rem 0 1rem; max-width: 22rem; color: rgba(255, 255, 255, .7); }
.mx-footer-social { display: flex; gap: .6rem; }
.mx-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background .2s; }
.mx-footer-social a:hover { background: var(--mx-chile); }
.mx-footer-social .icon { width: 1.1rem; height: 1.1rem; }
.mx-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; align-content: start; }
.mx-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1rem 0 1.25rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.mx-footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
@media (min-width: 768px) {
	.mx-footer-main { grid-template-columns: 1.2fr 1fr; align-items: start; }
}