/*
 * Plain Intelligence - Custom Header & Footer Styles
 * Add this CSS to: WordPress Customizer > Additional CSS
 *
 * This CSS styles the theme's default header/footer with:
 * - Orange branding (#a34e00)
 * - Professional layout
 * - Clean spacing (no excessive padding/margins)
 */

/* ============================================
   HEADER STYLING
   ============================================ */

/* Main header container - clean styling */
body > header,
header.wp-block-template-part,
.site-header {
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  background: #ffffff;
}

/* Header branding/logo */
header .site-title,
header h1 a,
header .custom-logo-link {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
}

/* Header navigation */
header nav,
header .wp-block-navigation {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

header nav a,
header .wp-block-navigation a {
  color: #1b1b1b;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

header nav a:hover,
header .wp-block-navigation a:hover {
  color: #a34e00;
}

/* Contact button - Orange branding */
header a[href*="/contact"],
header .wp-block-button__link.is-style-outline,
header .menu-item a[href*="contact"] {
  background-color: #a34e00 !important;
  color: white !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

header a[href*="/contact"]:hover,
header .wp-block-button__link.is-style-outline:hover {
  background-color: #8a3e00 !important;
}

/* ============================================
   FOOTER STYLING
   ============================================ */

/* Main footer container - clean styling */
body > footer,
footer.wp-block-template-part,
.site-footer {
  border-top: 1px solid #e5e7eb;
  padding: 2rem 1.5rem;
  background: #ffffff;
}

/* Footer grid layout */
footer .wp-block-columns,
footer .footer-widget-area,
footer .footer-widgets,
.site-footer .widget-area {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Footer section headings - Green accent */
footer h3,
footer h4,
footer .wp-block-heading,
.site-footer .widget h3 {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  color: #54674a;
}

/* Footer text */
footer p,
footer .wp-block-paragraph,
.site-footer .widget-content {
  font-size: 13px;
  margin: 0 0 0.75rem 0;
  color: #666;
  line-height: 1.5;
}

/* Footer links */
footer a,
footer .wp-block-navigation a,
.site-footer a {
  color: #54674a;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

footer a:hover,
footer .wp-block-navigation a:hover {
  color: #a34e00;
  text-decoration: underline;
}

/* Footer list styling */
footer ul,
footer .wp-block-list,
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li,
footer .wp-block-list li,
.site-footer li {
  margin-bottom: 0.75rem;
}

/* Footer "Stay Updated" / Email signup section */
footer input[type="email"],
footer .wp-block-search input,
.site-footer input[type="email"] {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
}

/* Subscribe button - Orange branding */
footer button,
footer input[type="submit"],
footer .wp-block-search button,
.site-footer button {
  background: #a34e00;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

footer button:hover,
footer input[type="submit"]:hover,
.site-footer button:hover {
  background-color: #8a3e00;
}

/* Footer email signup container */
footer .widget:first-child,
footer .wp-block-columns > div:first-child,
.site-footer .widget-1 {
  display: flex;
  flex-direction: column;
}

footer .widget:first-child input,
footer .wp-block-columns > div:first-child input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Footer bottom section - Copyright */
footer > div:last-child,
footer .footer-bottom,
.site-footer .footer-credit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #767676;
  flex-wrap: wrap;
  gap: 1rem;
}

footer > div:last-child a,
footer .footer-bottom a,
.site-footer .footer-credit a {
  color: #767676;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer > div:last-child a:hover,
footer .footer-bottom a:hover {
  color: #a34e00;
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet/smaller screens */
@media (max-width: 768px) {
  header nav {
    gap: 1rem;
    font-size: 12px;
  }

  footer .wp-block-columns,
  footer .footer-widget-area,
  .site-footer .widget-area {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Mobile screens */
@media (max-width: 480px) {
  body > header,
  header.wp-block-template-part,
  .site-header {
    padding: 1rem;
  }

  header nav {
    gap: 0.5rem;
    font-size: 12px;
  }

  body > footer,
  footer.wp-block-template-part,
  .site-footer {
    padding: 1.5rem 1rem;
  }

  footer .wp-block-columns,
  footer .footer-widget-area,
  .site-footer .widget-area {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  footer > div:last-child,
  footer .footer-bottom,
  .site-footer .footer-credit {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   PLUGIN REMOVAL - Hide duplicate headers/footers if needed
   ============================================ */

/* In case plugin elements still exist, hide them */
[data-pi-hf="1"] {
  display: none !important;
}


/* ============================================
   FAQ ACCORDION (shared by homepage, services pages, glossary)
   Fixed selector mismatch: .faq-item IS the <details> element,
   not an ancestor of a separate details[open] element.
   ============================================ */
.faq-accordion { margin: 2rem 0; }
.faq-item { list-style: none; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 4px; }
.faq-toggle { cursor: pointer; font-weight: 500; user-select: none; padding: 1rem; display: block; width: 100%; text-align: left; background: #f9fafb; border: none; }
.faq-toggle:hover { background: #f3f4f6; }
.faq-item[open] .faq-toggle { background: #f3f4f6; font-weight: 600; }
.faq-content { padding: 1rem; border-top: 1px solid #e5e7eb; display: none; }
.faq-item[open] .faq-content { display: block; }