/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* --- Client-approved palette: "Loud Luxury" (round 2) ---------------
   Sherwin-Williams refs so the client can match them physically.
   Every colour below is referenced as a variable, so a round three is
   a four-line edit here rather than a hunt through the stylesheet.   */
:root {
	--kass-sand:      #E8E7E2; /* SW 9582 White Sand  — light ground   */
	--kass-pachyderm: #ABA598; /* SW 9596 Pachyderm   — soft neutral   */
	--kass-rojo:      #3A2922; /* SW 9182 Rojo Marron — the accent     */
	--kass-dipper:    #363C3E; /* SW 9645 Big Dipper  — text, depth    */
	--kass-hairline:  rgba(54, 60, 62, .16);
	--kass-lift:      rgba(54, 60, 62, .14);
}


/* ==================================================================
   KASS — interior service pages
   Palette: client-approved "Loud Luxury" set — see :root tokens above.
   Superseded the v0.9 navy/gold/cream set on 22 Aug 2026.
   ================================================================== */

/* --- Hero clearance -----------------------------------------------
   The content area had padding-top: 0 and its first paragraph began
   at the exact pixel the title bar ended. Measured gap: 0px.        */
/* Top breathing room for standard content pages.
   Home is excluded deliberately: its first section is a full-bleed hero that the
   transparent overlay header (#header.main-header-overlay) is designed to float over.
   Any top padding on .content pushes that hero down and exposes the white .content
   background behind the header, which swallows the white logo and nav.
   Add further page classes to the :not() list if more full-bleed hero pages appear. */
body:not(.home) .content {
	padding-top: clamp(2.75rem, 5vw, 4.5rem);
}

/* --- Interior typography ------------------------------------------
   Was duplicated in a \3c style> block inside all 16 page bodies.
   Lives here once instead.                                          */
.content p,
.content li            { line-height: 1.75; }
.content p             { margin-bottom: 1.25em; }
.content ul            { margin: 1.6em 0; padding-left: 1.35em; }
.content li            { margin-bottom: 1.4em; }
.content li:last-child { margin-bottom: 0; }
.content h2            { line-height: 1.25; margin-top: 2.4em; margin-bottom: .85em; }
.content h3            { line-height: 1.3;  margin-top: 1.9em; margin-bottom: .65em; }
.content .wp-block-separator { margin: 2.9em 0; opacity: .25; }

/* --- Tiles ---------------------------------------------------------
   The two grouped sections ("Where your file is right now" and
   "Or by situation") were bare headings floating in whitespace with
   nothing to say they were tiles. Cream ground, hairline, and a gold
   top rule as the unifying mark.                                    */
.content .wp-block-columns {
	gap: 1.5rem;
	margin: 2.2em 0;
	align-items: stretch;
}

.content .wp-block-columns .wp-block-column {
	display: flex;
	flex-direction: column;
	background: var(--kass-sand);
	border: 1px solid var(--kass-hairline);
	border-top: 3px solid var(--kass-rojo);
	padding: 1.75rem 1.75rem 1.5rem;
	transition: transform .18s ease, box-shadow .18s ease;
}

.content .wp-block-columns .wp-block-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px var(--kass-lift);
}

/* First heading sits flush with the card's top padding. */
.content .wp-block-columns .wp-block-column > h3:first-child,
.content .wp-block-columns .wp-block-column > *:first-child {
	margin-top: 0;
}

/* Push the arrow link to the bottom so a row of cards lines up. */
.content .wp-block-columns .wp-block-column > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: .75rem;
}

.content .wp-block-columns .wp-block-column a {
	color: var(--kass-dipper);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(58, 41, 34, .55);
	padding-bottom: 1px;
}

.content .wp-block-columns .wp-block-column a:hover,
.content .wp-block-columns .wp-block-column a:focus {
	border-bottom-color: var(--kass-rojo);
}

@media (max-width: 781px) {
	.content .wp-block-columns .wp-block-column {
		padding: 1.4rem 1.35rem 1.25rem;
	}
}

/* --- Q&A accordion -------------------------------------------------
   Full-width rows that expand. Native <details>, so it is keyboard
   accessible and still readable with CSS or JS unavailable.         */
.content .kass-faq {
	border-bottom: 1px solid var(--kass-hairline);
}

.content .kass-faq:first-of-type {
	border-top: 1px solid var(--kass-hairline);
}

.content .kass-faq > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3rem 1.15rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kass-dipper);
	transition: color .15s ease;
}

/* Hide the default triangle in every engine. */
.content .kass-faq > summary::-webkit-details-marker { display: none; }
.content .kass-faq > summary::marker               { content: ""; }

/* wpautop can wrap the question text in a paragraph. Neutralised. */
.content .kass-faq > summary p {
	display: inline;
	margin: 0;
}

.content .kass-faq > summary:hover { color: var(--kass-rojo); }

.content .kass-faq > summary:focus-visible {
	outline: 2px solid var(--kass-rojo);
	outline-offset: 3px;
}

/* Chevron. Points down when closed, up when open. */
.content .kass-faq > summary::after {
	content: "";
	position: absolute;
	right: .85rem;
	top: 50%;
	width: .6rem;
	height: .6rem;
	margin-top: -.42rem;
	border-right: 2px solid var(--kass-rojo);
	border-bottom: 2px solid var(--kass-rojo);
	transform: rotate(45deg);
	transition: transform .2s ease, margin-top .2s ease;
}

.content .kass-faq[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -.18rem;
}

.content .kass-faq .kass-faq-a {
	padding: 0 3rem 1.35rem 0;
}

.content .kass-faq .kass-faq-a > *:first-child { margin-top: 0; }
.content .kass-faq .kass-faq-a > *:last-child  { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.content .wp-block-columns .wp-block-column,
	.content .kass-faq > summary::after {
		transition: none;
	}
}

/* ===== Header right column: keep on one line (KASS, 2026-10-06) =====
   Make A Payment (248) + phone (130) + drawer trigger (72) need 450px; the
   32% column is narrower than that below ~1430px viewport, so the widgets
   wrapped to two rows and the first row was pushed above the top of the page. */
#header .elementor-element-412ab7c > .elementor-widget-wrap{
  flex-wrap:nowrap;
}
#header .elementor-element-934883f,
#header .elementor-element-934883f *{
  white-space:nowrap;
}

/* ===== Dropdown hover bridge (KASS, 2026-10-06) =====
   The parent theme slides each submenu in from 10px below its parent over .85s.
   Until that finishes there is a dead strip between the menu item and the
   submenu; a mouse crossing it drops :hover and the menu collapses.
   These invisible bridges fill the strip so hover is never lost.
   To revert: delete this block. */
#header .main-nav li.menu-item-has-children:hover > .nav-item-children{
  pointer-events:auto;
}
#header .main-nav > li.menu-item-has-children > .nav-item-children::after{
  content:""; position:absolute; left:0; right:0; top:-16px; height:16px;
}
#header .main-nav .nav-item-children .nav-item-children::after{
  content:""; position:absolute; top:-12px; bottom:0; left:-16px; width:16px;
}