/*
Theme Name:   HAPI Child
Theme URI:    https://hawaiiasphalt.org
Description:  Hawaii Asphalt Paving Industry child theme for GeneratePress. Holds all site styling; content stays editable in the block editor.
Author:       HAPI
Template:     generatepress
Version:      0.2.0
Requires at least: 6.6
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hapi-child
*/

/* ==========================================================================
   Tokens
   Colours mirror theme.json (editor palette) and the GeneratePress global
   colours (Customizer). Change all three together.
   ========================================================================== */

:root {
	--hapi-black: #000000;
	--hapi-charcoal: #333333;
	--hapi-card-dark: #2a2a2a;
	--hapi-footer: #222222;
	--hapi-amber: #ffc550;
	--hapi-gold: #f2c21b;
	--hapi-ochre: #d49636;
	--hapi-link: #b9802a;
	--hapi-link-hover: #8a5d18;
	--hapi-cream: #f6f4f0;
	--hapi-text: #1d1d1d;
	--hapi-muted: #6b6760;
	--hapi-border: #e6e3dd;
	--hapi-nav-text: #ededed;

	--hapi-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--hapi-font-heading: 'Archivo Black', 'Arial Black', Impact, sans-serif;
	--hapi-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--hapi-gutter: clamp(20px, 4vw, 48px);
	--hapi-header-gutter: clamp(20px, 3vw, 32px);
	--hapi-pill: 50px;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--hapi-font-body);
}

body {
	color: var(--hapi-text);
	font-size: 17px;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--hapi-font-heading);
	font-weight: 400;
	line-height: 1.1;
}

code,
kbd,
pre,
samp {
	font-family: var(--hapi-font-mono);
}

/* Pill buttons everywhere (block buttons get this from theme.json). */
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: var(--hapi-pill);
	font-weight: 700;
}

/* Visible keyboard focus on dark and light backgrounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.menu-toggle:focus-visible {
	outline: 3px solid var(--hapi-amber);
	outline-offset: 2px;
}

/* ==========================================================================
   Header
   Black bar · banner logo flush top-left at 100px · menu · amber pill
   ========================================================================== */

.site-header {
	background: var(--hapi-black);
}

.site-header .inside-header {
	padding: 0 var(--hapi-header-gutter) 0 0;
	gap: 0 clamp(20px, 3vw, 32px);
}

.site-header .site-logo {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.site-header .site-logo a {
	display: block;
}

.site-header .header-image {
	display: block;
	height: 100px;
	width: auto;
	max-width: none;
}

/* Navigation */

#site-navigation {
	flex: 1 1 auto;
	background: transparent;
}

#site-navigation .inside-navigation {
	justify-content: space-between;
	align-items: center;
}

#site-navigation .main-nav {
	margin: 0 auto;
}

.main-navigation .main-nav ul {
	gap: 8px 16px;
}

.main-navigation .main-nav ul li a {
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	color: var(--hapi-nav-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus-visible {
	color: var(--hapi-amber);
	background: transparent;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.current_page_parent > a {
	color: var(--hapi-amber);
	border-bottom-color: var(--hapi-amber);
	background: transparent;
}

/* Header button (Appearance → Menus → "Header button") */

.menu-bar-items {
	align-items: center;
}

.hapi-header-button,
.main-navigation .menu-bar-items ul.hapi-header-button {
	/* GeneratePress hides every nav <ul> under the mobile breakpoint; keep the pill. */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hapi-header-button li {
	margin: 0;
}

.main-navigation .hapi-header-button a,
.hapi-header-button a {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--hapi-pill);
	background: var(--hapi-amber);
	color: #222222;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.main-navigation .hapi-header-button a:hover,
.main-navigation .hapi-header-button a:focus-visible {
	background: var(--hapi-gold);
	color: #222222;
}

/* Mobile and tablet: menu collapses to a toggle, logo stays 100px tall.
   Breakpoint matches generate_mobile_menu_media_query in inc/header.php. */
@media (max-width: 1240px) {
	.site-header .inside-header {
		padding-right: 0;
	}

	.mobile-menu-control-wrapper {
		gap: 12px;
		padding: 12px var(--hapi-header-gutter);
		margin-left: auto;
	}

	.mobile-menu-control-wrapper .menu-toggle,
	.main-navigation .menu-toggle {
		flex: 0 0 auto;
		padding: 10px 14px;
		background: transparent;
		color: var(--hapi-nav-text);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
	}

	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus,
	.has-inline-mobile-toggle #site-navigation.toggled {
		background: transparent;
		color: var(--hapi-amber);
	}

	#site-navigation.toggled {
		background: var(--hapi-charcoal);
	}

	#site-navigation.toggled .main-nav {
		margin: 0;
		width: 100%;
	}

	#site-navigation.toggled .main-nav ul {
		gap: 0;
	}

	#site-navigation.toggled .main-nav ul li a {
		padding: 14px var(--hapi-gutter);
		border-bottom: 1px solid #444444;
		font-size: 16px;
	}

	#site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
	#site-navigation.toggled .main-nav ul li.current_page_parent > a {
		border-bottom-color: #444444;
		box-shadow: inset 4px 0 0 var(--hapi-amber);
	}
}

/* Narrow phones: logo keeps its 100px row; pill and toggle wrap below it. */
@media (max-width: 480px) {
	.mobile-menu-control-wrapper {
		flex-basis: 100%;
		justify-content: space-between;
		flex-direction: row;
		order: 0;
		margin-left: 0;
		padding-top: 0;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--hapi-footer);
	color: #cccccc;
}

.site-footer .footer-widgets {
	background: var(--hapi-footer);
	color: #cccccc;
	font-size: 14px;
	line-height: 1.6;
}

.site-footer .footer-widgets-container {
	padding: 36px var(--hapi-gutter);
}

.site-footer .footer-widgets-container .inside-footer-widgets {
	gap: 32px;
	margin: 0; /* GeneratePress offsets this by -40px at tablet width */
}

.site-footer .inside-footer-widgets > div {
	flex: 1 1 220px;
	margin: 0;
}

.site-footer .footer-widgets .widget {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
}

.site-footer .footer-widgets p {
	margin-bottom: 0.75em;
}

.site-footer .footer-widgets strong,
.site-footer .footer-widgets .hapi-footer-title {
	display: block;
	color: #ffffff;
	font-weight: 700;
}

.site-footer .footer-widgets a:not(.wp-element-button) {
	color: #cccccc;
	text-decoration: underline;
	text-decoration-color: #666666;
	text-underline-offset: 3px;
}

.site-footer .footer-widgets a:not(.wp-element-button):hover {
	color: var(--hapi-amber);
	text-decoration-color: var(--hapi-amber);
}

.site-footer .footer-widgets .wp-block-buttons {
	margin-top: 4px;
}

.site-footer .footer-widgets .wp-element-button {
	padding: 10px 18px;
	font-size: 14px;
}

.hapi-placeholder {
	padding: 10px 12px;
	border: 1px dashed #666666;
	color: #999999;
	font-family: var(--hapi-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

.site-info {
	background: var(--hapi-footer);
	color: #8f8f8f;
	font-size: 13px;
}

.site-info .inside-site-info {
	justify-content: flex-start;
	padding: 16px var(--hapi-gutter);
	border-top: 1px solid #333333;
}

@media (max-width: 768px) {
	.site-footer .inside-footer-widgets {
		flex-direction: column;
		gap: 24px;
	}

	.site-footer .inside-footer-widgets > div {
		flex: 0 0 auto;
	}
}

/* Header search (GeneratePress search modal) */
.main-navigation .menu-bar-item > a {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	color: var(--hapi-nav-text);
	line-height: 1;
}

.main-navigation .menu-bar-item > a:hover,
.main-navigation .menu-bar-item > a:focus-visible {
	background: transparent;
	color: var(--hapi-amber);
}

.main-navigation .menu-bar-item .gp-icon svg {
	width: 18px;
	height: 18px;
}

.gp-modal .search-modal-form {
	border-radius: var(--hapi-pill);
	overflow: hidden;
}

.gp-modal .search-modal-fields input {
	font-size: 18px;
}