/*
Theme Name: My Virtual Briefcase
Theme URI: https://myvirtualbriefcase.com
Author: My Virtual Briefcase
Description: A custom block theme for My Virtual Briefcase, a virtual assistant firm. Fast, accessible, and dependency-light.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-virtual-briefcase
Tags: full-site-editing, one-column, custom-colors, custom-menu
*/

/*
My Virtual Briefcase WordPress Theme
Copyright (C) 2026 My Virtual Briefcase

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

Bundled fonts:
  Fraunces — SIL Open Font License 1.1 — https://fonts.google.com/specimen/Fraunces
  Inter    — SIL Open Font License 1.1 — https://fonts.google.com/specimen/Inter
*/

/* Supplemental CSS only. Anything expressible in theme.json belongs there. */

/* --- Accessibility ------------------------------------------------------ */

/*
 * Visually hidden but available to screen readers. The skip link uses this
 * until focused, then becomes visible for sighted keyboard users.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	text-decoration: none;
}

/*
 * Visible focus indicator on every interactive element.
 *
 * :focus-visible rather than :focus so the ring appears for keyboard users but
 * not on mouse click, which is what makes designers remove focus styles in the
 * first place.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Form styling ------------------------------------------------------- */

.wpcf7 label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	/*
	 * border-box is load-bearing, not tidiness. Contact Form 7's inputs default to
	 * content-box, so width:100% plus horizontal padding and borders renders each
	 * field wider than its container and forces the whole page into horizontal
	 * scroll on narrow screens. Do not remove.
	 */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--accent-light);
	border-radius: 3px;
	background-color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
}

.wpcf7 textarea {
	min-height: 9rem;
}

/*
 * Submit button.
 *
 * Contact Form 7 renders a bare <input type="submit">, which browsers style as a
 * native grey button — visibly foreign next to the theme's own buttons. These
 * values intentionally mirror the `button` element styles in theme.json so the
 * form's CTA matches "Book a Free Consultation" exactly. If the button tokens in
 * theme.json change, change them here too; CF7's input cannot inherit them.
 */
.wpcf7 input[type="submit"] {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.9rem 1.75rem;
	border: none;
	border-radius: 3px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent);
}

/* Match the disabled state CF7 applies while a submission is in flight. */
.wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Hide the honeypot field from sighted users without hiding it from the DOM. */
.wpcf7 .honeypot-field {
	display: none !important;
}