/*
Theme Name: Toasty Answers
Theme URI: https://toastyanswers.com
Author: Toasty Systems
Description: Block theme for Toasty Answers. Shares Poppins and an off-white ground with toasty.systems, then goes light and editorial where almost every other networking site goes dark. Built for long technical guides read on a phone in a server room.
Version: 3.0.4
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toastyanswers
*/

/* ----------------------------------------------------------------- brand

   Paper & Signal.

   The warmth is in the SUBSTRATE, not the accent. Paper is a warm cream and
   ink is espresso rather than pure black; that is where "toasty" lives. The
   accent is deliberately cool and electric, which is the "signal" half, and
   keeps this from being a third dark-site-with-a-warm-accent.

   Dark is reserved for two jobs: code blocks and the footer. Because almost
   nothing else is dark, those read as punctuation.
   ---------------------------------------------------------------------- */

:root {
  --ta-paper:  #FBF7F1;
  --ta-card:   #FFFFFF;
  --ta-wash:   #F2ECE3;
  --ta-ink:    #1A1714;
  --ta-soot:   #12100E;
  --ta-signal: #00A99A;
  --ta-deep:   #00756B;
  --ta-spark:  #FF5C7A;
  --ta-rule:   #E4DCD2;
  --ta-muted:  #6B625A;
  --ta-lift:   0 1px 2px rgba(26,23,20,.04), 0 12px 28px -18px rgba(26,23,20,.28);
}

body { -webkit-font-smoothing: antialiased; background: var(--ta-paper); }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

::selection { background: var(--ta-signal); color: #fff; }

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

/* The template part's own <header> wrapper is what has to be sticky. The
   inner group was marked sticky before, but a sticky element cannot travel
   outside its parent, and the wrapper is exactly as tall as the group -- so
   it never actually stuck. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.wp-site-blocks > header.wp-block-template-part.ta-hide { transform: translateY(-100%); }

/* Core gives every top-level block a 24px top margin. That is the paper
   strip that used to show between the header and every hero. */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }

.ta-header {
  background: rgba(251,247,241,.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ta-rule);
  transition: background .4s ease, border-color .4s ease;
}

/* Over a dark section the bar goes dark too. On the homepage it starts dark,
   because the first thing under it is the hero; the script corrects it as
   soon as it has measured. */
.ta-header.is-dark,
body.home .ta-header:not(.is-light) {
  background: rgba(18,16,14,.6);
  border-bottom-color: rgba(251,247,241,.08);
}
.ta-header.is-dark .ta-wordmark b,
body.home .ta-header:not(.is-light) .ta-wordmark b { color: #FBF7F1; }
.ta-header.is-dark .ta-wordmark span,
body.home .ta-header:not(.is-light) .ta-wordmark span { color: #5FD4C8; }
.ta-header.is-dark .ta-mark,
body.home .ta-header:not(.is-light) .ta-mark { background: #3A332D; }
.ta-header.is-dark .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
body.home .ta-header:not(.is-light) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: #E9E4DC; }
.ta-header.is-dark .wp-block-navigation__responsive-container-open,
body.home .ta-header:not(.is-light) .wp-block-navigation__responsive-container-open { color: #FBF7F1; }
.ta-header.is-dark .ta-nav-sys .wp-block-navigation-item__content,
body.home .ta-header:not(.is-light) .ta-nav-sys .wp-block-navigation-item__content { border-color: rgba(251,247,241,.45); }
.ta-header.is-dark .ta-nav-sys .wp-block-navigation-item__content:hover,
body.home .ta-header:not(.is-light) .ta-nav-sys .wp-block-navigation-item__content:hover { background: #FBF7F1; color: #1A1714; }
.ta-header a { color: var(--ta-ink); text-decoration: none; }

.ta-brand { display: flex; align-items: center; gap: .7rem; }

/* The toaster, drawn in CSS so there is no asset to lose on a migration.
   The slice is coral rather than literal toast-orange: warm enough to be a
   joke, far enough from the old palette not to drag it back in. */
.ta-mark {
  width: 38px; height: 30px; flex: none; position: relative;
  background: var(--ta-ink);
  border-radius: 7px 7px 9px 9px;
}
.ta-mark::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 3px;
  background: #000; border-radius: 3px;
  box-shadow: 0 0 0 0 rgba(0,169,154,0);
  transition: box-shadow .25s ease;
}
.ta-mark::after {
  content: ""; position: absolute; left: 11px; right: 11px; top: -5px; height: 9px;
  background: var(--ta-spark);
  border-radius: 3px 3px 0 0;
  transition: top .25s cubic-bezier(.3,1.7,.5,1);
}
.ta-brand:hover .ta-mark::after { top: -10px; }
.ta-brand:hover .ta-mark::before { box-shadow: 0 0 9px 2px rgba(0,169,154,.6); }

.ta-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.ta-wordmark b {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; color: var(--ta-ink);
}
.ta-wordmark span {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ta-deep); margin-top: .2rem; font-weight: 600;
}

.ta-header .wp-block-navigation {
  font-family: Poppins, system-ui, sans-serif;
  font-size: .9375rem; font-weight: 500;
}
.ta-header .wp-block-navigation-item__content {
  padding: .3rem 0; border-bottom: 2px solid transparent; color: var(--ta-ink);
}
.ta-header .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--ta-signal); text-decoration: none; color: var(--ta-deep);
}
.ta-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--ta-paper); }

/* The link out to the consulting side, marked as leaving. */
.ta-header .ta-nav-sys .wp-block-navigation-item__content {
  border: 1px solid var(--ta-ink); border-radius: 999px;
  padding: .3rem .85rem; font-size: .875rem;
}
.ta-header .ta-nav-sys .wp-block-navigation-item__content:hover {
  background: var(--ta-ink); color: var(--ta-paper); border-color: var(--ta-ink);
}

/* ------------------------------------------------------------------ hero */

.ta-hero {
  background: var(--ta-paper);
  padding: clamp(3rem, 2rem + 5vw, 5.5rem) 1.25rem clamp(2.4rem, 2rem + 3vw, 4rem);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--ta-rule);
}
/* A faint dotted field. On a light ground this has to be whisper-quiet or
   it becomes noise behind the type. */
.ta-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(26,23,20,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(900px 340px at 88% 8%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(900px 340px at 88% 8%, #000 0%, transparent 72%);
  opacity: .55;
}
.ta-hero > * { position: relative; z-index: 1; }
.ta-hero p { color: var(--ta-muted); }

.ta-kicker {
  font-family: Poppins, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
  font-size: .75rem; color: var(--ta-deep);
}

/* A coral marker swipe under a word or two of the headline. */
.ta-mark-text {
  background: linear-gradient(180deg, transparent 62%, rgba(255,92,122,.38) 62%);
  padding: 0 .06em;
}

/* --------------------------------------------------------------- section */

.ta-section { padding-block: clamp(2.8rem, 2rem + 3.4vw, 4.75rem); }
.ta-section--wash { background: var(--ta-wash); }
.ta-section--card { background: var(--ta-card); }
.ta-section--ink  { background: var(--ta-ink); color: #E9E4DC; }
.ta-section--ink h2, .ta-section--ink h3 { color: #FBF7F1; }
.ta-section--ink p { color: #BDB5AC; }
.ta-section--ink a { color: #5FD4C8; }

.wp-block-separator.ta-rule:not(.is-style-wide):not(.is-style-dots) {
  width: 44px; height: 3px; background: var(--ta-signal); border: 0; opacity: 1;
  border-radius: 2px; margin-block: 0 1.1rem;
  /* WordPress's constrained layout centres direct children with
     margin-left:auto !important, which no specificity can beat. */
  margin-left: 0 !important; margin-right: auto !important;
}

/* ------------------------------------------------------------------ grid */

.ta-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.ta-card {
  background: var(--ta-card); border: 1px solid var(--ta-rule); border-radius: 14px;
  padding: 1.35rem 1.35rem 1.2rem; box-shadow: var(--ta-lift);
  position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* A signal bar that wipes in along the top edge on hover. */
.ta-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--ta-signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.ta-card:hover::before { transform: scaleX(1); }
.ta-card:hover {
  transform: translateY(-2px); border-color: #D6CCBF;
  box-shadow: 0 18px 38px -22px rgba(26,23,20,.4);
}
.ta-card h3 { margin: 0 0 .35rem; font-size: 1.1875rem; }
.ta-card p { margin: 0; color: var(--ta-muted); font-size: .9375rem; line-height: 1.62; }
.ta-card .ta-count {
  display: inline-block; margin-top: .85rem;
  font-family: Poppins, system-ui, sans-serif;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ta-deep); background: rgba(0,169,154,.1);
  padding: .22rem .6rem; border-radius: 999px;
}

/* --------------------------------------------------------------- callout */

.ta-callout {
  border-left: 3px solid var(--ta-signal); background: var(--ta-card);
  border-top: 1px solid var(--ta-rule); border-right: 1px solid var(--ta-rule);
  border-bottom: 1px solid var(--ta-rule);
  padding: 1.1rem 1.3rem; border-radius: 0 12px 12px 0;
}
.ta-callout p:last-child { margin-bottom: 0; }

.ta-bridge {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center;
  justify-content: space-between;
  background: var(--ta-ink); color: #E9E4DC;
  border-radius: 16px; padding: 1.8rem 2rem;
}
.ta-bridge > div { flex: 1 1 24rem; }
.ta-bridge h3 { margin: 0 0 .4rem; color: #FBF7F1; }
.ta-bridge p { margin: 0; color: #BDB5AC; }
.ta-bridge .wp-block-button__link,
.ta-bridge a.wp-element-button { background: var(--ta-signal); color: #06302C; }

/* ------------------------------------------------------------ post lists */

.ta-posts { display: grid; gap: 1.6rem; }
.ta-posts .wp-block-post-template > li {
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--ta-rule);
}
.ta-posts .wp-block-post-title { margin: .15rem 0 .25rem; font-size: 1.35rem; }
.ta-posts .wp-block-post-title a { color: var(--ta-ink); text-decoration: none; }
.ta-posts .wp-block-post-title a:hover { color: var(--ta-deep); }
.ta-posts .wp-block-post-date { font-size: .8125rem; color: var(--ta-muted); }
.ta-posts .wp-block-post-excerpt__excerpt { color: var(--ta-muted); font-size: .9688rem; }

/* ---------------------------------------------------------- long-form ux */

.ta-prose { font-size: 1.0938rem; }
.ta-prose h2, .ta-prose h3 { scroll-margin-top: 5rem; }
.ta-prose img, .ta-prose .wp-block-image img {
  border-radius: 12px; border: 1px solid var(--ta-rule);
}
.ta-prose .wp-block-code { padding: 1.05rem 1.2rem; overflow-x: auto; }
.ta-prose :not(pre) > code {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .875em;
  background: var(--ta-wash); border: 1px solid var(--ta-rule);
  padding: .1em .36em; border-radius: 5px;
}
.ta-prose kbd {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .85em;
  background: var(--ta-ink); color: #EDE8E1; padding: .14em .45em; border-radius: 5px;
}

.ta-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--ta-signal), var(--ta-spark));
  z-index: 100; transition: width .08s linear;
}

/* -------------------------------------------------------------- the tool */

.ta-tool {
  border: 1px solid var(--ta-rule); border-radius: 16px; overflow: hidden;
  box-shadow: var(--ta-lift); background: var(--ta-card);
}
.ta-tool__head {
  background: var(--ta-ink); color: #FBF7F1;
  padding: .85rem 1.2rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
}
.ta-tool__head b { font-family: Poppins, system-ui, sans-serif; font-size: 1rem; }
.ta-tool__head span { font-size: .8125rem; color: #9E958B; }
.ta-tool__body { padding: 1.3rem; }
.ta-tool__row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-start; }
.ta-tool__field { flex: 1 1 13rem; }
.ta-tool label {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ta-muted); margin-bottom: .35rem;
}
.ta-tool input, .ta-tool select {
  width: 100%; box-sizing: border-box;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 1rem;
  padding: .62rem .7rem; border: 1px solid var(--ta-rule); border-radius: 9px;
  background: var(--ta-paper); color: var(--ta-ink);
}
.ta-tool input:focus, .ta-tool select:focus {
  outline: 2px solid var(--ta-signal); outline-offset: 1px;
  border-color: var(--ta-signal); background: #fff;
}
/* Invalid is a quiet warm tint, not an alarm. The field passes through this
   state on the way to being correct every time somebody types an address. */
.ta-tool input[aria-invalid="true"] { border-color: #E3B5BF; background: #FFF7F8; }

/* Input hints. The field accepts several notations, and saying so inline is
   cheaper than an error after the fact. */
.ta-tool .ta-hint {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ta-muted); font-size: .75rem;
}
.ta-tool .ta-hint--block { margin: .4rem 0 0; }
.ta-tool .ta-hint code {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .95em;
  background: var(--ta-wash); padding: .06em .32em; border-radius: 4px;
}

.ta-tool__out { margin-top: 1.2rem; border-top: 1px solid var(--ta-rule); padding-top: 1.1rem; }
.ta-tool__out table { width: 100%; border-collapse: collapse; }
.ta-tool__out th, .ta-tool__out td {
  text-align: left; padding: .48rem .3rem; border-bottom: 1px solid var(--ta-rule); font-size: .9375rem;
}
.ta-tool__out th {
  width: 42%; color: var(--ta-muted); font-weight: 600;
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
}
.ta-tool__out td { font-family: 'JetBrains Mono', Consolas, monospace; color: var(--ta-ink); }
.ta-tool__out tr:last-child th, .ta-tool__out tr:last-child td { border-bottom: 0; }
.ta-tool__err { color: #B03A52; font-size: .9375rem; margin: .7rem 0 0; }
.ta-bits {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .8125rem;
  word-break: break-all; line-height: 1.75;
  background: var(--ta-soot); color: #8B837A;
  padding: .7rem .85rem; border-radius: 9px;
}
.ta-bits i { font-style: normal; color: #5FD4C8; font-weight: 700; }
.ta-bits u { text-decoration: none; color: #7E766D; }

/* ---------------------------------------------------------------- footer */

.ta-footer { background: var(--ta-ink); color: #9E958B; padding-block: 3rem 1.6rem; font-size: .9375rem; }
.ta-footer a { color: #E9E4DC; overflow-wrap: anywhere; }
.ta-footer a:hover { color: #5FD4C8; }
.ta-footer h3 {
  color: #FBF7F1; font-size: .875rem; text-transform: uppercase;
  letter-spacing: .13em; margin: 0 0 .7rem;
}
.ta-footer .wp-block-list { list-style: none; padding-left: 0; margin: 0; }
.ta-footer .wp-block-list li { margin-bottom: .42rem; }
.ta-footer .wp-block-column { min-width: 0; }
.ta-footer .ta-wordmark b { color: #FBF7F1; }
.ta-footer .ta-wordmark span { color: #5FD4C8; }
.ta-footer .ta-mark { background: #2E2924; }
.ta-colophon {
  border-top: 1px solid rgba(251,247,241,.14); margin-top: 2.2rem; padding-top: 1.2rem;
  font-size: .8125rem; color: #7E766D;
}

/* ---------------------------------------------------------------- wpforo */

#wpforo #wpforo-wrap { font-family: Inter, system-ui, sans-serif; }
#wpforo .wpforo-section-name a, #wpforo .wpforo-topic-title { font-family: Poppins, system-ui, sans-serif; }
#wpforo .wpf-button, #wpforo button.wpf-action, #wpforo .wpforo-button {
  background: var(--ta-ink) !important; border-color: var(--ta-ink) !important;
  color: var(--ta-paper) !important; border-radius: 9px !important;
}
#wpforo a { color: var(--ta-deep); }

/* ------------------------------------------------------------- utilities */

.ta-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); color: var(--ta-muted); }
.ta-section--ink .ta-lead { color: #BDB5AC; }

@media (prefers-reduced-motion: reduce) {
  .ta-card, .ta-card::before, .ta-mark::after, .ta-mark::before, .ta-progress { transition: none; }
  .ta-card:hover { transform: none; }
  .ta-brand:hover .ta-mark::after { top: -5px; }
}


/* ------------------------------------------------------- inner-page scale */

.ta-hero h1, .ta-hero .wp-block-post-title, .ta-hero .wp-block-query-title {
  font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.6rem); letter-spacing: -.05em; line-height: .98;
}