/*
Theme Name: DonPeppe Child
Theme URI: https://donpeppe.qodeinteractive.com/
Description: A child theme of DonPeppe Theme
Author: Select Themes
Author URI: https://themeforest.net/user/select-themes
Version: 1.0.1
Text Domain: donpeppe
Template: donpeppe
*/

/* ---------------------------------------------------------------------------
 * FireBox Pizza brand
 * Logo colours: orange #d95129, black #131313, cheese #f0ba54, pepperoni #ba3c30.
 * UI orange #c14824 is the logo orange deepened to pass 4.5:1 contrast for text
 * and for white text on orange; it is also the theme's First Main Color.
 * ------------------------------------------------------------------------- */
:root {
	--fb-orange: #c14824;
	--fb-orange-logo: #d95129;
	--fb-black: #131313;
	--fb-cheese: #f0ba54;
}

/* Fourteen Oranges Ordering plugin: pickup/delivery panel, order bar, checkout */
body .fo-gate__btn { background: var(--fb-orange); }
body .fo-gate__btn:hover,
body .fo-gate__btn:focus-visible { background: var(--fb-black); }
body .fo-gate__link { color: var(--fb-orange); }
body .fo-order-bar { background: var(--fb-black); }
body .fo-order-bar__change { color: var(--fb-cheese); }
body .fo-checkout-type a,
body .fo-checkout-type button { color: var(--fb-orange); }
body .fo-when__status { color: var(--fb-orange); }
body .fo-tip__btn:hover { border-color: var(--fb-black); }
body .fo-tip__btn.is-active { border-color: var(--fb-orange); color: var(--fb-orange); }

/* No Don Peppe moustache anywhere. The theme paints it in two ways, and both are hidden here.
 * SVG (svg.qodef-moustache): menu links in the main, sticky and phone menus, and buttons with the moustache option.
 * Hiding it also frees the 1.8em the menu reserves for it.
 * Mask on ::before: category widgets (any widget area, top bar, footer and side menu), comment reply, edit and cancel
 * links, and the WooCommerce price filter (classic and block). Category text is also shifted left by the room the theme
 * reserves for that mask, so the shift is reset as well. */
svg.qodef-moustache { display: none !important; }

.qodef-comment-holder .qodef-comment-text .replay:before,
.qodef-comment-holder .qodef-comment-text .comment-reply-link:before,
.qodef-comment-holder .qodef-comment-text .comment-edit-link:before,
.qodef-comment-holder .qodef-comment-text #cancel-comment-reply-link:before,
.widget.widget_categories ul li a:before,
.widget.widget_product_categories ul li a:before,
.qodef-top-bar .widget.widget_categories ul li a:before,
.qodef-top-bar .widget.widget_product_categories ul li a:before,
.qodef-page-footer .widget.widget_categories ul li a:before,
.qodef-page-footer .widget.widget_product_categories ul li a:before,
.qodef-side-menu .widget.widget_categories ul li a:before,
.qodef-side-menu .widget.widget_product_categories ul li a:before,
.widget.woocommerce.widget_price_filter .price_slider_amount .button:before,
.widget .wc-block-components-price-slider .wc-block-components-price-slider__actions button:before {
	display: none !important;
}

.widget.widget_categories ul li a,
.widget.widget_categories ul li span,
.widget.widget_product_categories ul li a,
.widget.widget_product_categories ul li span,
.qodef-top-bar .widget.widget_categories ul li a,
.qodef-top-bar .widget.widget_categories ul li span,
.qodef-top-bar .widget.widget_product_categories ul li a,
.qodef-top-bar .widget.widget_product_categories ul li span,
.qodef-page-footer .widget.widget_categories ul li a,
.qodef-page-footer .widget.widget_categories ul li span,
.qodef-page-footer .widget.widget_product_categories ul li a,
.qodef-page-footer .widget.widget_product_categories ul li span,
.qodef-side-menu .widget.widget_categories ul li a,
.qodef-side-menu .widget.widget_categories ul li span,
.qodef-side-menu .widget.widget_product_categories ul li a,
.qodef-side-menu .widget.widget_product_categories ul li span {
	transform: none !important;
}

/* Opening hours from the ordering plugin's [fo_opening_hours] (footer and Contact page) */
.fo-hours { list-style: none; margin: 0; padding: 0; }
.fo-hours li { display: flex; justify-content: space-between; gap: 1em; max-width: 16em; }
.fo-hours__days { font-weight: 600; }

/* Footer text on the dark #1b1b1b footer. The theme's generated style_dynamic.css (it loads after this file) maps the
 * footer's old gold accent onto the brand black #131313, which cannot be read there: widget titles, the copyright line,
 * headings inside text widgets and every link on hover. Each selector below is the theme's own plus `body`, one step
 * more specific, so it wins without any important flag. Contrast on #1b1b1b: white 17.2:1, links #b2b2b2 8.1:1 (unchanged),
 * hover cheese 9.7:1. The Order online button keeps its orange (the theme's First Main Color, same as --fb-orange)
 * and gets a white label: 5.0:1. */
body .qodef-page-footer .widget .qodef-widget-title,
body .qodef-page-footer .qodef-footer-bottom-holder .widget p,
body .qodef-page-footer .textwidget h1,
body .qodef-page-footer .textwidget h2,
body .qodef-page-footer .textwidget h3,
body .qodef-page-footer .textwidget h4,
body .qodef-page-footer .textwidget h5,
body .qodef-page-footer .textwidget h6 {
	color: #fff;
}
body .qodef-page-footer .widget a:hover,
body .qodef-page-footer .widget .qodef-widget-title a:hover {
	color: var(--fb-cheese);
}
body .qodef-page-footer .widget .qodef-btn.qodef-btn-solid {
	color: #fff;
}

/* Product options (Size and the like): the theme leaves WooCommerce's variations table unstyled, so the label sat
   jammed against a 100px, 26px-high dropdown. Label like the theme's other small headings, dropdown as tall as the
   quantity box. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr { display: block; width: 100%; max-width: 420px; }
.single-product table.variations { margin-bottom: 10px; }
.single-product table.variations th,
.single-product table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.single-product table.variations th label { font-family: var(--fb-sans); font-size: 14px; font-weight: 700; color: var(--fb-black); }
.single-product table.variations td { margin: 6px 0 14px; }
.single-product table.variations select,
.single-product table.variations .select2-container,
.single-product table.variations .select2-selection--single { width: 100% !important; }
body.single-product .qodef-woocommerce-page .qodef-content table.variations td.value .select2-container--default, body.single-product.qodef-woocommerce-page .qodef-content table.variations td.value .select2-container--default { max-width: none !important; }
.single-product table.variations .select2-selection--single { height: 44px; border: 1px solid #d0d0d0; }
.single-product table.variations .select2-selection__rendered { padding: 0 36px 0 14px; font-size: 15px; line-height: 42px; color: #333; }
.single-product table.variations .select2-selection__arrow { height: 42px; right: 8px; }
.single-product table.variations .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; }

/* Phone menu panel (DonPeppe's mobile side area): the same cream as the page, links in the heading font, light
 * separators instead of the theme's white boxes, uppercase Oswald and gold dotted lines. Kept here rather than in
 * assets/css/site.css; it loads before the theme's generated CSS, so the rules carry !important. */
html body .qodef-mobile-header .qodef-mobile-side-area,
html body .qodef-mobile-header .qodef-mobile-side-area-inner,
html body .qodef-mobile-header .qodef-mobile-nav,
html body .qodef-mobile-header .qodef-mobile-nav .qodef-grid {
	background-color: var(--fb-cream, #fbf3e6) !important;
	border: 0 !important;
}
html body .qodef-mobile-header .qodef-mobile-nav ul li a,
html body .qodef-mobile-header .qodef-mobile-nav ul li h6 {
	padding: 14px 0 !important;
	border-bottom: 1px solid var(--fb-line, #e6d8c2) !important;
	background-color: transparent !important;
	font-family: "Fraunces", Georgia, serif !important;
	font-size: 1.6rem !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	color: var(--fb-black, #131313) !important;
}
html body .qodef-mobile-header .qodef-mobile-nav ul li a:hover,
html body .qodef-mobile-header .qodef-mobile-nav ul li.current-menu-item > a,
html body .qodef-mobile-header .qodef-mobile-nav ul li.qodef-active-item > a {
	color: var(--fb-orange, #c14824) !important;
}
html body .qodef-mobile-header .qodef-mobile-side-area .qodef-mobile-side-area-close,
html body .qodef-mobile-header .qodef-mobile-side-area [class*="close"] { color: var(--fb-black, #131313) !important; }