/*
Theme Name: Wheaton College Advancement Campaign
Theme URI: https://github.com/linchpin/wheaton-college-advcamp
Author: Linchpin
Author URI: https://linchpin.com
Description: Child theme of Ollie for the Wheaton College Advancement Campaign microsite. The Wheaton College brand — palette, Roboto type scale, and component treatments — is expressed through theme.json so Ollie's patterns, templates, and block styles inherit it without being forked.
Template: ollie
* x-release-please-start-version
Version: 0.3.4
* x-release-please-end
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: advcamp
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, full-width-template, template-editing, translation-ready, wide-blocks
*/

/* This file is for the handful of rules theme.json cannot express. Everything a
   preset can carry — color, type, spacing, borders, shadows — belongs in
   theme.json instead. Keep this file short on purpose. */

/* Typographic rendering
---------------------------------------------------------------------------- */

/* Matches the parent site's Foundation settings: $body-antialiased and
   $paragraph-text-rendering / $header-text-rendering: optimizeLegibility. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Focus visibility
---------------------------------------------------------------------------- */

/* Ollie only sets a focus ring on form controls. Campaign pages are heavy on
   links, buttons, and accordion toggles, so extend it to everything focusable
   and put it in the brand color. theme.json has no :focus-visible hook. */
:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Keep the ring legible where the surface is the brand color itself. */
.has-primary-background-color :where(a, button, summary):focus-visible,
.has-main-background-color :where(a, button, summary):focus-visible,
.has-primary-alt-accent-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Anchor-linked sections
---------------------------------------------------------------------------- */

/* The accordion block supports deep links (useAnchors), and campaign pages use
   in-page navigation. Offset the scroll target so a sticky header does not
   cover the heading it just jumped to. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--custom--scroll-offset, 6rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* External links
---------------------------------------------------------------------------- */

/* The parent site's external-link glyph (icomoon `\e914`), drawn as a mask so
   it takes the link's colour, hover included. includes/external-links.php adds
   the class to every link that opens a new window or leaves the site. Sized to
   match the parent: about 0.7em, sitting on the baseline. */
:root {
	--advcamp--external-link-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="145 72 880 880"><path d="M915 842h-660v-660h320v-110h-430v880h880v-430h-110v320z"/><path d="M685 72v110h152.2l-376.6 376.6 77.8 77.8 376.6-376.6v152.2h110v-340h-340z"/></svg>');
}

.has-external-link-icon::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 0.7em;
	margin-inline-start: 0.25em;
	mask: var(--advcamp--external-link-icon) no-repeat center / contain;
	width: 0.7em;
}

/* Link with Arrow already spends ::after on its chevron, so the icon moves to
   ::before and flex `order` puts it back between the label and the arrow. The
   negative margin pulls the icon in to the label, as on the parent site. */
.wp-block-button.is-style-link-arrow .has-external-link-icon::before {
	background-color: currentColor;
	content: "";
	height: 0.7em;
	margin-inline-start: -0.25em;
	mask: var(--advcamp--external-link-icon) no-repeat center / contain;
	order: 1;
	width: 0.7em;
}

.wp-block-button.is-style-link-arrow .has-external-link-icon::after {
	margin-inline-start: 0;
	order: 2;
}


@media screen and (max-width: 781px) {
	footer .wp-block-social-links {
		flex-direction: row;
		justify-content: center;
		gap: 1rem;
	}
}