/* WordPress pieces the prototype did not have: text pages, the live Contact form (Bricks),
   the Hub domain widget, the Lite plan, the cookie banner and reCAPTCHA. Uses the tokens
   from site.css. */

/* ---------- Text pages: legal, Retainer, posts, archives, 404 ---------- */

.page-hero--doc {
  min-height: 0;
  padding-top: clamp(9rem, 24vh, 15rem);
}

.page-hero__title .l1--doc {
  font-size: calc(clamp(2.6rem, min(7vw, 14dvh), 8.5rem) * var(--display-scale));
  line-height: 0.92;
  overflow-wrap: anywhere;
}

.page-hero--doc .page-hero__foot {
  margin-top: clamp(1.8rem, 5vh, 3rem);
}

.doc {
  padding-top: clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--line);
}

.prose {
  max-width: 44rem;
  margin-left: calc((100% - var(--gap) * 11) / 12 * 3 + var(--gap) * 3);
  color: var(--ink-dim);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* Long URLs and code break instead of widening the page. */
.prose p,
.prose li,
.prose a {
  overflow-wrap: anywhere;
}

/* Pages still built in Bricks come through as plain sections and divs. */
.prose > section,
.prose [class^="brxe-"] {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
}

.prose > * + *,
.prose [class^="brxe-"] > * + *,
.prose .tos > * + * {
  margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2.2em;
  color: var(--ink);
  font-weight: var(--w-head);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
}

.prose h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
}

.prose h4 {
  font-size: 1.15rem;
}

.prose strong,
.prose b {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-color: var(--accent);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--ink-dim);
}

.prose img,
.prose figure {
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--radius-card) * 0.6);
}

.prose figure {
  margin-block: 2em;
}

.prose figcaption {
  margin-top: 0.6em;
  font-size: var(--fs-small);
}

.prose blockquote {
  padding-left: 1.2em;
  border-left: 2px solid var(--accent);
  color: var(--ink);
}

.prose code,
.prose pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--ink);
}

.prose pre {
  overflow-x: auto;
  padding: 1.1em 1.3em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raise);
}

.prose pre code {
  padding: 0;
  background: none;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.prose th,
.prose td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--ink);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* The Stripe pricing table on Retainer sits on a card in its own background colour
   (#f5efe9, set in Stripe), so the table's edge does not show. */
.prose stripe-pricing-table {
  display: block;
  margin-top: 1rem;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: var(--radius-card);
  background: #f5efe9;
}

.doc--post .prose {
  font-size: clamp(1.06rem, 1rem + 0.2vw, 1.19rem);
}

.doc__cover {
  max-width: 64rem;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem) calc((100% - var(--gap) * 11) / 12 * 3 + var(--gap) * 3);
}

.doc__cover img {
  width: 100%;
  border-radius: var(--radius-card);
}

.doc__back,
.doc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  margin-left: calc((100% - var(--gap) * 11) / 12 * 3 + var(--gap) * 3);
}

.posts {
  margin-left: calc((100% - var(--gap) * 11) / 12 * 3 + var(--gap) * 3);
  border-top: 1px solid var(--line);
}

.posts__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.posts__title {
  max-width: 40ch;
  font-size: var(--fs-h3);
  font-weight: var(--w-head);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.posts__link:hover .posts__title,
.posts__link:focus-visible .posts__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.posts__date {
  color: var(--ink-dim);
  font-size: var(--fs-small);
}

/* ---------- Lite Dedicated Hosting ---------- */

.plans--lite {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.plans--lite .plan {
  grid-column: 1 / span 5;
}

.plans--lite .upsell {
  grid-column: 7 / -1;
  display: grid;
  gap: var(--gap);
  align-content: start;
}

.upsell__item {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.6rem, 2.6vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.upsell__title {
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.8rem);
  font-weight: var(--w-head);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.upsell__item p {
  max-width: 46ch;
  color: var(--ink-dim);
}

/* ---------- Contact form (the live Bricks form) ---------- */

.cform--live .brxe-form {
  display: grid;
  gap: 1.6rem;
}

.cform--live .form-group {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

/* Bricks leaves an empty group for the honeypot. */
.cform--live .form-group:empty {
  display: none;
}

.cform--live .form-group > label {
  font-size: var(--fs-label);
  font-weight: var(--w-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.cform--live input[type="text"],
.cform--live input[type="email"],
.cform--live input[type="tel"],
.cform--live textarea,
.cform--live select {
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color 0.35s var(--ease-out);
}

.cform--live textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.cform--live select {
  appearance: none;
  padding-right: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a978f' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.1rem center / 1.2rem;
  cursor: pointer;
}

.cform--live select option {
  background: var(--bg-raise);
  color: var(--ink);
}

.cform--live input:focus-visible,
.cform--live textarea:focus-visible,
.cform--live select:focus-visible {
  outline: none;
  border-bottom-color: var(--ink);
}

.cform--live input::placeholder,
.cform--live textarea::placeholder {
  color: var(--ink-dim);
  opacity: 0.75;
}

.cform--live input:user-invalid,
.cform--live textarea:user-invalid {
  border-bottom-color: #e0a39a;
}

.cform--live .options-wrapper {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cform--live .options-wrapper li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.cform--live .options-wrapper input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: #ece9e2;
}

.cform--live .options-wrapper label {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-dim);
  cursor: pointer;
}

.cform--live .options-wrapper a,
.cform__legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cform--live .submit-button-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* The submit button looks like the site's solid pill. */
.cform--live .bricks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.8rem 1.9rem;
  border: 1px solid var(--accent);
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: var(--w-mid);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

/* Hover matches .pill--solid: a vermilion outline. */
.cform--live .bricks-button:hover,
.cform--live .bricks-button:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--ink);
}

.cform--live .bricks-button .loading {
  display: none;
}

.cform--live .bricks-button.sending .loading {
  display: inline-flex;
}

.cform--live .bricks-button.sending .loading svg {
  width: 1.1rem;
  height: 1.1rem;
  animation: dm-spin 0.9s linear infinite;
}

.cform--live .bricks-button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

@keyframes dm-spin {
  to { transform: rotate(360deg); }
}

.cform--live .message {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
}

.cform--live .message.success {
  border-color: color-mix(in srgb, #7fc8a0 55%, transparent);
  background: color-mix(in srgb, #7fc8a0 12%, transparent);
}

.cform--live .message.error,
.cform--live .message.danger,
.cform--live .brxe-alert {
  border: 1px solid color-mix(in srgb, #e0a39a 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #e0a39a 10%, transparent);
  padding: 0.8rem 1rem;
  font-size: var(--fs-small);
  color: var(--ink);
}

/* Bricks prints its reCAPTCHA error up front and adds .show only when reCAPTCHA fails. */
.cform--live .recaptcha-hidden,
.cform--live .recaptcha-error {
  display: none;
}

.cform--live .recaptcha-error.show {
  display: block;
}

.cform--live .form-group.captcha {
  display: none;
}

.cform--live .form-group.captcha:has(.recaptcha-error.show) {
  display: grid;
}

.cform__legal {
  margin-top: 1.2rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* The form states the reCAPTCHA terms (cform__legal), so Google's badge can go. */
.grecaptcha-badge {
  visibility: hidden;
}

/* ---------- Domain search (Hub client widget) ---------- */

.domains-widget {
  width: min(100%, 52rem);
}

.domains-widget .thc-domain-lookup {
  max-width: none;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
}

.domains-widget .thc-domain-lookup-search {
  gap: 0.6rem;
  padding: 0.45rem 0.45rem 0.45rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 99px;
  background: var(--bg-raise);
  transition: border-color 0.3s var(--ease-out);
}

.domains-widget .thc-domain-lookup-search:focus-within {
  border-color: var(--ink);
}

.domains-widget .thc-domain-lookup-search__input {
  height: auto;
  padding: 0.8rem 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--ink) !important;
  outline: none;
}

.domains-widget .thc-domain-lookup-search__input::placeholder {
  color: var(--ink-dim);
}

.domains-widget .thc-domain-lookup-search__btn,
.domains-widget .thc-domain-lookup-buy-btn,
.domains-widget .thc-domain-lookup-search__btn * {
  font-family: var(--font-sans) !important;
}

.domains-widget .thc-domain-lookup-search__btn,
.domains-widget .thc-domain-lookup-buy-btn {
  flex: none;
  min-height: 3rem;
  height: auto;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 99px;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--w-mid);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.domains-widget .thc-domain-lookup-search__btn:hover,
.domains-widget .thc-domain-lookup-search__btn:focus-visible,
.domains-widget .thc-domain-lookup-buy-btn:hover,
.domains-widget .thc-domain-lookup-buy-btn:focus-visible {
  border-color: var(--accent);
  background: transparent !important;
  color: var(--ink) !important;
}

.domains-widget .thc-domain-lookup-buy-btn {
  min-height: 2.5rem;
  padding: 0.55rem 1.2rem;
  font-size: 0.8125rem;
}

.domains-widget .sui-spinner__icon--stroke {
  stroke: var(--accent);
}

.domains-widget .sui-spinner__icon--background {
  stroke: var(--line);
}

.domains-widget .sui-spinner--contained {
  margin-top: 2.5rem;
}

.domains-widget .thc-domain-lookup-result {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

.domains-widget .thc-domain-lookup-result__item + .thc-domain-lookup-result__item {
  margin-top: 2.5rem;
}

.domains-widget .thc-domain-lookup-result__item-header {
  padding: 0 0 1rem;
  font-size: var(--fs-label);
  font-weight: var(--w-mid);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.domains-widget .thc-domain-lookup-list {
  border-top: 1px solid var(--line);
}

.domains-widget .thc-domain-lookup-list__item {
  flex-wrap: nowrap;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.domains-widget .thc-domain-lookup-list__item-title {
  flex-wrap: wrap;
  font-size: var(--fs-body);
  font-weight: var(--w-mid);
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.domains-widget .thc-domain-lookup-list__item-title-exact {
  font-weight: 400;
  color: var(--ink-dim);
}

.domains-widget .thc-domain-lookup-list__item--unavailable .thc-domain-lookup-list__item-title span {
  color: var(--ink-dim);
}

.domains-widget .thc-domain-lookup-list__item-actions {
  flex: none;
  width: auto;
  gap: 1.2rem;
  font-size: var(--fs-body);
  color: var(--ink);
}

.domains-widget .thc-domain-lookup-result__load-more {
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--w-mid);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.domains-widget .thc-domain-lookup-result__load-more svg {
  fill: currentColor;
}

.domains-widget .thc-domain-lookup-error--danger,
.domains-widget .thc-domain-lookup-result--empty {
  margin-top: 1.2rem;
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  color: #e0a39a;
}

.domains-widget .thc-domain-lookup-result--empty {
  color: var(--ink-dim);
}

/* ---------- Cookie banner (Complianz) ---------- */

/* Complianz sets these on :root; html:root outranks it for the banner and the Manage consent tab. */
html:root {
  --cmplz_banner_background_color: #161614;
  --cmplz_banner_border_color: rgba(236, 233, 226, 0.14);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 22px 22px 22px 22px;
  --cmplz_text_color: #ece9e2;
  --cmplz_hyperlink_color: #ece9e2;
  --cmplz_button_border_radius: 99px 99px 99px 99px;
  --cmplz_button_font_size: 14px;
  --cmplz_button_accept_background_color: #ee4323;
  --cmplz_button_accept_border_color: #ee4323;
  --cmplz_button_accept_text_color: #141210;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: rgba(236, 233, 226, 0.4);
  --cmplz_button_deny_text_color: #ece9e2;
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: rgba(236, 233, 226, 0.4);
  --cmplz_button_settings_text_color: #ece9e2;
  --cmplz_slider_active_color: #ee4323;
  --cmplz_slider_inactive_color: #67635c;
  --cmplz_category_header_always_active_color: #9a978f;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  font-weight: var(--w-head);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg path {
  fill: #ece9e2;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
  background: rgba(236, 233, 226, 0.05);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
  font-family: var(--font-sans);
  font-weight: var(--w-mid);
}

body #cmplz-manage-consent .cmplz-manage-consent {
  border-bottom-width: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .prose,
  .posts,
  .doc__cover,
  .doc__back,
  .doc__actions {
    margin-left: 0;
  }

  .plans--lite .plan,
  .plans--lite .upsell {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .domains-widget .thc-domain-lookup-search {
    flex-direction: column;
    align-items: stretch;
    padding: 0.4rem;
    border-radius: 28px;
  }

  .domains-widget .thc-domain-lookup-search__input {
    padding: 0.8rem 1rem;
  }

  .domains-widget .thc-domain-lookup-list__item {
    flex-wrap: wrap;
  }

  .domains-widget .thc-domain-lookup-list__item-actions {
    width: 100%;
    justify-content: space-between;
  }
}