/* =========================================================================
   Party Rentals Delivered — Design Tokens & Global Facelift Base
   Loaded after parent Royal styles. Selectors are intentionally specific
   to keep legacy pages untouched unless they opt-in via .prd-* classes.
   ========================================================================= */

/* CRITICAL: Royal's bootstrap.min.css sets html { font-size: 62.5% } which
   makes 1rem = 10px and shrinks every rem-based size in our theme by ~38%.
   Force the root back to a normal 16px scale so all PRD `rem` tokens render
   at their intended size. */
html {
	font-size: 100% !important;
}

:root {
	/* Brand palette — modern editorial / EventWorks-inspired */
	--prd-c-ink:        #111418;     /* primary text */
	--prd-c-ink-soft:   #3a414a;
	--prd-c-muted:      #6b7280;
	--prd-c-line:       #e6e8ec;
	--prd-c-bg:         #ffffff;
	--prd-c-bg-alt:     #f7f6f3;     /* warm off-white */
	--prd-c-bg-deep:    #111418;
	--prd-c-accent:     #193765;     /* brand navy — primary accent */
	--prd-c-accent-ink: #0f2649;     /* darker navy for hover/active */
	--prd-c-warm:       #b8895b;     /* warm tan — secondary, sparingly */
	--prd-c-warm-ink:   #8a6038;
	--prd-c-success:    #2e7d4f;
	--prd-c-danger:     #b3261e;
	--prd-c-gold:       #d4a437;     /* review stars */

	/* Typography */
	--prd-ff-sans:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--prd-ff-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

	/* ~10% smaller than previous bump — more refined editorial feel */
	--prd-fs-xs:    0.8125rem;
	--prd-fs-sm:    0.9375rem;
	--prd-fs-base:  1rem;
	--prd-fs-md:    1.125rem;
	--prd-fs-lg:    1.375rem;
	--prd-fs-xl:    1.625rem;
	--prd-fs-2xl:   2rem;
	--prd-fs-3xl:   2.625rem;
	--prd-fs-4xl:   3.5rem;
	--prd-fs-5xl:   4.75rem;

	--prd-lh-tight:  1.1;
	--prd-lh-snug:   1.25;
	--prd-lh-base:   1.55;
	--prd-lh-loose:  1.75;

	/* Spacing scale (8pt) */
	--prd-s-1: 0.25rem;
	--prd-s-2: 0.5rem;
	--prd-s-3: 0.75rem;
	--prd-s-4: 1rem;
	--prd-s-5: 1.5rem;
	--prd-s-6: 2rem;
	--prd-s-7: 3rem;
	--prd-s-8: 4rem;
	--prd-s-9: 6rem;
	--prd-s-10: 8rem;

	/* Radii */
	--prd-r-sm: 4px;
	--prd-r-md: 8px;
	--prd-r-lg: 14px;
	--prd-r-xl: 24px;
	--prd-r-pill: 999px;

	/* Shadows */
	--prd-shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.06);
	--prd-shadow-md: 0 6px 18px rgba(17, 20, 24, 0.08);
	--prd-shadow-lg: 0 18px 40px rgba(17, 20, 24, 0.12);

	/* Container */
	--prd-container-max: 1280px;
	--prd-container-pad: clamp(1rem, 4vw, 2.5rem);

	/* Motion */
	--prd-ease:      cubic-bezier(.2, .7, .2, 1);
	--prd-dur-fast:  150ms;
	--prd-dur:       250ms;
	--prd-dur-slow:  400ms;

	--prd-header-h: 92px;
	--prd-utility-h: 42px;
}

@media (max-width: 768px) {
	:root {
		--prd-header-h: 68px;
		--prd-utility-h: 0px;
	}
}

/* -------------------------------------------------------------------------
   Helper classes — opt-in. Do NOT restyle bare elements globally to avoid
   breaking legacy pages.
   ------------------------------------------------------------------------- */

.prd-container {
	max-width: var(--prd-container-max);
	margin-inline: auto;
	padding-inline: var(--prd-container-pad);
	width: 100%;
}

.prd-section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.prd-eyebrow {
	font-family: var(--prd-ff-sans);
	font-size: var(--prd-fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--prd-c-accent-ink);
	font-weight: 600;
	margin: 0 0 var(--prd-s-3);
}

.prd-h1, .prd-h2, .prd-h3 {
	font-family: var(--prd-ff-display);
	color: var(--prd-c-ink);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 var(--prd-s-4);
	line-height: var(--prd-lh-tight);
}
.prd-h1 { font-size: clamp(2.25rem, 5.5vw, var(--prd-fs-5xl)); }
.prd-h2 { font-size: clamp(1.75rem, 3.5vw, var(--prd-fs-3xl)); }
.prd-h3 { font-size: clamp(1.25rem, 2vw, var(--prd-fs-xl)); }

.prd-lead {
	font-family: var(--prd-ff-sans);
	font-size: var(--prd-fs-md);
	line-height: var(--prd-lh-loose);
	color: var(--prd-c-ink-soft);
}

/* Buttons */
.prd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--prd-s-2);
	padding: 1rem 1.85rem;
	font-family: var(--prd-ff-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--prd-r-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--prd-dur) var(--prd-ease),
	            background-color var(--prd-dur) var(--prd-ease),
	            color var(--prd-dur) var(--prd-ease),
	            border-color var(--prd-dur) var(--prd-ease),
	            box-shadow var(--prd-dur) var(--prd-ease);
	line-height: 1.1;
}
.prd-btn:hover { transform: translateY(-1px); box-shadow: var(--prd-shadow-md); }
.prd-btn:focus-visible { outline: 2px solid var(--prd-c-accent); outline-offset: 2px; }

.prd-btn-primary {
	background: var(--prd-c-ink);
	color: #fff;
}
.prd-btn-primary:hover { background: #000; color: #fff; }

.prd-btn-accent {
	background: var(--prd-c-accent);
	color: #fff;
}
.prd-btn-accent:hover { background: var(--prd-c-accent-ink); color: #fff; }

.prd-btn-outline {
	background: transparent;
	color: var(--prd-c-ink);
	border-color: var(--prd-c-line);
}
.prd-btn-outline:hover { background: var(--prd-c-ink); color: #fff; border-color: var(--prd-c-ink); }

.prd-btn-ghost {
	background: transparent;
	color: var(--prd-c-ink);
	padding: 0.5rem 0.75rem;
}
.prd-btn-ghost:hover { background: var(--prd-c-bg-alt); }

.prd-btn-review svg { color: var(--prd-c-gold); }

.prd-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: var(--prd-r-pill);
	background: var(--prd-c-bg-alt);
	color: var(--prd-c-ink-soft);
	font-size: var(--prd-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Skip-link */
.prd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--prd-c-ink);
	color: #fff;
	padding: 0.75rem 1rem;
	z-index: 9999;
}
.prd-skip-link:focus { left: var(--prd-s-4); top: var(--prd-s-4); }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Image utility */
.prd-img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Page wrap when our custom templates are used */
.prd-page { font-family: var(--prd-ff-sans); color: var(--prd-c-ink); background: var(--prd-c-bg); }
.prd-page * { box-sizing: border-box; }

/* Hide parent breadcrumb/title bar on PRD pages (added programmatically) */
body.prd-template .breadcrumbs,
body.prd-template .page-heading,
body.prd-template .page-heading-title {
	display: none !important;
}

/* ===========================================================================
   GLOBAL FONT-SIZE OVERRIDE
   ---------------------------------------------------------------------------
   Royal hard-codes `body { font-size: 13px }` in style.css. Every unstyled
   element inherits 13px which is way too small. Force a readable base across
   the entire site (excluding admin bar / mobile menu plugin shells).
   =========================================================================== */
html body{
font-size: 17px !important;
line-height: 1.55 !important;
}
@media (max-width: 640px){
html body{ font-size: 16px !important; }
}

/* Common Royal/Woo elements that still pin their own small sizes */
html body p,
html body li,
html body td,
html body th,
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body .text,
html body .description,
html body .product-details,
html body .footer-product,
html body .product-title,
html body .footer-quick-links,
html body .footer-info,
html body .ftr-clm,
html body .copyright,
html body .menu-item a,
html body .widget,
html body .widget li,
html body .form-row,
html body .woocommerce-Price-amount,
html body .woocommerce table.shop_table,
html body .woocommerce-info,
html body .woocommerce-message,
html body .woocommerce-error,
html body .cart_totals,
html body .cart-collaterals{
font-size: inherit;
}

/* Inputs slightly larger for touch */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="search"],
html body input[type="number"],
html body input[type="password"],
html body select,
html body textarea{
font-size: 1rem !important;
}

/* Bare headings sitewide (only if not already a prd-h*) */
html body h1:not([class*="prd-"]){ font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.15; }
html body h2:not([class*="prd-"]){ font-size: clamp(1.625rem, 3.5vw, 2.25rem); line-height: 1.2; }
html body h3:not([class*="prd-"]){ font-size: clamp(1.25rem, 2.5vw, 1.625rem); line-height: 1.25; }
html body h4:not([class*="prd-"]){ font-size: 1.25rem; line-height: 1.3; }
html body h5:not([class*="prd-"]){ font-size: 1.125rem; line-height: 1.35; }
html body h6:not([class*="prd-"]){ font-size: 1rem; line-height: 1.4; }

/* Footer (PRD shell) — keep generous reading size */
html body .prd-footer,
html body .prd-footer p,
html body .prd-footer li,
html body .prd-footer a{
font-size: .9375rem;
line-height: 1.5;
}
html body .prd-footer .prd-footer-heading{ font-size: 1rem; }

/* Header nav (parent royal links creep small) */
html body .prd-primary-nav > li > a,
html body .prd-primary-menu > li > a{
font-size: 1rem !important;
line-height: 1.2 !important;
}

/* Buttons — already bumped in .prd-btn but cover royal `.button`s too */
html body .button,
html body .wc-block-components-button,
html body input[type="submit"]:not(.gform_button){
font-size: 1rem !important;
padding: .85rem 1.6rem !important;
}

/* Page content area on legacy editor pages */
html body .entry-content,
html body .page-content,
html body .post-content{
font-size: 1.0625rem;
line-height: 1.65;
}

/* ===========================================================================
   Sitewide font enforcement — defeat parent theme Roboto/Arial inheritance
   on navigation, breadcrumbs, mobile menu, sidebar widget links.
   =========================================================================== */
html body .prd-primary-nav,
html body .prd-primary-nav *,
html body .prd-mobile-drawer,
html body .prd-mobile-drawer *,
html body .prd-utility,
html body .prd-utility *,
html body .prd-breadcrumb,
html body .prd-breadcrumb *,
html body .woocommerce-breadcrumb,
html body .woocommerce-breadcrumb *,
html body .prd-shop-sidebar,
html body .prd-shop-sidebar *{
font-family: var(--prd-ff-sans) !important;
}

/* ===========================================================================
   Page hero — reusable cinematic banner (mirrors homepage .prd-hero treatment)
   Used by About, Reviews, Contact and any inner page that wants the same vibe.
   =========================================================================== */
.prd-page-hero{
position: relative;
min-height: clamp(340px, 48vh, 480px);
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
font-family: var(--prd-ff-sans);
}
.prd-page-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.prd-page-hero-bg img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.prd-page-hero-tint{
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,38,73,0.72) 0%, rgba(17,20,24,0.55) 50%, rgba(17,20,24,0.78) 100%);
}
.prd-page-hero-inner{
position: relative; z-index: 1;
padding-block: clamp(2.5rem, 6vw, 4.5rem);
text-align: left;
}
.prd-page-hero-inner > *{ max-width: 720px; }
.prd-page-hero-eyebrow{
color: #fff !important;
font-weight: 700;
letter-spacing: 0.22em;
font-size: 0.8125rem;
text-transform: uppercase;
display: inline-block;
padding: 0.4rem 0.85rem;
background: rgba(25, 55, 101, 0.95);
border-radius: 999px;
margin-bottom: 1.25rem;
}
.prd-page-hero-title{
color: #fff;
font-family: var(--prd-ff-display);
font-weight: 400;
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
margin: 0 0 1rem;
}
.prd-page-hero-lead{
color: rgba(255,255,255,0.92);
font-size: 1.0625rem;
line-height: 1.55;
max-width: 580px;
margin: 0 0 1.5rem;
}
.prd-page-hero-actions{ display: flex; gap: .75rem; flex-wrap: wrap; }
.prd-page-hero-actions .prd-btn-outline{
color: #fff;
border-color: rgba(255,255,255,0.5);
background: transparent;
}
.prd-page-hero-actions .prd-btn-outline:hover{
background: #fff;
color: var(--prd-c-ink);
border-color: #fff;
}

/* =========================================================================
   GLOBAL MOBILE OVERFLOW PROTECTION
   Prevent any rogue element (Royal artifacts, embedded videos, wide tables,
   absolutely positioned promos) from causing horizontal scroll on phones.
   ========================================================================= */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}

@media (max-width: 768px) {
/* Constrain media + iframes that lack responsive markup. */
body img,
body video,
body iframe,
body embed,
body object,
body table {
max-width: 100% !important;
height: auto;
}
/* Force long word-breaks so emails/URLs don't blow out cards. */
.prd-page,
.prd-page p,
.prd-page h1,
.prd-page h2,
.prd-page h3,
.prd-page td,
.prd-page li {
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* Tighten container padding on small screens. */
:root { --prd-container-pad: 1rem; }
.prd-container { padding-inline: var(--prd-container-pad) !important; }
/* Quote shell + any plugin-rendered card must respect viewport. */
.prd-quote-shell,
.prd-quote-body,
.prd-quote-hero,
.woocommerce,
.woocommerce-cart,
.dvin-wcql-form,
.wcqlcontainer {
max-width: 100% !important;
overflow-x: auto;
}
/* Plugin tables (cart, quote items) — allow internal scroll instead of page scroll. */
.prd-quote-shell table,
.woocommerce table.shop_table {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Floating quote button — keep it from sitting under iOS home indicator. */
.prd-floating-quote { bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
}

/* ===========================================================================
   Global typography rules:
   - No ALL CAPS anywhere on the site
   - Display/serif headings stay at weight 400 (DM Serif Display ships only 400)
   =========================================================================== */
html body,
html body *,
html body *::before,
html body *::after {
	text-transform: none !important;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .prd-h1, html body .prd-h2, html body .prd-h3,
html body .prd-page-hero-title,
html body .prd-section-title,
html body .prd-display {
	font-weight: 400 !important;
}