@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===========================
   Base typography & colors
   =========================== */
:root{
  --app-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body{
  background-color: #FFFFFF;
  color: #1A1A1A;
  font-family: var(--app-sans);
  line-height: 1.5;
  margin: 0;
}

a{ color: #00A5E3; text-decoration: none; }
a:hover,
a:focus{ color: #0080B0; text-decoration: underline; }

/* ===========================
   Header
   =========================== */
.custom-header{
  background-color:#0B0B0B;
  padding:10px 20px;
  color:#FFFFFF;
}
.custom-header .header-inner{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto;
}
.custom-header .logo-image{ height:40px; }
.custom-header .nav-links{ display:flex; gap:20px; }
.custom-header .nav-item{ color:#FFFFFF; font-weight:600; font-size:.95rem; }
.custom-header .nav-item:hover,
.custom-header .nav-item:focus{ text-decoration:underline; }

/* ===========================
   Hero
   =========================== */
.custom-hero{
  background:none;
  background-color:#FFFFFF;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:48px 16px;
  text-align:center; color:#1A1A1A;
}
.custom-hero .hero-title{
  font-size:2.4rem;
  font-family:var(--app-sans);
  margin:0 0 20px;
}
.custom-hero .search input[type="search"]{
  width:100%; max-width:700px; padding:16px 24px;
  border:1px solid #ccc; border-radius:40px;
  font-size:1.1rem; color:#000; box-sizing:border-box;
}
.custom-hero .search-icon{ display:none; }
.custom-hero .popular-topics{ margin-top:15px; font-size:.9rem; }
.custom-hero .popular-topics a{ color:#00A5E3; font-weight:500; margin:0 5px; }
.custom-hero .popular-topics a:hover{ color:#0080B0; }




/* ===========================
   Category cards (containers)
   Markup:
   <article class="category-card category-static" data-category-id="...">
     <header class="category-header"><h2 class="category-title">...</h2></header>
     <div class="category-body"></div>
   </article>
   =========================== */
.category-card.category-static{
  background:#fff;
  border:1px solid #E5E7EB;     /* thin gray outline */
  border-radius:12px;
  box-shadow:none;
  padding:0;
  width:100%;
  max-width:700px;
  margin:24px auto 0;
}
.category-card .category-header{
  background:#fff;
  border-bottom:1px solid #E5E7EB;
  border-radius:12px 12px 0 0;
  padding:18px 20px;
  display:flex; align-items:center; gap:10px;
}
.category-card .category-title{
  margin:0;
  font-family:var(--app-sans);
  font-size:1.1rem;             /* smaller per your request */
  font-weight:600;               /* medium emphasis */
  line-height:1.25;
  color:#0B0B0B;
}
.category-card .category-body{ padding:0; }



/* ===========================
   Sections inside each category
   JS outputs:
   <details class="section-accordion">
     <summary>Section name</summary>
     <div class="section-body"> ... <ul class="section-articles">...</ul> ... </div>
   </details>
   =========================== */
.section-accordion{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  margin:0;
  overflow:hidden;
}
.section-accordion + .section-accordion{ border-top:1px solid #E5E7EB; }

/* Section header row */
.section-accordion > summary{
  position:relative;
  display:block;
  cursor:pointer;
  user-select:none;
  list-style:none;
  background:#fff;
  padding:14px 44px 14px 20px;  /* space on right for chevron */
  font-family:var(--app-sans);
  font-size:1rem;               /* smaller than category title */
  font-weight:400;              /* lighter look */
  line-height:1.3;
  color:#0B0B0B;
}
.section-accordion > summary::-webkit-details-marker{ display:none; }

/* Right chevron */
.section-accordion > summary::after{
  content:"›";
  position:absolute; right:16px; top:50%;
  transform:translateY(-50%);
  font-size:1rem; opacity:.7;
  transition:transform 150ms ease, opacity 150ms ease;
  pointer-events:none;
}
.section-accordion:hover > summary::after{
  transform:translateY(-50%) translateX(2px); opacity:.9;
}
.section-accordion[open] > summary::after{
  transform:translateY(-50%) rotate(90deg); opacity:.9;
}

/* ===========================
   Article list rows (mic as bullet on the LEFT)
   =========================== */
.section-body{ background:#fff; padding:8px 20px 16px 20px; }
.section-articles{ list-style:none; margin:0; padding:0; }
.section-articles li{ margin:0; }
.section-articles li + li{ border-top:0px solid #E5E7EB; }

.section-articles a{
  display:flex; align-items:center; gap:10px;     /* mic left, text right */
  padding:10px 0;
  color: #00A5E3;                              /* <-- blue again */
  font-weight:400;
  text-decoration:none;                            /* underline only the text span */
}
.section-articles a:hover{
  color: #0080B0;                        /* <-- hover blue */
}

/* Mic icon inherits the current link color */
.section-articles a .fa-solid.fa-microphone,
.section-articles a .fa-light.fa-microphone{
  font-size:18px;
  min-width:18px; line-height:1; opacity:.95;
}
.section-articles a:hover .fa-solid.fa-microphone,
.section-articles a:hover .fa-light.fa-microphone{
  opacity:1;
}

/* Underline only the article title text (also blue) */
.section-articles a .article-title{
  color: inherit;                                   /* match link color */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-articles a:hover .article-title{
  text-decoration-thickness: 2px;
}

/* ===========================
   Promoted articles
   =========================== */
.promoted-section{ margin-top:40px; }
.promoted-section h3{ font-size:1.4rem; margin-bottom:10px; color:#0B0B0B; }
.promoted-list{ list-style:none; padding-left:0; }
.promoted-list li{ margin-bottom:6px; }
.promoted-list li a{ color:#00A5E3; }
.promoted-list li a:hover{ color:#0080B0; }

/* ===========================
   Generic spacing & responsive
   =========================== */
.section{ margin-bottom:30px; }

@media (min-width:768px){
  .custom-hero{ padding:80px 20px 50px; }
  .category-card .category-title{ font-size:1.1rem; } /* keep consistent on desktop */
  .section-accordion > summary{ font-size:1rem; }
}

/* =======================
   Footer (top area)
   ======================= */
.footer-top{
  background:#0B0B0B;
  color:#FFFFFF;
  padding:32px 16px 20px;
}

.footer-top .content-wrapper{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px 32px;
  align-items:start;
}

/* Link columns */
.footer-top .footer-links{ min-width:220px; }

.footer-top .menu-links .title{
  display:block;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.04em;
  margin:0 0 10px;
  color:#FFFFFF;
}

/* Footer links */
.footer-top .menu-links a{
  display:block;
  margin:6px 0;
  color:#FFFFFF;
  text-decoration:none;
  opacity:.9;
}
.footer-top .menu-links a:hover,
.footer-top .menu-links a:focus{
  color:#0080B0;
  text-decoration:underline;
  opacity:1;
}

/* Download buttons row */
.footer-top .download-buttons{
  max-width:1100px;
  margin:18px auto 0;
  padding-top:14px;
  border-top:0px solid rgba(255,255,255,.12);
}
.footer-top .download-buttons-container{
  display: flex;              /* already set, but safe */
  flex-direction: column;     /* <-- stack */
  align-items: flex-start;    /* left-align; change to center if you prefer */
  gap: 12px;
}
.footer-top .download-buttons img{
  height:40px;
  width:auto;
  display:block;
}

/* =======================
   Legal bar / bottom footer
   ======================= */
footer.footer.container{
  background:#0B0B0B;
  color:#FFFFFF;
  border-top:0px solid rgba(255,255,255,.12);
}
footer.footer.container .container-inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
  text-align:center;
}
footer.footer.container .copyright{
  margin:0;
  font-size:.85rem;
  line-height:1.6;
  opacity:.85;
}

/* Accessibility: clear focus for links in the dark footer */
.footer-top a:focus-visible,
footer.footer.container a:focus-visible{
  outline:2px solid #00A5E3;
  outline-offset:2px;
  border-radius:4px;
}

/* Small screens: stack columns cleanly */
@media (max-width:600px){
  .footer-top .content-wrapper{ gap:20px; }
  .footer-top .menu-links a{ margin:4px 0; }
}


  
/* ===== Article page: centered wrapper + two-column grid (anchored) ===== */
#article-root { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Back link */
#article-root .article-back { margin: 16px 0 34px; }
#article-root .back-link { display: inline-flex; align-items: center; gap: 6px;
  color: #00A5E3; text-decoration: none; font-weight: 500; }
#article-root .back-link:hover { color: #0080B0; text-decoration: underline; }
#article-root .back-arrow { line-height: 1; }

/* Title */
#article-root .article-title {
  margin: 8px 0 20px;
  font-size: 24px;
  font-weight: 800; line-height: 1.1; color: #0B0B0B;
}

/* Two-column layout */
#article-root .article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  #article-root .article-layout { grid-template-columns: 1fr; }
}

/* Body typography */
#article-root .article-main .article-body { font-size: 1rem; line-height: 1.7; color: #111; }
#article-root .article-main .article-body h2,
#article-root .article-main .article-body h3,
#article-root .article-main .article-body h4 { margin: 24px 0 8px; line-height: 1.25; }

/* Sidebar card — square corners + flat top accent */
#article-root .article-aside .related-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-top: 4px solid #d62698;  /* pink highlight */
  border-radius: 0;                   /* ← square top & bottom */
  padding: 12px 12px 8px;
}

/* Title stays the same */
#article-root .related-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
}



/* Right rail list: mic as bullet on the left, blue links */
#article-root .related-list { list-style: none; margin: 0; padding: 0; }
#article-root .related-list li + li { border-top: 1px solid #E5E7EB; }
#article-root .related-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px; color: #00A5E3; text-decoration: none; font-weight: 400;
}
#article-root .related-list a:hover { color: #0080B0; text-decoration: underline; }
#article-root .related-list a .fa-solid.fa-microphone,
#article-root .related-list a .fa-light.fa-microphone {
  font-size: 16px; min-width: 16px; line-height: 1; opacity: .95;
}
#article-root .related-list a:hover .fa-solid.fa-microphone,
#article-root .related-list a:hover .fa-light.fa-microphone { opacity: 1; }

    /* CSS for article voting */
    /* Center the vote block within the ARTICLE column */
#article-root .article-main .article-vote {
  /* sit inside the left column and center */
  max-width: 640px;
  margin: 24px auto 0;     /* <-- centers the whole block */
  padding: 0;              /* your call: keep or remove padding */
  border: none;
  background: #fff;
  border-radius: 4px;

  /* center its contents (question line, etc.) */
  text-align: center;
}

/* Question line */
#article-root .article-vote-question {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111;
}

/* Controls row: center the buttons horizontally */
#article-root .article-vote-controls {
  display: flex;
  justify-content: center; /* <-- the key */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons (or anchors) styled like links in your theme blue */
#article-root .article-vote-controls button,
#article-root .article-vote-controls a {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: #00A5E3;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#article-root .article-vote-controls button:hover,
#article-root .article-vote-controls a:hover {
  color: #0080B0;
  text-decoration-thickness: 2px;
}

/* Selected state */
#article-root .article-vote-controls .article-voted {
  color: #0080B0;  
  opacity: 0.85;
  cursor: default;
}

/* Label / hint text */
#article-root .article-vote-label {
  margin-left: 8px;
  font-size: 0.9em;
  color: #555;
}

/* Accessible focus ring (keep!): */
#article-root .article-vote-controls button:focus-visible,
#article-root .article-vote-controls a:focus-visible {
  outline: 2px solid #00A5E3;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Space BELOW the voting block (covers both class names you've used) */
#article-root .article-vote,
#article-root .article-feedback {
  margin-bottom: 32px; 
}

/* Extra breathing room ABOVE the footer (applies to the whole article page) */
#article-root {
  padding-bottom: 48px;           /* mobile/ default */
}
@media (min-width: 900px) {
  #article-root { padding-bottom: 64px; }  /* a bit more on desktop */
}
/* Add more space BETWEEN the article body and the voting widget */
#article-root .article-main .article-vote,
#article-root .article-main .article-feedback {
  margin-top: 40px;              /* was ~24px; bump as needed */
}

/* Guard against margin-collapsing from the last paragraph in the article */
#article-root .article-main .article-body {
  padding-bottom: 12px;          /* ensures visible gap above voting */
}
#article-root .article-main .article-body > :last-child {
  margin-bottom: 0;              /* don't double-stack margins */
}

/* Global microphone color everywhere in the Help Center */
:root { --mic-color: #d62698; }

/* Covers both Free (solid) and Pro (light) */
.fa-microphone { 
  color: var(--mic-color) !important;   /* force icon to pink, not link blue */
}

/* Keep the same pink on hover/visited/focus */
a:hover .fa-microphone,
a:visited .fa-microphone,
a:focus .fa-microphone,
.fa-microphone:hover,
.fa-microphone:focus {
  color: var(--mic-color) !important;
}

/* (Optional) keep your existing opacity hover effect without changing color */
.section-articles a .fa-microphone,
#article-root .related-list a .fa-microphone {
  opacity: .95;
}
.section-articles a:hover .fa-microphone,
#article-root .related-list a:hover .fa-microphone {
  opacity: 1;
}

/* === Square search bar with gradient outline (blue -> pink) === */
:root{
  --search-blue: #00A5E3;  /* your theme’s link blue */
  --search-pink: #d62698;      /* your mic pink */
}

/* Target the Guide search inputs (home + any full search bar) */
.custom-hero .search input[type="search"],
.search.search-full input[type="search"],
.article-subnav .search input[type="search"]{
  -webkit-appearance: none;
  appearance: none;

  /* square-ish shape */
  border-radius: 8px;                 /* was 40px before */
  border: 2px solid transparent;      /* border is drawn by the gradient below */
  padding: 14px 16px;
  box-shadow: none;
  outline: none;

  /* gradient border: white (inside) + gradient (outside) */
  background-image:
    linear-gradient(#fff, #fff),                                      /* fill */
    linear-gradient(90deg, var(--search-blue), var(--search-pink));   /* border */
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

/* Stronger outline on hover/focus */
.custom-hero .search input[type="search"]:hover,
.custom-hero .search input[type="search"]:focus,
.search.search-full input[type="search"]:hover,
.search.search-full input[type="search"]:focus,
.article-subnav .search input[type="search"] :hover,
.article-subnav .search input[type="search"] :focus{
  border-width: 3px;  /* subtle emphasis */
}

/* Optional: square the icon container if your theme draws one */
.custom-hero .search .search-icon,
.article-subnav .search .search-icon{
  border-radius: 8px;
}

/* Add space below the last category card before the footer */
#categories-placeholder { padding-bottom: 64px; }  /* page-level cushion */

.category-card.category-static:last-of-type { 
  margin-bottom: 64px;                            /* extra gap after last card */
}

/* If you want the gap after the last *section* inside a category too */
.category-card .section-accordion:last-of-type { margin-bottom: 24px; }

/* Simple cap + wrap for the article title */
#article-root .article-header { 
  max-width: min(700px, 100%);   /* ≈ width of your left column; tweak 640–720px */
  margin: 0 0 16px;
}

#article-root .article-title {
  max-width: 100%;
  white-space: normal;           /* ensure wrapping */
  overflow-wrap: anywhere;       /* break long words/URLs if needed */
  word-break: break-word;        /* fallback */
  hyphens: auto;                 /* prettier hyphenation where supported */
}

/* On mobile the grid stacks, so let it go full width */
@media (max-width: 900px){
  #article-root .article-header { max-width: none; }
}

/* Hide items 4+ in the sidebar list */
#article-root .related-list li:nth-child(n+4) { display: none; }


/* Make the card clip its children to the rounded corners */
.category-card.category-static {
  overflow: hidden;                 /* ensures inner backgrounds respect the radius */
}

/* Last section when CLOSED: round the summary’s bottom corners */
.category-card .section-accordion:last-of-type > summary {
  padding-bottom: 14px;              /* tighter spacing */
  border-bottom-left-radius: 12px;  /* match your card radius */
  border-bottom-right-radius: 12px;
}

/* Last section when OPEN: put the rounding on the body instead */
.category-card .section-accordion:last-of-type[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.category-card .section-accordion:last-of-type[open] > .section-body {
  padding-bottom: 14px;              /* keep it tight */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Safety: no extra separator under the last section */
.category-card .section-accordion:last-of-type { margin-bottom: 0; }

:root { --hero-search-max: 700px; }   /* set once; change here later */

/* Search input (uses the same max width) */
.custom-hero .search input[type="search"]{
  width: 100%;
  max-width: var(--hero-search-max);
}

/* Popular topics: same width + centered under the bar */
.custom-hero .popular-topics{
  width: 100%;
  max-width: var(--hero-search-max);
  margin: 8px auto 0;          /* centers it */
  padding: 0 16px;             /* optional: lines up with input’s inner padding */
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;     /* wrap long words/links */
}

/* Extra gap between the search bar and "Popular topics" */
.custom-hero .popular-topics{
  margin: 14px auto 0 !important;   /* tweak 10–20px to taste */
}

/* ===== Search results page (layout + styles) ===== */
:root { --sr-max: var(--hero-search-max, 700px); } /* keep in sync with home search */

/* Page wrapper + hero */
#search-root { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; }
#search-root .sr-hero { text-align: center; margin: 24px 0 12px; }
#search-root .sr-heading { margin: 0 0 8px; font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 800; }

/* Search input (same gradient outline, square corners) */
#search-root .search input[type="search"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: var(--sr-max); margin: 0 auto; display: block;
  border-radius: 8px; border: 2px solid transparent; padding: 14px 16px;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(90deg, var(--search-blue, #00A5E3), var(--search-pink, #d62698));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  box-shadow: none; outline: none;
}
#search-root .search input[type="search"]:hover,
#search-root .search input[type="search"]:focus{ border-width: 3px; }

/* Hide any submit button some themes output */
#search-root .search button[type="submit"],
#search-root .search input[type="submit"],
#search-root .search .search-submit{ display: none !important; }

/* Results column aligns with input's left edge */
#search-root .sr-wrap { max-width: var(--sr-max); margin: 12px auto 0; }
#search-root .sr-query { margin: 0 0 16px; color: #6B7280; }

/* Results list */
#search-root .sr-list { list-style: none; margin: 0; padding: 0; }
#search-root .sr-item { padding: 14px 0; border-top: 1px solid #E5E7EB; }
#search-root .sr-item:first-child { border-top: 0; }

#search-root .sr-link{
  display: flex; align-items: center; gap: 10px;
  color: #00A5E3; text-decoration: none; font-weight: 600;
}
#search-root .sr-link:hover{ color: #0080B0; text-decoration: underline; }
#search-root .sr-link .fa-microphone{ color: var(--mic-color, #d62698); font-size: 16px; min-width: 16px; }

/* Pagination: horizontal, centered, no bullets */
#search-root nav.pagination{ margin-top: 20px; display: flex; justify-content: center; }
#search-root nav.pagination ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px; align-items: center;
}
#search-root nav.pagination li{ list-style: none; }
#search-root nav.pagination a, #search-root nav.pagination span{
  display: inline-flex; align-items: center; padding: 6px 8px;
  text-decoration: none; color: #00A5E3; border-radius: 6px;
}
#search-root nav.pagination a:hover{ color: #0080B0; text-decoration: underline; }
#search-root nav.pagination .disabled, 
#search-root nav.pagination span[aria-disabled="true"]{ opacity: .5; cursor: def