/*
Theme Name: Wholehog
Theme URI: https://wholehog.uk
Author: Rococo Digital
Author URI: https://rococodigital.co.uk
Description: Marketing site theme for Wholehog, the B2B and wholesale app for Shopify. Navy and white, Bricolage Grotesque headings over Figtree body, with block patterns for every homepage section, FAQ and documentation pages.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
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: wholehog
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
	outline: 2px solid var(--wp--preset--color--raspberry);
	outline-offset: 3px;
	border-radius: 4px;
}
.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Text on dark sections: soften secondary copy, keep links readable */
.has-navy-background-color .has-slate-color,
.has-navy-deep-background-color .has-slate-color { color: #B7C5DA !important; }
.has-navy-background-color a:not(.wp-element-button),
.has-navy-deep-background-color a:not(.wp-element-button),
.has-blue-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--white); }

/* ---------- Header ---------- */
.wh-header .wp-block-site-logo img { height: auto; }
.wh-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }

/* ---------- Block styles ---------- */

/* Paragraph: Eyebrow */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--raspberry);
}
.has-navy-background-color .is-style-eyebrow { color: #F19AAB; }

/* Paragraph: Pill */
.is-style-pill {
	display: inline-block;
	width: fit-content;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}
.has-navy-background-color .is-style-pill { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }

/* Group: Card / Card filled */
.wp-block-group.is-style-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: 28px;
}
.wp-block-group.is-style-card-filled {
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--medium);
	padding: 24px;
}
.wp-block-group.is-style-panel {
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(28px, 4vw, 40px);
}

/* List: Ticks */
ul.is-style-ticks { list-style: none; padding-left: 0; }
ul.is-style-ticks li {
	position: relative;
	padding-left: 30px;
	margin-block: 10px;
}
ul.is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.3em;
	width: 18px; height: 18px;
	background-color: var(--wp--preset--color--raspberry);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-navy-background-color ul.is-style-ticks li::before { background-color: #F19AAB; }

/* List: inline row of ticks (the strip under the hero) */
ul.is-style-ticks.wh-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 32px;
	margin: 0;
	font-weight: 600;
}

/* Paragraph: Step number */
.is-style-step-number {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 800;
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--blue);
	margin: 0;
}

/* Details: FAQ item */
.wp-block-details summary {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	font-weight: 500;
	font-size: 28px;
	line-height: 1;
	color: var(--wp--preset--color--blue);
	flex: none;
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--slate); }
.wp-block-details:last-child,
.wh-faq-group > .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }

/* Icons above feature cards */
.wh-icon { display: block; width: 32px; height: 32px; color: var(--wp--preset--color--blue); }
.wh-icon svg { width: 100%; height: 100%; }

/* ---------- Hero quick order mockup ---------- */
.wh-quickorder {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-radius: 18px;
	box-shadow: 0 30px 60px rgba(4, 14, 32, .45);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.45;
}
.wh-quickorder__head,
.wh-quickorder__foot {
	display: flex; flex-wrap: wrap; gap: 12px;
	align-items: center; justify-content: space-between;
	padding: 18px 22px;
}
.wh-quickorder__head { border-bottom: 1px solid var(--wp--preset--color--line); }
.wh-quickorder__foot { background: var(--wp--preset--color--mist); }
.wh-quickorder__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.wh-quickorder__title { margin: 0; font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 22px; }
.wh-quickorder__search {
	display: flex; align-items: center; gap: 8px; min-width: 200px;
	border: 1px solid #C7D2E0; border-radius: 10px; padding: 9px 12px; color: var(--wp--preset--color--slate);
}
.wh-quickorder__scroll { overflow-x: auto; }
.wh-quickorder table { width: 100%; min-width: 480px; border-collapse: collapse; }
.wh-quickorder th {
	text-align: left; padding: 12px 8px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em; color: var(--wp--preset--color--slate);
}
.wh-quickorder td { padding: 13px 8px; border-top: 1px solid #EEF2F7; vertical-align: middle; }
.wh-quickorder th:first-child, .wh-quickorder td:first-child { padding-left: 22px; }
.wh-quickorder th:last-child, .wh-quickorder td:last-child { padding-right: 22px; text-align: right; }
.wh-quickorder .sku { display: block; font-size: 13px; color: var(--wp--preset--color--slate); }
.wh-quickorder .name { font-weight: 600; }
.wh-quickorder .retail { color: var(--wp--preset--color--slate); }
.wh-quickorder .trade { font-weight: 700; }
.wh-quickorder .qty {
	display: inline-block; min-width: 40px; padding: 7px 8px; text-align: center;
	border: 1px solid #C7D2E0; border-radius: 8px;
}
.wh-quickorder .qty.is-zero { color: var(--wp--preset--color--slate); }
.wh-quickorder__total { margin: 0; color: var(--wp--preset--color--slate); }
.wh-quickorder__total strong { color: var(--wp--preset--color--navy); font-size: 20px; }
.wh-quickorder__btn {
	background: var(--wp--preset--color--navy); color: #fff; border-radius: 10px;
	padding: 11px 20px; font-weight: 700;
}

/* ---------- Video placeholder ---------- */
.wh-video-placeholder { aspect-ratio: 16 / 9; }

/* ---------- Docs layout ---------- */
.wh-docs-sidebar .wp-block-navigation__container { gap: 2px; }
.wh-docs-sidebar .wp-block-navigation-item__content { display: block; padding: 8px 12px; border-radius: 8px; }
.wh-docs-sidebar .current-menu-item > .wp-block-navigation-item__content { background: #EAF0F8; font-weight: 700; }
.wh-docs-content .wp-block-heading { scroll-margin-top: 24px; }
.wh-docs-content h2 { font-family: var(--wp--preset--font-family--figtree); font-size: var(--wp--preset--font-size--x-large); letter-spacing: 0; font-weight: 700; margin-top: var(--wp--preset--spacing--60); }

@media (min-width: 782px) {
	aside.wp-block-column > .wp-block-template-part {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}
.wh-docs-content h3 { margin-top: var(--wp--preset--spacing--50); }

/* Callout (docs note) */
.wp-block-group.is-style-callout {
	background: var(--wp--preset--color--mist);
	border-left: 0;
	border-radius: 14px;
	padding: 20px 24px;
}

/* ---------- Footer ---------- */
.wh-footer .wp-block-navigation a { color: var(--wp--preset--color--white); }

/* ---------- Section details ---------- */
.wh-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.wh-glance { border-bottom: 1px solid var(--wp--preset--color--line); }

.has-raspberry-background-color.wp-element-button:hover,
.has-raspberry-background-color.wp-block-button__link:hover { filter: brightness(1.1); }

/* Pricing */
.wh-price {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 800;
	font-size: 56px;
	line-height: 1;
	margin: 0;
}
.wh-plan { height: 100%; box-sizing: border-box; }
.wh-plan .wh-plan__cta { margin-top: auto; width: 100%; }
.wh-plan.is-style-card { border-width: 1.5px; border-radius: var(--wp--custom--radius--large); padding: clamp(28px, 4vw, 36px); }
.is-style-pill.wh-pill-accent { background: var(--wp--preset--color--raspberry); border-color: var(--wp--preset--color--raspberry); color: #fff; font-weight: 700; white-space: nowrap; }

/* Video placeholder play button */
.wh-play {
	width: 84px; height: 84px; border-radius: 50%;
	background: var(--wp--preset--color--raspberry);
	display: inline-flex; align-items: center; justify-content: center; color: #fff;
}

/* FAQ group label */
.wh-faq-label {
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate);
	margin-bottom: 12px;
}

/* Product screenshots */
.wh-shot video { display: block; width: 100%; height: auto; background: #fff; }
.wh-shot figcaption { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }
.wh-docs-content .wp-block-table td, .wh-docs-content .wp-block-table th { padding: 10px 12px; border-color: var(--wp--preset--color--line); vertical-align: top; }
.wh-docs-content .wp-block-table thead { border-bottom-width: 2px; }
.wh-shot img, .wh-shot video {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: 0 18px 40px rgba(19, 41, 75, .12);
}

/* Highlighted to-do notes */
mark { background: #FFF1B8; color: inherit; padding: 0 .2em; }

/* Callout icon alignment */
.is-style-callout .wh-icon { width: 22px; height: 22px; flex: none; margin-top: 3px; }