/*
Theme Name:   Onassis & Reis
Theme URI:    https://onassisreis.com
Description:  The child theme for Divi. Two jobs: somewhere for customisations to live that a Divi update cannot overwrite, and a readable page for every destination, service and journal entry from the day they are created — before anybody has built a Theme Builder template for them.
Author:       Onassis & Reis
Template:     Divi
Version:      1.1.0
License:      GPL-2.0-or-later
Text Domain:  onassisreis-child
*/

/* =========================================================================
   Nothing much lives here.

   The site's look comes from two places: Divi, for everything the client
   builds visually, and the website plugin's own stylesheet, which is scoped
   to .orh and travels with the plugin.

   This file exists for the third case — a change to Divi's own styling that
   the client wants everywhere and cannot make in the Theme Options. Putting
   it here rather than in Divi's own style.css is the entire point of a child
   theme: Divi updates roughly monthly and overwrites its own files when it
   does.

   The rules below are only what the fallback templates need.
   ====================================================================== */

/* =========================================================================
   Typography

   THIS SECTION EXISTS BECAUSE IT WAS MISSING

   The destination and service pages were designed, previewed and signed off
   with a type scale that this stylesheet did not actually contain — the
   preview supplied it and the theme did not. On the real site Divi's own
   `h1 { font-size: 30px }` applied instead, so a page that had been approved
   at 44px display type shipped at 30px of Open Sans and looked like a
   different design. It was.

   Divi sets headings with bare element selectors, specificity (0,0,1), so
   scoping to .or-page is enough to win without resorting to !important or to
   fighting the theme. Nothing here leaks: every rule is inside .or-page, and
   Divi pages the client builds are untouched.

   The face is the plugin's, not Divi's, so a service page and the homepage
   sections read as one site rather than two.
   ====================================================================== */

.or-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px 72px;
	font-family: "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
	color: #0f2137;
	-webkit-font-smoothing: antialiased;
}

.or-page h1.entry-title {
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: #0f2137;
	margin: 8px 0 18px;
	text-wrap: balance;
}

.or-page h2 {
	font-size: clamp(21px, 2.2vw, 25px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: #0f2137;
	margin: 44px 0 14px;
	padding-bottom: 0;
	text-wrap: balance;
}

.or-page h3 {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	color: #0f2137;
	margin: 30px 0 10px;
}

.or-page .or-body p,
.or-page .or-body li {
	font-size: 17px;
	line-height: 1.7;
	color: #2a3646;
}

.or-page .or-body p { margin: 0 0 18px; }

.or-page .or-body ul,
.or-page .or-body ol { margin: 0 0 22px; padding-left: 22px; }

.or-page .or-body li { margin: 0 0 10px; }

.or-page .or-body strong { color: #0f2137; font-weight: 600; }

.or-page .or-body em { font-style: italic; }

.or-page .or-body a { color: #7a6142; text-decoration: underline; text-underline-offset: 2px; }
.or-page .or-body a:hover { color: #0f2137; }

.or-page .or-standfirst {
	font-size: 20px;
	line-height: 1.55;
	color: #45536a;
	margin: 0 0 28px;
	max-width: 62ch;
}

.or-page .or-hero {
	margin: 0 0 32px;
}

.or-page .or-hero img {
	/* width:auto, not width:100%.
	   The service images in this site's library are 72x68px icons, and
	   width:100% stretched one of them to 772px across as a page hero —
	   a ten-times upscale of a line drawing, which is what a visitor saw
	   first on every service page. An image is never enlarged past its own
	   size now; the template also declines to use a small one as a hero at
	   all. */
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.or-page .or-body {
	font-size: 17px;
	line-height: 1.7;
}

.or-page .or-body > *:first-child { margin-top: 0; }

/* The buying facts -------------------------------------------------------
   A description list, not a table. These are label/value pairs rather than a
   grid of data, and a screen reader announces a dl as exactly that. */

.or-page .or-facts {
	display: grid;
	/* Two columns at most, not three.
	   Each fact draws its own bottom rule, so a row that is not full leaves a
	   rule that stops halfway across the page and reads as unfinished. Six
	   facts in two columns is three full rows; in three columns it is two.
	   Two is also simply wider, and "8–12 weeks from offer to completion" is
	   a line that wants the room. */
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 0;
	margin: 40px 0;
	padding: 0;
	border-top: 1px solid #d7dde4;
}

.or-page .or-facts > div {
	padding: 18px 0;
	border-bottom: 1px solid #d7dde4;
	padding-right: 24px;
}

.or-page .or-facts dt {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #626e83;
}

.or-page .or-facts dd {
	margin: 0;
	font-size: 16.5px;
	color: #0f2137;
}

.or-page .or-next {
	margin: 48px 0 0;
	padding: 28px 30px;
	background: #0f2137;
	color: #fff;
}

.or-page .or-next h2 {
	margin: 0 0 8px;
	font-size: 21px;
	color: #fff;
}

.or-page .or-next p { margin: 0 0 18px; color: #b6c1cd; font-size: 15px; }

.or-page .or-next a.or-button {
	display: inline-block;
	padding: 13px 26px;
	background: #cab6a1;
	color: #0f2137;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.or-page .or-next a.or-button:hover { background: #d8c8b6; }

.or-page .or-section-title {
	margin: 56px 0 24px;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: #0f2137;
}

.or-archive-intro {
	max-width: 62ch;
	margin: 0 auto 40px;
	padding: 0 24px;
	font-size: 18px;
	line-height: 1.6;
	color: #45536a;
}