/*
Theme Name: Berkleen Modern 2
Theme URI: https://berkleen.com/
Author: Berkleen Ltd
Description: Modernised, fully block-editable theme for Berkleen Ltd, Cardiff. Brand palette #265902, #092601, #558C03, #98BF0A, #F4F3F8. Self-hosted fonts, editable section patterns and a styled quotation-form layout.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berkleen-modern-2
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--lime); outline-offset: 3px; border-radius: 4px; }
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* Outline button (core "Outline" style) */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--forest); padding: calc(0.85rem - 2px) calc(1.5rem - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--forest); color: #fff; border-color: var(--wp--preset--color--forest); }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
/* Solid background on purpose: backdrop-filter here would trap the full-screen mobile menu inside the header. */
.berk-header { background: #fff; border-bottom: 1px solid var(--wp--preset--color--line); }
.berk-header .wp-block-site-title a:hover { color: var(--wp--preset--color--forest); }
.berk-header .wp-block-site-title a::after { content: "."; color: var(--wp--preset--color--lime); }
.berk-header .wp-block-navigation-item__content { padding: .5rem .25rem; text-decoration: none; }
.berk-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.berk-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--forest); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--lime); }
.berk-header .berk-phone a { text-decoration: none; font-weight: 700; color: var(--wp--preset--color--dark); white-space: nowrap; }
.berk-header .wp-block-button__link { padding: .7rem 1.15rem; white-space: nowrap; }
/* Mobile menu overlay in brand colours */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--dark) !important; color: #fff !important; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; font-weight: 700; padding: .6rem 0; color: #fff !important; }
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { text-decoration-color: var(--wp--preset--color--lime); }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Section helpers ---------- */
.is-style-berk-eyebrow { font-family: var(--wp--preset--font-family--dm-sans); font-size: .8125rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--forest); margin-bottom: .5rem; }
.has-dark-background-color .is-style-berk-eyebrow, .wp-block-cover .is-style-berk-eyebrow, .is-style-berk-card-dark .is-style-berk-eyebrow { color: var(--wp--preset--color--lime); }
.has-dark-background-color :is(h1,h2,h3,h4), .has-forest-background-color :is(h1,h2,h3,h4), .wp-block-cover :is(h1,h2,h3,h4) { color: #fff; }
.has-dark-background-color a:not(.wp-block-button__link), .has-forest-background-color a:not(.wp-block-button__link) { color: #e8f3d6; }

/* Cards (selectable from the Styles panel on any Group) */
.is-style-berk-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: 0 1px 2px rgba(9,38,1,.04); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.is-style-berk-card-dark { background: var(--wp--preset--color--dark); color: #fff; border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 3vw, 2rem); }
.is-style-berk-card-dark :is(h1,h2,h3,h4) { color: #fff; }
.is-style-berk-card-dark a:not(.wp-block-button__link) { color: #e8f3d6; }
.is-style-berk-rounded img { border-radius: var(--wp--custom--radius--card); }

/* Service cards */
.berk-service { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.berk-service > * { margin-left: clamp(1.25rem, 3vw, 1.5rem) !important; margin-right: clamp(1.25rem, 3vw, 1.5rem) !important; }
.berk-service > .wp-block-image { margin: 0 !important; aspect-ratio: 16 / 10; background: linear-gradient(115deg, var(--wp--preset--color--dark), var(--wp--preset--color--leaf)); }
.berk-service > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.berk-service :is(h2,h3) { font-size: 1.3rem; margin-top: 1.25rem !important; }
.berk-service p { font-size: .975rem; }
.berk-service > :last-child { margin-top: auto !important; padding-bottom: 1.5rem; padding-top: .75rem; }
.berk-service .berk-link a, .berk-link a { font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; text-decoration: none; color: var(--wp--preset--color--forest); }
.berk-link a::after { content: " →"; transition: margin .2s; }
.berk-link a:hover::after { margin-left: 4px; }
@media (hover: hover) {
	.berk-service:hover, .is-style-berk-card.berk-lift:hover { box-shadow: 0 18px 40px -18px rgba(9,38,1,.35); transform: translateY(-3px); border-color: var(--wp--preset--color--leaf); }
	.berk-service:hover img { transform: scale(1.04); }
}

/* Hero */
.berk-hero .wp-block-cover__inner-container { max-width: var(--wp--style--global--wide-size); }
.berk-hero h1 { color: #fff; max-width: 15ch; }
.berk-hero .berk-hero-lead { max-width: 36rem; color: #e9f0e3; }
.berk-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--dark); }
.berk-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #fff; }
.berk-hero .is-style-outline .wp-block-button__link, .berk-cta .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.75); }
.berk-hero .is-style-outline .wp-block-button__link:hover, .berk-cta .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--dark); border-color: #fff; }
.berk-hero-card { background: rgba(255,255,255,.97) !important; color: var(--wp--preset--color--ink); }
.berk-hero-card h2, .berk-hero-card h3 { color: var(--wp--preset--color--dark) !important; }

/* Tick list */
.is-style-berk-ticks { list-style: none; padding-left: 0; }
.is-style-berk-ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.is-style-berk-ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--wp--preset--color--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23092601' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }

/* Trust strip */
.berk-trust p { margin: 0; font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; color: var(--wp--preset--color--forest); display: flex; align-items: center; gap: .5rem; }
.berk-trust p::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--wp--preset--color--leaf); }

/* Step numbers */
.berk-step-num { font-family: var(--wp--preset--font-family--dm-sans); font-weight: 800; font-size: 1rem; width: 2.75rem; height: 2.75rem; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--lime); color: var(--wp--preset--color--dark); }

/* CTA band */
.berk-cta h2 { color: #fff; }
.berk-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--dark); }
.berk-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #fff; }

/* Page title band */
.berk-page-head h1 { font-size: var(--wp--preset--font-size--xx-large); }

/* Testimonials */
.berk-review .berk-stars { color: var(--wp--preset--color--forest); letter-spacing: .15em; font-size: 1.1rem; margin: 0; }

/* ---------- Quotation form ----------
   Styles the form block of WPForms, Fluent Forms, Contact Form 7, Gravity Forms
   or Formidable when it sits inside the "Quote form" pattern (.berk-quote). */
.berk-quote { scroll-margin-top: 6rem; }
.berk-quote :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=url], select, textarea) {
	width: 100% !important; max-width: 100% !important; min-height: 48px; padding: .75rem .9rem !important; font: inherit; font-size: 1rem !important;
	color: var(--wp--preset--color--ink); background: #fff; border: 1.5px solid #C9D2BF !important; border-radius: var(--wp--custom--radius--small) !important; box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.berk-quote textarea { min-height: 140px; resize: vertical; }
.berk-quote :is(input, select, textarea):focus { outline: none; border-color: var(--wp--preset--color--forest) !important; box-shadow: 0 0 0 3px rgba(152,191,10,.45) !important; }
.berk-quote label, .berk-quote .wpforms-field-label, .berk-quote .ff-el-input--label label { font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700 !important; color: var(--wp--preset--color--dark) !important; font-size: .95rem !important; display: block; margin-bottom: .35rem; }
.berk-quote :is(input[type=checkbox], input[type=radio]) { width: 1.2rem; height: 1.2rem; accent-color: var(--wp--preset--color--forest); vertical-align: middle; margin-right: .4rem; }
.berk-quote :is(button[type=submit], input[type=submit], .wpforms-submit, .ff-btn-submit) {
	background: var(--wp--preset--color--forest) !important; color: #fff !important; border: 0 !important; border-radius: var(--wp--custom--radius--small) !important;
	font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; font-size: 1.05rem !important; padding: .95rem 1.75rem !important; min-height: 52px; cursor: pointer; width: 100%;
}
.berk-quote :is(button[type=submit], input[type=submit], .wpforms-submit, .ff-btn-submit):hover { background: var(--wp--preset--color--dark) !important; }
.berk-quote .wpcf7-not-valid-tip, .berk-quote .wpforms-error, .berk-quote .error { color: #A1260D !important; font-size: .875rem; }
.berk-quote .wpcf7-response-output { border-radius: var(--wp--custom--radius--small); margin: 1rem 0 0 !important; }
/* Two-column field grid (used by the Contact Form 7 template in docs/, and any form that wraps fields in .berk-form-grid) */
.berk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.berk-form-grid > * { margin: 0; }
.berk-form-grid .berk-full { grid-column: 1 / -1; }
.berk-quote .wpcf7-form-control-wrap { display: block; }
.berk-quote .wpcf7-list-item { margin: 0; }
.berk-quote .berk-form-placeholder { border: 2px dashed #C9D2BF; border-radius: var(--wp--custom--radius--card); padding: 1.5rem; background: var(--wp--preset--color--mist); }
@media (min-width: 900px) { .berk-quote :is(button[type=submit], input[type=submit], .wpforms-submit, .ff-btn-submit) { width: auto; } }

/* ---------- Footer ---------- */
.berk-footer a { text-decoration: none; }
.berk-footer a:hover { text-decoration: underline; color: #fff; }
.berk-footer h2 { font-size: 1.05rem; color: #fff; letter-spacing: 0; margin-bottom: .75rem; }
.berk-footer .wp-block-site-title a { color: #fff; }
.berk-footer .wp-block-site-title a::after { content: "."; color: var(--wp--preset--color--lime); }
.berk-footer-bottom { border-top: 1px solid rgba(255,255,255,.16); }

/* Sticky "Call / Quote" bar — phones only */
.berk-mobile-bar { display: none; }
@media (max-width: 781px) {
	.berk-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: .5rem; padding: .6rem max(.75rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--wp--preset--color--line); box-shadow: 0 -8px 24px -12px rgba(9,38,1,.25); }
	.berk-mobile-bar .wp-block-buttons { width: 100%; }
	.berk-mobile-bar .wp-block-button { flex: 1 1 0; }
	.berk-mobile-bar .wp-block-button__link { width: 100%; padding: .8rem .5rem; min-height: 48px; display: flex; align-items: center; justify-content: center; }
	body { padding-bottom: 76px; }
	/* Header: keep the quote button visible next to the menu icon, hide the phone number (it's in the bottom bar) */
	.berk-header .berk-phone { display: none; }
	.berk-header .wp-block-button__link { padding: .55rem .9rem; font-size: .9rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.berk-form-grid { grid-template-columns: 1fr; }
	.berk-hero { min-height: 0 !important; }
	.berk-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.berk-hero .wp-block-buttons .wp-block-button__link, .berk-cta .wp-block-buttons .wp-block-button__link { width: 100%; }
	.berk-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
	.berk-header .berk-header-cta { display: none; }
}

/* Sections butt up against each other (no stray white gaps between header, main and footer) */
.wp-site-blocks > main, .wp-site-blocks > footer, .wp-site-blocks > .wp-block-group, main > .alignfull + .alignfull, .entry-content > .alignfull + .alignfull, .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.berk-mobile-bar .wp-block-button__link { white-space: nowrap; }

/* Quote form polish */
.berk-quote :is(input, select, textarea, button) { box-sizing: border-box; }
.berk-quote select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 2.5rem !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23265902' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right .8rem center/1.1rem no-repeat; }
.berk-quote .wpcf7-radio, .berk-quote .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: .35rem; }
.berk-quote .wpcf7-radio label, .berk-quote .wpcf7-checkbox label, .berk-quote .wpcf7-acceptance label { display: inline-flex; align-items: center; font-weight: 500 !important; margin: 0; min-height: 44px; }
.berk-quote .wpcf7-acceptance label { align-items: flex-start; min-height: 0; line-height: 1.5; font-family: var(--wp--preset--font-family--open-sans); font-size: .95rem !important; color: var(--wp--preset--color--ink) !important; }
.berk-quote .wpcf7-acceptance input { margin-top: .15rem; flex: none; }
.berk-quote .wpcf7-spinner { vertical-align: middle; }

/* Mobile menu: left-aligned, generous spacing, sits above the Call/Quote bar */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding: 3.5rem 1.5rem 2rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: .25rem; }
.berk-mobile-bar { z-index: 40 !important; }