/* Help Center — landing hero, category grid, article/search pages. Reuses the site's existing
   .bws-hero.pto-dark-section gradient/pattern background (index.php) for the hero so it matches
   the homepage's visual language instead of inventing a new one, and .pto-legal-document/
   .pto-legal-body (pto-legal-center.css) for article typography. */

/* Uses a real uploaded cover photo (--pto-help-hero-image, set inline by help.php from
   storage/uploads/global/helpcentercover.webp) at its own natural, un-tinted colors — no dark
   overlay/scrim (explicitly asked for: "I want original image color"). Because the photo itself
   is light (a white/lavender background), hero text uses dark navy here instead of the white text
   pto-dark-section's global rules would give it, with a soft light text-shadow for separation
   against the busier parts of the image rather than a color overlay. Deliberately NO
   overflow:hidden on the section itself (index.php's homepage hero has this, but nothing there
   needs to overflow it) — the search-suggestions dropdown below the search box has to be able to
   extend past the hero's bottom edge to be visible at all; overflow:hidden here would silently
   clip it off instead of just layering it wrong. */
.pto-help-hero {
  position: relative;
  /* Explicit (not just position:relative's implicit auto) so the search-suggestions dropdown,
     which overflows below this section's own bottom edge, unambiguously paints above the next
     <section> in the page (the category grid) rather than being painted over by it. */
  z-index: 1;
  padding: clamp(3.25rem, 7vw, 6.4rem) 0 clamp(3rem, 6vw, 5.4rem);
  background-color: #f3f0fb;
  background-image: var(--pto-help-hero-image, none);
  /* `contain`, not `cover` — the whole banner shows, uncropped, at its own aspect ratio (verified
     against the actual uploaded file: storage/uploads/global/helpcentercover.webp, 2171x724, a
     wide ~3:1 banner: mascot on the left, open swirly background with small decorative icons on
     the right). An earlier version of this tried to zoom in and crop, chasing an overlapping
     wordmark that turned out to be the SITE HEADER's own logo bleeding through in testing, not
     part of this image at all — no zoom/crop needed. background-color matches the image's own
     light lavender tone, so if the hero's box is short/wide enough to letterbox top/bottom, the
     seam is invisible. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.pto-help-hero > .bws-container { position: relative; z-index: 1; }
/* No card/panel background — explicitly asked for: the photo is light enough that plain dark text
   reads fine directly on it, and a frosted panel was covering too much of the image. Kept as a
   layout wrapper only (positioning + spacing), with a soft light text-shadow on the heading/
   subtitle below as the only legibility aid, not a visible surface of its own. */
.pto-help-hero-panel {
  margin-left: auto;
  max-width: 620px;
  padding: 12px clamp(4px, 2vw, 16px);
}
.pto-help-hero .pto-home-hero-copy { text-align: left !important; max-width: none !important; margin: 0 !important; }
.pto-help-hero .bws-hero-title { color: var(--pto-navy, #0f1b33); text-shadow: 0 1px 3px rgba(255,255,255,.8), 0 2px 14px rgba(255,255,255,.6); }
.pto-help-hero .bws-hero-subtitle { color: #1a2438; text-shadow: 0 1px 3px rgba(255,255,255,.85), 0 1px 10px rgba(255,255,255,.6); font-weight: 600; }
.pto-help-hero .pto-eyebrow { text-shadow: 0 1px 3px rgba(255,255,255,.8); }
/* Row layout itself now comes from the shared .pto-help-search-box rule below (used by both this
   hero and help-search.php's plain search box) — this just adds hero-specific spacing/shadow (the
   input/button keep their own solid white background regardless, so they stay legible without
   needing the panel). */
.pto-help-hero .pto-home-search { position: relative; margin: 18px 0 0 !important; max-width: none !important; }
.pto-help-hero .pto-home-search .bws-input { box-shadow: 0 4px 18px rgba(15,27,51,.22); border: 1px solid rgba(15,27,51,.12); }
@media (max-width: 900px) {
  .pto-help-hero-panel { margin: 0 auto; max-width: 100%; }
  .pto-help-hero .pto-home-hero-copy { text-align: center !important; }
}
@media (max-width: 640px) {
  .pto-help-hero { background-position: center top; }
  .pto-help-hero-panel { padding: 16px; }
}

/* Base row layout for EVERY .pto-help-search-box on the site (the hero here, and the plain
   version at the top of help-search.php) — input grows, button stays its natural width, side by
   side. .pto-home-search's own row layout only exists in index.php's page-scoped <style>, so
   reusing that class name alone (as both search boxes originally did) got none of its actual
   layout, just generic .bws-input/.bws-btn defaults, which stack instead of sitting in a row. */
.pto-help-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.pto-help-search-box .bws-input { min-height: 52px; }
.pto-help-search-box .bws-btn { min-height: 52px; }
@media (max-width: 480px) {
  .pto-help-search-box { grid-template-columns: 1fr; }
}

/* Suggested-search dropdown — shared markup/behavior with .pto-search-suggest, own class so this
   feature's styling can evolve independently. */
.pto-help-search-suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 27, 51, 0.18);
  overflow: hidden;
  z-index: 20;
  text-align: left;
}
.pto-help-search-suggest-item {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  border-bottom: 1px solid #f0f2f6;
}
.pto-help-search-suggest-item:last-child { border-bottom: 0; }
.pto-help-search-suggest-item strong { display: block; color: var(--pto-navy, #0f1b33); font-size: 0.92rem; }
.pto-help-search-suggest-item span { display: block; color: #667085; font-size: 0.8rem; margin-top: 2px; }
.pto-help-search-suggest-item:hover, .pto-help-search-suggest-item.is-active { background: #f7f9fc; }

.pto-help-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.pto-help-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pto-help-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.1);
  border-color: var(--pto-gold, #e8b43c);
}
.pto-help-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(232,180,60,.16), rgba(15,27,51,.06));
  font-size: 1.5rem;
  color: var(--pto-navy, #0f1b33);
  margin-bottom: 6px;
}
.pto-help-category-icon img { width: 32px; height: 32px; object-fit: contain; }
.pto-help-category-card strong { font-size: 1.08rem; color: var(--pto-navy, #0f1b33); }
.pto-help-category-arrow { margin-top: auto; padding-top: 10px; font-size: 0.85rem; font-weight: 700; color: #8a5d00; display: flex; align-items: center; gap: 6px; }

.pto-help-also-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pto-help-also-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
  font-weight: 600;
  font-size: 0.92rem;
}
.pto-help-also-links a:hover { border-color: var(--pto-gold, #e8b43c); background: #fffaf0; }
.pto-help-also-links i { color: #8a5d00; font-size: 1.1rem; }

.pto-help-breadcrumb { color: #667085; font-size: 0.85rem; margin-bottom: 14px; }
.pto-help-breadcrumb a { color: #075aa8; text-decoration: none; }
.pto-help-breadcrumb a:hover { text-decoration: underline; }

.pto-help-category-head { display: flex; align-items: center; gap: 18px; }
.pto-help-category-head img { width: 64px; height: 64px; object-fit: contain; }
.pto-help-category-head i { font-size: 2.4rem; color: var(--pto-navy, #0f1b33); }
.pto-help-category-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }

.pto-help-subcategory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pto-help-subcategory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
}
.pto-help-subcategory-card:hover { border-color: var(--pto-gold, #e8b43c); }
.pto-help-subcategory-card img { width: 32px; height: 32px; object-fit: contain; }
.pto-help-subcategory-card i:first-child { font-size: 1.35rem; }
.pto-help-subcategory-card span { flex: 1; font-weight: 600; }

.pto-help-article-list { display: flex; flex-direction: column; gap: 8px; }
.pto-help-article-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
}
.pto-help-article-list-item:hover { border-color: var(--pto-gold, #e8b43c); }
.pto-help-article-list-item div { display: flex; flex-direction: column; gap: 2px; }

.pto-help-ask-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(15,27,51,.04), rgba(232,180,60,.08));
  border: 1px solid #e1e6ee;
  border-radius: 12px;
}
.pto-help-feedback { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 0.9rem; color: #475467; }
.pto-help-ask-form-card { margin-top: 24px; background: #fff; border: 1px solid #e1e6ee; border-radius: 14px; padding: clamp(20px, 4vw, 36px); }

@media (max-width: 640px) {
  .pto-help-ask-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .pto-help-category-head { flex-direction: column; text-align: center; }
}

/* Tutorial content components — "where to find this" nav callout, numbered step tutorials, and
   screenshot placeholders. Real screenshots of a live install's own admin/member screens aren't
   something written article content can generate — these placeholders mark exactly where one
   belongs so the site owner can drop a real image in later (replace the whole
   .pto-help-screenshot element with a plain <img>), without the article reading as broken or
   unfinished in the meantime. */
.pto-help-where {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  background: linear-gradient(135deg, rgba(232,180,60,.1), rgba(15,27,51,.04));
  border: 1px solid #e8d9ad;
  border-radius: 10px;
  font-size: 0.95rem;
}
.pto-help-where i { color: #8a5d00; font-size: 1.2rem; margin-top: 1px; }
.pto-help-where strong { color: var(--pto-navy, #0f1b33); }

.pto-legal-body ol.pto-help-steps { counter-reset: pto-step; list-style: none; padding: 0; margin: 0 0 20px; }
.pto-legal-body ol.pto-help-steps > li {
  counter-increment: pto-step;
  position: relative;
  padding: 4px 0 4px 44px;
  margin-bottom: 14px;
  min-height: 30px;
}
.pto-legal-body ol.pto-help-steps > li::before {
  content: counter(pto-step);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pto-navy, #0f1b33);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pto-help-screenshot {
  margin: 14px 0 22px;
  border: 2px dashed #c9d2e0;
  border-radius: 12px;
  background: #f7f9fc;
  padding: clamp(28px, 6vw, 48px) 20px;
  text-align: center;
}
.pto-help-screenshot i { font-size: 1.8rem; color: #98a2b3; display: block; margin-bottom: 8px; }
.pto-help-screenshot span { display: block; color: #667085; font-size: 0.88rem; font-style: italic; max-width: 480px; margin: 0 auto; }
.pto-help-screenshot .pto-help-screenshot-label { display: block; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 0.7rem; color: #98a2b3; margin-bottom: 4px; }