/*
Theme Name: Fleck Law Office
Theme URI: https://github.com/zacharyfleck
Author: Zachary Fleck
Author URI: https://github.com/zacharyfleck
Description: A minimal block (Full Site Editing) theme for Fleck Law Office. Light and typographic, built on the logo's two colors — #155885 on #afcedd — with system fonts and no fixed page layouts, so pages can be composed in the editor.
Version: 1.0.3
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fleck-law-office
Tags: business, blog, full-site-editing, custom-colors, custom-logo, custom-menu, one-column, wide-blocks, featured-images
*/

/*
 * Colors, type, spacing and the block defaults are all set in theme.json. What
 * is left here is the handful of things it has no vocabulary for: the header
 * and footer arrangement, and the hairlines between posts in a listing.
 *
 * The palette comes straight off the logo. #155885 is the ink — headings,
 * links, buttons — and #afcedd is the field it sits on, carrying the header
 * and the footer at full strength and thinning to a hairline elsewhere. Body
 * copy is a near-black so long passages stay easy on the eye.
 *
 * Type is deliberately system-only: a Georgia-first serif for headings and the
 * platform UI sans for everything else. Nothing is fetched from a font host,
 * so pages render immediately and there is nothing to keep current.
 */

/* --- Page frame ---------------------------------------------------- */

/* Hold the footer at the bottom of the window on short pages. WordPress wraps
   every template in .wp-site-blocks, so that is the column to stretch. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	margin-block-start: 0;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* --- Header -------------------------------------------------------- */

/* The header's sky background and brand-blue text are set as block attributes
   in parts/header.html, not here — WordPress prints its preset color classes
   (.has-sky-background-color and friends) with !important, so a rule in this
   file would lose to them. Setting them on the block also means the colors
   show in the editor and stay adjustable there. */

/* The lockup is wide (about 3.3:1) and carries a tagline in small type, so it
   is sized by width and allowed to shrink on narrow screens rather than being
   pinned to a fixed pixel size. Intrinsic width/height are on the tag itself,
   which keeps the bar from reflowing as the image arrives. */
.site-header__logo {
	display: flex;
}

.site-header__logo img {
	display: block;
	width: min(300px, 62vw);
	height: auto;
}

/* Menu items are small and lettered out, so the name stays the loudest thing
   in the bar. */
.site-header .wp-block-navigation {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* The bar is already brand blue on sky, so hovering deepens the text rather
   than changing hue — the same move the footer links make. */
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus {
	color: var(--wp--preset--color--deep);
	text-decoration: underline;
}

.site-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--deep);
}

/* Mobile menu, styled the same way as the Huntley Scanner theme's.
 *
 * The block is justified right for the row of links in the bar, and core reuses
 * that setting as the alignment inside the overlay too:
 * --navigation-layout-justification-setting resolves to flex-end and lands on
 * align-items for the panel, the list and every item. That is left alone on
 * purpose. The list stays on the same side of the screen it occupied in the bar
 * and directly under the close button, which is where the thumb that opened the
 * menu already is; pulling it over to the left instead makes the list read as
 * unrelated to either.
 *
 * All that is set here is the padding, because core's default falls back to the
 * root padding — sized for body copy, and tighter to the edge than a
 * full-screen panel wants for both the links and the close button.
 */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem 1.5rem;
}

/* In the bar the links are held at 0.8rem so the lockup stays the loudest thing
   there. Alone on a full screen that same size reads as fine print and makes a
   thin tap target, so the overlay takes them back up to where Huntley Scanner's
   sit. Set on the anchor: the block's own size is an inline style on the nav
   wrapper, which the links would otherwise simply inherit. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 0.95rem;
}

/* --- Post listings ------------------------------------------------- */

/* Posts are a plain list separated by hairlines rather than a grid of cards —
   closer to a page of correspondence, and it reads fine at two entries or at
   twenty. */
.post-list .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-list li.wp-block-post {
	padding: 2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.post-list li.wp-block-post:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-list .wp-block-post-title {
	margin: 0.35rem 0 0.6rem;
	font-size: 1.5rem;
}

.post-list .wp-block-post-title a:hover,
.post-list .wp-block-post-title a:focus {
	color: var(--wp--preset--color--brand);
}

.post-list .wp-block-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* --- Post disclaimer ----------------------------------------------- */

/* The standing notice above the body of every post (patterns/post-disclaimer.php).
   It has to be read as an aside rather than as the opening paragraph, so it is
   set a size down in the muted tone behind a rule in the logo's blue — the same
   treatment as a pull quote, which is the other thing on the page that is not
   the author's running prose. */
.flo-disclaimer {
	border-left: 3px solid var(--wp--preset--color--sky);
	padding-left: 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* The warning line keeps the brand blue and a little letter-spacing: it is set
   in capitals, which lose their shape when they are also small and grey. */
.flo-disclaimer .flo-disclaimer__warning {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Footer -------------------------------------------------------- */

/* The one place the logo's background color is used at full strength. Deep
   blue on #afcedd clears the contrast threshold for body text; the lighter
   brand blue would not, so links here darken instead. */
.site-footer .wp-block-site-title,
.site-footer .wp-block-navigation a,
.site-footer .site-footer__phone a,
.site-footer .site-footer__address a,
.site-footer .site-footer__legal {
	color: var(--wp--preset--color--deep);
}

.site-footer .wp-block-navigation a:hover,
.site-footer .wp-block-navigation a:focus {
	text-decoration: underline;
}

/* The number sits directly under the firm's name and is the one thing in the
   footer a visitor is likely to have come looking for, so it is set a size up
   and heavier than the menu beneath it. Weight and size carry that on their own;
   an underline as well only made the line look like stray body copy that had
   been marked up, so the underline is held back for hover and focus. */
.site-footer .site-footer__phone {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.site-footer .site-footer__phone a {
	text-decoration: none;
	text-underline-offset: 0.18em;
	white-space: nowrap;
}

.site-footer .site-footer__phone a:hover,
.site-footer .site-footer__phone a:focus {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* The address, a step down from the number it hangs under: same deep blue, but
   smaller and letter-spaced, which is the treatment the header menu gets and
   reads here as a caption to the phone rather than as a second headline.

   The two spans are the street and the town. Making them block-level puts each
   on its own line at every width, so the address never breaks mid-street, and
   lets the pair sit tighter than the surrounding line-height of 1.7 would. */
.site-footer .site-footer__address {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
	line-height: 1.45;
}

.site-footer .site-footer__address a {
	text-decoration: none;
}

.site-footer .site-footer__address a span {
	display: block;
}

.site-footer .site-footer__address a:hover,
.site-footer .site-footer__address a:focus {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.site-footer .site-footer__legal {
	max-width: 46rem;
	margin-inline: auto;
}

/* --- Search and inputs --------------------------------------------- */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

.wp-block-search__input:focus,
input:focus,
textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 2px rgba(21, 88, 133, 0.18);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Form layout, the same shape the Catherine Daley Design theme uses: the form
   is a grid whose rows are centered, and each row is a fixed-width column. That
   centers the fields and the button together, rather than centering the button
   against left-aligned inputs. */
.wpcf7-form {
	display: grid;
	gap: 1.25rem;
	justify-items: center;
}

.wpcf7-form p {
	width: 100%;
	max-width: 36rem;
	margin: 0;
}

/* CF7 nests the control inside a label, with a <br> between the caption and the
   field. Making both wrappers block-level lets the field fill the column and
   keeps the caption on its own line. */
.wpcf7-form label,
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form label {
	color: var(--wp--preset--color--fog);
	font-size: var(--wp--preset--font-size--small);
}

/* border-box matters here: section 7 gives these controls padding, and without
   it a 100%-width field overflows the column by exactly that padding. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.4rem;
}

/* Matches styles.elements.button in theme.json. Kept in sync by hand: there is
   no selector this stylesheet can borrow, since theme.json emits its button
   rules onto .wp-element-button and .wp-block-button__link only. If the button
   design changes there, change it here too. */
.wpcf7-form .wpcf7-submit {
	appearance: none;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 4px;
	padding: 0.85rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
	background: var(--wp--preset--color--deep);
}

/* Section 7 gives every focused input a red border and glow, which is right for
   a text field and wrong for a solid button. This is 0,2,0 against that rule's
   0,1,1, so it wins on specificity rather than on load order. */
.wpcf7-form .wpcf7-submit:focus {
	border: none;
	box-shadow: none;
}

/* CF7 emits the submit alone in a trailing paragraph and injects its spinner
   as a sibling. Centering the paragraph therefore centers the pair, and keeps
   working if a form template adds a second control beside the button —
   which setting `margin-inline: auto` on the button itself would not. */
.wpcf7-form p:has(.wpcf7-submit) {
	text-align: center;
}

/* The spinner is inline-block and merely `visibility: hidden` until a submit is
   in flight, so it always occupies space. Left at CF7's default 24px it drags
   the centered button visibly off-center. */
.wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}

/* Response and validation messages, on a dark surface rather than the plugin's
   default light one. */
.wpcf7-form .wpcf7-response-output {
	width: 100%;
	max-width: 36rem;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
	border-color: var(--wp--preset--color--red);
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--green);
}

/* Per-field validation text. CF7's default is a light-background red that is
   hard to read here. */
.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--x-small);
}