/*
Theme Name:   Rita's Tequila House
Theme URI:    https://ritastequilahouse.com
Description:  Astra child theme recreating the original Rita's Tequila House Drupal look: black-framed page, fajita photo header, black menu-bar navigation. Mobile-friendly and WooCommerce-ready.
Author:       Braxton
Template:     astra
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ritas-astra-child
*/

/* ==========================================================================
   1. Brand tokens
   Astra reads its colours from --ast-global-color-*; overriding them here
   restyles links, buttons and WooCommerce in one place.
   ========================================================================== */

:root {
	--ritas-black: #000;
	--ritas-green: #006a54;      /* "LA MEX" green from the logo */
	--ritas-red: #ee1820;        /* "Grill" red from the logo   */
	--ritas-hover: #ff2a2a;      /* menu-bar hover (old site: #FF0000) */
	--ritas-lime: #99cc33;       /* old .menuhighlight */
	--ritas-text: #222;
	--ritas-frame: 15px;
	--ritas-page-max: 960px;
	--ritas-sidebar: 220px;
	--ritas-display: "Fredoka", "Berlin Sans FB", "Trebuchet MS", sans-serif;

	--ast-global-color-0: var(--ritas-green); /* accent: links, buttons */
	--ast-global-color-1: var(--ritas-red);   /* accent hover          */
	--ast-global-color-2: #000;               /* headings              */
	--ast-global-color-3: var(--ritas-text);  /* body text             */
}

/* ==========================================================================
   2. Fonts — Fredoka (SIL OFL), self-hosted. Stand-in for Berlin Sans FB.
   ========================================================================== */

@font-face {
	font-family: "Fredoka";
	src: url("assets/fonts/fredoka-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fredoka";
	src: url("assets/fonts/fredoka-latin-600-normal.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

body.ritas-theme h1,
body.ritas-theme h2,
body.ritas-theme h3,
body.ritas-theme h4,
body.ritas-theme h5,
body.ritas-theme h6,
body.ritas-theme .entry-title,
body.ritas-theme .site-title,
body.ritas-theme .widget-title {
	font-family: var(--ritas-display);
	font-weight: 600;
	color: #000;
}

/* ==========================================================================
   3. The black frame + fajita header
   ========================================================================== */

body.ritas-theme {
	background: #fff;
	color: var(--ritas-text);
}

.ritas-theme #page {
	max-width: var(--ritas-page-max);
	margin: 10px auto 0;
	border: var(--ritas-frame) solid var(--ritas-black);
	background: #fff;
	overflow-x: clip;
}

/* Fajita photo sits behind the header only and always ends in its
   white "torn" fade just below the logo, whatever the header height. */
.ritas-theme #masthead {
	background: url("assets/img/header-fajitas.webp") no-repeat center bottom / cover;
	padding-bottom: 28px;
}

/* Let Astra's inner containers use the full framed width */
.ritas-theme #page .ast-container {
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

/* Header rows transparent so the photo shows through */
.ritas-theme .main-header-bar,
.ritas-theme .ast-primary-header-bar,
.ritas-theme .ast-above-header-bar,
.ritas-theme .ast-below-header-bar,
.ritas-theme .ast-mobile-header-wrap .ast-primary-header-bar,
.ritas-theme .ast-main-header-wrap {
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.ritas-theme .site-header .site-branding,
.ritas-theme .site-header .ast-site-identity {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Logo: 300px like the original, scaled down on phones */
.ritas-theme .site-logo-img .custom-logo-link img,
.ritas-theme .custom-logo-link img.custom-logo {
	width: 300px !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Site title/tagline sit over the photo — keep them legible */
.ritas-theme .site-header .site-title a,
.ritas-theme .site-header .site-description {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* ==========================================================================
   4. Left sidebar + black menu bars
   ========================================================================== */

@media (min-width: 922px) {
	/* The same Primary menu is shown as bars in the sidebar, so hide the
	   desktop header copy. Mobile header (hamburger) is left untouched. */
	.ritas-has-sidebar-nav #ast-desktop-header .ast-builder-menu-1,
	.ritas-has-sidebar-nav #ast-desktop-header .main-header-bar-navigation {
		display: none !important;
	}

	.ritas-theme.ast-left-sidebar #secondary {
		width: var(--ritas-sidebar) !important;
		flex: 0 0 var(--ritas-sidebar);
		padding-right: 20px !important;
		padding-left: 0 !important;
		border-right: 0 !important;
		margin-top: 0 !important;
	}

	.ritas-theme.ast-left-sidebar #primary {
		width: calc(100% - var(--ritas-sidebar)) !important;
		flex: 1 1 auto;
		padding-left: 10px !important;
		border-left: 0 !important;
		margin-top: 0 !important;
	}

	/* Old site justified body copy on desktop */
	.ritas-theme .entry-content > p {
		text-align: justify;
		hyphens: auto;
	}
}

/* Phones/tablets: the hamburger menu replaces the bars */
@media (max-width: 921px) {
	.ritas-sidebar-nav {
		display: none;
	}
}

.ritas-theme #secondary .sidebar-main {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.ritas-menu-bars,
.ritas-menu-bars .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ritas-menu-bars {
	margin-bottom: 2em;
}

.ritas-menu-bars li {
	margin: 0 0 9px;
	padding: 0;
}

.ritas-menu-bars a {
	display: block;
	padding: 9px 14px 10px;
	background: var(--ritas-black);
	color: #fff;
	font-family: var(--ritas-display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
	letter-spacing: .02em;
	text-decoration: none;
	box-shadow: 3px 4px 5px rgba(0, 0, 0, .45);
	transition: color .15s ease;
}

.ritas-menu-bars a:link,
.ritas-menu-bars a:visited {
	color: #fff;
}

.ritas-menu-bars a:hover,
.ritas-menu-bars a:focus-visible {
	color: var(--ritas-hover);
}

.ritas-menu-bars a:focus-visible {
	outline: 2px solid var(--ritas-lime);
	outline-offset: 2px;
}

.ritas-menu-bars .current-menu-item > a,
.ritas-menu-bars .current_page_item > a,
.ritas-menu-bars .current-menu-ancestor > a {
	color: var(--ritas-lime);
}

.ritas-menu-bars .sub-menu {
	margin: 7px 0 0 14px;
}

.ritas-menu-bars .sub-menu a {
	padding: 6px 12px 7px;
	font-size: .9rem;
	font-weight: 500;
}

/* Mobile menu: match the bar look */
.ritas-theme .ast-mobile-popup-drawer .main-header-menu .menu-link,
.ritas-theme #ast-mobile-header .main-header-menu .menu-link {
	font-family: var(--ritas-display);
	font-weight: 600;
}

/* ==========================================================================
   5. Content area (Astra "boxed" styles neutralised so the frame shows)
   ========================================================================== */

.ritas-theme .site-content {
	background: transparent;
}

.ritas-theme.ast-separate-container,
.ritas-theme.ast-separate-container #page {
	background-color: #fff;
}

.ritas-theme.ast-separate-container .ast-article-single,
.ritas-theme.ast-separate-container .ast-article-post,
.ritas-theme.ast-separate-container .comments-area,
.ritas-theme.ast-separate-container .ast-woocommerce-container,
.ritas-theme.ast-separate-container #secondary .widget {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.ritas-theme .entry-content a:not(.button):not(.wp-block-button__link) {
	color: var(--ritas-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.ritas-theme .entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--ritas-red);
}

/* ==========================================================================
   6. Home page Featured Slider widget area
   ========================================================================== */

.ritas-featured-slider {
	margin: 0 auto 2em;
}

/* ==========================================================================
   7. Food-menu classes carried over from the Drupal site
   Paste old menu HTML into a Custom HTML block and it keeps its look.
   ========================================================================== */

.foodmenu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	letter-spacing: 1px;
}

.menuhighlight {
	display: block;
	padding: 5px 10px;
	background-color: var(--ritas-lime);
	color: #fff;
	text-align: center;
	font-family: var(--ritas-display);
	font-weight: 600;
	letter-spacing: .04em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35); /* white on lime is low-contrast */
}

.menublock {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	column-gap: 20px;
	width: 100%;
}

.menuitem {
	padding: 0 10px 20px;
}

.menuitemfull {
	display: block;
	margin: 0 10px;
	padding-bottom: 20px;
}

.menuname {
	font-weight: 700;
	font-size: 105%;
}

.menudesc {
	margin-left: 10px;
}

.menudesc ul {
	margin-left: 0;
	padding-left: 0;
}

.menudesc li {
	list-style-type: none;
}

/* ==========================================================================
   8. WooCommerce touches
   ========================================================================== */

.ritas-theme.woocommerce .product_title,
.ritas-theme .woocommerce-loop-product__title {
	font-family: var(--ritas-display);
	font-weight: 600;
}

.ritas-theme .woocommerce a.button,
.ritas-theme .woocommerce button.button,
.ritas-theme .woocommerce input.button,
.ritas-theme .woocommerce #respond input#submit,
.ritas-theme .wp-block-button__link {
	font-family: var(--ritas-display);
	font-weight: 600;
	letter-spacing: .02em;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.ritas-theme .site-footer {
	border-top: 4px solid var(--ritas-black);
}

.ritas-footer-pi {
	padding: 4px 12px 8px;
	font-family: "Times New Roman", Times, serif;
	line-height: 1;
}

.ritas-footer-pi a {
	color: #999;
	text-decoration: none;
}

/* ==========================================================================
   10. Small screens
   ========================================================================== */

@media (max-width: 600px) {
	:root {
		--ritas-frame: 6px;
	}
	.ritas-theme #page {
		margin-top: 0;
	}
	.ritas-theme #page .ast-container {
		padding-left: 14px;
		padding-right: 14px;
	}
	.ritas-theme .site-logo-img .custom-logo-link img,
	.ritas-theme .custom-logo-link img.custom-logo {
		width: 170px !important;
	}
}