/*
Theme Name:   Astra Child — DDM Bin Rentals
Theme URI:    https://ddmbinrentals.ca/
Description:  Child theme of Astra for DDM Bin Rentals. It exists so WooCommerce template overrides, ddm-bin-booking template overrides, and any theme-level PHP survive Astra updates. Site chrome (header, footer, page layouts) is built with Elementor Theme Builder and lives in the database, not here.
Author:       DDM Bin Rentals
Author URI:   https://ddmbinrentals.ca/
Template:     astra
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child-ddm
*/

/*
 * Deliberately empty.
 *
 * Put site-wide CSS in Appearance → Customize → Additional CSS instead, so the
 * client can edit it without file access. Use this file only for CSS that
 * belongs in version control — for example, overrides that must load in a
 * guaranteed order relative to Astra's own stylesheet.
 *
 * Brand tokens, for reference (they are defined in the Elementor kit, not here):
 *   primary   #EE6E20
 *   secondary #111111
 *   text      #333333
 *   footer bg #0D0D0D
 */

/* ---------------------------------------------------------------------------
 * Legal pages (privacy, rental terms, cancellation policy).
 *
 * These are the only plain-content pages on the site; everything else is built
 * in Elementor. They need CSS here rather than in Additional CSS because they
 * must override Astra's own stylesheet, which is the documented reason this file
 * exists.
 *
 * The problem being solved: the Elementor header's top container is
 * position:absolute and 165px tall, so it reserves NO space in the flow — its
 * wrapper measures 1407x0. Every other page has a dark hero filling that band,
 * which both keeps the header off the content and gives the white nav links
 * something to read against. Without one, a legal page put its <h1> at y=149,
 * inside the header, and rendered white nav links on a white body — which looks
 * exactly like a missing header.
 *
 * So these pages get the same dark band. It is a flat colour, not the site's
 * hero photograph: ddm-hero-bg.png is 2.5MB and is already the largest
 * performance problem on the site, and putting it on three more pages would
 * make that worse for no benefit.
 * ------------------------------------------------------------------------- */

.ddm-legal-hero {
	background: #0D0D0D linear-gradient(160deg, #16202B 0%, #0D0D0D 62%);
	/* 210px clears the 165px absolute header with room to breathe. */
	padding: 210px 24px 68px;
	margin: 0 0 56px;
	text-align: center;
}

.ddm-legal-hero h1 {
	color: #FFFFFF;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

.ddm-legal-hero p {
	color: rgba(255, 255, 255, 0.72);
	margin: 14px 0 0;
	font-size: 0.98rem;
}

.ddm-legal-body {
	max-width: 820px;
	margin: 0 auto 88px;
	padding: 0 24px;
}

.ddm-legal-body h2 {
	font-size: 1.35rem;
	margin: 2.2em 0 0.6em;
	color: #111111;
}

.ddm-legal-body h2:first-child {
	margin-top: 0;
}

.ddm-legal-body p,
.ddm-legal-body li {
	color: #444444;
	line-height: 1.72;
}

.ddm-legal-body ul {
	padding-left: 1.35em;
}

.ddm-legal-body li {
	margin-bottom: 0.4em;
}

.ddm-legal-body a {
	color: #A8480D;
	text-underline-offset: 2px;
}

/* Wide content must scroll inside itself, never widen the page. */
.ddm-legal-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: 0.95rem;
}

.ddm-legal-body th,
.ddm-legal-body td {
	border: 1px solid #E4E4E4;
	padding: 9px 12px;
	text-align: left;
}

.ddm-legal-body th {
	background: #F7F7F7;
	font-weight: 600;
}

@media (max-width: 767px) {
	.ddm-legal-hero {
		/* The header is 104px tall at this width, measured. */
		padding: 140px 18px 44px;
		margin-bottom: 36px;
	}

	.ddm-legal-body {
		padding: 0 18px;
		margin-bottom: 56px;
	}
}

/* ---------------------------------------------------------------------------
 * Pages that have no hero: WooCommerce's own pages, 404 and search.
 *
 * The Elementor header's top container is positioned absolutely — Elementor sets
 * it through a custom property (--position: absolute) which its container CSS
 * consumes — so the header reserves NO space in the flow and its wrapper measures
 * 1407x0. On the Elementor-built pages a dark hero fills that band. WooCommerce's
 * pages have no hero, so the header sat on top of the content (the order-received
 * page had "Thank you. Your order has been received." underneath the logo) and its
 * white nav links rendered white-on-white, which reads as a missing header.
 *
 * NOT the booking wizard, though it also carries body.woocommerce-checkout.
 * Checkout::filter_body_class() adds that class on purpose, so WooCommerce's own
 * checkout CSS styles the payment form embedded in step 3 — but /bin-rentals/ is
 * a designed page with its own hero, and this rule was giving it a solid black
 * bar and 48px of white above that hero while every other Elementor page had the
 * header floating over the artwork. Excluded via ddm-booking-page, which the same
 * filter adds for exactly this kind of 'it is not really the checkout' case.
 *
 * These pages are WooCommerce's own templates, so a band cannot be added to their
 * content the way the legal pages get one. Instead the header is put back into the
 * flow and given a ground: it becomes a solid dark bar, content starts beneath it,
 * and the white nav reads. Both properties are set because the variable is what
 * Elementor's own rule reads, while the direct declaration covers the case where
 * that rule changes.
 * ------------------------------------------------------------------------- */

body.woocommerce-checkout:not(.ddm-booking-page) .elementor-location-header > .e-con.e-parent,
body.woocommerce-cart .elementor-location-header > .e-con.e-parent,
body.woocommerce-account .elementor-location-header > .e-con.e-parent,
body.woocommerce-shop .elementor-location-header > .e-con.e-parent,
body.post-type-archive-product .elementor-location-header > .e-con.e-parent,
body.single-product .elementor-location-header > .e-con.e-parent,
body.error404 .elementor-location-header > .e-con.e-parent,
body.search .elementor-location-header > .e-con.e-parent {
	--position: relative;
	position: relative;
	background-color: #0D0D0D;
}

/* Astra's page title on those pages needs room below the now-solid header. */
body.woocommerce-checkout:not(.ddm-booking-page) .site-content,
body.woocommerce-cart .site-content,
body.woocommerce-account .site-content,
body.woocommerce-shop .site-content,
body.post-type-archive-product .site-content,
body.single-product .site-content,
body.error404 .site-content,
body.search .site-content {
	padding-top: 48px;
}

@media (max-width: 767px) {
	body.woocommerce-checkout:not(.ddm-booking-page) .site-content,
	body.woocommerce-cart .site-content,
	body.woocommerce-account .site-content,
	body.woocommerce-shop .site-content,
	body.post-type-archive-product .site-content,
	body.single-product .site-content,
	body.error404 .site-content,
	body.search .site-content {
		padding-top: 28px;
	}
}

/* ==========================================================================
   Mobile header menu
   --------------------------------------------------------------------------
   Elementor Pro's Nav Menu switches to its dropdown below 1025px (the kit's
   viewport_lg). Everything here is scoped to that dropdown and that
   breakpoint, deliberately.

   These colours are NOT set through the widget's own Dropdown controls
   (background_color_dropdown_item and friends). Those emit CSS that also hits
   the DESKTOP mega panel: on 2026-08-31 background_color_dropdown_item was
   pointed at the "secondary" global (#111111) and repainted the white mega
   menu black on every page of the live site. Styling the dropdown from here
   keeps the two apart, so a mobile colour change can never reach the desktop
   panel again.
   ========================================================================== */

@media (max-width: 1024px) {

	/* Full-screen panel, pinned to the viewport rather than hanging off the
	   widget in a small box.

	   It starts just below the header instead of covering it, so the logo and
	   the close toggle stay visible and clickable without a z-index fight —
	   the panel and the logo are siblings inside the header's own stacking
	   context, so raising the panel would have painted it over the logo.

	   The offset tracks the header height rather than hardcoding it: the logo
	   column is 50% of (100vw - 40px of gutter) and the logo is 1024x680, so
	   its rendered height is about 33.2vw - 13px, above which the header adds
	   40px of top padding. A fixed px value would only be correct on one
	   screen width. */
	.elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: fixed !important;
		top: calc(33.2vw + 40px) !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		overflow-y: auto;
		background: #000000;
		animation: ddm-mobile-menu-in 220ms ease-out both;
	}

	@keyframes ddm-mobile-menu-in {
		from { opacity: 0; transform: translateX(10%); }
		to   { opacity: 1; transform: translateX(0); }
	}

	.elementor-nav-menu--dropdown > ul.elementor-nav-menu {
		padding: 22px 20px 40px !important;
	}

	/* Nav items sit flat on the panel. Only the Contact Us CTA below is given
	   a fill, so it reads as the one button in the list rather than competing
	   with five others. */
	.elementor-nav-menu--dropdown a.elementor-item,
	.elementor-nav-menu--dropdown a.elementor-sub-item {
		background-color: transparent !important;
		color: #FFFFFF !important;
		border-radius: 8px;
		margin-bottom: 4px;
		font-weight: 600;
	}

	/* Hover, focus and current page: black, orange text. `highlighted` is the
	   class SmartMenus puts on an open parent, so Serving Locations matches
	   its children while the submenu is open. */
	.elementor-nav-menu--dropdown a.elementor-item:hover,
	.elementor-nav-menu--dropdown a.elementor-item:focus,
	.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
	.elementor-nav-menu--dropdown a.elementor-item.highlighted,
	.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
	.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
	.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
	.elementor-nav-menu--dropdown a.elementor-sub-item.highlighted {
		background-color: #000000 !important;
		color: #EE6E20 !important;
	}

	/* A theme-orange rule under each top-level item. Contact Us is excluded —
	   it is a filled button, so a divider would read as part of its edge. */
	.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:not(.ddm-mobile-cta) > a.elementor-item {
		border-bottom: 1px solid #EE6E20;
		border-radius: 0;
	}

	/* Serving Locations children sit in an orange block.

	   This also fixes an invisible-text bug: Elementor's stock dropdown
	   submenu background is white, and the items above set white text, so the
	   four region links were white-on-white — the empty white panel under
	   Serving Locations. Setting the container colour here removes the need
	   for the widget's own dropdown controls, which would leak to the desktop
	   mega panel. */
	.elementor-nav-menu--dropdown .sub-menu {
		background-color: #000000 !important;
		border-radius: 8px;
		padding: 6px 0 6px 14px;
		margin-bottom: 8px;
	}

	/* Same treatment as the top-level items — white on black with a theme
	   orange rule underneath — so the region links read as part of the same
	   list. The left padding on .sub-menu above is what carries the
	   hierarchy now that the fill no longer distinguishes them. */
	.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
		background-color: transparent !important;
		color: #FFFFFF !important;
		font-weight: 500;
		border-bottom: 1px solid #EE6E20;
	}

	.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:hover,
	.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:focus,
	.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item.elementor-item-active {
		background-color: #000000 !important;
		color: #EE6E20 !important;
	}

	/* Contact Us closes the list and is the only filled item. Listed after the
	   hover block above so it wins on both specificity and source order. */
	/* display carries !important for the same reason the colours do: Elementor's
	   own dropdown rule sets `display: block` at a specificity this cannot beat
	   unaided, and without flex the arrow below is laid out as an inline box,
	   where its width and height are ignored and it renders at zero size. */
	.elementor-nav-menu--dropdown .ddm-mobile-cta > a.elementor-item {
		display: flex !important;
		align-items: center;
		margin-top: 18px;
		background-color: #EE6E20 !important;
		color: #FFFFFF !important;
	}

	.elementor-nav-menu--dropdown .ddm-mobile-cta > a.elementor-item:hover,
	.elementor-nav-menu--dropdown .ddm-mobile-cta > a.elementor-item:focus,
	.elementor-nav-menu--dropdown .ddm-mobile-cta > a.elementor-item.elementor-item-active {
		background-color: #000000 !important;
		color: #EE6E20 !important;
		/* Keeps the button's outline once the fill goes black, so it does not
		   dissolve into the panel the way the plain nav items do. */
		box-shadow: inset 0 0 0 2px #EE6E20;
	}

	/* The same right arrow the desktop header CTA carries. Drawn as a mask
	   filled with currentColor, so it follows the link colour (white, then
	   orange on hover) without needing two coloured assets or a webfont. */
	.elementor-nav-menu--dropdown .ddm-mobile-cta > a.elementor-item::after {
		content: "";
		/* inline-block as well as flex:0 0 auto, so the box keeps its size
		   whether or not the parent ends up as a flex container. */
		display: inline-block;
		vertical-align: middle;
		flex: 0 0 auto;
		width: 17px;
		height: 17px;
		margin-left: 10px;
		background-color: currentColor;
		/* Longhands rather than the `mask` shorthand: the shorthand resets
		   every mask property, and its position/size syntax is the part
		   engines disagree about. */
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

/* The Contact Us item exists only for the mobile dropdown. The desktop header
   already carries its own Contact Us button, and one menu feeds both (the
   primary and mobile_menu locations both point at Main Menu), so it is hidden
   above the dropdown breakpoint rather than duplicated into a second menu. */
@media (min-width: 1025px) {
	.elementor-nav-menu--main .ddm-mobile-cta {
		display: none !important;
	}
}