/* ==========================================================================
   WordPress-specific overrides.
   The original design's CSS (assets/css/style.css) is untouched; this file
   only adds the small amount of extra styling WordPress itself needs —
   admin bar offset, native menu lists, generic page/post content, comments.
   ========================================================================== */

/* Logo — base look only. Actual width/height/font-size for both the
   uploaded image logo and the fallback initials mark are written as an
   INLINE style per-request from inc/template-helpers.php (wcs_the_logo()),
   driven by the Customizer sliders. That guarantees the resize control
   always wins the cascade, so nothing here needs to set dimensions. */
.logo--footer { font-size: 1.25rem; }

/* Admin bar pushes the fixed header down instead of overlapping it */
body.admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar #header { top: 46px; }
}

/* wp_nav_menu() outputs <ul><li>, the original design used flat <a> tags */
nav ul#primary-menu,
#mobileNav ul#mobile-menu,
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul#primary-menu { display: flex; gap: 2rem; align-items: center; }
#mobileNav ul#mobile-menu { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }

nav ul#primary-menu li,
#mobileNav ul#mobile-menu li,
.footer-col ul li {
	list-style: none;
	margin: 0;
}

/* ==========================================================================
   DESKTOP DROPDOWN (nav ul#primary-menu)
   Any depth of nested <ul class="sub-menu"> is supported:
   - The 1st-level submenu drops straight down below its parent link.
   - Every deeper level flies out to the RIGHT of its own parent instead of
     stacking underneath — that's what was missing before and caused every
     level to render on top of each other in the same spot.
   ========================================================================== */
nav ul#primary-menu li.menu-item-has-children { position: relative; }

nav ul#primary-menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow-lg);
	width: max-content;
	min-width: 220px;
	max-width: 280px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Every level deeper than the first flies out sideways, not downward,
   so it never overlaps its own sibling items. */
nav ul#primary-menu ul.sub-menu ul.sub-menu {
	top: -0.5rem;
	left: 100%;
	margin-left: 2px;
	transform: translateX(6px);
}

nav ul#primary-menu li.menu-item-has-children:hover > ul.sub-menu,
nav ul#primary-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
/* nested flyouts animate in sideways instead of downward */
nav ul#primary-menu ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
nav ul#primary-menu ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	transform: translateX(0);
}

nav ul#primary-menu ul.sub-menu li { padding: 0; width: 100%; }
nav ul#primary-menu ul.sub-menu a {
	display: block;
	padding: 0.6rem 1.1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
nav ul#primary-menu ul.sub-menu a::after { display: none; } /* no underline hover effect inside dropdowns */
nav ul#primary-menu ul.sub-menu li:hover > a { background: var(--bg-section); color: var(--text); }

/* JS (main.js) adds this class when a dropdown would otherwise run off the
   right edge of the screen — flips it to open leftward/inward instead. */
nav ul#primary-menu ul.sub-menu.wcs-flyout-left { left: auto; right: 0; }
nav ul#primary-menu ul.sub-menu ul.sub-menu.wcs-flyout-left { left: auto; right: 100%; margin-left: 0; margin-right: 2px; }

/* Small chevron on any desktop item that has children, so it reads as a
   dropdown before the person even hovers it. */
nav ul#primary-menu li.menu-item-has-children > a::before {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 6px;
	vertical-align: middle;
	opacity: 0.6;
}
nav ul#primary-menu ul.sub-menu li.menu-item-has-children > a::before {
	transform: rotate(-45deg);
	float: right;
	margin-top: 4px;
}

/* ==========================================================================
   MOBILE ACCORDION (#mobileNav ul#mobile-menu)
   Sub-menus are collapsed by default at every depth and only expand when
   their own toggle button (added by wcs_mobile_menu_toggle_button() in
   inc/template-helpers.php) is tapped — nothing shows "all at once" anymore.
   ========================================================================== */
#mobileNav ul#mobile-menu li { width: 100%; text-align: center; }
#mobileNav ul#mobile-menu .menu-item-has-children { position: relative; }

#mobileNav ul#mobile-menu ul.sub-menu {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}
#mobileNav ul#mobile-menu li.wcs-submenu-open > ul.sub-menu {
	max-height: 1000px;
	opacity: 1;
}
#mobileNav ul#mobile-menu ul.sub-menu li { margin-bottom: 0.9rem; }
#mobileNav ul#mobile-menu ul.sub-menu ul.sub-menu li { font-size: 0.9rem; opacity: 0.85; }
#mobileNav ul#mobile-menu ul.sub-menu a { font-size: 1rem; }

.wcs-submenu-toggle {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0.35rem;
	margin-left: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	touch-action: manipulation;
}
.wcs-submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}
li.wcs-submenu-open > .wcs-submenu-toggle svg { transform: rotate(180deg); }

/* Pre-existing issue in the original design: `.mobile-nav a { color: var(--text) }`
   has higher specificity than `.cta-btn { color: white }`, so the "Start a
   Project" button's own text turned invisible (dark-on-dark) inside the
   mobile nav. Restoring it here. */
.mobile-nav .cta-btn { color: #fff; }

/* Generic page/post content (used by page.php / index.php / 404.php) */
.wcs-page-content { padding-top: 140px; padding-bottom: 4rem; }
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content p { margin-bottom: 1.25rem; color: var(--text-secondary); }
.entry-content h2, .entry-content h3 { margin: 2rem 0 1rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: 8px; }
.entry-content a { color: var(--build); }

.page-links { margin-top: 2rem; }

/* Comments (only shown on pages/posts where comments are enabled) */
.comment-list { list-style: none; margin: 2rem 0; padding: 0; }
.comment-list .comment-body { padding: 1.5rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	margin-bottom: 1rem;
	font-family: inherit;
}
.comment-form .form-submit input {
	background: var(--text);
	color: #fff;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

/* Screen-reader text, used by wp_link_pages / accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto; overflow: visible;
	z-index: 100000;
	background: var(--text, #0f172a);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}