/*
  DocJuicr marketing site - supplementary stylesheet (WB-180).

  website/css/tailwind.css is the SAME compiled utility CSS the original
  WordPress theme shipped (copied verbatim, only renamed) - every class used
  on the nav, hero, feature grid and FAQ accordion below comes from that
  file, unchanged, so those sections render identically to the original.

  This file adds the small number of components that did not exist on the
  original single-page site (pricing cards, the demo-video placeholder, the
  legal-page and 404 layouts) using the SAME tokens: dj-blue-mid #067bc2,
  dj-blue-light #84bcda, dj-pink #d56062, dj-orange #f37748, navy body text
  #112337, Inter body / Ultra heading fonts, white and #f5f5f5 backgrounds,
  flat borders with no shadows (the original theme never uses box-shadow).
*/

:root {
  --dj-blue-mid: #067bc2;
  --dj-blue-light: #84bcda;
  --dj-pink: #d56062;
  --dj-orange: #f37748;
  --ink: #112337;
}

body {
  color: var(--ink);
}

/* Kept from the WP block-library styles the skip-link relied on - the rest
   of that stylesheet (~3KB of unused block-editor utility classes) is gone. */
.screen-reader-text {
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.skip-link:focus {
  background-color: #ddd;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  position: absolute;
}

/* ---------- Mobile nav (the original page has no nav links to collapse;
   this is only the toggle needed now the nav carries Features/Pricing/FAQ) ---------- */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  color: var(--dj-blue-mid);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.site-nav-links a:hover {
  color: var(--dj-blue-mid);
}

@media (max-width: 767px) {
  .site-nav-links {
    position: fixed;
    inset: 64px 1rem auto 1rem;
    background: #fff;
    border: 1px solid var(--dj-pink);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    display: none;
    flex-direction: column;
  }

  .nav-toggle:checked ~ .site-nav-links {
    display: flex;
  }

  .site-nav-links a {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3d9d9;
  }

  .site-nav-links a:last-child {
    border-bottom: none;
  }

  .nav-toggle-label {
    display: inline-flex;
  }
}

/* ---------- Pricing ---------- */
.price-card {
  background: #fff;
  border: 1px solid var(--dj-pink);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.price-card--featured {
  border-width: 2px;
  border-color: var(--dj-blue-mid);
}

.price-card__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--dj-orange);
  color: #fff;
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

/* Matches the in-app plan card: a centred title (Typography h4, 1.25rem) -
   see web/src/navigation/pages/account-subscription-page/components/
   SubscriptionCard.tsx line 108. */
.price-card h3 {
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 1.25rem;
  text-align: center;
  color: var(--dj-pink);
  margin: 0 0 0.35rem;
}

/* The app's price is a Typography variant="h2" (SubscriptionCard.tsx line
   123) - the site's h2s all render in the Ultra display face via
   font-heading (see site.css header comment), so the price picks up the
   same font here for parity. */
.price-card .price {
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  color: var(--dj-blue-mid);
  margin: 0 0 0.15rem;
}

.price-card .price span {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

/* The app renders "(Including GST)" as its own caption line beneath the
   price, not appended after "/mo" (SubscriptionCard.tsx ~line 143,
   Typography variant="body2"). Kept on one line at every width - it must
   never wrap mid-phrase. */
.price-card .price-gst {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  white-space: nowrap;
  margin: 0 0 1.1rem;
}

.price-card .price-blurb {
  color: #4b5563;
  font-size: 0.92rem;
  text-align: center;
  margin-bottom: 1.1rem;
}

.price-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}

/* Each row carries a tick or a cross, same as the app's FeatureItem
   (SubscriptionCard.tsx line 214) - colours rgb(153, 203, 70) /
   rgb(203, 70, 70) match the app's MUI CheckIcon / ClearIcon exactly. */
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  padding: 0.4rem 0;
  border-top: 1px solid #f3ebeb;
  color: #374151;
  text-align: left;
}

.price-card li:first-child {
  border-top: none;
}

.price-card .feature-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
}

.price-card .feature-icon--yes {
  color: rgb(153, 203, 70);
}

.price-card .feature-icon--no {
  color: rgb(203, 70, 70);
}

/* The compiled tailwind.css only carries the utility classes the original
   theme actually used, and 4-column grids never appeared on the old single
   page - so lg:grid-cols-4 doesn't exist in it. This rule gives the pricing
   grid a 4th column at the same 1024px breakpoint Tailwind's lg: uses. */
@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Key features grid ---------- */
/* The Key features grid has 19 items in a 3-column layout (lg:grid-cols-3),
   so the closer ("A growing set of tools...") is alone on the final row and
   lands in the left column by default. 19 is 3n+1, so centre it under the
   middle column instead. Only matches when the grid actually has a lone
   trailing item in this column count - harmless on the unrelated 3-item
   "Choose your process" grid above, whose last item sits at position 3
   (3n, not 3n+1) and is already in the right column. On the 1-column
   mobile layout the container isn't CSS grid (space-y-8 stacks instead),
   so this has no effect there - it simply stacks like every other item. */
.text-center:last-child:nth-child(3n+1) {
  grid-column: 2;
}

.pricing-note {
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
  margin-top: 2rem;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.55em 1.2em;
  border-radius: 0.5rem;
  border: 2px solid var(--dj-blue-mid);
  color: var(--dj-blue-mid);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
  background: var(--dj-blue-mid);
  color: #fff;
}

/* ---------- Demo video ---------- */
.video-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--dj-blue-mid) 0%, #045686 100%);
  display: grid;
  place-items: center;
}

.video-frame__inner {
  text-align: center;
  color: #fff;
  padding: 1.5rem;
}

.video-frame__play {
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
}

.video-frame__inner p {
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 1.1rem;
  margin: 0;
}

/* ---------- FAQ, reimplemented with <details> in the accordion's own visual language ---------- */
.faq-item {
  border: 1px solid var(--dj-pink);
  border-top: none;
}

.faq-item:first-child {
  border-top: 1px solid var(--dj-pink);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

.faq-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem;
  font-weight: 500;
  background: rgba(243, 119, 72, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: rgba(243, 119, 72, 0.2);
}

.faq-item summary .chevron {
  flex: none;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.faq-item[open] summary .chevron {
  transform: rotate(0deg);
}

.faq-item .faq-body {
  padding: 1.25rem;
  color: #1f2937;
}

.faq-item .faq-body p:first-child {
  margin-top: 0;
}

.faq-item .faq-body p:last-child {
  margin-bottom: 0;
}

/* ---------- Legal pages (terms / privacy) ---------- */
.legal-page {
  padding: 3rem 0 4.5rem;
}

.legal-title {
  text-align: center;
}

.legal-updated {
  text-align: center;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.legal-body {
  max-width: 760px;
  margin: 2.5rem auto 0;
}

.legal-body h2 {
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  color: var(--dj-blue-mid);
  font-size: 1.2rem;
  margin-top: 2.2rem;
}

.legal-body h2:first-of-type {
  margin-top: 0;
}

.legal-body p {
  color: #374151;
  line-height: 1.6;
}

.legal-body .clause {
  margin-left: 1.6em;
}

.legal-body .clause-2 {
  margin-left: 3.2em;
}

.legal-body .callout {
  border: 1px solid var(--dj-pink);
  background: #fdf1f1;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: var(--ink);
}

/* ---------- 404 ---------- */
.error-page {
  padding: 5rem 0;
  text-align: center;
}

.gtm-hidden-frame {
  display: none;
  visibility: hidden;
}

.error-page img {
  margin: 0 auto 1.5rem;
}

.error-page .error-code {
  font-family: 'Ultra', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  color: var(--dj-blue-light);
  line-height: 1;
  margin: 0;
}

.error-page h1 {
  margin-top: 0.5rem;
}

.error-page p {
  color: #4b5563;
  max-width: 42ch;
  margin: 0 auto 2rem;
}