/* ==========================================================================
   JJHicks theme styles (front end + editor)
   Colours, type and spacing live in theme.json; this file adds layout,
   block styles, icons and Brevo form styling.
   ========================================================================== */

:root {
	--jjh-radius: 4px;
	--jjh-shadow: 0 1px 2px rgba(15, 32, 56, .06), 0 8px 24px rgba(15, 32, 56, .08);
	--jjh-border: 1px solid var(--wp--preset--color--light-grey);
}

/* Remove gaps between header / main / footer */
.wp-site-blocks > * + * { margin-block-start: 0; }
.jjh-main > * + *, .jjh-main .wp-block-post-content > * + * { margin-block-start: 0; }

/* Sections ---------------------------------------------------------------- */
.jjh-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}
.jjh-hero { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); position: relative; overflow: hidden; }
.jjh-hero::after {
	/* subtle network-shield watermark */
	content: ""; position: absolute; right: -60px; top: 50%; width: 460px; height: 520px; transform: translateY(-50%);
	background: url("../images/mark.svg") no-repeat center / contain; opacity: .06; filter: brightness(0) invert(1); pointer-events: none;
}
.jjh-hero h1 { max-width: 20ch; }
.jjh-hero .has-large-font-size, .jjh-hero p { max-width: 62ch; }
.jjh-title-band { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.jjh-page-content { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.jjh-muted { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }
.jjh-final-cta { text-align: center; }
.jjh-final-cta.is-dark { background: var(--wp--preset--color--navy); color: #fff; }
.jjh-final-cta.is-dark h2 { color: #fff; }
.jjh-thanks h1 { max-width: 22ch; }

/* Text links on dark backgrounds */
.has-deep-navy-background-color a:where(:not(.wp-element-button)),
.has-navy-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--steel-light); }
.has-deep-navy-background-color a:where(:not(.wp-element-button)):hover,
.has-navy-background-color a:where(:not(.wp-element-button)):hover { color: #fff; }

/* Outline buttons on dark backgrounds */
.has-deep-navy-background-color .is-style-outline > .wp-block-button__link,
.has-navy-background-color .is-style-outline > .wp-block-button__link {
	color: #fff; border-color: rgba(255,255,255,.7); background: transparent;
}
.has-deep-navy-background-color .is-style-outline > .wp-block-button__link:hover,
.has-navy-background-color .is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--navy); border-color: #fff; }
.has-deep-navy-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--steel); border-color: var(--wp--preset--color--steel);
}
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 2px; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); }

/* Block style: eyebrow --------------------------------------------------- */
.is-style-jjh-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--steel); margin-bottom: .25rem;
}
.is-style-jjh-eyebrow.has-text-color { color: inherit; }

/* Block style: card ------------------------------------------------------ */
.is-style-jjh-card {
	background: #fff; color: var(--wp--preset--color--deep-navy);
	border: var(--jjh-border); border-radius: var(--jjh-radius); box-shadow: var(--jjh-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.is-style-jjh-card h2, .is-style-jjh-card h3 { color: var(--wp--preset--color--navy); }
.is-style-jjh-card > * + * { margin-block-start: .85rem; }
.wp-block-column > .is-style-jjh-card + .is-style-jjh-card { margin-top: 1.25rem; }
.jjh-cards { gap: 1.5rem; margin-bottom: 1.5rem; }
.jjh-cards > .wp-block-column > .is-style-jjh-card:only-child { height: 100%; box-sizing: border-box; }

/* Block style: accent bar ------------------------------------------------ */
.is-style-jjh-accent-left {
	border-left: 4px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--mist);
	padding: 1.25rem 1.5rem; border-radius: 0 var(--jjh-radius) var(--jjh-radius) 0;
}
.has-mist-background-color .is-style-jjh-accent-left { background: #fff; }
.jjh-step-num {
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.75rem;
	color: var(--wp--preset--color--steel); line-height: 1; margin: 0;
}
.jjh-steps { gap: 1.5rem; margin-bottom: 1.5rem; }
.jjh-steps .is-style-jjh-accent-left:only-child { height: 100%; box-sizing: border-box; }

/* Icons on cards (class: jjh-icon jjh-icon-{name}) ------------------------ */
.jjh-icon::before {
	content: ""; display: block; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 8px;
	background-color: var(--wp--preset--color--navy);
	-webkit-mask: var(--jjh-icon) center / 26px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask: var(--jjh-icon) center / 26px no-repeat exclude, linear-gradient(#000 0 0);
}
.jjh-icon-enable   { --jjh-icon: url("../images/icons/enable.svg"); }
.jjh-icon-presence { --jjh-icon: url("../images/icons/presence.svg"); }
.jjh-icon-protect  { --jjh-icon: url("../images/icons/protect.svg"); }
.jjh-icon-prepare  { --jjh-icon: url("../images/icons/prepare.svg"); }
.jjh-icon-location { --jjh-icon: url("../images/icons/location.svg"); }
.jjh-icon-remote   { --jjh-icon: url("../images/icons/remote.svg"); }

/* List style: checkmarks ------------------------------------------------- */
ul.is-style-jjh-checklist { list-style: none; padding-left: 0; }
ul.is-style-jjh-checklist li { position: relative; padding-left: 1.85rem; margin-bottom: .55rem; }
ul.is-style-jjh-checklist li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 1.1rem; height: 1.1rem;
	background-color: var(--wp--preset--color--steel);
	-webkit-mask: url("../images/icons/check.svg") center / contain no-repeat; mask: url("../images/icons/check.svg") center / contain no-repeat;
}
.has-deep-navy-background-color ul.is-style-jjh-checklist li::before,
.has-navy-background-color ul.is-style-jjh-checklist li::before { background-color: var(--wp--preset--color--steel-light); }

/* Header ----------------------------------------------------------------- */
.jjh-header {
	background: #fff; border-bottom: var(--jjh-border);
	padding-top: .9rem; padding-bottom: .9rem; position: sticky; top: 0; z-index: 50;
}
.admin-bar .jjh-header { top: var(--wp-admin--admin-bar--height, 32px); }
.jjh-header-actions { gap: 1.75rem; }
.jjh-header .wp-block-navigation a { color: var(--wp--preset--color--deep-navy); text-decoration: none; }
.jjh-header .wp-block-navigation a:hover, .jjh-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--steel); }
.jjh-header-cta .wp-block-button__link { padding: .65rem 1.15rem; font-size: .9375rem; }
.jjh-logo img, .wp-block-site-logo img { display: block; }
@media (max-width: 781px) {
	.jjh-header .wp-block-site-logo img { width: 180px !important; }
	.jjh-header-cta { display: none; }
}

/* Footer ----------------------------------------------------------------- */
.jjh-footer { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.jjh-footer a { color: #fff; }
.jjh-footer a:hover { color: var(--wp--preset--color--steel-light); }
.jjh-footer-heading { color: #fff; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.jjh-footer-links { list-style: none; padding-left: 0; }
.jjh-footer-links li { margin-bottom: .4rem; }
.jjh-footer-links a { text-decoration: none; }
.jjh-footer-small { font-size: var(--wp--preset--font-size--small); opacity: .85; }
.jjh-footer-bottom { border-top: 1px solid rgba(217,222,227,.18); margin-top: var(--wp--preset--spacing--50); padding-top: 1.25rem; font-size: var(--wp--preset--font-size--small); }

/* Form layouts ----------------------------------------------------------- */
.jjh-form-layout { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start !important; }
.jjh-checklist-cta .is-style-jjh-card, .jjh-hero .is-style-jjh-card { color: var(--wp--preset--color--deep-navy); }
.jjh-hero .is-style-jjh-card p, .jjh-hero .is-style-jjh-card li { color: var(--wp--preset--color--deep-navy); }

/* Brevo form styling -------------------------------------------------------
   Targets markup from the Brevo plugin ([sibwp_form]). In Brevo > Forms,
   leave "Use the theme's style" ticked (dependTheme) so these rules apply.
   -------------------------------------------------------------------------- */
.jjh-brevo-form { width: 100%; }
.jjh-brevo-form .sib_signup_form { margin: 0; }
.jjh-brevo-form .sib_signup_form p { margin: 0 0 1rem; }
.jjh-brevo-form .sib_signup_form br { display: none; }
.jjh-brevo-form label {
	display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 600;
	font-size: .9375rem; color: var(--wp--preset--color--navy); margin-bottom: .35rem;
}
.jjh-brevo-form input[type="text"], .jjh-brevo-form input[type="email"], .jjh-brevo-form input[type="tel"],
.jjh-brevo-form input[type="number"], .jjh-brevo-form input[type="date"], .jjh-brevo-form select, .jjh-brevo-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--wp--preset--color--deep-navy);
	background: #fff; border: 1px solid #A9B4BE; border-radius: var(--jjh-radius); padding: .75rem .9rem; min-height: 48px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jjh-brevo-form textarea { min-height: 130px; resize: vertical; }
.jjh-brevo-form input:focus, .jjh-brevo-form select:focus, .jjh-brevo-form textarea:focus {
	outline: none; border-color: var(--wp--preset--color--steel); box-shadow: 0 0 0 3px rgba(58,110,165,.25);
}
.jjh-brevo-form input[type="checkbox"], .jjh-brevo-form input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--navy); margin-right: .5rem; vertical-align: -2px; }
.jjh-brevo-form .sib-multi-list-area label, .jjh-brevo-form .sib-terms-area label,
.jjh-brevo-form label:has(input[type="checkbox"]), .jjh-brevo-form label:has(input[type="radio"]) {
	font-family: var(--wp--preset--font-family--body); font-weight: 400; color: var(--wp--preset--color--deep-navy);
}
.jjh-brevo-form .sib-default-btn, .jjh-brevo-form input[type="submit"] {
	display: inline-block; width: 100%; cursor: pointer; border: 2px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy); color: #fff; border-radius: var(--jjh-radius);
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1rem; padding: .9rem 1.5rem;
	transition: background .15s ease;
}
.jjh-brevo-form .sib-default-btn:hover, .jjh-brevo-form input[type="submit"]:hover { background: var(--wp--preset--color--deep-navy); border-color: var(--wp--preset--color--deep-navy); }
.jjh-brevo-form .sib-default-btn:focus-visible { outline: 2px solid var(--wp--preset--color--steel); outline-offset: 3px; }
.jjh-brevo-form .sib_msg_disp:empty { display: none; }
.jjh-brevo-form .sib_msg_disp p, .jjh-brevo-form .sib-alert-message {
	border-radius: var(--jjh-radius); padding: .85rem 1rem; margin-bottom: 1rem; font-size: .9375rem;
}
.jjh-brevo-form .sib-alert-message-success { background: #E7F4EC; color: #14532D; border: 1px solid #A7D7B8; }
.jjh-brevo-form .sib-alert-message-error, .jjh-brevo-form .sib-alert-message-warning { background: #FDECEC; color: #7F1D1D; border: 1px solid #F3B7B7; }
.jjh-brevo-form .sib_loader { text-align: center; padding: .5rem; }
.jjh-form-privacy { font-size: .8125rem; color: var(--wp--preset--color--slate); margin-top: .75rem; }
.jjh-form-privacy a { color: var(--wp--preset--color--steel); }

/* Fallback when form isn't connected */
.jjh-form-fallback { border: 1px dashed #A9B4BE; border-radius: var(--jjh-radius); padding: 1.25rem; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--deep-navy); }
.jjh-form-fallback p { margin: 0 0 .5rem; }
.jjh-admin-only { font-size: .8125rem; color: #8a4b00; }

/* Accessibility ------------------------------------------------------------ */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--steel); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Print -------------------------------------------------------------------- */
@media print {
	.jjh-header, .jjh-footer, .wp-block-buttons, .jjh-hero::after { display: none !important; }
	.jjh-section { padding: 1rem 0; }
	.has-deep-navy-background-color, .has-navy-background-color { background: #fff !important; color: #000 !important; }
	.has-deep-navy-background-color *, .has-navy-background-color * { color: #000 !important; }
}

/* Header CTA: keep on one line on small screens */
.jjh-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 480px) {
	.jjh-header .wp-block-button__link { padding: .55em .9em; font-size: .85rem; }
}

/* Legal pages (Privacy Policy) */
.jjh-legal h2 { font-size: var(--wp--preset--font-size--x-large, 1.6rem); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--light-grey); }
.jjh-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.jjh-legal h3 { font-size: var(--wp--preset--font-size--large, 1.2rem); margin-top: 1.5rem; }
.jjh-legal p, .jjh-legal li { line-height: 1.7; }
.jjh-legal ul { padding-left: 1.25rem; }
.jjh-legal li + li { margin-top: .35rem; }
.jjh-legal .jjh-legal-meta { color: var(--wp--preset--color--slate); }
.jjh-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.jjh-table th { background: var(--wp--preset--color--navy); color: #fff; text-align: left; font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 600; }
.jjh-table th, .jjh-table td { padding: .65rem .8rem; border: 1px solid var(--wp--preset--color--light-grey); vertical-align: top; }
.jjh-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--mist); }
@media (max-width: 600px) { .jjh-table { overflow-x: auto; } .jjh-table table { min-width: 520px; } }
.jjh-section.jjh-legal { padding-top: var(--wp--preset--spacing--40, 2rem); }

/* Free Checklist landing page (1.2.0) ------------------------------------- */
.jjh-hero .wp-block-buttons { margin-top: 1.75rem; gap: .85rem; }
.jjh-hero-note { font-size: var(--wp--preset--font-size--small); margin-top: 1rem; letter-spacing: .01em; }
.jjh-hero-card { position: relative; z-index: 1; }
.jjh-hero-card ul.is-style-jjh-checklist { margin-bottom: 0; }
.jjh-lead { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--slate); max-width: 62ch; margin-bottom: var(--wp--preset--spacing--50); }
.wp-block-buttons .jjh-checklist-start .wp-block-button__link { font-weight: 700; }

.jjh-stats-band { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); border-bottom: var(--jjh-border); }
.jjh-stats { gap: 1.5rem; margin: 0; }
.jjh-stat { border-left: 3px solid var(--wp--preset--color--steel); padding-left: 1rem; }
.jjh-stat p { margin: 0; }
.jjh-stat-num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; color: var(--wp--preset--color--navy); }
.jjh-stat-label { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); margin-top: .35rem !important; }
@media (max-width: 781px) {
	.jjh-stats { display: grid !important; grid-template-columns: 1fr 1fr; }
}

.jjh-cards .is-style-jjh-card ul.is-style-jjh-checklist { margin-top: 1rem; }
.jjh-cards .is-style-jjh-card ul.is-style-jjh-checklist li { font-size: .9688rem; }

.jjh-bands { gap: 1rem; }
.jjh-band { background: #fff; border: var(--jjh-border); border-top: 4px solid var(--jjh-band, var(--wp--preset--color--navy)); border-radius: var(--jjh-radius); padding: 1.25rem 1.25rem 1.4rem; height: 100%; box-sizing: border-box; }
.jjh-band > * + * { margin-block-start: .5rem; }
.jjh-band h3 { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--navy); }
.jjh-band p { font-size: .9375rem; margin-bottom: 0; }
.jjh-band-range { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; color: var(--jjh-band, var(--wp--preset--color--navy)); margin: 0; }
.jjh-band-1 { --jjh-band: #1F7A4D; }
.jjh-band-2 { --jjh-band: var(--wp--preset--color--steel); }
.jjh-band-3 { --jjh-band: #A66300; }
.jjh-band-4 { --jjh-band: #A23B3B; }
.jjh-bands > .wp-block-column > .jjh-band:only-child { height: 100%; }

.jjh-faq { max-width: 820px; margin-left: 0 !important; }
.jjh-faq > * + * { margin-block-start: 0; }
.jjh-faq .wp-block-details { background: #fff; border: var(--jjh-border); border-radius: var(--jjh-radius); padding: 0; margin-bottom: .75rem; }
.jjh-faq .wp-block-details summary {
	cursor: pointer; list-style: none; position: relative; padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--navy);
}
.jjh-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.jjh-faq .wp-block-details summary::after {
	content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--steel);
}
.jjh-faq .wp-block-details[open] summary::after { content: "\2013"; }
.jjh-faq .wp-block-details > p { margin: 0; padding: 0 1.25rem 1.15rem; color: var(--wp--preset--color--deep-navy); }

.jjh-checklist-final h2 { max-width: 20ch; }
#email-checklist { scroll-margin-top: 110px; position: relative; z-index: 1; }
#whats-inside { scroll-margin-top: 80px; }
.jjh-problem h3 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; }