/*
  Theme: Telephasic, adapted from the template by HTML5 UP (html5up.net | @ajlkn),
  used under the Creative Commons Attribution 3.0 licence (see theme-assets/TELEPHASIC-LICENSE.txt).

  Telephasic's look (sunset gradient header with angled light panes, the logo "tab", light
  Source Sans type, coral accents, white content wrappers) applied to my-recipes' own markup.
  The template's jQuery and Font Awesome are not used.
*/

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/sans/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/sans/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/hand/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Colours */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-ink: #52575c;
  --color-muted: #8a9096;
  --color-faint: #b5bac0;
  --color-line: #e3e6ea;
  --color-accent: #f35858;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #fdeceb;
  --color-success: #3a8a5c;
  --color-warning: #b07510;
  --color-error: #d13c3c;
  --color-note-bg: #fff6cf;
  --color-note-ink: #4a4237;
  --color-note-edge: #f0dc8c;
  --gradient: linear-gradient(75deg, #ff7088 15%, #f2b69d 55%);

  /* Type */
  --font-text: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --text-base: 1.2rem;
  --text-small: 1rem;
  --text-tiny: 0.88rem;
  --leading: 1.7;
  --heading-weight: 300;

  /* Shape and space */
  --radius: 0.35em;
  --radius-small: 0.35em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --shadow: 0 1px 3px rgb(0 0 0 / 8%);
  --page-width: 72rem;
  --text-width: 44rem;
}

/* ---------- Telephasic overrides ---------- */

body { font-weight: 300; }
strong, b, label, legend, th, .button, .pill, .eyebrow, .controls label { font-weight: 600; }

/* Header: the sunset gradient, angled panes and the centred logo tab. */
.site-header {
  position: relative;
  border: 0;
  color: #fff;
  background-color: #f08c89;
  background-image: url("theme-assets/overlay.png"), url("theme-assets/header.svg"), var(--gradient);
  background-size: 128px 128px, 100% 620%, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  padding-top: 5.6rem;
}
.site-header .inner { padding-top: var(--space-3); padding-bottom: var(--space-4); }
.brand {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 4.8rem;
  padding: 0 1.4rem;
  justify-content: center;
  color: #fff;
  background: rgb(255 255 255 / 15%);
  border: 1px solid rgb(255 255 255 / 75%);
  border-top: 0;
  border-radius: 0 0 0.35em 0.35em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.brand img { height: 3.6rem; }
.site-nav { font-size: 1.05rem; }
.site-nav a, .site-nav button {
  color: #fff;
  border: 1px solid transparent;
  border-radius: 0.35em;
  padding: 0.3em 0.9em;
  transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.site-nav a:hover, .site-nav button:hover { color: #fff; border-color: rgb(255 255 255 / 50%); }
.site-nav a[aria-current="page"] { color: #fff; box-shadow: none; border-color: rgb(255 255 255 / 75%); background: rgb(255 255 255 / 15%); }
.site-nav a.button { color: #fff; background: rgb(255 255 255 / 15%); border-color: rgb(255 255 255 / 75%); }
.site-nav a.button:hover { background: #fff; color: var(--color-accent); }
.search input {
  border-color: rgb(255 255 255 / 60%);
  background: rgb(255 255 255 / 18%);
  color: #fff;
  border-radius: 0.35em;
}
.search input::placeholder { color: rgb(255 255 255 / 85%); }
.search input:focus { background: #fff; color: var(--color-ink); }

/* Content sits on white, like Telephasic's .wrapper. */
main {
  background: var(--color-surface);
  max-width: none;
  padding-left: max(var(--space-4), calc((100% - var(--page-width)) / 2));
  padding-right: max(var(--space-4), calc((100% - var(--page-width)) / 2));
}
.flash-wrap { background: var(--color-surface); padding-top: var(--space-3); }

h1, h2, h3 { color: var(--color-ink); letter-spacing: 0; }
h1 { font-weight: 300; }
.lede, .recipe-head .description { color: var(--color-accent); font-size: 1.45rem; line-height: 1.5; }
.hero h1 { font-weight: 300; }
.eyebrow { letter-spacing: 0.25em; }

/* Buttons: Telephasic's rounded rectangles. */
.button, button.button { border-radius: 0.35em; padding: 0.7em 1.6em; font-size: 1rem; }
.button.quiet { border-color: #c2c7cc; }
.button.quiet:hover { color: var(--color-accent); border-color: rgb(243 88 88 / 50%); filter: none; }
.button.secondary:hover { background: var(--color-accent); color: #fff; filter: none; }

/* Cards and panels: flat, thin borders. */
.card, .panel, .controls { box-shadow: none; border-color: var(--color-line); }
.card:hover { transform: none; border-color: rgb(243 88 88 / 50%); }
.card-placeholder {
  color: #fff;
  font-weight: 300;
  background-image: url("theme-assets/header.svg"), var(--gradient);
  background-size: 100% 100%, auto;
}
.card h3 { font-weight: 400; }

/* Recipe page */
.recipe-body h2 { border-bottom: 1px solid #c2c7cc; font-weight: 300; font-size: 1.7rem; }
.recipe-body h3 { color: var(--color-accent); letter-spacing: 0.15em; font-size: 0.9rem; }
.steps > li::before { font-weight: 300; font-size: 2rem; }
.ingredients > li, .equipment > li { border-bottom-style: solid; }

input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
  border-color: #c2c7cc;
  border-radius: 0.35em;
}

/* Footer: the pale angled panes. */
.site-footer {
  background-color: var(--color-bg);
  background-image: url("theme-assets/overlay.png"), url("theme-assets/footer.svg");
  background-size: 128px 128px, 100% 100%;
  border-top: 1px solid #c2c7cc;
  color: #a2a7ac;
}
.site-footer .inner { padding-top: var(--space-5); padding-bottom: var(--space-5); }

@media (max-width: 40rem) {
  .site-header { padding-top: 4.6rem; }
  .brand { height: 3.9rem; padding: 0 1rem; }
  .brand img { height: 2.9rem; }
}

/* Small and secondary text at weight 300 is too faint; keep it readable. */
:root { --color-muted: #6f757b; }
.muted, .small, .help, .card p, .card-meta, .recipe-meta, .controls, .nutrition, .site-footer, .hint, .mine { font-weight: 400; }

/* Add page */
.add-card { box-shadow: none; }
.add-icon { color: #fff; background-image: url("theme-assets/header.svg"), var(--gradient); background-size: 100% 100%, auto; }
.file-drop { border-color: #c2c7cc; }

/* Contrast: a deeper version of Telephasic's sunset gradient, so white header text stays
   readable (at least 3.5:1 across the header, versus about 1.8:1 at the pale end of the
   original), with bolder nav text and a soft shadow. */
:root { --gradient: linear-gradient(75deg, #d9465f 15%, #c4664c 60%); }
.site-header { background-color: #cf5656; }
.site-nav { font-size: 1.12rem; }
.site-nav a, .site-nav button { font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
.brand { text-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
.search input { background: rgb(0 0 0 / 10%); border-color: rgb(255 255 255 / 55%); }
.search input::placeholder { color: rgb(255 255 255 / 92%); }

/* Icons on the gradient */
.search .icon { color: rgb(255 255 255 / 90%); }
.search:focus-within .icon { color: var(--color-muted); }
.big-icon { color: #fff; background-image: url("theme-assets/header.svg"), var(--gradient); background-size: 100% 100%, auto; }