/* =====================================================================
   Prairie Web Design — overrides on top of the compiled template CSS.

   main.css is a PRE-COMPILED Tailwind v4 build. There is no build step on
   this project, so no new utility classes can be invented — but the theme
   is exposed as CSS custom properties, which means rebranding is just a
   matter of overriding them here.
   ===================================================================== */

:root {
  /* Prairie palette: wheat-gold accent replaces the template's indigo. */
  --color-opai-indigo: #d8a13a;
  --color-opai-purple: #b8791f;
}

/* The template hard-codes the indigo in a few radial gradients and dot
   markers. Those pick the variables up automatically; anything that used a
   literal hex is patched below. */
.bg-opai-indigo {
  background-color: var(--color-opai-indigo) !important;
}

/* ---------------------------------------------------------------- Client logos

   The template's logo wall is built for uniform SVGs. Real client logos arrive
   as mixed PNG/JPG at unpredictable aspect ratios, so constrain them or a tall
   logo blows out the row height. */
.pwd-client-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------- FAQ accordion

   No accordion exists anywhere in this template, so this one is authored from
   scratch — using the same data-active idiom the template's own pricing tabs
   and testimonial bullets use. */
.pwd-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pwd-faq-answer > div {
  overflow: hidden;
}
.pwd-faq-item[data-active='true'] .pwd-faq-answer {
  grid-template-rows: 1fr;
}
.pwd-faq-item[data-active='true'] .pwd-faq-icon {
  transform: rotate(45deg);
}
.pwd-faq-icon {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pwd-faq-answer,
  .pwd-faq-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------- Prose

   The template styles long-form copy through .service-details and
   .blog-details-content. Both already exist in main.css; these only fill the
   gaps for tags the template's demo content never used. */
.service-details ol,
.blog-details-content ol {
  list-style: decimal;
  padding-left: 1.25rem;
}
.service-details a,
.blog-details-content a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   ADMIN — front-end editing chrome. None of this ships to logged-out
   visitors; the markup is only rendered when admin_mode() is true.
   ===================================================================== */

.ltk-adminbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 38px;
  background: #11141d;
  border-bottom: 1px solid rgba(148, 174, 207, 0.25);
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #ced7de;
}
.ltk-adminbar a {
  color: #ced7de;
  text-decoration: none;
  transition: color 0.2s;
}
.ltk-adminbar a:hover {
  color: #fff;
}
.ltk-adminbar-brand {
  color: #94aecf;
  margin-right: auto;
}
.ltk-adminbar-brand strong {
  color: #fff;
  font-weight: 600;
}
.ltk-adminbar-out {
  color: #d8a13a !important;
}

/* Push the site down so the admin bar never covers the fixed header. */
body.ltk-admin-mode {
  padding-top: 38px;
}
body.ltk-admin-mode header.header-scroll {
  top: 38px;
}

/* The invisible marker. Carries the href; never rendered. */
a.ltk-edit {
  display: none !important;
}

/* The one floating pencil. position:fixed at the top of the stacking order so
   the template's backdrop-blur / overflow-hidden / transformed wrappers cannot
   clip it or paint over it. */
.ltk-pencil {
  position: fixed;
  z-index: 2147483647;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #d8a13a;
  color: #11141d;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font: 600 11.5px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  white-space: nowrap;
}
.ltk-pencil.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.ltk-pencil:hover {
  background: #f0b64a;
}
.ltk-pencil svg {
  flex: none;
}

/* Faint outline so an admin can see what is editable at a glance. */
body.ltk-admin-mode .ltk-editable {
  position: relative;
}
body.ltk-admin-mode .ltk-editable:hover {
  outline: 1px dashed rgba(216, 161, 58, 0.5);
  outline-offset: -2px;
}

/* Admin flash messages, used on the login and setup screens. */
.ltk-flash {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.ltk-flash-ok {
  background: rgba(60, 160, 90, 0.12);
  border: 1px solid rgba(60, 160, 90, 0.4);
  color: #86e0a6;
}
.ltk-flash-err {
  background: rgba(200, 60, 60, 0.12);
  border: 1px solid rgba(200, 60, 60, 0.4);
  color: #f0a0a0;
}