/*
Theme Name:  Campus Ride
Theme URI:   https://trialdropship.site/
Author:      Abir
Description: A carrier theme for the Campus Ride plugin. It owns the document — viewport, head, chrome, the pages that are not the app — and deliberately owns no design: every pixel inside #cr-app belongs to the plugin, and the few pages this theme draws itself borrow the plugin's own .cr tokens rather than defining a second palette.
Version:     1.2.8
Requires at least: 6.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: campusride
*/

/* ---------------------------------------------------------------------------
 * This is the whole stylesheet. There is no assets/theme.css, no build step and
 * no second sheet to keep in sync — the theme's entire visual responsibility is
 * the document: the page background, the safe areas, and enough type for a
 * paragraph of prose. Everything else arrives from the plugin's app.css.
 *
 * THE RULE THIS FILE EXISTS TO KEEP: nothing here may style anything inside
 * #cr-app. Woostify styled h1–h6 globally, which is why app.css carries a block
 * at line 104 taking its own headings back. That block is a scar. Do not
 * reopen it — if a screen inside the app looks wrong, the fix is in app.css.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------- document */

html {
	/* White under everything, so iOS rubber-band overscroll on the app page
	   reveals the app's own ground rather than a grey the app never uses. */
	background: #ffffff;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #ffffff;
	color: #000000;
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/*
 * The same system stack app.css declares as --font-ui, repeated here rather
 * than imported because this rule has to apply before app.css is parsed and on
 * pages where it is not loaded at all.
 *
 * No webfont is loaded anywhere in this theme, on purpose. The site it replaces
 * pulled three families — Poppins, Roboto, Roboto Slab — from a third-party
 * origin, render-blocking, on every page, and the app rendered in none of them.
 */

* { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; }

a { color: inherit; }

/* ------------------------------------------------------------ the app page */

/*
 * The app is a phone application that happens to be served by WordPress. On its
 * page the document gets out of the way completely: no header, no footer, no
 * container, no max-width. .cr-wrap's 460px is the only width constraint in the
 * document, and it belongs to the plugin.
 */

body.cr-app-page {
	/* A pull-down gesture mid-booking must not reload the app out from under a
	   ride that has just been confirmed. */
	overscroll-behavior-y: none;
}

#cr-shell {
	/* dvh, not vh. On iOS the URL bar is counted in vh but not in dvh, so vh
	   here would push the last 60-odd pixels of every screen — including the
	   primary button — below the fold. The vh line is the fallback for browsers
	   that do not know dvh, and must stay above it. */
	min-height: 100vh;
	min-height: 100dvh;

	/* Clears the notch when installed to a home screen. Pairs with the
	   viewport-fit=cover emitted in inc/head.php — without that meta iOS
	   reports every inset as 0 and this line silently does nothing, which is
	   exactly the state the site was in before this theme existed. */
	padding-top: env(safe-area-inset-top, 0px);
}

/* wpautop leaves an empty paragraph either side of a shortcode that returns a
   block-level element. Harmless, but it puts a stray line-height's worth of
   space above the app's brand row. */
#cr-shell > p:empty { display: none; }

/* --------------------------------------------------------- everything else */

/*
 * Pages that are not the app — the front page, safety, privacy, terms, 404.
 * They are wrapped in .cr so the plugin's card, button and note components are
 * available verbatim, which is why there are no card or button rules in this
 * file. What IS here is only what the app has no equivalent of: a measure wide
 * enough to read a paragraph in, and headings sized for prose rather than for a
 * phone-width control.
 */

/*
 * Prose pages wrap in .cr to inherit the plugin's tokens, then immediately undo
 * the rules .cr applies for the app's benefit and that are wrong for a page of
 * text: an 18/14/52 padding meant for a phone-width column, a 70vh floor meant
 * to stop a booting app collapsing, and — the one that actually bit — app.css's
 * type scale, which sets .cr p to 14px in a muted grey because inside the app
 * every paragraph is a caption under a control.
 *
 * EVERY selector in this section is prefixed .crt-host for one reason, and it
 * is worth understanding before adding a rule here. app.css is enqueued after
 * this sheet, so anything that merely TIES with it on specificity loses on
 * order. app.css's rules are .cr p, .cr h2 and friends — (0,1,1). So:
 *
 *     .crt-lede            (0,1,0)  loses outright
 *     .crt-page p          (0,1,1)  ties, then loses on order
 *     .crt-host .crt-page p  (0,2,1)  wins
 *
 * That was not theory. Shipped without the prefix, the lede — the one sentence
 * on the front page set LARGER than the body — rendered at 14px grey, smaller
 * than the list beneath it, on the live site. The .cr.crt-host rule below had
 * the reasoning right and nothing else inherited it.
 */
.cr.crt-host {
	padding: 0;
	min-height: 0;
}

.crt-host .crt-page {
	max-width: 640px;
	margin: 0 auto;
	padding: 28px 18px calc( 48px + env(safe-area-inset-bottom, 0px) );
}

.crt-host .crt-page h1 { font-size: 27px; line-height: 1.25; letter-spacing: -.022em; margin: 0 0 6px; }
.crt-host .crt-page h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin: 30px 0 8px; }
.crt-host .crt-page h3 { font-size: 16px; margin: 22px 0 6px; }
.crt-host .crt-page p,
.crt-host .crt-page li {
	font-size: 16px;
	line-height: 1.55;
	color: #26282b;
}
.crt-host .crt-page ul { padding-left: 20px; }
.crt-host .crt-page li { margin-bottom: 6px; }
/*
 * :not(.cr-btn) is load-bearing. Raising this rule to (0,2,1) to beat app.css
 * also raised it past .cr-pri, the plugin's black primary button — so the
 * "Open Campus Ride" button rendered as a black rectangle with a black label
 * on it, twice on the front page. Specificity fixes travel further than the
 * problem they were written for; the exclusion is what stops this one at the
 * edge of the plugin's own components.
 */
.crt-host .crt-page a:not(.cr-btn) { color: #000; text-underline-offset: 3px; }

/* The plugin only ever puts .cr-btn on a <button>, which centres its own label
   and carries no underline. On the theme's pages it lands on an <a>, which does
   neither — so the button arrives left-aligned and underlined unless this says
   otherwise. Correcting it here rather than in app.css keeps the plugin's sheet
   describing only what the plugin actually renders. */
.crt-host .crt-page a.cr-btn {
	text-align: center;
	text-decoration: none;
}

/* The wordmark, matching the mark app.css draws inline. It is the whole header:
   the only navigation the site has lives in the footer, because a menu across
   the top would compete with the app's own header on the page that matters. */
.crt-head {
	display: flex;
	align-items: center;
	gap: 7px;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 18px 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.025em;
	text-decoration: none;
}
.crt-head svg { width: 21px; height: 21px; flex: none; display: block; }

/* The opening sentence of a page, set slightly larger. The one piece of
   typographic hierarchy the prose pages have beyond the headings.
   p.crt-lede, not .crt-lede: the paragraph rule above is (0,2,1) and would
   otherwise beat it and flatten the lede back to body size — which is the same
   specificity mistake as the one that comment describes, one rule further on. */
.crt-host .crt-page p.crt-lede {
	font-size: 17.5px;
	line-height: 1.5;
	letter-spacing: -.008em;
	color: #26282b;
}

/*
 * Numbered steps on the front page. Counter rather than a plain <ol> so the
 * number can sit in its own column and the bold lead-in of each step starts on
 * its own line — the three steps are meant to be skimmed by their titles, and a
 * default ol runs the title into the sentence after it.
 */
.crt-host .crt-steps {
	list-style: none;
	counter-reset: crt-step;
	padding: 0;
	margin: 14px 0 0;
}
.crt-host .crt-steps li {
	counter-increment: crt-step;
	position: relative;
	padding-left: 34px;
	margin-bottom: 15px;
	color: #26282b;
}
.crt-host .crt-steps li::before {
	content: counter(crt-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 23px;
	height: 23px;
	border: 1px solid #c4c6c8;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 650;
	line-height: 21px;
	text-align: center;
	color: #000;
}
.crt-host .crt-steps b { display: block; color: #000; }

.crt-host .crt-list { padding-left: 20px; margin: 12px 0; }
/* Inside one of the plugin's cards, which brings its own padding. */
.crt-host .crt-in-card { margin-bottom: 0; padding-left: 18px; }
.crt-host .crt-list li { margin-bottom: 8px; color: #26282b; }
.crt-host .crt-list b { color: #000; }

.crt-foot {
	max-width: 640px;
	margin: 0 auto;
	padding: 8px 18px calc( 28px + env(safe-area-inset-bottom, 0px) );
	color: #85888c;
	font-size: 13px;
}

.crt-foot-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding-top: 18px;
	border-top: 1px solid #e6e6e7;
}
.crt-foot-nav a { color: #56585c; text-decoration: none; }
.crt-foot-nav a:hover { color: #000; text-decoration: underline; }

.crt-foot-line { margin: 12px 0 0; }

/* Screen-reader skip link, hidden until focused. */
.crt-skip {
	position: absolute;
	left: -9999px;
}
.crt-skip:focus {
	left: 8px;
	top: 8px;
	z-index: 100;
	padding: 10px 14px;
	background: #000;
	color: #fff;
	border-radius: 8px;
}