/*
Theme Name: AA+A
Theme URI: https://anatomyarchitecture.com
Template: bloom
Description: Child theme of Bloom for anatomyarchitecture.com, replacing the Sixten theme, its "AA+A 26" child theme and the Sixten helper plugin: Arial typography, transparent home header over the full-screen slider, "+" menus, filtered project grid, project and press layouts, About and Contact sections.
Author: Nopphan Bunnag
Author URI: https://npbn.me
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: aaa
*/

/* ------------------------------------------------------------------
 * Base — what Bootstrap's reboot and the Sixten typography gave the old site.
 * Values measured on production (bloom/parity/aaa/styles-production).
 * ---------------------------------------------------------------- */
body { overflow-x: hidden; }
a,
a:hover { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; }
strong, b { font-weight: 700; }
label { font-size: 12px; text-transform: lowercase; }
img { vertical-align: middle; }
.screen-reader-text:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Root size of the old theme: rem values (spacing, About text, letter grid) shrink on small screens. */
@media (max-width: 767.98px) { html { font-size: 15px; } }
@media (max-width: 575.98px) { html { font-size: 14px; } }

/* Content width like the old Bootstrap .container (85% − 30px padding, 90% on phones). */
@media (max-width: 480px) {
	body { --wp--style--global--content-size: calc(90% - 30px); }
}

/* ------------------------------------------------------------------
 * Header (parts/header.html, parts/header-home.html)
 * ---------------------------------------------------------------- */
.site-header__inner { max-width: none; padding: 0 2rem; }
.bloom-logo img { width: 50px; }
.bloom-nav.is-horizontal > ul > li > a { font-size: 11px; line-height: 27px; }
.bloom-nav.is-horizontal > ul > li.current-menu-item > a { font-weight: 700; }
/* "+" toggle: a 20px icon (the size the old "+" glyph drew) centred in a 44px tap target; the negative margin keeps the icon
   on the header's padding edge, where the old "+" sat (scoped, to beat core's `.is-layout-flex > :is(*, div) { margin: 0 }`). */
.site-header__right .bloom-menu-toggle--plus { justify-content: center; width: 44px; height: 44px; margin: -12px; padding: 0; color: var(--bloom-toggle-color); }
.bloom-menu-toggle--plus svg { width: 20px; height: 20px; }
/* Side padding of the old header (production, 360–1440px): container margin + 15px + 2rem. */
/* The menu/toggle switch comes from bloom_header_options['breakpoint'] (991, set in functions.php). */
@media (min-width: 992px) {
	/* Home header ("+" at every width): 95% container. */
	.site-header__inner:has(.bloom-menu-toggle--always) { padding: 0 calc(2.5% + 15px + 2rem); }
}
@media (max-width: 991px) {
	/* 85% container; the header is 6.25rem tall. */
	.site-header__inner { min-height: max(88px, 6.25rem); padding: 0 calc(7.5% + 15px + 2rem); }
}
@media (max-width: 576px) {
	/* Full-width container. */
	.site-header__inner { padding: 0 calc(15px + 2rem); }
}

/* Home: transparent header over the slider, white logo and "+", no horizontal menu. */
.has-transparent-header .site-header:not(.is-stuck) .bloom-menu-toggle { color: #fff; }
.aaa-home .wp-block-bloom-hero-slider { margin: 0; }

/* Menus: full-screen dark overlay (phones) and dark side panel over a blurred page (home, desktop). */
.bloom-drawer { background: rgb(15, 15, 15); }
.bloom-drawer .bloom-drawer__inner { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.bloom-drawer .bloom-mobile-menu { margin: auto 0; text-align: center; }
.bloom-drawer .bloom-mobile-menu li { border: 0; }
.bloom-drawer .bloom-mobile-menu a { font-weight: 500; letter-spacing: -0.01em; }
.bloom-drawer .bloom-mobile-menu li.current-menu-item > a { color: var(--bloom-drawer-active); }
.bloom-drawer[data-active="slide"] { background: rgba(15, 15, 15, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bloom-drawer[data-active="slide"] .bloom-drawer__inner { padding: 1.25rem 0 3.125rem; }
/* Bloom hides the whole header but the "+" while the menu is open (toggleCloses); keep the logo too, white on the dark menu. */
.drawer-open.drawer-toggle-closes .site-header .bloom-logo,
.drawer-open.drawer-toggle-closes .site-header .bloom-logo * { visibility: visible; pointer-events: auto; }
.drawer-open.drawer-toggle-closes .site-header .bloom-logo:has(.bloom-logo__alt) .bloom-logo__main { display: none; }
.drawer-open.drawer-toggle-closes .site-header .bloom-logo__alt { display: inline; }
/* ------------------------------------------------------------------
 * Page title (patterns/page-title.php) and breadcrumbs
 * ---------------------------------------------------------------- */
.aaa-page-title { padding-top: 1rem; text-align: center; }
.aaa-page-title__title { margin: 0 auto 0.5rem; font-size: 14px; text-transform: uppercase; }
.aaa-page-title__title::before { content: "\002B"; margin-right: 20px; }
.aaa-page-title__title::after { content: "\002B"; margin-left: 20px; }
.bloom-breadcrumbs,
.aaa-page-title .bloom-breadcrumbs { margin: 20px 0 0; font-size: 12px; color: #454545; word-spacing: 0.5em; }
.bloom-breadcrumbs a:hover { text-decoration: underline; }
.bloom-breadcrumbs__current { font-weight: 400; }
@media (max-width: 576px) { .aaa-page-title .bloom-breadcrumbs { display: none; } }
@media (max-width: 480px) { .aaa-page-title { padding-top: 1.2rem; } }

/* Project and press pages: breadcrumb trail above the content */
.aaa-breadcrumb { margin-top: 40px; }
.aaa-breadcrumb .bloom-breadcrumbs { margin: 0; font-size: 10px; word-spacing: normal; }
.aaa-breadcrumb .bloom-breadcrumbs__sep { margin: 0 0.5rem; }
.aaa-breadcrumb .bloom-breadcrumbs__current { font-weight: 400; }

/* ------------------------------------------------------------------
 * Projects page and project category archives (bloom/post-grid, overlay cards)
 * ---------------------------------------------------------------- */
.aaa-projects .pg-filters { min-height: 76px; margin: 2rem 0 0; text-align: center; }
.aaa-projects .pg-filters__main { justify-content: center; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.aaa-projects .pg-filters__sub { justify-content: center; gap: 0.5rem 1rem; margin-top: 0; }
.aaa-projects .pg-filter { padding: 0.25rem 0; font-size: 12px; text-transform: lowercase; color: #454545; opacity: 1; transition: color 0.3s ease; }
.aaa-projects .pg-filter:hover { color: #000; }
.aaa-projects .pg-filter.is-active { font-weight: 700; text-decoration: underline; }
.aaa-projects .pg-filters__sub .pg-filter { color: #666; }
.aaa-projects .pg-filters__sub .pg-filter.is-active { color: #000; }
.aaa-projects .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.aaa-projects .pg-style-overlay .pg-card { border-radius: 0; }
.aaa-projects .pg-style-overlay .pg-image img { transition-duration: 0.5s; }
.aaa-projects .pg-style-overlay .pg-body { padding: 0 1rem; transition-duration: 0.5s; }
/* White title on hover: the heading colour from theme.json would otherwise override the overlay's white. */
.aaa-projects .pg-style-overlay .pg-title { font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; text-transform: uppercase; color: inherit; }
.aaa-projects .wp-block-bloom-post-grid { --pg-skeleton: #e0e0e0; --pg-skeleton-shine: #e0e0e0; --pg-radius: 0; }
.aaa-projects .pg-skeleton { aspect-ratio: 1; padding-bottom: 0; animation: aaa-skeleton-pulse 1.5s ease-in-out infinite; }
.aaa-projects .pg-sentinel { height: 40px; margin-top: 40px; padding: 0; align-items: center; }
.aaa-projects .pg-spinner { width: 24px; height: 24px; border: 2px solid #e0e0e0; border-top-color: #454545; opacity: 1; }
@keyframes aaa-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (max-width: 768px) {
	.aaa-projects .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 480px) {
	.aaa-projects .wp-block-bloom-post-grid.pg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
 * Single project (templates/single-project.html)
 * ---------------------------------------------------------------- */
.aaa-project { margin-top: 40px; text-align: center; }
.aaa-project-title { font-size: 12px; }
.aaa-project-content { margin-top: 30px; }
.aaa-project-meta { margin: 0 0 1rem; text-align: center; }
.aaa-project-meta .bloom-field-list__row { margin-top: 5px; }
.aaa-project-meta .bloom-field-list__label { font-weight: 700; text-transform: uppercase; }
.wp-block-bloom-field-gallery.aaa-project-gallery.is-layout-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem; max-width: 1200px; margin: 40px auto 0; padding: 0 2rem; box-sizing: border-box; }
@media (max-width: 1140px) { .wp-block-bloom-field-gallery.aaa-project-gallery.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px) { .wp-block-bloom-field-gallery.aaa-project-gallery.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) {
	.wp-block-bloom-field-gallery.aaa-project-gallery.is-layout-grid { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.aaa-project-gallery.is-ratio-square .bloom-field-gallery__item { aspect-ratio: auto; pointer-events: none; cursor: default; }
	.aaa-project-gallery.is-ratio-square .bloom-field-gallery__img { height: auto; }
	.aaa-project-meta { padding: 0 15px; }
}

/* Previous / next navigation (patterns/project-navigation.php, patterns/press-navigation.php) */
.aaa-post-nav { margin-top: 20px; border-bottom: 1px solid #ebebeb; }
.aaa-post-nav__inner { align-items: center; padding: 3rem 0; }
.aaa-post-nav__inner > * { flex: 1 1 0; margin: 0; }
.aaa-post-nav__inner > .aaa-post-nav__all { flex: 0 0 auto; }
.aaa-post-nav .post-navigation-link-next { text-align: right; }
.aaa-post-nav a { color: #454545; font-size: 12px; font-weight: 700; letter-spacing: -0.02em; }
.aaa-post-nav a:hover { color: #000; }
.aaa-post-nav .post-navigation-link__label { display: block; margin-bottom: 0.5rem; font-size: 12px; font-weight: 400; letter-spacing: 0.3px; }
.aaa-grid-icon { display: grid; grid-template-columns: repeat(2, 6px); gap: 4px; }
.aaa-grid-icon span { width: 6px; height: 6px; background: currentColor; }

/* ------------------------------------------------------------------
 * Press page and single press (templates/single-press.html)
 * ---------------------------------------------------------------- */
.aaa-press-logos.wp-block-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0 auto 3rem; }
.aaa-press-logos.wp-block-gallery .wp-block-image { display: flex; align-items: center; justify-content: center; width: auto !important; min-height: 100px; margin: 0; }
.aaa-press-logos.wp-block-gallery .wp-block-image img { width: auto; max-width: 130px; height: auto; }
.aaa-press .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin-top: 40px; }
.aaa-press .pg-card { align-items: center; margin-top: 20px; background: none; border-radius: 0; }
.aaa-press .pg-image { max-width: 330px; }
.aaa-press .pg-image img { width: auto; max-height: 35em; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25); transition: box-shadow 0.4s ease-in-out; }
.aaa-press .pg-image img:hover { box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25); }
.aaa-press .pg-body { width: 330px; max-width: 100%; margin: 20px 0 40px; padding: 0; }
.aaa-press .pg-title { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.5; color: #101010; }
.aaa-press .pg-title a:hover { color: inherit; }
.aaa-press-feature { display: block; color: #6f6f6f; }
.aaa-read-more { display: block; }
.aaa-read-more::after { content: "\003E"; margin-left: 10px; font-weight: 700; transition: margin 0.2s ease-in-out; }
.aaa-read-more:hover::after { margin-left: 15px; }
@media (max-width: 1199px) { .aaa-press .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .aaa-press .wp-block-bloom-post-grid.pg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .aaa-press-logos.wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .aaa-press-logos.wp-block-gallery { grid-template-columns: minmax(0, 1fr); } }

.aaa-press-single { margin-top: 40px; }
.aaa-press-gallery .splide__arrow { background: none; opacity: 1; }
.aaa-press-gallery .splide__arrow svg { fill: rgba(0, 0, 0, 0.42); width: 2.2em; height: 2.2em; }
.aaa-press-meta { margin-top: 1.5rem; text-align: center; }
.aaa-press-date { display: block; }
.aaa-press-title { font-size: 12px; }
.aaa-press-feature-row .bloom-field-list__row { margin: 0; }

/* ------------------------------------------------------------------
 * About (patterns/about-page.php, inc/about.php)
 * ---------------------------------------------------------------- */
.aaa-about-anatomy { padding: 4rem 0; text-align: center; }
.aaa-letter-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem 0.5rem; max-width: 300px; margin: 0 auto; color: #000; }
.aaa-letter-grid > span { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.aaa-company { max-width: 300px; margin: 2rem auto 0; font-size: 0.6rem; letter-spacing: 0.85em; color: #000; }
.aaa-about-description { margin: 80px auto 0; text-align: center; }
.aaa-about-description p { margin-bottom: 1rem; font-size: 0.7rem; line-height: 1.6; }
.aaa-about-section { width: 70%; max-width: 1300px; margin-left: auto; margin-right: auto; }
.aaa-about-heading { font-size: 18px; text-align: center; }
.aaa-about-team { margin-top: 80px; margin-bottom: 80px; }
.aaa-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6rem 4rem; margin-top: 40px; text-align: center; }
.aaa-team__item { display: flex; flex-direction: column; align-items: center; }
.aaa-team__item img { width: 100%; max-width: 135px; max-height: 135px; height: auto; aspect-ratio: 1; object-fit: contain; }
.aaa-team__info { margin-top: 1rem; text-align: center; }
.aaa-team__info p { margin: 0; font-size: 0.7rem; line-height: 1.4; }
.aaa-team__name { font-weight: 700; }
.aaa-awards-band { background: #f5f5f5; }
.aaa-awards-band .aaa-about-heading { margin-top: 4rem; text-align: left; }
.aaa-award { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; background: #f5f5f5; }
.aaa-award__detail { margin-left: 30%; }
.aaa-award__name { margin-top: 20px; font-size: 15px; }
.aaa-award__meta { padding: 0; }
.aaa-award__meta li { margin-top: 10px; list-style: none; }
.aaa-award__meta img { width: 30px; height: 30px; margin-right: 10px; }
.aaa-award__description { padding-top: 20px; line-height: 1.3; }
.aaa-award__image { display: flex; align-items: center; justify-content: center; height: 100%; }
.aaa-awards__arrows { display: flex; gap: 100px; padding: 20px 0 40px 220px; }
.aaa-awards .splide__arrow { position: static; transform: none; width: 30px; height: 30px; background: none; opacity: 1; }
.aaa-awards .splide__arrow svg { width: 30px; height: 30px; fill: rgba(0, 0, 0, 0.42); }
.aaa-awards .splide__arrow:disabled { opacity: 0.35; }
.aaa-about-clients { margin-top: 3rem; margin-bottom: 40px; }
.aaa-clients { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 5rem; margin-top: 40px; }
.aaa-clients__item { display: flex; align-items: center; justify-content: center; height: 80px; }
.aaa-clients__item img { width: auto; max-width: 100px; height: auto; max-height: 80px; object-fit: contain; }
@media (max-width: 1024px) {
	.aaa-team,
	.aaa-clients { grid-template-columns: repeat(4, 1fr); }
	.aaa-clients { column-gap: 2rem; }
}
@media (min-width: 481px) { .aaa-awards__arrows { padding-left: 0; } }
@media (max-width: 768px) { .aaa-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .aaa-award { grid-template-columns: 1fr; } .aaa-award__detail { margin-left: 0; } }
@media (max-width: 576px) {
	.aaa-team { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.aaa-clients { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
	.aaa-clients__item { margin-top: 2rem; }
}
@media (max-width: 480px) {
	.aaa-letter-grid > span { font-size: 1.2rem; }
	.aaa-awards__arrows { justify-content: center; gap: 80px; }
}

/* ------------------------------------------------------------------
 * Contact (patterns/contact-page.php, "Hash tabs" group style)
 * ---------------------------------------------------------------- */
.aaa-contact { margin-top: 3rem; gap: 30px; }
@media (max-width: 991px) {
	.aaa-contact.wp-block-columns { flex-wrap: wrap !important; }
	.aaa-contact.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.aaa-contact > .aaa-contact__spacer { display: none; }
	.aaa-contact > .aaa-contact-details { margin-bottom: 2.5rem; }
}
.aaa-contact-nav,
.aaa-contact-social { padding: 0; list-style: none; }
.aaa-contact-nav li,
.aaa-contact-social li { margin-top: 1rem; }
.aaa-contact-nav li:first-child,
.aaa-contact-social li { margin-top: 0; }
.aaa-contact-details a { color: #454545; }
.aaa-contact-nav a,
.aaa-contact-social a { font-weight: 700; }
.aaa-contact .wpcf7 label { text-transform: none; }
.bloom-nav.is-horizontal > ul > li.current-menu-item > a { text-decoration: underline; }
.aaa-contact-details a:hover { text-decoration: underline; }
.aaa-contact-nav a.is-active { text-decoration: underline; }
.aaa-contact-details p { margin-top: 1rem; }
.aaa-contact iframe { max-width: 100%; }
.aaa-contact .wpcf7 input[type="submit"] { margin-top: 10px; padding: 10px 20px; border: 0; border-radius: 0; background: #000; color: #fff; }
.wpcf7-not-valid-tip,
.wpcf7-response-output { font-size: inherit !important; }
.grecaptcha-badge { visibility: hidden; }

/* ------------------------------------------------------------------
 * Footer (parts/footer.html)
 * ---------------------------------------------------------------- */
.aaa-footer { padding: 40px 0; text-align: center; }
.aaa-footer__head { margin-bottom: 0.5rem; font-size: 12px; text-transform: uppercase; }
.aaa-footer__nav { margin: 20px 0 1rem; padding: 0; list-style: none; }
.aaa-footer__nav li { display: inline; padding: 0 20px; border-right: 1px solid #000; }
.aaa-footer__nav li:last-child { border: 0; }
.aaa-footer__nav a { color: #454545; }
.aaa-footer__copyright { margin-top: 20px; }
.aaa-footer__copyright a { font-size: 11px; color: #aaa; }
@media (max-width: 576px) { .aaa-footer__nav li:nth-child(3) { border: 0; } }

/* ------------------------------------------------------------------
 * Spacing the WordPress layout styles would otherwise reset. Global styles zero the first child's top margin and every
 * flow child's bottom margin (:root :where(.is-layout-*) > …), so these rules are scoped under main to win.
 * ---------------------------------------------------------------- */
main.aaa-main > .aaa-breadcrumb { margin-top: 40px; }
main.aaa-main .aaa-project { margin-top: 40px; }
main.aaa-main .aaa-press-single { margin-top: 40px; }
main.aaa-main .aaa-project-title { margin-bottom: 0.5rem; }
main.aaa-main .aaa-project-content { margin-top: 30px; }
main.aaa-main .aaa-project-content > p,
main.aaa-main .aaa-about-description > p,
main.aaa-main .aaa-contact-details > p,
main.aaa-main .aaa-content > p { margin-bottom: 1rem; }
main.aaa-main .aaa-project-meta { margin-top: 0; margin-bottom: 1rem; }
main.aaa-main .aaa-page-title .aaa-page-title__title { margin-bottom: 0.5rem; }
@media (max-width: 576px) {
	main.aaa-main .wp-block-bloom-field-gallery.aaa-project-gallery.is-ratio-square .bloom-field-gallery__item { aspect-ratio: auto; }
	main.aaa-main .wp-block-bloom-field-gallery.aaa-project-gallery.is-ratio-square .bloom-field-gallery__img { width: 100%; height: auto; }
}

/* Measured against production (project page, 1440px and 390px). */
.bloom-nav.is-horizontal > ul { gap: 40px; }
.bloom-nav.is-horizontal > ul > li > a { padding: 0; }
main.aaa-main .aaa-project-title { line-height: 1.4; }
main.aaa-main .aaa-project-meta { display: flow-root; }
main.aaa-main .wp-block-bloom-field-gallery.aaa-project-gallery.is-layout-grid { margin-top: 56px; }
.aaa-post-nav__inner { padding: 66px 0; }
/* The horizontal menu ends 92px from the right; only while it shows, so the home "+" and the phone "+" sit on the padding edge. */
@media (min-width: 992px) {
	.site-header__inner > .site-header__right:not(:has(.bloom-menu-toggle--always)) { padding-right: 60px; }
}
@media (max-width: 991px) {
	.site-header__right { margin-right: 0; }
}

/* Measured on Projects, Press, About and Contact (production vs preview). */
.aaa-footer__head { line-height: 1.5; }
main.aaa-main .aaa-about-section { width: auto; max-width: var(--wp--style--global--content-size); }
main.aaa-main .aaa-about-heading { line-height: 1.5; }
main.aaa-main .aaa-awards-band .aaa-about-heading { margin-top: 4rem; margin-bottom: 0.5rem; }

/* Press logos: four columns as wide as the logos, centred (core's cropped-gallery rule uses an id selector, hence !important). */
main.aaa-main .aaa-press-logos.wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 2rem; margin: 40px auto 3rem; }
.aaa-press-logos.wp-block-gallery.has-nested-images figure.wp-block-image { width: auto !important; min-height: 100px; margin: 0 !important; }
.aaa-press-logos.wp-block-gallery.has-nested-images figure.wp-block-image img { width: auto !important; height: auto !important; max-width: 130px; flex: none !important; object-fit: contain !important; }
@media (max-width: 768px) { main.aaa-main .aaa-press-logos.wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, auto); } }
@media (max-width: 480px) { main.aaa-main .aaa-press-logos.wp-block-gallery.has-nested-images { grid-template-columns: auto; } }
main.aaa-main .aaa-press .wp-block-bloom-post-grid.pg-grid { margin-top: 0; }
.aaa-press .wp-block-bloom-post-grid .pg-card { justify-content: center; }
.aaa-press .wp-block-bloom-post-grid .pg-image { width: 330px; max-width: 100%; }
.aaa-press .wp-block-bloom-post-grid .pg-image img { display: block; margin: 0; }
.aaa-press .wp-block-bloom-post-grid .pg-title { font-size: 1rem; line-height: 1.5; }
.aaa-press-feature { display: inline; }

/* Contact: Bootstrap row and columns (15px gutters) with the first quarter left empty. */
main.aaa-main .aaa-contact.wp-block-columns { margin: 3rem -15px 0; gap: 0; }
.aaa-contact.wp-block-columns > .wp-block-column { padding: 0 15px; box-sizing: border-box; }
.aaa-contact input,
.aaa-contact textarea,
.aaa-contact select { font: inherit; letter-spacing: inherit; }
.aaa-contact .wpcf7 label { display: inline-block; width: 100%; margin-bottom: 0.5rem; line-height: 18px; color: #101010; }
.aaa-contact .wpcf7-form-control-wrap { display: block; }
/* Fields as in the old theme: full width, no box, a light line underneath. */
.aaa-contact .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.aaa-contact .wpcf7 textarea { display: block; box-sizing: border-box; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #e6e6e6; border-radius: 0; background: transparent; color: #101010; font-size: 12px; line-height: 18px; }
.aaa-contact .wpcf7 textarea { height: 201px; resize: vertical; }

/* Second measurement round. */
/* Menus: 12px items on a 48px line with 8px padding, current item underlined. */
.bloom-drawer .bloom-mobile-menu a { line-height: 42px; padding: 0.5rem 0; }
.bloom-drawer[data-active="slide"] .bloom-mobile-menu a { line-height: 48px; }
/* The old menus sat slightly below the middle of the screen. The padding also holds the height of the close cross the
   menus used to have above the items (37px; the "+" in the header now closes them), so the items stay where they were. */
.bloom-drawer .bloom-mobile-menu { padding-top: 77px; }
.bloom-drawer[data-active="slide"] .bloom-mobile-menu { padding-top: 63px; }
.bloom-drawer .bloom-mobile-menu li.current-menu-item > a { text-decoration: underline; }
/* Projects: the infinite-scroll sentinel takes no room (the old loader was hidden until loading). */
.aaa-projects .wp-block-bloom-post-grid ~ .pg-sentinel { height: 0; margin: 0; padding: 0; overflow: visible; }
.aaa-projects .pg-sentinel .pg-spinner { display: none; }
.aaa-projects .pg-filters { min-height: calc(28px + 3rem); }
@media (max-width: 480px) { .aaa-page-title { margin-bottom: 1rem; } }
/* Press cards: image at its own width, text block not stretched, featured project inline. */
.aaa-press .wp-block-bloom-post-grid.pg-grid .pg-image img { width: auto; max-width: 100%; }
.aaa-press .wp-block-bloom-post-grid.pg-grid .pg-body { display: block; flex: 0 0 auto; }
/* Core gallery CSS pins the images to max-width:100% !important, so the logo cap needs !important too. */
.aaa-press-logos.wp-block-gallery.has-nested-images figure.wp-block-image img { max-width: 130px !important; }
.aaa-press .wp-block-bloom-post-grid.pg-grid .pg-title { margin: 0 0 0.5rem; }
/* About awards: spacing as padding (margins of the first heading collapse or are reset by the layout styles). */
main.aaa-main .aaa-awards-band { padding-top: 4rem; }
main.aaa-main .aaa-awards-band .aaa-about-heading { margin-top: 0; }
.aaa-awards .aaa-award { padding-top: 1.5rem; }

/* Bold "+" (turns into "×" while the menu is open) */
.bloom-menu-toggle--plus svg { stroke: currentColor; stroke-width: 2.2px; }

/* ------------------------------------------------------------------
 * 404 (patterns/404.php)
 * ---------------------------------------------------------------- */
/* The About page's letter grid saying "page not found", the address asked for, the main pages, the three latest projects. */
.aaa-404 { padding: 4rem 0 80px; text-align: center; }
main.aaa-main .aaa-404 .aaa-404__code { margin-top: 2rem; }
.aaa-404__message { max-width: 60ch; margin: 3rem auto 0; font-size: 12px; color: #454545; }
.aaa-404__message code { font: inherit; letter-spacing: inherit; color: #101010; overflow-wrap: anywhere; }
.aaa-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }
.aaa-404__links a { padding: 0.25rem 0; font-size: 12px; text-transform: lowercase; color: #454545; transition: color 0.3s ease; }
.aaa-404__links a:hover { color: #000; text-decoration: underline; }
.aaa-404__links a:focus-visible { outline: 1px solid #101010; outline-offset: 4px; }
main.aaa-main .aaa-404 .aaa-404__latest { margin: 80px 0 0; }
/* One reveal on load: the grid's cells appear in reading order. */
@media (prefers-reduced-motion: no-preference) {
	.aaa-404 .aaa-letter-grid > span { animation: aaa-cell-in 0.3s ease-out both; animation-delay: calc(var(--i, 0) * 25ms + 0.1s); }
}
@keyframes aaa-cell-in { from { opacity: 0; } to { opacity: 1; } }
/* Three tiles stay one row down to tablets; phones show two. */
@media (max-width: 768px) {
	.aaa-404 .aaa-projects .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 480px) {
	.aaa-404 .aaa-projects .wp-block-bloom-post-grid.pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aaa-404 .aaa-projects .pg-card:nth-child(3) { display: none; }
}
/* Press cards keep the old 20px gap above each card (bloom's card rule resets margins). */
.aaa-press .wp-block-bloom-post-grid.pg-grid .pg-card { margin-top: 20px; }
