/*
Theme Name: HBMS Child
Template: kadence
Description: Hydro Blast & Marine Service — child theme for Kadence.
Version: 0.4.6
Text Domain: hbms
*/

/*
 * Colors and fonts come from Kadence: Customize → General → Colors (global palette)
 * and Customize → General → Typography. These aliases only give the palette readable names.
 */
:root {
	--hb-aqua: var(--global-palette1);
	--hb-aqua-dark: var(--global-palette2);
	--hb-navy: var(--global-palette3);
	--hb-ink: var(--global-palette4);
	--hb-muted: var(--global-palette5);
	--hb-line: #DCE6EE;
	--hb-light: var(--global-palette7);
	--hb-radius: 14px;
}

button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* ---------- header ---------- */
.site-branding a.brand img.custom-logo { max-height: 52px; width: auto; max-width: 240px; }
.site-branding .site-title-wrap { display: none; }
.header-navigation .menu > li > a { font-weight: 600; font-size: 15px; color: var(--hb-navy); }
.header-navigation .menu > li > a:hover { color: var(--hb-aqua-dark); }
/* menu item with CSS class "menu-cta" (Appearance → Menus) is shown as a button */
.main-navigation .primary-menu-container > ul > li.menu-item.menu-cta > a,
.main-navigation .primary-menu-container > ul > li.menu-item.menu-cta.current-menu-item > a {
	background: var(--hb-aqua); color: #fff; border-radius: 999px;
	padding: 10px 20px; margin-left: 8px;
}
.main-navigation .primary-menu-container > ul > li.menu-item.menu-cta > a:hover { background: var(--hb-aqua-dark); color: #fff; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

/* ---------- sections ---------- */
.hb-section { padding: clamp(44px, 5.5vw, 76px) 20px; }
.home .entry-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.hb-section > .hb-eco { margin-top: 0; }
.hb-section:has(> .hb-eco) { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.hb-section h2 + .hb-lead, .hb-section h2 + * { margin-top: 0; }
.hb-section.hb-alt { background: var(--hb-light); }
.hb-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.hb-eyebrow {
	color: var(--hb-aqua-dark); font-weight: 700; font-size: 13px;
	letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.hb-section h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 0 0 16px; }
.hb-lead { font-size: 18px; color: var(--hb-muted); max-width: 720px; }

/* ---------- hero ---------- */
/* Cover block: image, focal point and gradient overlay are set in the block itself */
.wp-block-cover.hb-hero {
	min-height: 0; align-items: stretch;
	color: #fff; padding: clamp(72px, 11vw, 150px) 20px clamp(80px, 11vw, 160px);
}
.hb-hero .wp-block-cover__inner-container { max-width: 1140px; margin-left: auto; margin-right: auto; }
.hb-hero h1 { color: #fff; font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; line-height: 1.08; max-width: 820px; margin: 0 0 20px; }
.hb-hero p { color: rgba(255,255,255,.86); font-size: clamp(17px, 1.6vw, 20px); max-width: 680px; }
.hb-hero .hb-eyebrow { color: var(--hb-aqua); }
.hb-hero ul.hb-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px auto 0; padding: 0; list-style: none; }
.hb-badges li { color: rgba(255,255,255,.9); font-weight: 600; font-size: 15px; }
.hb-badges li::before { content: "\2713"; color: var(--hb-aqua); margin-right: 8px; font-weight: 800; }

/* ---------- buttons ---------- */
/* default button look (colors, radius, padding, weight) is set in Customize → General → Buttons */
.hb-btn-ghost .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.hb-btn-ghost .wp-block-button__link:hover { border-color: #fff; color: #fff; }
.hb-btn-wa .wp-block-button__link { background: #25D366; color: #fff; }
.hb-btn-viber .wp-block-button__link { background: #7360F2; color: #fff; }

/* ---------- service cards ---------- */
.hb-cards { gap: 24px !important; margin-top: 32px; margin-bottom: 0 !important; }
.hb-card {
	background: #fff; border: 1px solid var(--hb-line); border-radius: var(--hb-radius);
	padding: 30px 28px; box-shadow: 0 10px 30px -18px rgba(5,46,87,.35);
	display: flex; flex-direction: column;
}
.hb-card h3 { font-size: 21px; font-weight: 800; margin: 0 0 12px; }
.hb-card p { color: var(--hb-muted); }
.hb-card ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.hb-card ul li { padding-left: 24px; position: relative; margin-bottom: 7px; }
.hb-card ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--hb-aqua); }
.hb-price {
	margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--hb-line);
	font-weight: 800; color: var(--hb-navy); font-size: 18px;
}
.hb-card .hb-price { margin-bottom: 0; }
.hb-card .hb-price-note { font-weight: 500; font-size: 14px; color: var(--hb-muted); margin: 4px 0 0; }
.hb-compare .hb-card-pro { border: 2px solid var(--hb-aqua); }
.hb-card ul.hb-list-con li::before, .hb-card ul.hb-list-pro li::before { background: none; width: auto; height: auto; top: 0; font-weight: 800; }
.hb-card ul.hb-list-con li::before { content: "✕"; color: var(--hb-muted); }
.hb-card ul.hb-list-pro li::before { content: "✓"; color: var(--hb-aqua); }
.hb-card { padding-top: 0; overflow: hidden; }
.hb-card .hb-card-img { margin: 0 -28px 24px; }
.hb-card > .wp-block-heading:first-child { margin-top: 30px; } /* card without a photo yet */
.hb-card .hb-card-img img { display: block; width: 100%; }

/* ---------- photo blocks ---------- */
.hb-photo img { display: block; width: 100%; height: auto; border-radius: var(--hb-radius); box-shadow: 0 18px 40px -24px rgba(5,46,87,.5); }
.hb-photo-wide { margin-top: 44px; }
.hb-eco-cols { gap: 40px !important; align-items: center !important; }
.hb-eco .hb-photo img { box-shadow: none; }

/* ---------- steps ---------- */
.hb-steps { counter-reset: hbstep; gap: 24px !important; margin-top: 36px; }
.hb-step { position: relative; padding-top: 58px; }
.hb-step::before {
	counter-increment: hbstep; content: counter(hbstep);
	position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
	background: var(--hb-navy); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.hb-step h3 { font-size: 19px; margin: 0 0 8px; }
.hb-step p { color: var(--hb-muted); margin: 0; }

/* ---------- eco ---------- */
.hb-eco { background: var(--hb-navy); color: #fff; border-radius: var(--hb-radius); padding: clamp(28px, 4vw, 48px); }
.hb-eco h2 { color: #fff; }
.hb-eco p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 760px; }

/* ---------- areas ---------- */
.hb-areas { gap: 24px !important; margin-top: 32px; }
.hb-area { border-left: 4px solid var(--hb-aqua); padding: 6px 0 6px 18px; }
.hb-area h3 { font-size: 19px; margin: 0 0 6px; }
.hb-area p { color: var(--hb-muted); margin: 0; }
.hb-note { margin-top: 28px; color: var(--hb-muted); }

/* ---------- FAQ ---------- */
.hb-faq .wp-block-details {
	background: #fff; border: 1px solid var(--hb-line); border-radius: 12px;
	padding: 18px 22px; margin-bottom: 12px;
}
.hb-faq .wp-block-details summary { font-weight: 700; color: var(--hb-navy); cursor: pointer; }
.hb-faq .wp-block-details p { color: var(--hb-muted); margin: 12px 0 0; }

/* ---------- contact + form ---------- */
.hb-contact { gap: 40px !important; margin-top: 32px; }
.hb-contact-card { background: var(--hb-light); border-radius: var(--hb-radius); padding: 28px; }
.hb-contact-card p { margin: 0 0 10px; }
.hb-contact-card p.hb-contact-label { margin: 0; }
.hb-contact-card .hb-legal { font-size: 13px; color: var(--hb-muted); margin-top: 18px; }
.wpcf7 form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.wpcf7 form > p, .wpcf7 .hb-full { grid-column: 1 / -1; margin: 0; }
.wpcf7 .hb-field { margin: 0; }
.wpcf7 label { font-weight: 600; font-size: 14px; color: var(--hb-navy); display: block; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel],
.wpcf7 input[type=date], .wpcf7 input[type=number], .wpcf7 select, .wpcf7 textarea {
	width: 100%; margin-top: 6px; border: 1px solid var(--hb-line); border-radius: 10px;
	padding: 12px 14px; font-size: 16px; background: #fff;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid var(--hb-aqua); border-color: transparent; }
.wpcf7 textarea { min-height: 120px; }
.wpcf7 .hb-file { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.wpcf7 .hb-file input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.wpcf7 .hb-file-btn {
	flex: none; background: #fff; border: 1px solid var(--hb-line); border-radius: 10px;
	padding: 11px 16px; font-weight: 600; font-size: 15px; color: var(--hb-navy);
}
.wpcf7 .hb-file:hover .hb-file-btn { border-color: var(--hb-aqua); }
.wpcf7 .hb-file:focus-within .hb-file-btn { outline: 2px solid var(--hb-aqua); }
.wpcf7 .hb-file-name { font-size: 14px; font-weight: 400; color: var(--hb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcf7 .wpcf7-acceptance label { font-weight: 400; color: var(--hb-muted); }
.wpcf7 input[type=submit] {
	background: var(--hb-aqua); color: #fff; border: 0; border-radius: 999px;
	padding: 15px 34px; font-weight: 700; font-size: 16px; cursor: pointer;
}
.wpcf7 input[type=submit]:hover { background: var(--hb-aqua-dark); }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }

/* ---------- languages ---------- */
/* Montserrat has no Greek glyphs: use one system font for the whole Greek page instead of mixing two */
html[lang^="el"] { --global-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; }
.header-navigation .menu > li.hb-lang { margin-left: 14px; }
.header-navigation .menu > li.hb-lang > a { font-weight: 700; letter-spacing: .04em; }
.header-navigation .menu > li.hb-lang .sub-menu { min-width: 90px; }
.header-navigation .menu > li.hb-lang .sub-menu a { font-weight: 600; padding: 8px 18px; }

/* ---------- mobile ---------- */
@media (max-width: 781px) {
	.wpcf7 form { grid-template-columns: 1fr; }
	/* text spans the full width on phones: darker vertical overlay instead of the block's side gradient */
	.hb-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(5,46,87,.92) 0%, rgba(5,46,87,.85) 55%, rgba(5,46,87,.55) 100%) !important;
	}
	/* aspect ratio is set in the image block (16/7); taller crop on phones */
	.hb-photo-wide img { aspect-ratio: 16 / 10 !important; }
	.hb-section, .wp-block-cover.hb-hero { padding-left: 16px; padding-right: 16px; }
}