/*
Theme Name: Guelph Naturopathic Medical Clinic
Theme URI: https://guelphnd.ca/
Author: Cory Marazzo
Author URI: https://wckd.marketing/
Description: Custom WordPress theme for Guelph Naturopathic Medical Clinic, built with WCKD UI and WCKD Forms.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guelphnd
*/

/* ------------------------------------------------------------------ *
 * Brand tokens, then the few brand styles the kit (v2.3.27) has no class for.
 * Layout, spacing, surfaces, the hero pattern and images come from the kit.
 *
 * Palette sampled from the clinic logo and live site:
 *   #6D8F34  leaf green    (logo wordmark)
 *   #F67207  orange        (utility bar, active nav, calls to action)
 *   #3085A3  teal          (links)
 * ------------------------------------------------------------------ */

:root,
[data-theme="light"] {
	--green: #6d8f34;
	--orange: #f67207;
	--blue: #3085a3;
	--yellow: #f2b134;
	--black: #2f3533;

	--primary-color: var(--green);
	--secondary-color: var(--orange);
	--tertiary-color: var(--blue);
	--neutral-color: var(--black);

	--text-color: #4c4c4c;
	--text-color-header: #2f3533;
	--text-color-secondary: rgba(47, 53, 51, 0.72);

	/* Grounds sampled from the live site: page #fcfcfc, header white, the
	   two band tints (#f4f5ef soft grey, #eaeddf light green), and the
	   charcoal footer. */
	--background-color: #fcfcfc;
	--background-color-light: #ffffff;
	--background-color-dark: #eaeddf;
	--background-color-fade: #f4f5ef;
	--footer-bg: #2c2c2c;
	--footer-text: rgb(255 255 255 / 0.7);
	--line-color: rgba(47, 53, 51, 0.12);

	--strip-color: #dfdfdf;

	/* Header: utility row + nav row. --header-height is how far the header
	   parks above the screen and where the mobile menu drawer opens, so it
	   must equal the real header. */
	--utility-height: 2.25rem;
	--header-height: 7.5rem;
	--logo-large: 136px; /* the logo's own size, as on the live site */

	/* Round is the clinic's look: softer photo corners, pill buttons. */
	--border-radius: 16px;

	--link-color: var(--blue);
	--link-hover-color: #25687f;

	/* Calls to action are green: the clinic's preference, and what the old
	   site does. Orange stays an accent — the line across the top of the
	   page and the current menu item — so it still points, never competes. */
	--button-bg: var(--green);
	--button-text: #ffffff;
	--button-text-hover: #ffffff;
	--button-text-active: #ffffff;
	--button-text-focus: #ffffff;

	/* Open Sans, as on the live site */
	--font-stack: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Section heading with a hatched strip beside it (the live site's
 * .title-strip). Centred: strips both sides. .strip-left: right side only.
 * ------------------------------------------------------------------ */

.title-strip {
	display: flex;
	align-items: center;
	gap: 26px;
}

.title-strip::before,
.title-strip::after {
	content: "";
	flex: 1 1 0;
	min-width: 1.5rem;
	height: 5px;
	background-color: var(--strip-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M4 0h1v1H4zM3 1h1v1H3zM2 2h1v1H2zM1 3h1v1H1zM0 4h1v1H0z'/%3E%3C/svg%3E") repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M4 0h1v1H4zM3 1h1v1H3zM2 2h1v1H2zM1 3h1v1H1zM0 4h1v1H0z'/%3E%3C/svg%3E") repeat-x;
}

.title-strip.strip-left::before {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Button rows centre under their text. The row is a fit-content flex
 * group, so text-align alone never moves it — it needs the auto margin.
 * A section that deliberately pins its content to one side (the
 * appointment button beside a heading, a hero with its box set left or
 * right) keeps that alignment.
 * ------------------------------------------------------------------ */

.buttons {
	margin-inline: auto;
	justify-content: center;
}

:is(.aligned-left, .aligned-right) .buttons {
	margin-inline: 0;
	justify-content: flex-start;
}

.aligned-right .buttons {
	margin-left: auto;
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * Round, everywhere: buttons are pills, content photos take the rounded
 * corner, portraits (.image-round) stay circles. Full-bleed background
 * photos keep square edges.
 * ------------------------------------------------------------------ */

.button,
button[type="submit"],
input[type="submit"] {
	border-radius: 999px;
}

main :not(.background-image) > img:not(.image-round) {
	border-radius: var(--border-radius);
}
/* ------------------------------------------------------------------ *
 * Scroll effects. wckd-ui.js adds .in-view to .animate elements as they
 * enter the viewport (and drops it as they leave); these are the looks.
 * Scoped to scripting + motion-OK, so nothing is hidden without JS and
 * nothing moves for people who ask for reduced motion.
 * ------------------------------------------------------------------ */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

	/* Section content: lift and fade. */
	.reveal {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.reveal.in-view {
		opacity: 1;
		transform: none;
	}

	/* Grid cells: the same lift, one after another. */
	.reveal-group > * {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.reveal-group.in-view > * {
		opacity: 1;
		transform: none;
	}

	.reveal-group.in-view > :nth-child(2) { transition-delay: 0.08s; }
	.reveal-group.in-view > :nth-child(3) { transition-delay: 0.16s; }
	.reveal-group.in-view > :nth-child(4) { transition-delay: 0.24s; }
	.reveal-group.in-view > :nth-child(5) { transition-delay: 0.32s; }
	.reveal-group.in-view > :nth-child(n+6) { transition-delay: 0.4s; }

	/* Grow in: starts small and scales up as it scrolls into view, like
	   the live site's "appear" image effect. */
	.grow-in {
		opacity: 0;
		transform: scale(0.5);
		transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1);
	}

	.grow-in.in-view {
		opacity: 1;
		transform: none;
	}

	/* Hero photo: slow zoom while on screen. */
	.image-zoom .background-image img {
		transform: scale(1);
		transition: transform 8s ease-out;
	}

	.image-zoom.in-view .background-image img {
		transform: scale(1.08);
	}
}

/* ------------------------------------------------------------------ *
 * Icon list (Conditions): 72px icons joined down each column by a dashed
 * line, as on the live site. The line runs from under one icon to the
 * next, across the stack's gap.
 * ------------------------------------------------------------------ */

.icon-list-icon {
	flex: none;
	width: 72px;
	height: 72px;
}

.icon-list-item {
	position: relative;
}

.icon-list-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 36px;
	top: 72px;
	bottom: calc(-1 * var(--size-l));
	border-left: 1px dashed var(--text-color);
}

/* ------------------------------------------------------------------ *
 * Clickable cells: the image zooms slowly on hover or keyboard focus,
 * clipped to its own corners (circles stay circles).
 * ------------------------------------------------------------------ */

.zoom-media {
	overflow: hidden;
	border-radius: var(--border-radius);
}

.zoom-media:has(> .image-round) {
	border-radius: 50%;
}

.zoom-media img {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.zoom-media img {
		transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	a:hover .zoom-media img,
	a:focus-visible .zoom-media img {
		transform: scale(1.08);
	}
}

/* ------------------------------------------------------------------ *
 * Clickable cards: the whole card is the link, so its text keeps the
 * text colour and doesn't underline on hover.
 * ------------------------------------------------------------------ */

a.column,
a.column:hover {
	color: var(--text-color);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Team profile header: the portrait beside the heading. A rectangle,
 * not a circle — on the person's own page the photo is the subject, and
 * a circle crops a head-and-shoulders shot down to its middle. 4:5 with
 * object-fit holds one shape across photos that arrive tall, square and
 * (in one case) landscape. The heading column keeps a real basis so it
 * stays beside the photo on wide screens and wraps under it on phones.
 * ------------------------------------------------------------------ */

.profile-head > .flex-grow {
	flex: 1 1 18rem;
}

.profile-portrait {
	width: 280px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top; /* hold the face when a wide photo crops */
}

/* ------------------------------------------------------------------ *
 * The live site's thin brand-orange line across the top of the page.
 * ------------------------------------------------------------------ */

.utility-bar {
	border-top: 3px solid var(--secondary-color);
}

/* ------------------------------------------------------------------ *
 * Header: scrolls away with the page, slides back in scrolling up.
 *
 * Sticky, parked --header-height above the screen: at the top of the
 * page it scrolls out naturally like any content; once past, it waits
 * out of sight. The kit's scroll hook (body.scrolling-up) brings it
 * down, and scrolling down sends it back up. The kit's own
 * .hide-and-seek is position:fixed, which snaps away at the first
 * scroll. Both rows get fixed heights so the header is exactly
 * --header-height; the logo image fits the nav row.
 * ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: calc(-1 * var(--header-height));
	transition: top 0.3s ease;
}

.scrolling-up .site-header {
	top: 0;
}

.site-header .utility-bar {
	height: var(--utility-height);
}

.site-header .utility-bar > div {
	height: 100%;
	padding-block: 0;
}

.site-header > nav {
	height: calc(var(--header-height) - var(--utility-height));
	padding-block: 0;
	transition: height 0.3s ease;
}

.site-logo {
	height: calc(var(--header-height) - var(--utility-height) - 1.5rem);
	max-width: none;
	transition: height 0.3s ease;
}

/* Wide screens open with the logo at its full size and shrink it at the
   first scroll: the kit's scroll hook adds .scrolling-down / .scrolling-up
   to the body, and clears both back at the very top. Large is the default,
   so the page never loads small and pops. Narrower screens keep the small
   logo: the full one crowds the menu there. */
@media (min-width: 1100px) {
	.site-header > nav {
		height: calc(var(--logo-large) + 1.5rem);
	}

	.site-logo {
		height: var(--logo-large);
	}

	:is(.scrolling-down, .scrolling-up) .site-header > nav {
		height: calc(var(--header-height) - var(--utility-height));
	}

	:is(.scrolling-down, .scrolling-up) .site-logo {
		height: calc(var(--header-height) - var(--utility-height) - 1.5rem);
	}
}

/* The shrinking header would make the browser's scroll anchoring pull the
   page back to the top, which grows the logo again, in a loop. */
html {
	overflow-anchor: none;
}

.site-logo img {
	height: 100%;
	width: auto;
}

/* ------------------------------------------------------------------ *
 * Images placed in the text (the editor's wp-image-* images) show at
 * their own size (inline width from functions.php), capped at the column, and follow the editor's
 * alignment classes: centred, or floated with the text wrapping round.
 * ------------------------------------------------------------------ */

main img[class*="wp-image-"] {
	max-width: 100%;
	height: auto;
}

main img.aligncenter {
	display: block;
	margin-inline: auto;
}

main img.alignleft,
main img.alignright {
	max-width: 50%;
	margin-block: 0.25rem var(--size-m);
}

main img.alignleft {
	float: left;
	margin-right: var(--size-l);
}

main img.alignright {
	float: right;
	margin-left: var(--size-l);
}

/* Floats never hang out of their section. */
main section > div::after {
	content: "";
	display: table;
	clear: both;
}

/* ------------------------------------------------------------------ *
 * Footer: the live site's charcoal bar with soft white text.
 * ------------------------------------------------------------------ */

.site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
}

.site-footer a,
.site-footer a:hover {
	color: var(--footer-text);
}

/* ------------------------------------------------------------------ *
 * Content box over a background photo (width 25/50/75%): full width on
 * phones, where a quarter of the screen is too narrow to read.
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.content-box {
		width: 100%;
	}

	/* A portrait set beside the text is a quarter of the column wide, which
	   on a phone is a 90px thumbnail. Stack it instead, and let it take a
	   size someone can actually look at. Capped at 320px: the source files
	   run from 323px to 1080px wide, and past that the small ones blur. */
	.media-aside {
		display: block;
	}

	.media-aside > figure.image-s {
		width: min(70%, 320px);
		max-width: 100%;
		margin: 0 auto var(--size-l);
	}

	/* A condition page's title centres on a phone, as it does on the live
	   site. These titles run long ("High Blood Pressure (Hypertension)
	   Treatment | Guelph Naturopath") and set left they break into a ragged
	   stack. A hatched-strip heading keeps its alignment: the strip is
	   pinned beside the text and centring would strand it. */
	.single-condition main h1:not(.title-strip) {
		text-align: center;
	}

	/* Stacked, the portrait centres over the name, as on the live site. */
	.profile-portrait {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Primary menu: the current page's link in brand orange, and one orange
 * underline that glides between links on hover or focus (js/menu-
 * underline.js places it; it rests under the current page). The kit's
 * own hover underline is off here so the two never double up.
 * ------------------------------------------------------------------ */

.site-header .wckd-menu {
	position: relative;
}

.site-header .wckd-menu a:hover {
	text-decoration: none;
}

.site-header .wckd-menu li.active > a,
.site-header .wckd-menu li.active > a:hover {
	color: var(--secondary-color);
	background-color: transparent;
}

.menu-underline {
	position: absolute;
	left: 0;
	bottom: calc(var(--size-s) - 0.3rem);
	width: 0;
	height: 2px;
	border-radius: 2px;
	background-color: var(--secondary-color);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.2s ease;
}

nav.wckd-menu-compact .menu-underline {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.menu-underline {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Header search (kit overlay). The panel lives in the header, whose
 * z-index makes it a stacking context below the kit's page backdrop
 * (#fadeout, z 1000), so the header lifts above it while a panel is open.
 * ------------------------------------------------------------------ */

body[data-wckd-overlay-open-count]:not([data-wckd-overlay-open-count="0"]) .site-header {
	z-index: 1001;
}

.search-toggle {
	/* The kit sizes .icon-button (44px) but leaves the button fill on. */
	background-color: transparent;
	color: var(--text-color);
}

/* ------------------------------------------------------------------ *
 * Edge fade over a background photo. The kit ships .bg-fadeout for the
 * bottom edge; this mirrors it at the top, so a photo can blend into
 * the page at both ends as the old site's rows did.
 * ------------------------------------------------------------------ */

.bg-fadeout-top {
	position: absolute;
	top: 0;
	width: 100%;
	height: 200px;
	background: linear-gradient(to bottom, var(--background-color), transparent);
	pointer-events: none;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Mobile menu: the kit opens its drawer --header-height from the top of
 * the screen, which assumes the header is pinned there. Ours scrolls
 * away with the page, so while the drawer is open (the kit puts
 * .wckd-nav-drawer-open on the body) the header returns to the top and
 * the two line up again. It has to be fixed rather than sticky while it is
 * there: the drawer locks body scrolling with overflow:hidden, and that
 * stops sticky from sticking.
 * ------------------------------------------------------------------ */

.wckd-nav-drawer-open .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* The drawer lives inside the header, and the header is its own
	   stacking context, so without this the kit's backdrop (z 999) paints
	   over the menu and greys it out. */
	z-index: 1001;
	/* No slide here: the header is taking its place for the drawer, not
	   arriving on scroll. At the top of the page it has not moved at all. */
	transition: none;
}