/* ==========================================================================
   Mila Dreams by Honey Butter: base
   Design tokens, reset and element defaults. Replaces Bootstrap 3 and the
   old BlankSlate reset. Component styles live in screen.css.

   Units: rem everywhere. The root is 16px, so 1rem = 16px.
   Media queries can't use variables; their rem values are relative to the
   browser default (16px): 48rem = 768px, 62rem = 992px.
   ========================================================================== */


/* Tokens
   Colours are set here. Font families, font sizes and spacing come from
   theme.json (so the block editor offers the same choices); these are short aliases.
   Note WordPress kebab-cases preset slugs: "2xl" becomes --wp--preset--font-size--2-xl.
   ========================================================================== */

:root {
	/* paper texture, laid over the background colours (none for a flat look);
	   --paper-size is the size of one tile, everywhere it repeats */
	--paper-texture: url(../img/paper-1.jpg);
	--paper-size: 1200px;
	--menu-texture: url(../img/content_bg.jpg); /* behind the open menu on phones */

	/* colour: the site's whole palette; change a colour here and it changes everywhere */

	/* brand */
	--color-burgundy: #742620;       /* logo, nav links, footer background, buttons */
	--color-burgundy-dark: #5e1e18;  /* button hover */
	--color-cream: #f8dba3;          /* body text and links on the clay and burgundy */
	--color-text: var(--color-cream);     /* body copy in the content area */
	--color-heading: var(--color-cream);  /* headings in the content area */
	--color-clay: #ae665a;           /* main content background (under the paper texture) */
	--color-clay-dark: #834c44;      /* photo borders (clay at 75% brightness, so they show against the clay) */
	--color-paper: #e2c9a0;          /* not used now (was the header backdrop, before --color-header-bg) */
	--color-teal: #155767;           /* home page "Enter Site" link */

	/* header: dark backdrop, light logo and nav */
	--color-header-bg: var(--color-burgundy);  /* header backdrop, under the paper texture */
	--color-header-ink: var(--color-cream);    /* logo, nav links and the phone menu button */
	--color-star: var(--color-cream);          /* background star field in the content area (faded in screen.css) */
	--color-landing-art: color-mix(in oklab, var(--color-cream) 30%, var(--color-clay)); /* home page artwork */
	--color-glow: #ffe09d;                       /* soft cream glows behind the stars (content area and home page) */

	/* accents: borders, rules and frames */
	--color-sand: #b87f60;           /* dotted rules (rate tables), mobile menu border */
	--color-brick: #893d2e;          /* frames, form section rules and select borders */
	--color-terracotta: #9e523a;     /* quote attribution over the hero */
	--color-muted: #777777;          /* quote attribution */
	--color-quote-rule: #eeeeee;     /* quote side rule */

	/* contact form */
	--color-ink: #333333;            /* text inside form fields */
	--color-white: #ffffff;          /* form field backgrounds; "Enter Site" link on phones */
	--color-placeholder: #9a7b6f;    /* placeholder text in form fields */
	--color-error: #c02b0a;          /* validation messages and borders */
	--color-focus: rgba(82, 168, 236, 0.8);       /* focused field border */
	--color-focus-glow: rgba(82, 168, 236, 0.6);  /* focused field glow */

	/* type */
	--font-body: var(--wp--preset--font-family--body);       /* Cormorant Garamond: body copy */
	--font-heading: var(--wp--preset--font-family--heading); /* Snippet: headings without a display style */
	--font-display: var(--wp--preset--font-family--display);
	--font-form: var(--wp--preset--font-family--form);
	--font-ui: var(--wp--preset--font-family--ui);

	/* the sizes from Body up are fluid (theme.json): 390px screens to 1200px and up */
	--text-xs: var(--wp--preset--font-size--xs);      /* 12 */
	--text-sm: var(--wp--preset--font-size--sm);      /* 14 */
	--text-md: var(--wp--preset--font-size--md);      /* 16 */
	--text-copy: var(--wp--preset--font-size--copy);  /* 17 */
	--text-input: var(--wp--preset--font-size--input);/* 18 */
	--text-base: var(--wp--preset--font-size--base);  /* 18 to 20 */
	--text-lg: var(--wp--preset--font-size--lg);      /* 20 to 24 */
	--text-h2: var(--wp--preset--font-size--h-2);      /* 24 to 30 */
	--text-xl: var(--wp--preset--font-size--xl);      /* 26 to 32 */
	--text-2xl: var(--wp--preset--font-size--2-xl);    /* 34 to 48 */
	--text-3xl: var(--wp--preset--font-size--3-xl);    /* 36 to 52 */
	--text-4xl: var(--wp--preset--font-size--4-xl);    /* 38 to 54 */
	--text-5xl: var(--wp--preset--font-size--5-xl);    /* 46 to 72 */

	/* unitless, so the spacing scales with each block's own text size */
	--leading-body: 1.5;
	--leading-heading: 1.1;
	--leading-table: 1.42857;
	/* line-height classes (screen.css) */
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.75;
	--leading-loose: 2;
	--tracking: 0.0625rem;
	--tracking-wide: 0.125rem;

	/* space */
	--space-xs: var(--wp--preset--spacing--xs);  /* 10 */
	--space-sm: var(--wp--preset--spacing--sm);  /* 15 */
	--space-md: var(--wp--preset--spacing--md);  /* 20 */
	--space-lg: var(--wp--preset--spacing--lg);  /* 30 */
	--space-xl: var(--wp--preset--spacing--xl);  /* 50 */
	--gutter: var(--space-sm);

	/* lines, frames, shadows */
	--rule-dotted: 0.0625rem dotted var(--color-sand);
	--rule-table: 0.0625rem dotted color-mix(in oklab, currentColor 35%, transparent); /* table rows: faint, in the text's colour */
	--frame: 0.1875rem solid var(--color-brick);
	--photo-border: 0.625rem solid var(--color-clay-dark);
	/* decorative frame on content photos (screen.css: "photo frame"); the SVG's colour is
	   baked in, so each palette points at its own copy */
	--photo-frame: url(../img/frame-1-cream.svg);
	--photo-frame-size: 1.5rem;  /* how deep the frame's corners reach; its lines stay 1px */
	--photo-frame-edge: calc(var(--photo-frame-size) * 46 / 80); /* frame depth outside the photo */
	--shadow-inset: inset 0 0 1.25rem 0 rgba(0, 0, 0, 0.25);
	--shadow-soft: 0 0 0.625rem 0.0625rem rgba(0, 0, 0, 0.25);
	/* filter value for the masked curves (header and hero): drop-shadow traces the
	   masked shape, which box-shadow can't */
	--shadow-curve:
		drop-shadow(0 1.875rem 2.5rem rgba(50, 50, 93, 0.25))
		drop-shadow(0 0.9375rem 1.25rem rgba(0, 0, 0, 0.3));
	/* cast upward, for the hero's inner shadow; darker and tighter than the header's
	   so it still reads on top of a dark photo */
	--shadow-curve-up:
		drop-shadow(0 -1.5625rem 1.875rem rgba(20, 5, 15, 0.55))
		drop-shadow(0 -0.46875rem 0.625rem rgba(0, 0, 0, 0.5));

	/* layout */
	--site-max-width: 75rem;
	--column-wide: 83.3333%;   /* 10 of 12 */
	--column-text: 66.6667%;   /* 8 of 12 */
	--container-standard-max: 64rem;  /* Standard container at its widest (1024px); Wide's middle column matches its columns */
	--container-max: 85rem;           /* Wide container at its widest (1360px) */
	--container-gap: var(--space-xl); /* between columns in the Standard and Wide containers */
	--container-gap-full: 6.25rem;    /* between columns in the Full width container (100px) */
}

/* Rose palette: the site's colours (body_class in functions.php always sets it).
   The same colour roles as above, remapped onto five rose swatches:
   blush #f3d1d7, pink #e4a6b3, rose #d28c9a, mauve #a1687a, plum #7b4c5b.
   Set on :root (not body) so the tokens built from these colours, like
   --rule-dotted and --photo-border, pick them up too.
   Colours baked into images (ornament PNGs, the Instagram icon) don't change. */
:root:has(> body.palette-rose) {
	/* flat colour, no paper */
	--paper-texture: none;
	--menu-texture: none;

	/* brand */
	--color-burgundy: #7b4c5b;       /* plum */
	--color-burgundy-dark: #5f3a46;  /* plum, darker */
	--color-cream: #f3d1d7;          /* blush */
	--color-text: #efccd4;           /* pink, lighter (87% lightness) */
	--color-heading: #f8e7eb;        /* pink, lightest (94% lightness) */
	--color-clay: #a1687a;           /* mauve */
	--color-clay-dark: #7b4c5b;      /* plum */
	--color-paper: #f3d1d7;          /* blush */
	--color-teal: #5f3a46;           /* plum, darker */

	/* accents */
	--color-sand: #e4a6b3;           /* pink */
	--color-brick: #7b4c5b;          /* plum */
	--color-terracotta: #d28c9a;     /* rose */

	/* contact form */
	--color-placeholder: #a1687a;    /* mauve */

	/* photo frame in blush */
	--photo-frame: url(../img/frame-1.svg);
}


/* Reset
   ========================================================================== */

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, cite, code, em, img, small, strong, b, i, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, figcaption, footer, header, main, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

article, aside, figcaption, figure, footer, header, main, nav, section {
	display: block;
}

body {
	line-height: var(--leading-table);
	color: var(--color-ink);
	background-color: var(--color-white);
}

[hidden] {
	display: none;
}


/* Text
   ========================================================================== */

h1, h2, h3, h4 {
	color: var(--color-heading);
	text-transform: uppercase;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--leading-heading);
}

h1, h2, h3 {
	margin-top: var(--space-md);
	margin-bottom: var(--space-xs);
}

h4 {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

/* Sized up for the display font, which is narrow and reads small. Each eases down
   a little on phones (from the left value, at 390px wide, to the right, at 1280px). */
h1 { font-size: clamp(2.75rem, 2.4rem + 1.35vw, 3.5rem); }    /* 44 to 56 */
h2 { font-size: clamp(2.25rem, 1.97rem + 1.1vw, 2.75rem); }   /* 36 to 44 */
h3 { font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.125rem); }  /* 28 to 34 */
h4 { font-size: clamp(1.375rem, 1.27rem + 0.45vw, 1.625rem); } /* 22 to 26 */

p {
	margin: 0 0 var(--space-xs);
}

ul,
ol {
	list-style: none;
	margin: 0 0 var(--space-xs);
}

small {
	font-size: 85%;
}

a {
	color: var(--color-cream);
	text-decoration: none;
	background-color: transparent;
}

a:hover,
a:focus {
	color: var(--color-cream);
	text-decoration: underline;
}

img {
	vertical-align: middle;
}

blockquote::before,
blockquote::after {
	content: none;
}


/* Tables
   ========================================================================== */

table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: transparent;
}

th {
	text-align: left;
}


/* Forms
   ========================================================================== */

button,
input,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
}

button {
	overflow: visible;
	text-transform: none;
	cursor: pointer;
}

select {
	text-transform: none;
}

fieldset {
	min-width: 0;
}

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0.3125rem;
	font-weight: bold;
}

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


.has-dropcap:first-of-type::first-letter {
  float: left;
  font-weight: 300;
  font-size: 3.25em;
  line-height: 1cap;
  margin-right: 0.5rem;
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: var(--font-display);
}

@supports ((-webkit-initial-letter: 1) or (initial-letter: 1)) {
  .has-dropcap:first-of-type::first-letter {
    float: none; /* reset fallback */
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-weight: 300;
    text-transform: uppercase;
  }
}