/*
Theme Name: Halfstep
Author: dmarkdevin
Description: A plain-spoken, results-first block theme for Halfstep Studio, a fictional growth marketing agency in Makati. White and ink with one signal-orange accent that marks client results, Bricolage Grotesque throughout, a statement hero and a case-study mosaic. Full Site Editing templates and reorderable home-page patterns. Pair with the Halfstep Core plugin for case studies, team members and the project-brief form.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: halfstep
Tags: full-site-editing, block-patterns, block-styles, blog, portfolio, one-column, wide-blocks, custom-colors, custom-menu, editor-style, translation-ready
*/

/* Only what theme.json cannot express. Mobile first. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; border-radius: 4px; }
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--ink); color: #fff; }
img { height: auto; }
::selection { background: var(--wp--preset--color--soft); }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* Header: white bar, hairline; the current page is underlined in orange. */
.hs-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .hs-header { top: var(--wp-admin--admin-bar--height, 0); }
.hs-header .wp-block-site-logo { flex-shrink: 0; }
.hs-header .wp-block-site-logo img { display: block; }
.hs-header .wp-block-button__link, .hs-header .wp-block-site-title { white-space: nowrap; }
.wp-block-navigation .wp-block-navigation-item__content { padding-block: .2rem; border-bottom: 3px solid transparent; }
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--accent); }
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 2.25rem; font-weight: 650; letter-spacing: -0.03em; }
@media (max-width: 781px) { .hs-header .wp-block-button__link { padding: .6rem 1rem !important; font-size: .875rem; } }
@media (max-width: 479px) { .hs-header .wp-block-site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 600px) and (max-width: 1023px) {
	.hs-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.hs-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Buttons: orange fill with ink text; outline variants for light and ink sections. */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; color: var(--wp--preset--color--ink); padding: calc(.95rem - 1.5px) calc(1.5rem - 1.5px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); }
.hs-on-ink .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; }
.hs-on-ink .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); }
.hs-on-ink .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); }

/* Statement hero: the headline is the design. */
.hs-hero h1 { max-width: 15ch; font-weight: 700; letter-spacing: -0.045em; line-height: .96; }
.hs-hero__lead { max-width: 36rem; }

/* Photos. */
.hs-photo img { border-radius: var(--wp--custom--radius-image); width: 100%; object-fit: cover; }
.hs-ratio-wide img { aspect-ratio: 16 / 7; }
.hs-ratio-photo img { aspect-ratio: 4 / 3; }

/* Client wordmarks. */
.hs-logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 2.5rem; }
.hs-logos .wp-block-image { margin: 0; }
.hs-logos img { height: 30px; width: auto !important; border-radius: 0 !important; opacity: .75; }

/* Services: a ruled list, two or three across. */
.hs-services { display: grid; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hs-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hs-services { grid-template-columns: repeat(3, 1fr); } }
.hs-services li { padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--ink); }
.hs-services h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.hs-services p { margin: 0; color: var(--wp--preset--color--muted); }

/* How we work: numbered because it is a real sequence. */
.hs-steps { display: grid; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; counter-reset: hs-step; }
@media (min-width: 640px) { .hs-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hs-steps { grid-template-columns: repeat(4, 1fr); } }
.hs-steps li { counter-increment: hs-step; padding-top: 1rem; border-top: 3px solid var(--wp--preset--color--ink); }
.hs-steps li::before { content: counter(hs-step); display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-bottom: .75rem; }
.hs-steps h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.hs-steps p { margin: 0; color: var(--wp--preset--color--muted); }
.hs-steps .hs-steps__when { margin-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--ink); }

/* Values (About). */
.hs-values h3 { font-size: 1.25rem; }

/* Post cards. */
.wp-block-post-featured-image { overflow: hidden; border-radius: var(--wp--custom--radius-image); }

/* Forms (Fluent Forms). */
.fluentform .ff-el-input--label label { font-weight: 600; font-size: .9375rem; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-form-control { border: 1px solid #c9c9c2; border-radius: 8px; background: #fff; font: inherit; padding: .8rem 1rem; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--ink); box-shadow: 0 0 0 2px var(--wp--preset--color--ink); }
.fluentform .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--muted); }
.fluentform .ff-btn-submit { background-color: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--ink) !important; border-radius: 8px !important; padding: .95rem 1.5rem !important; font: 600 1rem/1.2 var(--wp--preset--font-family--body) !important; }
.fluentform .ff-btn-submit:hover { background-color: var(--wp--preset--color--ink) !important; color: #fff !important; opacity: 1 !important; }

/* Ink sections and footer. */
.hs-on-ink h2, .hs-on-ink h3 { color: #fff; }
.hs-footer a { color: inherit; }
.hs-footer h2, .hs-footer h3 { color: var(--wp--preset--color--soft); }
.hs-footer__small { color: #B9B9C0; }
.hs-footer .wp-block-site-title { font-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 781px) { .hs-ratio-wide img { aspect-ratio: 4 / 3; } }