/*
Theme Name: Blue Giraffe
Author: Reliato Ltd
Description: Block theme for Blue Giraffe, staffing for remote and hybrid teams. One-page home with editable sections (hero, who we are, services, mission and values, why choose us, contact), set in Jost with the Blue Giraffe palette.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blue-giraffe
Tags: one-column, custom-colors, editor-style, full-site-editing, block-patterns, wide-blocks
*/

:root {
	--bg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bg-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--bg-navy: var(--wp--preset--color--navy);
	--bg-royal: var(--wp--preset--color--royal);
	--bg-sky: var(--wp--preset--color--sky);
	--bg-white: var(--wp--preset--color--white);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:target, [id] { scroll-margin-top: 6rem; }
::selection { background: var(--bg-royal); color: var(--bg-white); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-thickness 180ms ease, color 180ms ease; }
a:hover { text-decoration-thickness: 0.14em; }

/* the page is a stack of full-width sections: no gaps between them */
.wp-site-blocks > * + *,
.bg-main > * + * { margin-block-start: 0; }

/* ---------- buttons ---------- */
.wp-element-button,
.wp-block-button__link { transition: transform 140ms var(--bg-ease), background-color 180ms ease, color 180ms ease; }
.wp-element-button:active,
.wp-block-button__link:active { transform: scale(0.97); }
.bg-btn-light .wp-block-button__link:hover,
.bg-btn-light .wp-block-button__link:focus-visible { background-color: var(--bg-royal) !important; color: var(--bg-white) !important; }

/* ---------- header ---------- */
.wp-site-blocks > .bg-site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.bg-header { padding-block: 0.875rem; }
.bg-header__bar { gap: 2rem; }
.bg-header__end { gap: 2.25rem; }
.bg-logo { margin: 0; }
.bg-logo img { display: block; height: auto; aspect-ratio: 760 / 250; }
.bg-nav .wp-block-navigation-item__content { padding-block: 0.4rem; }
.bg-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-thickness: 0.1em; }
.bg-nav .wp-block-navigation__container { gap: 1.75rem; }
.bg-header__cta .wp-block-button__link { padding: 0.75rem 1.25rem; }
.bg-header .bg-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem clamp(1rem, 3.2vw, 2.5rem) 2rem; color: var(--bg-navy); background-color: var(--bg-white); }
/* the Contact link only shows inside the phone menu; the header button covers it elsewhere */
.bg-nav .bg-nav__menu-only { display: none; }
.bg-nav .is-menu-open .bg-nav__menu-only { display: flex; }
.bg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.bg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
.bg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; padding-top: 2.5rem; font-size: var(--wp--preset--font-size--x-large); }
@media (max-width: 599px) {
	.bg-logo img { width: 150px !important; }
	.bg-header__end { gap: 1rem; }
	.bg-header__cta .wp-block-button__link { padding: 0.6rem 0.9rem; }
}

/* ---------- hero ---------- */
.bg-hero.wp-block-cover { padding-block: clamp(5rem, 10vw, 8rem); background-color: var(--bg-navy); }
.bg-hero .wp-block-cover__inner-container { display: grid; justify-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
.bg-hero .wp-block-cover__inner-container > * { margin: 0; }
.bg-hero__title { color: var(--bg-white); }
.bg-hero__sub { max-width: 34ch; color: var(--bg-white); line-height: 1.35; }

/* ---------- sections ---------- */
.bg-section { padding-block: var(--wp--preset--spacing--70); }
.bg-section h2 { margin-block: 0 clamp(1.5rem, 3vw, 2.5rem); }

.bg-split.wp-block-columns { gap: clamp(2rem, 6vw, 6rem); align-items: flex-start; margin-block: 0; }
.bg-split--media-first.wp-block-columns { align-items: center; }
.bg-split__text > * + * { margin-block-start: 1.25rem; }
.bg-split__text p { max-width: 58ch; }
.bg-photo { margin: 0; overflow: hidden; background: var(--wp--preset--color--pale); }
.bg-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.bg-photo--tall img { aspect-ratio: 4 / 5; }
.bg-photo--wide img { aspect-ratio: 4 / 3; }
@media (max-width: 781px) { .bg-photo--tall img { aspect-ratio: 3 / 2; } }

/* who we are: the photograph runs alongside the whole story */
.bg-who .bg-split__media { align-self: stretch; }
.bg-who .bg-photo--tall { position: sticky; top: 7rem; }

/* services: rows set in large type, title left, description right */
.bg-rows { margin-block-start: clamp(2.5rem, 5vw, 4.5rem) !important; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.bg-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: baseline; }
.bg-row > * { margin: 0 !important; }
.bg-row h3 { grid-column: 1 / span 5; font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.bg-row p { grid-column: 7 / -1; max-width: 34ch; line-height: 1.4; }
@media (max-width: 781px) {
	.bg-row h3, .bg-row p { grid-column: 1 / -1; }
	.bg-row p { margin-top: 0.75rem !important; }
}

/* mission: statement, vision, then the four values on one line */
.bg-statement { line-height: 1.3; letter-spacing: -0.005em; font-weight: 500; max-width: 36ch; }
.bg-mission .bg-split__text h3 { margin-block-start: 2.25rem; }
.bg-values { margin-block-start: var(--wp--preset--spacing--60) !important; }
.bg-values > h3 { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.bg-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.bg-values__grid > * { margin: 0 !important; }
.bg-value h4 { margin: 0 0 0.5rem; }
.bg-value p { margin: 0; max-width: 28ch; }
@media (max-width: 960px) { .bg-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .bg-values__grid { grid-template-columns: 1fr; } }

/* why choose us: heading and photograph, then four reasons set large on the navy field */
.bg-why__head.wp-block-columns { gap: clamp(2rem, 6vw, 6rem); align-items: flex-start; margin-block: 0; }
.bg-why__head h2 { margin-block-end: 1.25rem; }
.bg-why__intro { max-width: 30ch; line-height: 1.35; }
.bg-why .bg-photo { background: var(--bg-navy); }
.bg-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 6rem); margin-block-start: var(--wp--preset--spacing--60) !important; }
.bg-why__grid > * { margin: 0 !important; }
.bg-why__item h3 { margin: 0 0 0.75rem; }
.bg-why__item p { margin: 0; max-width: 32ch; line-height: 1.4; }
@media (max-width: 781px) { .bg-why__grid { grid-template-columns: 1fr; } }

/* contact: the address set large beside a quiet loop of hands typing */
.bg-contact .wp-block-columns { align-items: center; }
.bg-film { margin: 0; overflow: hidden; background: var(--wp--preset--color--pale); }
.bg-film video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bg-contact__details > * + * { margin-block-start: 1.5rem; }
.bg-contact__email { font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bg-contact__email a { text-decoration-thickness: 0.06em; }

/* ---------- footer ---------- */
.bg-footer { padding-block: var(--wp--preset--spacing--60) 2rem; }
.bg-footer__cols.wp-block-columns { gap: clamp(2rem, 5vw, 5rem); margin-block: 0; }
.bg-footer h4 { margin: 0 0 1rem; }
.bg-footer .bg-logo { margin-bottom: 1.25rem; }
.bg-footer p { max-width: 30ch; }
.bg-plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bg-plain-list a { text-decoration: none; }
.bg-plain-list a:hover { text-decoration: underline; }
.bg-footer__base { margin-block-start: var(--wp--preset--spacing--60) !important; gap: 0.75rem 3rem; }
.bg-footer__base p { margin: 0; }
.bg-footer__legal { max-width: 60ch !important; }
.bg-footer__policies { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; max-width: none !important; }

/* ---------- motion: entrances and one moving picture; content stays visible without the script ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .bg-rise { opacity: 0; transform: translateY(18px); animation: bg-rise 900ms var(--bg-ease) forwards; animation-delay: 150ms; }
	.js .bg-rise + .bg-rise { animation-delay: 270ms; }
	.js .bg-rise + .bg-rise + .bg-rise { animation-delay: 390ms; }
	.bg-hero .wp-block-cover__image-background { animation: bg-settle 2400ms var(--bg-ease-soft) both; }

	.js .bg-reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--bg-ease), transform 900ms var(--bg-ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.js .bg-reveal.is-in { opacity: 1; transform: none; }
	.js .bg-photo.bg-reveal { transform: none; clip-path: inset(0 0 100% 0); opacity: 1; transition: clip-path 1100ms cubic-bezier(0.76, 0, 0.24, 1); }
	.js .bg-photo.bg-reveal img { scale: 1.08; transition: scale 1500ms var(--bg-ease-soft); }
	.js .bg-photo.bg-reveal.is-in { clip-path: inset(0); }
	.js .bg-photo.bg-reveal.is-in img { scale: 1; }
}
@keyframes bg-rise { to { opacity: 1; transform: none; } }
@keyframes bg-settle { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- legal pages ---------- */
.bg-main.bg-section > .wp-block-post-content { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.bg-legal > * + * { margin-block-start: 1.1rem; }
.bg-legal h2 { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-block: 2.75rem 0 !important; }
.bg-legal ul { padding-left: 1.25em; }
.bg-legal li + li { margin-top: 0.4rem; }
.bg-legal__updated { font-size: var(--wp--preset--font-size--small); }
.bg-contact__privacy { font-size: var(--wp--preset--font-size--small); max-width: 46ch; }

/* ---------- the logo intro (home page only; see functions.php and theme.js) ---------- */
.bg-intro { display: none; }
.bg-intro-play .bg-intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; cursor: pointer; will-change: opacity; }
.bg-intro__ground { position: absolute; inset: 0; background: var(--bg-white); }
.bg-intro__logo { position: relative; width: min(64vw, 440px); height: auto; transform-origin: 50% 50%; will-change: transform; animation: bg-intro-in 650ms var(--bg-ease) both; }
.bg-intro-play:not(.bg-intro-reveal) .bg-rise,
.bg-intro-play:not(.bg-intro-reveal) .bg-hero .wp-block-cover__image-background { animation-play-state: paused; }
@keyframes bg-intro-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } }