/*
Theme Name: Wiley Websites
Theme URI: https://websites.wileycreativeco.ca
Author: Wiley Creative Co.
Author URI: https://wileycreativeco.ca
Description: Block theme for Wiley Websites — web design and hosting for small businesses. Dark workshop look, core blocks only, no plugins required. Fonts are bundled locally.
Requires at least: 6.6
Requires PHP: 7.4
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: wiley-websites
Tags: one-column, custom-colors, custom-logo, editor-style, full-site-editing, block-patterns, block-styles, dark
*/

/* ------------------------------------------------------------------
   Everything that theme.json already covers (colors, fonts, type
   scale, spacing, buttons) lives there. This file holds only the
   few things theme.json cannot express yet.
   ------------------------------------------------------------------ */

/* Faint grid texture behind the whole page (sections with a
   background colour cover it, which gives the alternating bands). */
body {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
}

html {
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Keyboard focus that is visible on a dark ground. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Per-side borders set in the editor render solid. Core covers most
   of these; this is a belt-and-braces fallback. */
.wp-block-group[style*="border-top-width"] { border-top-style: solid; }
.wp-block-group[style*="border-bottom-width"] { border-bottom-style: solid; }
.wp-block-column[style*="border-top-width"] { border-top-style: solid; }
.wp-block-column[style*="border-left-width"] { border-left-style: solid; }

/* Outline button (core "Outline" style, restyled for this theme). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line-strong);
	padding: calc(0.9rem - 1px) calc(1.6rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--text);
}

/* Lists in the pricing cards: "+" markers in the accent colour. */
.wiley-plus-list {
	list-style: none;
	padding-left: 0;
}

.wiley-plus-list li {
	position: relative;
	padding-left: 1.5rem;
}

.wiley-plus-list li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
}

/* Browser-style frames around work screenshots. Swap the placeholder
   image for a real screenshot and it is cropped to 16:10. */
.wiley-frame {
	overflow: hidden;
}

.wiley-frame-shot {
	margin: 0;
}

.wiley-frame-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
}

/* A client logo standing in for a screenshot: white "page", logo
   centred. Remove the is-logo class once a real screenshot is in. */
.wiley-frame-shot.is-logo {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	padding: 2rem;
	box-sizing: border-box;
	background: #FFFFFF;
}

.wiley-frame-shot.is-logo img {
	width: auto;
	max-width: 70%;
	max-height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Header logo */
.wiley-logo {
	margin: 0;
}

.wiley-logo img {
	display: block;
	height: auto;
}

/* Navigation: hover colour and the mobile overlay on a dark ground. */
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* Optional contact form pattern (see patterns/contact-form.php). */
.wiley-form {
	display: grid;
	gap: 1.125rem;
}

.wiley-form .wiley-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 1.125rem;
}

.wiley-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}

.wiley-form input,
.wiley-form textarea {
	display: block;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 4px;
	color: var(--wp--preset--color--text);
	font: inherit;
}

.wiley-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wiley-form input:focus,
.wiley-form textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.wiley-form button {
	justify-self: start;
	min-height: 3.25rem;
	padding: 0.9rem 1.6rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wiley-form button:hover,
.wiley-form button:focus {
	background: var(--wp--preset--color--text);
}

/* Query pagination on the blog index. */
.wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}