/* ============================================================
   PureForm Naturals — style-posts.css
   Blog post, archive, About page, and WPForms styles.
   ============================================================ */

/* ---- Post meta bar ---- */
.pf-post-meta-bar {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
  padding:     20px 0 8px;
}
.pf-post-date,
.pf-post-readtime {
  font-family:    var(--pf-mono);
  font-size:      0.6875rem;
  color:          var(--pf-haze);
  letter-spacing: 0.04em;
}

/* ---- Archive header ---- */
.pf-archive-header {
  background:    var(--pf-navy);
  padding:       56px 0;
}
.pf-archive-header-inner {
  max-width: 1160px;
  margin:    0 auto;
  padding:   0 40px;
}
.pf-archive-header .pf-eyebrow { color: var(--pf-gold); margin-bottom: 10px; }
.pf-archive-title {
  font-family:   var(--pf-display);
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   300;
  color:         var(--pf-white);
  line-height:   1.12;
  margin-bottom: 12px;
}
.pf-archive-desc {
  font-size:   1rem;
  color:       var(--pf-haze);
  font-weight: 300;
  max-width:   520px;
  line-height: 1.7;
  margin:      0;
}

/* ---- Single post ---- */
.single .entry-content {
  max-width:   720px;
  font-size:   1rem;
  line-height: 1.8;
  font-weight: 300;
  color:       var(--pf-slate);
}
.single .entry-content h2 {
  font-family: var(--pf-display);
  font-size:   clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 400;
  color:       var(--pf-navy);
  margin:      2rem 0 0.75rem;
  line-height: 1.2;
}
.single .entry-content h3 {
  font-family: var(--pf-display);
  font-size:   clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 400;
  color:       var(--pf-navy);
  margin:      1.5rem 0 0.5rem;
}
.single .entry-content p  { margin-bottom: 1.25rem; color: var(--pf-slate); }
.single .entry-content a  { color: var(--pf-ocean); text-decoration: underline; text-underline-offset: 3px; }
.single .entry-content blockquote {
  border-left:  3px solid var(--pf-gold);
  padding-left: 20px;
  margin:       1.5rem 0;
  font-family:  var(--pf-display);
  font-size:    1.1rem;
  font-style:   italic;
  color:        var(--pf-navy);
  line-height:  1.7;
}

/* ---- Inline disclosure ---- */
.pf-post-disclosure {
  background:    var(--pf-foam);
  border:        1px solid var(--pf-mist);
  border-left:   3px solid var(--pf-ocean);
  border-radius: 0 var(--pf-r-card) var(--pf-r-card) 0;
  padding:       12px 16px;
  margin:        0 0 28px;
  font-size:     0.8125rem;
  color:         var(--pf-slate);
  line-height:   1.6;
}
.pf-post-disclosure strong { color: var(--pf-ink); font-weight: 600; }

/* ---- Related posts ---- */
.pf-related-posts {
  background:  var(--pf-foam);
  border-top:  1px solid var(--pf-mist);
  padding:     56px 0;
  margin-top:  56px;
}
.pf-related-inner {
  max-width: 1160px;
  margin:    0 auto;
  padding:   0 40px;
}
.pf-related-heading {
  font-family:   var(--pf-display);
  font-size:     clamp(1.4rem, 2.5vw, 2rem);
  font-weight:   300;
  color:         var(--pf-ink);
  margin-bottom: 28px;
}
.pf-related-grid {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   20px;
}
.pf-related-card {
  background:     var(--pf-white);
  border:         1px solid var(--pf-foam);
  border-radius:  var(--pf-r-card);
  padding:        24px 20px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  text-decoration:none;
  color:          inherit;
  transition:     box-shadow .2s ease;
}
.pf-related-card:hover { box-shadow: var(--pf-shadow-hover); }
.pf-related-card h3 {
  font-family: var(--pf-display);
  font-size:   1.05rem;
  font-weight: 400;
  color:       var(--pf-ink);
  line-height: 1.3;
  margin:      0;
}

/* ---- Blog list on /blog/ ---- */
.ast-article-post { border: 1px solid var(--pf-foam); border-radius: var(--pf-r-card); overflow: hidden; margin-bottom: 24px; transition: box-shadow .2s ease; background: var(--pf-white); }
.ast-article-post:hover { box-shadow: var(--pf-shadow-hover); }
.ast-article-post .entry-title a { font-family: var(--pf-display); font-weight: 300; color: var(--pf-ink); text-decoration: none; }
.ast-article-post .entry-title a:hover { color: var(--pf-ocean); }
.ast-article-post .entry-meta { font-family: var(--pf-mono); font-size: 0.6875rem; color: var(--pf-haze); letter-spacing: 0.04em; }
.ast-article-post .cat-links a { background: var(--pf-foam); color: var(--pf-ocean); font-family: var(--pf-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--pf-r-badge); text-decoration: none; }

/* ================================================================
   ABOUT PAGE: Our Journey (Story Timeline)
   Classes used by the HTML widget: story-section, story-inner,
   story-header, timeline, tl-item, tl-dot, tl-step, tl-title, tl-body
   ================================================================ */

.story-section {
  background:  var(--pf-foam);
  padding:     72px 40px;
  width:       100%;
}
.story-inner {
  max-width: 900px;
  margin:    0 auto;
}
.story-header {
  text-align:    center;
  margin-bottom: 56px;
}
.story-header .eyebrow,
.story-header p.eyebrow {
  display:        block;
  font-family:    var(--pf-mono) !important;
  font-size:      0.6875rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color:          var(--pf-gold) !important;
  margin-bottom:  10px !important;
  font-style:     normal !important;
}
.story-header .sec-title,
.story-header h2.sec-title {
  font-family:  var(--pf-display) !important;
  font-size:    clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight:  300 !important;
  color:        var(--pf-ink) !important;
  line-height:  1.12 !important;
  margin:       0 !important;
}
.story-header .sec-title em { color: var(--pf-ocean); font-style: italic; }

/* Timeline vertical line */
.timeline {
  position:    relative;
  padding-left: 40px;
}
.timeline::before {
  content:    '';
  position:   absolute;
  left:       11px;
  top:        8px;
  bottom:     8px;
  width:      1.5px;
  background: linear-gradient(to bottom, var(--pf-gold), var(--pf-mist));
}

.tl-item {
  position:      relative;
  margin-bottom: 44px;
  padding-left:  24px;
}
.tl-item:last-child { margin-bottom: 0; }

/* Timeline dot */
.tl-dot {
  position:     absolute;
  left:         -29px;
  top:          6px;
  width:        14px;
  height:       14px;
  border-radius:50%;
  background:   var(--pf-white);
  border:       2px solid var(--pf-gold);
  box-shadow:   0 0 0 3px rgba(196,169,122,.15);
  transition:   transform .2s ease;
}
.tl-item:hover .tl-dot {
  transform:  scale(1.25);
  background: var(--pf-gold);
}

.tl-step {
  font-family:    var(--pf-mono) !important;
  font-size:      0.6875rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color:          var(--pf-gold) !important;
  margin-bottom:  4px !important;
  font-style:     normal !important;
}
.tl-title {
  font-family:   var(--pf-display) !important;
  font-size:     1.25rem !important;
  font-weight:   400 !important;
  color:         var(--pf-navy) !important;
  line-height:   1.25 !important;
  margin-bottom: 8px !important;
}
.tl-body {
  font-family:  var(--pf-body) !important;
  font-size:    0.9rem !important;
  font-weight:  300 !important;
  color:        var(--pf-slate) !important;
  line-height:  1.75 !important;
  margin:       0 !important;
  max-width:    600px;
}

/* ================================================================
   ABOUT PAGE: Core Values
   Classes: values-section, values-inner, values-header,
   values-grid, val-card, val-icon, val-name, val-desc
   ================================================================ */

.values-section {
  background: var(--pf-white);
  padding:    72px 40px;
  width:      100%;
}
.values-inner {
  max-width: 1100px;
  margin:    0 auto;
}
.values-header {
  text-align:    center;
  margin-bottom: 52px;
}
.values-header .eyebrow,
.values-header p.eyebrow {
  display:        block;
  font-family:    var(--pf-mono) !important;
  font-size:      0.6875rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color:          var(--pf-gold) !important;
  margin-bottom:  10px !important;
  font-style:     normal !important;
}
.values-header .sec-title,
.values-header h2.sec-title {
  font-family: var(--pf-display) !important;
  font-size:   clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 300 !important;
  color:       var(--pf-ink) !important;
  line-height: 1.12 !important;
  margin:      0 !important;
}
.values-header .sec-title em { color: var(--pf-ocean); font-style: italic; }

/* Grid: 3 columns desktop, 2 tablet, 1 mobile */
.values-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}

.val-card {
  background:     var(--pf-white);
  border:         1px solid var(--pf-foam);
  border-radius:  var(--pf-r-card);
  padding:        28px 24px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  transition:     box-shadow .22s ease, border-color .22s ease, transform .22s ease;
  position:       relative;
  overflow:       hidden;
}
.val-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--pf-ocean), var(--pf-gold));
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.val-card:hover {
  box-shadow:   var(--pf-shadow-hover);
  border-color: var(--pf-mist);
  transform:    translateY(-3px);
}
.val-card:hover::before { transform: scaleX(1); }

.val-icon {
  width:  44px;
  height: 44px;
  flex-shrink: 0;
}
.val-icon svg { width: 100%; height: 100%; }

.val-name {
  font-family:   var(--pf-body) !important;
  font-size:     1rem !important;
  font-weight:   600 !important;
  color:         var(--pf-navy) !important;
  line-height:   1.3 !important;
  margin:        0 !important;
}
.val-desc {
  font-family: var(--pf-body) !important;
  font-size:   0.875rem !important;
  font-weight: 300 !important;
  color:       var(--pf-slate) !important;
  line-height: 1.7 !important;
  margin:      0 !important;
}

/* ================================================================
   ABOUT PAGE: Other sections (By The Numbers, Belief, CTA)
   ================================================================ */

/* By The Numbers */
.numbers-section {
  background: var(--pf-navy);
  padding:    72px 40px;
  width:      100%;
}
.numbers-inner {
  max-width:     1100px;
  margin:        0 auto;
  text-align:    center;
}
.numbers-grid {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   24px;
  margin-top:            40px;
}
.num-card {
  padding:       24px 16px;
  border:        1px solid rgba(255,255,255,.08);
  border-radius: var(--pf-r-card);
}
.num-value {
  font-family:  var(--pf-display);
  font-size:    clamp(2rem, 4vw, 3rem);
  font-weight:  300;
  color:        var(--pf-gold);
  display:      block;
  line-height:  1;
  margin-bottom:6px;
}
.num-label {
  font-family:    var(--pf-mono);
  font-size:      0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(253,252,250,.45);
}

/* Belief / quote block */
.belief-section {
  background: var(--pf-sand);
  padding:    72px 40px;
  width:      100%;
}
.belief-inner {
  max-width:  720px;
  margin:     0 auto;
  text-align: center;
}
.belief-quote {
  font-family:   var(--pf-display);
  font-size:     clamp(1.4rem, 2.5vw, 2rem);
  font-weight:   300;
  font-style:    italic;
  color:         var(--pf-navy);
  line-height:   1.5;
  margin-bottom: 20px;
  position:      relative;
}
.belief-quote::before {
  content:       open-quote;
  font-size:     3rem;
  color:         var(--pf-gold);
  line-height:   0;
  vertical-align:-0.4em;
  margin-right:  4px;
  font-family:   var(--pf-display);
}

/* About CTA section */
.about-cta-section {
  background: var(--pf-foam);
  padding:    64px 40px;
  text-align: center;
  width:      100%;
}
.about-cta-section h2 {
  font-family:   var(--pf-display);
  font-size:     clamp(1.6rem, 3vw, 2.4rem);
  font-weight:   300;
  color:         var(--pf-ink);
  margin-bottom: 10px;
}
.about-cta-section p {
  font-size:     0.9375rem;
  color:         var(--pf-slate);
  margin-bottom: 28px;
  font-weight:   300;
}
.about-cta-btns {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* ================================================================
   HOMEPAGE: Email Section & WPForms
   ================================================================ */

/* Email section layout */
.pf-email-section {
  background: var(--pf-foam);
  padding:    72px 40px;
}
.pf-email-inner {
  max-width: 1100px;
  margin:    0 auto;
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       56px;
  align-items: center;
}
.pf-email-left .pf-eyebrow { margin-bottom: 8px; }
.pf-email-left h2 {
  font-family:   var(--pf-display);
  font-size:     clamp(1.8rem, 3vw, 2.6rem);
  font-weight:   300;
  color:         var(--pf-ink);
  line-height:   1.12;
  margin-bottom: 12px;
}
.pf-email-left h2 em { color: var(--pf-ocean); font-style: italic; }
.pf-email-left p {
  font-size:     0.9375rem;
  color:         var(--pf-slate);
  font-weight:   300;
  line-height:   1.75;
  margin-bottom: 20px;
}
.pf-bullet-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.pf-bullet-list li {
  font-size:   0.875rem;
  color:       var(--pf-slate);
  font-weight: 300;
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  line-height: 1.55;
}
.pf-bullet-list li::before {
  content:     '';
  display:     block;
  width:       6px;
  height:      6px;
  border-radius:50%;
  background:  var(--pf-gold);
  flex-shrink: 0;
  margin-top:  7px;
}

/* WPForms card wrapper */
.pf-form-card {
  background:    var(--pf-white);
  border:        1px solid var(--pf-mist);
  border-radius: var(--pf-r-card);
  padding:       36px 32px;
  box-shadow:    0 4px 24px rgba(26,58,74,.06);
}
.pf-form-card-title {
  font-family:   var(--pf-display);
  font-size:     1.35rem;
  font-weight:   400;
  color:         var(--pf-ink);
  margin-bottom: 4px;
}
.pf-form-card-sub {
  font-size:     0.8125rem;
  color:         var(--pf-haze);
  margin-bottom: 20px;
  font-weight:   300;
}

/* ---- WPForms overrides ---- */
.wpforms-form .wpforms-field-container { margin-bottom: 0 !important; }
.wpforms-form .wpforms-field { padding: 0 0 14px !important; }
.wpforms-form label.wpforms-field-label {
  font-family:    var(--pf-body) !important;
  font-size:      0.6875rem !important;
  font-weight:    600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--pf-slate) !important;
  margin-bottom:  5px !important;
  display:        block !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"] {
  width:         100% !important;
  padding:       12px 14px !important;
  border:        1.5px solid var(--pf-mist) !important;
  border-radius: var(--pf-r-input) !important;
  font-family:   var(--pf-body) !important;
  font-size:     0.9375rem !important;
  font-weight:   300 !important;
  color:         var(--pf-ink) !important;
  background:    var(--pf-sand) !important;
  box-shadow:    none !important;
  outline:       none !important;
  transition:    border-color .18s ease, background .18s ease !important;
  appearance:    none !important;
  -webkit-appearance: none !important;
}
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus {
  border-color: var(--pf-ocean) !important;
  background:   var(--pf-white) !important;
}
.wpforms-form .wpforms-submit-container {
  margin-top: 4px !important;
  padding:    0 !important;
}
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
  width:          100% !important;
  background:     var(--pf-navy) !important;
  color:          var(--pf-white) !important;
  border:         none !important;
  border-radius:  var(--pf-r-btn) !important;
  padding:        14px 20px !important;
  font-family:    var(--pf-body) !important;
  font-size:      0.9375rem !important;
  font-weight:    600 !important;
  letter-spacing: .02em !important;
  cursor:         pointer !important;
  transition:     background .18s ease !important;
  display:        block !important;
  text-align:     center !important;
}
.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
  background: var(--pf-ocean) !important;
}
.wpforms-form .wpforms-field-sublabel {
  font-size:   0.75rem !important;
  color:       var(--pf-haze) !important;
  margin-top:  3px !important;
}
.wpforms-confirmation-container-full,
.wpforms-confirmation-scroll {
  background:    var(--pf-foam) !important;
  border:        1px solid var(--pf-mist) !important;
  border-left:   3px solid var(--pf-ocean) !important;
  border-radius: 0 var(--pf-r-card) var(--pf-r-card) 0 !important;
  padding:       16px 20px !important;
  color:         var(--pf-ink) !important;
  font-size:     0.9375rem !important;
  font-family:   var(--pf-body) !important;
}
.wpforms-form .wpforms-error-container {
  background:    rgba(235,87,87,.06) !important;
  border:        1px solid rgba(235,87,87,.25) !important;
  border-radius: var(--pf-r-card) !important;
  padding:       12px 16px !important;
}
.wpforms-form .wpforms-field-error { font-size: 0.75rem !important; color: #c0392b !important; margin-top: 4px !important; }

/* ---- Privacy note below form ---- */
.pf-form-note {
  font-size:   0.75rem;
  color:       var(--pf-haze);
  margin-top:  12px;
  line-height: 1.5;
  text-align:  center;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1023px) {
  .values-grid     { grid-template-columns: repeat(2,1fr); }
  .numbers-grid    { grid-template-columns: repeat(2,1fr); }
  .pf-email-inner  { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .story-section,
  .values-section,
  .numbers-section,
  .belief-section,
  .about-cta-section { padding: 48px 20px; }
  
  .pf-email-section { padding: 48px 20px; }
  .pf-form-card     { padding: 28px 20px; }
  .values-grid      { grid-template-columns: 1fr; }
  .numbers-grid     { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .pf-archive-header { padding: 40px 0; }
  .pf-archive-header-inner { padding: 0 20px; }
  .pf-related-grid  { grid-template-columns: 1fr; }
  .pf-related-inner { padding: 0 20px; }
  .timeline         { padding-left: 28px; }
  .tl-dot           { left: -17px; width: 12px; height: 12px; }
  .timeline::before { left: 5px; }
}