/*
Theme Name: Windy Dinghy
Theme URI: https://windydinghy.com
Author: Windy Dinghy
Author URI: https://windydinghy.com
Description: A block theme for dinghy sailing writing. Sun-bleached canvas, sail-stripe orange and regatta teal, with signal-flag dividers and a monospaced data face for tables, tide figures and calculators. Built for long-form guides, class notes and race-rules explainers.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: windy-dinghy
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* ---------------------------------------------------------------
   1. Signature: the signal-flag band
   A hoist of flat colour blocks, used as the top rule of the site,
   as a section divider, and above the footer. Flat, geometric,
   no gradients. It is the one loud thing on the page.
   --------------------------------------------------------------- */

:root,
body,
.editor-styles-wrapper {
	--wdg-hoist: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--primary) 0 44px,
		var(--wp--preset--color--tertiary) 44px 74px,
		var(--wp--preset--color--secondary) 74px 132px,
		var(--wp--preset--color--foam) 132px 154px,
		var(--wp--preset--color--contrast) 154px 190px
	);
}

.wdg-flag-band,
hr.wp-block-separator.is-style-wdg-flags {
	height: 10px;
	border: 0;
	opacity: 1;
	background-image: var(--wdg-hoist);
}

.wdg-flag-band {
	width: 100%;
}

/* Core sizes an unstyled separator to 100px. Out-specify that rule only,
   so alignwide and alignfull still control max-width. */
hr.wp-block-separator.is-style-wdg-flags:not(.is-style-wide):not(.is-style-dots) {
	width: 100%;
}

/* The band is structural: it opens the site and closes it. */
.wdg-header {
	position: relative;
	padding-top: 10px;
}

.wdg-header::before,
.wdg-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 10px;
	background-image: var(--wdg-hoist);
}

.wdg-footer {
	position: relative;
}

/* Give the band air above and below. */
hr.wp-block-separator.is-style-wdg-flags {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: auto;
}

/* A quieter, single-hoist version for card tops */
.wdg-flag-tab {
	display: block;
	height: 6px;
	width: 72px;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--primary) 0 33.333%,
		var(--wp--preset--color--tertiary) 33.333% 66.666%,
		var(--wp--preset--color--secondary) 66.666% 100%
	);
}

/* ---------------------------------------------------------------
   2. Type details
   --------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Numbers in tables, results and calculators line up. Sailors read
   a lot of columns of figures. */
table,
.wdg-figures,
.wp-block-table td,
.wp-block-table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding: 0.6rem 0.75rem;
}

.wp-block-table td {
	border-bottom: 1px solid rgba(14, 59, 69, 0.14);
	padding: 0.6rem 0.75rem;
}

/* Eyebrow label — the little all-caps mono line above a heading */
.is-style-wdg-eyebrow {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--10);
}

/* Lead paragraph for the top of a guide */
.is-style-wdg-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: rgba(14, 59, 69, 0.86);
}

/* Long-form reading rhythm inside post content */
.wdg-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wdg-prose h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wdg-prose h3 {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------
   3. Surfaces
   --------------------------------------------------------------- */

.is-style-wdg-card {
	background-color: var(--wp--preset--color--shell);
	border: 1px solid rgba(14, 59, 69, 0.12);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.is-style-wdg-card:hover {
	transform: translateY(-2px);
	border-color: rgba(14, 59, 69, 0.22);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Callout: a notice inside a guide — safety notes, rule citations */
.is-style-wdg-callout {
	background-color: var(--wp--preset--color--foam);
	border-left: 4px solid var(--wp--preset--color--secondary);
	border-radius: 0 8px 8px 0;
	padding: var(--wp--preset--spacing--30);
}

/* Images in posts get a soft edge so they sit on the canvas */
.wp-block-post-content .wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 10px;
}

/* ---------------------------------------------------------------
   4. Header and navigation
   --------------------------------------------------------------- */

.wdg-header {
	background-color: var(--wp--preset--color--base);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
   5. Footer
   --------------------------------------------------------------- */

.wdg-footer a {
	color: var(--wp--preset--color--foam);
	text-decoration: none;
}

.wdg-footer a:hover {
	color: var(--wp--preset--color--tertiary);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   6. Quality floor: focus, motion, print
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 3px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--shell);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.is-style-wdg-card:hover {
		transform: none;
	}
}

@media print {
	.wdg-flag-band,
	.is-style-wdg-flags,
	.wdg-footer,
	.wp-block-navigation {
		display: none !important;
	}
}