/* ==========================================================================
   Info / Editorial / Policy Pages Stylesheet - FrshlyBaked
   ========================================================================== */
@import url("global.css?v=65");

:root {
  --page-bg: #202020;
  --page-text: #F5F2E4;
  --page-border: rgba(245, 242, 228, 0.15);
  --page-border-subtle: rgba(245, 242, 228, 0.08);
  --page-text-muted: rgba(245, 242, 228, 0.65);
  --page-accent: #F5F2E4;
  --info-section-space: var(--frshly-section-space-tight, clamp(36px, 4.5vw, 72px));
  --info-heading-copy-gap: var(--frshly-heading-copy-gap, 14px);
  --info-text-stack-gap: 14px;
}

/* Page Background & Dark Styling */
body.info-page-body,
.info-page-wrapper {
  background-color: var(--page-bg) !important;
  color: var(--page-text) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main Container Layout */
.info-main-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1700px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 140px 24px 100px;
  box-sizing: border-box;
}

/* Page Titles */
.info-page-header {
  text-align: center;
  margin-bottom: var(--info-section-space);
}

.info-page-title,
.info-page-title-canela {
  font-family: "PP Editorial New", "PPEditorialNew-Regular", "Frshly Display", Georgia, serif !important;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem) !important;
  font-weight: 200 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--page-text);
  margin: 0 0 var(--info-heading-copy-gap);
}

.info-page-meta {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-text-muted);
}

/* ==========================================================================
   1. FAQ Accordion Layout (matching structure-section design)
   ========================================================================== */
.faq-structure-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(245, 242, 228, 0.4);
}

.faq-accordion-item {
  width: 100%;
  border-bottom: 1px solid rgba(245, 242, 228, 0.4);
}

.faq-tab-button {
  cursor: url('https://pixelarticons.com/free/cursors/pointer.png') 4 1, auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 24px 0;
  background: transparent;
  border: none;
  text-align: left;
  user-select: none;
}

.faq-header {
  font-family: "Frshly Display", "PP Editorial New", Georgia, serif !important;
  font-size: clamp(2.2rem, 2.5vw, 2.5rem);
  font-weight: 200 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--page-text);
  margin: 0;
  transition: opacity 0.2s ease;
}

.faq-tab-button:hover .faq-header {
  opacity: 0.85;
}

.faq-pane {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-pane-content {
  padding: 0 0 var(--info-section-space) 0;
  max-width: 800px;
}

.faq-text {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: var(--frshly-paragraph-line-height, 1.45);
  color: rgba(245, 242, 228, 0.75);
  margin: 0;
}

/* ==========================================================================
   2. Editorial Layout (AI & Our Work)
   ========================================================================== */
.editorial-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.editorial-section {
  padding: var(--info-section-space) 0;
  border-bottom: 1px solid var(--page-border-subtle);
}

.editorial-section:last-child {
  border-bottom: none;
}

.editorial-heading {
  font-family: var(--_frshlybaked-tokens---main-heading-can-reg), "Frshly Display", Georgia, serif;
  font-size: clamp(2.4rem, 3vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--page-text);
  margin: 0 0 var(--info-heading-copy-gap);
}

.editorial-subheading {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--page-text);
  margin: 24px 0 8px;
}

.editorial-body {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 0.96rem;
  line-height: var(--frshly-paragraph-line-height, 1.45);
  color: var(--page-text-muted);
}

.editorial-body p {
  margin: 0 0 var(--info-text-stack-gap);
  line-height: var(--frshly-paragraph-line-height, 1.45);
}

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

.editorial-intro-lead {
  font-size: 1.104rem;
  color: #ffffff !important;
  opacity: 0.9;
}

/* ==========================================================================
   3. Document / Policy Layout (Privacy)
   ========================================================================== */
.policy-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.policy-section {
  padding: var(--info-section-space) 0;
  border-bottom: 1px solid var(--page-border-subtle);
}

.policy-section:last-child {
  border-bottom: none;
}

.policy-heading {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--page-text);
  margin: 0 0 var(--info-heading-copy-gap);
}

.policy-subheading {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--page-text);
  margin: 24px 0 8px;
}

.policy-content {
  font-family: "Google Sans Flex", var(--_frshlybaked-tokens---main-body-family), sans-serif;
  font-size: 0.9375rem;
  line-height: var(--frshly-paragraph-line-height, 1.45);
  color: var(--page-text-muted);
}

.policy-content p {
  margin: 0 0 var(--info-text-stack-gap);
  line-height: var(--frshly-paragraph-line-height, 1.45);
}

.policy-content p:last-child {
  margin-bottom: 0;
}

.policy-content ul {
  margin: 0 0 var(--info-text-stack-gap) 20px;
  padding: 0;
  list-style-type: disc;
}

.policy-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.policy-content li:last-child {
  margin-bottom: 0;
}

.policy-link {
  color: var(--page-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.policy-link:hover {
  opacity: 0.7;
}

/* ==========================================================================
   Footer Dark Mode Overrides for Info Pages
   ========================================================================== */
.info-page-body .site-footer {
  background-color: var(--page-bg) !important;
}

.info-page-body .footer-row {
  border-top-color: var(--page-border) !important;
  border-bottom-color: var(--page-border) !important;
}

.info-page-body .footer-cta-heading,
.info-page-body .footer-email-link,
.info-page-body .footer-socials-label,
.info-page-body .footer-legal-label,
.info-page-body .footer-text-link,
.info-page-body .footer-copyright {
  color: var(--page-text) !important;
}

.info-page-body .footer-partner-logo {
  filter: brightness(0) invert(0.95);
  opacity: 0.85;
}

.info-page-body .footer-partner-logo:hover {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media screen and (max-width: 991px) {
  .info-main-content {
    padding: 120px 20px 80px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --info-section-space: var(--frshly-section-space-tight, 48px);
    --info-heading-copy-gap: var(--frshly-heading-copy-gap, 12px);
    --info-text-stack-gap: 12px;
  }

  .info-main-content {
    padding: 100px 20px 60px;
  }
  
  .info-page-header {
    margin-bottom: var(--info-section-space);
  }
  
  .faq-item summary {
    padding: 20px 0;
  }
  
  .editorial-section,
  .policy-section {
    padding: var(--info-section-space) 0;
  }
}