/*
Theme Name:   Praxia
Theme URI:    https://praxia.mu
Author:       Webevolutions
Author URI:   https://webevolutions.co.uk
Description:  The marketing site for Praxia — patient records and appointments for doctors in Mauritius. A block theme: everything about how the site looks lives in theme.json and the templates here, and nothing about what it knows. The specialties and the pilot gate are in the Praxia Core plugin, so a redesign cannot take them with it.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version:      1.3.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  praxia
Tags:         blog, one-column, block-patterns, full-site-editing
*/

/* ------------------------------------------------------------------ motion

   The site should feel alive without performing. Three rules kept to:

   - Nothing moves that the reader did not cause. No autoplay, no carousel,
     no parallax. Things arrive as you scroll to them and then hold still.
   - Every movement is short (under half a second) and small (a few pixels).
     A page that throws elements around is a page that is hard to read on a
     phone in a waiting room.
   - It all degrades. Without JavaScript nothing is hidden, because the
     hiding is applied BY the script. A reader who never gets the script
     gets a plain, complete page rather than a blank one.

   `prefers-reduced-motion` turns the lot off. That setting is not a
   preference about taste: for some people motion causes nausea.
*/

.praxia-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
	will-change: opacity, transform;
}

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

/* A chart draws itself once, when it comes into view: the eye follows the
   line in the direction the readings were taken, which is the direction the
   story runs. The dashes are set by the script from the path's own length,
   so a short line and a long one take the same time. */
.praxia-chart svg .praxia-chart__line {
	transition: stroke-dashoffset 1.1s cubic-bezier(.3, .6, .25, 1);
}

/* The header condenses as you leave the top of the page, so the navigation
   stays reachable on a long specialty page without taking a band of the
   screen the whole way down. */
.praxia-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	transition: padding .3s ease, box-shadow .3s ease, background .3s ease;
}

.praxia-header.is-stuck {
	padding-top: .55rem !important;
	padding-bottom: .55rem !important;
	box-shadow: 0 1px 0 rgba(18, 52, 59, .08), 0 10px 30px -22px rgba(18, 52, 59, .5);
	background: rgba(255, 255, 255, .95);
}

/* Cards lift a little under the pointer, which is the cheapest way to say
   "this is a link" without underlining six headings. */
.wp-block-column > .wp-block-group,
.praxia-card {
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.praxia-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -30px rgba(18, 52, 59, .55);
}

/* Links in body copy grow their underline rather than appearing to flicker. */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button) {
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color .25s ease, color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.praxia-reveal,
	.praxia-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.praxia-header,
	.praxia-card,
	.praxia-chart svg .praxia-chart__line {
		transition: none;
	}
	.praxia-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- width

   The page runs to 82rem with gutters that grow with the screen, so there is
   air at the edges on a laptop and the content is not a thin ribbon on a
   large monitor. Lines of running text are capped separately: a paragraph
   1,300 pixels wide is physically hard to read, because the eye loses the
   start of the next line on the way back.

   The cap applies only to text sitting directly on the page. Anything inside
   a column, a card or a group is already as wide as its box, and that is
   where most of the words are. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	max-width: 74ch;
}

@media (max-width: 1100px) {
	.wp-block-post-content > p,
	.wp-block-post-content > ul,
	.wp-block-post-content > ol {
		max-width: none;
	}
}

/* ----------------------------------------------------------- the header */

/* The header has to be the panel's frame: the menu on a phone hangs from the
   bottom of it, and an absolutely positioned child needs a positioned
   parent. `position: sticky` above already provides that — this only keeps
   the row from collapsing when the logo and the button are the only things
   in it. */
.praxia-header .wp-block-group {
	gap: 10px;
}

@media (max-width: 600px) {
	/* A logo that takes the whole first row on a phone pushes the menu into
	   a second one; 26px keeps both on the same line. */
	.praxia-header .praxia-logo img,
	.praxia-header .praxia-logo svg {
		height: 26px;
		width: auto;
	}
}

/* A long specialty page on a phone should not jump when the sticky header
   condenses, so the condensed state only applies where there is room. */
@media (max-width: 600px) {
	.praxia-header.is-stuck {
		padding-top: .45rem !important;
		padding-bottom: .45rem !important;
	}
}

/* ------------------------------------------------------- the page rhythm

   theme.json sets the gap between blocks; these are the exceptions where a
   uniform gap reads wrong. The rule throughout: more space above a thing
   than below it, so a heading belongs to what follows rather than floating
   between two sections. */

/* A paragraph that follows its own heading should sit close to it. */
.wp-block-post-content > :is(h2, h3) + p { margin-top: .35rem; }

/* The small grey line under a figure, a chart or an image is a caption, not
   a paragraph, and should not be pushed a block-gap away. */
.wp-element-caption,
.wp-block-post-content > p.has-muted-color.has-text-color { margin-top: .6rem; }

/* Cards: the padding was set when the page was half this width. */
.praxia-card,
.wp-block-column > .wp-block-group.has-background {
	padding: clamp(1.4rem, 2.2vw, 2.1rem) clamp(1.3rem, 2vw, 1.9rem);
}

/* A group with a background is a band, and a band needs room inside it. */
.wp-block-post-content > .wp-block-group.has-background {
	padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 12px;
}

/* ----------------------------------------------------- columns, in between

   WordPress stacks every columns block below 782px, which turns a tablet
   into a single tall ribbon. Two columns can sit side by side well before
   that, and three can become two rather than one. */
@media (min-width: 620px) and (max-width: 781.98px) {
	.wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) {
		flex-wrap: nowrap;
	}
}

@media (min-width: 620px) and (max-width: 1000px) {
	.wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex-basis: auto !important;
	}
}

/* On a phone, stacked is right — but the stack needs air between its parts,
   which the columns gap does not give once they are no longer side by side. */
@media (max-width: 619.98px) {
	.wp-block-columns > .wp-block-column + .wp-block-column { margin-top: .5rem; }
	.wp-block-post-content > .wp-block-group.has-background { border-radius: 10px; }
}