/* Hidden Door Studio - shared design tokens & components.
   Referenced by every page in public/. This file is the one deliberate
   exception to the "duplicate rather than abstract" convention in
   ../AGENTS.md - it holds only CSS that was already byte-for-byte
   identical across two or more pages. Page-specific CSS stays local to
   each page's own <style> block. */

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

html, body {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: #0a0908;
  color: #ffffff;
  font-family: 'Public Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #d4a853;
}

.back-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #6b5a45;
  transition: color 0.3s ease;
  margin-bottom: 2.5rem;
}

.back-link:hover,
.back-link:focus-visible {
  color: #d4a853;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #ffffff;
}

.lede {
  font-size: 1rem;
  color: #a89a85;
  margin: 0 0 3rem;
  max-width: 34rem;
}

/* Tables - Price Bands / Add-Ons / Hosting / DNS shape: short name, long
   description, short price. Fixed widths so the description always gets
   priority space regardless of what the other columns' content happens
   to be. Bare element selectors so any page's tables pick this up
   without needing a wrapper class. */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #16140f;
  border: 1px solid #332c22;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 1rem;
}

th:nth-child(1),
td:nth-child(1) {
  width: 20%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 58%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 22%;
}

th,
td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #332c22;
  vertical-align: top;
  font-size: 0.85rem;
  overflow-wrap: break-word;
}

th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5a45;
}

tr:last-child td {
  border-bottom: none;
}

td:first-child {
  color: #ffffff;
  font-weight: 500;
}

td:last-child {
  color: #d4a853;
}

@media (max-width: 40rem) {
  table {
    table-layout: auto;
  }

  thead {
    display: none;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
  }

  td:nth-child(1),
  td:nth-child(2),
  td:nth-child(3) {
    width: auto;
  }

  tr {
    padding: 1rem;
    border-bottom: 1px solid #332c22;
  }

  tr:last-child {
    border-bottom: none;
  }

  td {
    padding: 0;
    border-bottom: none;
  }

  td:first-child {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
  }

  td:nth-child(2) {
    margin-bottom: 0.5rem;
  }
}

/* Table of contents - floating card beside the content column above
   80rem, an off-canvas drawer below it. Pages without a #toc-panel
   simply never match these selectors. */
.toc {
  position: fixed;
  top: 6rem;
  left: calc(50% - 38rem);
  z-index: 20;
  width: 13rem;
  max-height: calc(100vh - 9rem);
  display: flex;
  flex-direction: column;
  background: #16140f;
  border: 1px solid #332c22;
  border-radius: 6px;
  padding: 1rem 1.1rem;
}

.toc-list {
  overflow-y: auto;
  min-height: 0;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  margin-bottom: 0.6rem;
}

.toc a {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #a89a85;
  text-decoration: none;
  transition: color 0.3s ease;
}

.toc a:hover,
.toc a:focus-visible {
  color: #d4a853;
}

.toc a[aria-current="true"] {
  color: #d4a853;
  font-weight: 700;
}

.toc-toggle {
  display: none;
}

@media (max-width: 80rem) {
  .toc {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 6px 0 0 6px;
    border-right: none;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .toc.toc--open {
    transform: translateX(0);
  }

  .toc-toggle {
    display: flex;
    position: absolute;
    top: 0.5rem;
    right: 100%;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 2.25rem;
    background: #16140f;
    border: 1px solid #332c22;
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: #d4a853;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .toc-toggle svg {
    transition: transform 0.3s ease;
  }

  .toc.toc--open .toc-toggle svg {
    transform: rotate(180deg);
  }

  .toc-toggle:hover,
  .toc-toggle:focus-visible {
    color: #ffffff;
  }
}

.scroll-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border: none;
  border-top: 1px solid #332c22;
  background: none;
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #a89a85;
  cursor: pointer;
  transition: color 0.3s ease;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  color: #d4a853;
}

/* CTA button that opens the inquiry modal. */
.inquiry-trigger {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #6b5a45;
  border-radius: 3px;
  color: #d4a853;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.inquiry-trigger:hover,
.inquiry-trigger:focus-visible {
  border-color: #d4a853;
  color: #ffffff;
  outline: none;
}

/* Honeypot field used by every form on the site (modal and full-page
   alike) - bots tend to fill every field, humans never see this one. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Shared across every form's status line and success state, whether the
   form lives in the modal or as a full page (e.g. discovery-intake). */
.note {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.75rem;
  color: #6b5a45;
  margin: 0;
}

.note.error {
  color: #c0605a;
}

.inquiry-success {
  text-align: left;
}

.success-heading {
  margin: 0 0 0.4rem;
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #d4a853;
}

.success-body {
  margin: 0;
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.85rem;
  color: #a89a85;
}

/* Inquiry modal - identical markup/behavior everywhere it appears
   (currently the homepage and pricing page copy-paste the same modal,
   per AGENTS.md's stated duplication convention; this is the shared CSS
   half of that copy). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-backdrop.open {
  opacity: 1;
}

.modal {
  position: relative;
  background: #16140f;
  border: 1px solid #332c22;
  border-radius: 6px;
  padding: 2rem 1.75rem 1.75rem;
  width: 100%;
  max-width: 22rem;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-heading {
  margin: 0 0 1.25rem;
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-align: left;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: #6b5a45;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
  color: #d4a853;
  outline: none;
}

form.inquiry {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}

form.inquiry[hidden] {
  display: none;
}

.iti {
  width: 100%;
  font-family: 'Public Sans', Arial, sans-serif;
}

.iti__selected-country {
  background: #16140f;
}

.iti__selected-country:hover,
.iti__selected-country:focus {
  background: #1f1b14;
}

.iti__selected-country-primary {
  color: #ffffff;
}

.iti__selected-dial-code {
  color: #a89a85;
}

.iti__arrow {
  border-top-color: #6b5a45;
}

.iti__country-list {
  background: #16140f;
  border: 1px solid #332c22;
  font-family: 'Public Sans', Arial, sans-serif;
}

.iti__country {
  color: #ffffff;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background: #1f1b14;
}

.iti__dial-code {
  color: #6b5a45;
}

.iti__divider {
  border-bottom: 1px solid #332c22;
}

.iti__search-input {
  background: #0a0908;
  border: 1px solid #332c22;
  border-radius: 3px;
  color: #ffffff;
  font-family: 'Public Sans', Arial, sans-serif;
}

.inquiry input,
.inquiry textarea,
.inquiry select {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.9rem;
  background: #16140f;
  border: 1px solid #332c22;
  border-radius: 3px;
  color: #ffffff;
  padding: 0.6rem 0.7rem;
  resize: none;
  width: 100%;
}

.inquiry select {
  color-scheme: dark;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b5a45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2rem;
}

.inquiry textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.inquiry select:invalid {
  color: #6b5a45;
}

.inquiry input::placeholder,
.inquiry textarea::placeholder {
  color: #6b5a45;
}

.inquiry input:focus-visible,
.inquiry textarea:focus-visible,
.inquiry select:focus-visible {
  outline: none;
  border-color: #d4a853;
}

.inquiry .checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inquiry .checkbox-row input[type="checkbox"] {
  width: auto;
  accent-color: #d4a853;
}

.inquiry .checkbox-row label {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.8rem;
  color: #a89a85;
}

.inquiry button {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #6b5a45;
  border-radius: 3px;
  color: #d4a853;
  padding: 0.6rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.inquiry button:hover,
.inquiry button:focus-visible {
  border-color: #d4a853;
  color: #ffffff;
  outline: none;
}

.inquiry button:disabled {
  opacity: 0.5;
  cursor: default;
}