/*
Theme Name:   SummitWright
Theme URI:    https://example.com
Description:  Child theme of Ollie for SummitWright Pty Ltd. Design tokens live in theme.json;
              the content model lives in inc/fields.php. Do not edit the parent theme.
Author:       Al Elmi
Template:     ollie
Version:      1.0.4
Requires PHP: 8.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  sw
*/

/*
  Prefer theme.json for anything it can express — palette, type scale, spacing, block
  defaults. This file is for the small remainder that theme.json genuinely cannot do.

  Keep it short. A long style.css in a block theme usually means something belongs in
  theme.json instead.
*/

/* Visible focus ring — accessibility, and the default is too subtle */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
   Mobile navigation (parts/header.php) — hamburger toggle + collapsing
   nav/CTA panel. Site-wide so every template gets it from one place.
   ------------------------------------------------------------------- */
.sw-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
}
.sw-nav-toggle:hover,
.sw-nav-toggle:focus-visible {
	background-color: var(--wp--preset--color--sunken, #f6f8fc);
}
.sw-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 22px;
	background-color: var(--wp--preset--color--navy, #00285a);
	border-radius: 2px;
	transition: transform 180ms ease, opacity 180ms ease;
}
.sw-nav-toggle.is-open .sw-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.sw-nav-toggle.is-open .sw-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.sw-nav-toggle.is-open .sw-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Consultancy dropdown (parts/header.php, added 29 Oct 2026). Desktop: card opens
   on hover or keyboard focus; an invisible ::before bridge spans the gap between
   the link and the card so the submenu doesn't close while the pointer crosses it. */
.sw-nav-item--has-sub {
	position: relative;
}
.sw-nav-item--has-sub::before {
	content: "";
	position: absolute;
	top: 100%;
	left: -0.75rem;
	right: -0.75rem;
	height: 18px;
	display: none;
}
.sw-nav-sub {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 240px;
	background-color: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line, #dde4ef);
	border-radius: 10px;
	box-shadow: 0 16px 32px -12px rgba(0, 40, 90, 0.22);
	display: none;
	z-index: 110;
}
.sw-nav-item--has-sub:hover::before,
.sw-nav-item--has-sub:focus-within::before {
	display: block;
}
.sw-nav-item--has-sub:hover > .sw-nav-sub,
.sw-nav-item--has-sub:focus-within > .sw-nav-sub {
	display: block;
}
.sw-nav-sub li a {
	display: block;
	padding: 0.55rem 1.1rem;
	color: var(--wp--preset--color--ink, #1c2b3a);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}
.sw-nav-sub li a:hover,
.sw-nav-sub li a:focus-visible {
	background-color: var(--wp--preset--color--sunken, #f6f8fc);
	color: var(--wp--preset--color--navy, #00285a);
}

@media (max-width: 880px) {
	.sw-nav-toggle {
		display: flex;
	}

	/* In the mobile panel the submenu is always expanded — hover doesn't exist
	   on touch, and hiding the services behind a tap costs discoverability. */
	.sw-nav-item--has-sub::before {
		display: none !important;
	}
	.sw-nav-caret {
		display: none;
	}
	.sw-nav-sub {
		position: static;
		transform: none;
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0.5rem 0 0;
	}
	.sw-nav-sub li a {
		padding: 0.4rem 0 0.4rem 1rem;
		border-left: 2px solid var(--wp--preset--color--line, #dde4ef);
		white-space: normal;
	}

	.sw-site-header__collapse {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
		background-color: var(--wp--preset--color--surface, #fff);
		border-bottom: 1px solid var(--wp--preset--color--line, #dde4ef);
		box-shadow: 0 16px 32px -16px rgba(0, 40, 90, 0.18);
		padding: 1.25rem 1.5rem 1.75rem;
	}
	.sw-site-header__collapse.is-open {
		display: flex;
	}

	.sw-site-header__nav {
		justify-content: flex-start !important;
		width: 100%;
	}
	.sw-site-header__menu,
	.sw-site-header__menu--fallback {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 1rem !important;
		width: 100%;
	}
	.sw-site-header__cta {
		text-align: center;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
   Hero body paragraph sizing on small phones — each page uses its own
   hero class (no shared .sw-hero across templates), so each is listed.
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sw-home-hero p,
	.sw-mp-hero__sub,
	.sw-sra-hero p,
	.sw-consult-hero__sub {
		max-width: 32ch !important;
		line-height: 1.55 !important;
	}
}