/* ==========================================================================
   HeartandHome — Blog Archive & Single Post Page
   Standard WordPress blog layout: posts left, thin-line sidebar right.
   Square images, title above image, excerpt below.

   Enqueued by: wp-content/themes/heartandhome-child/functions.php
   Handle: hh-blog-page (depends on hh-tokens)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero header — injected via JS
   -------------------------------------------------------------------------- */

.hh-blog-hero {
  text-align: center;
  padding: 60px var(--hh-padding-section-x) 40px;
  max-width: 700px;
  margin: 0 auto;
}

.hh-blog-hero-eyebrow {
  display: block;
  font-family: var(--hh-font-body);
  font-size: var(--hh-font-label);
  font-weight: 600;
  letter-spacing: var(--hh-ls-label);
  color: var(--hh-accent-sage);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hh-blog-hero-title {
  font-family: var(--hh-font-heading) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  letter-spacing: var(--hh-ls-heading);
  line-height: 1.15;
  color: var(--hh-text-primary);
  margin: 0 0 16px 0;
}

.hh-blog-hero-subtitle {
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--hh-text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Content area — two-column flex layout
   -------------------------------------------------------------------------- */

body.blog #main-content,
body.archive #main-content {
  background-color: var(--hh-bg-cream) !important;
}

body.blog #content-area,
body.archive #content-area {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--hh-padding-section-x) var(--hh-padding-section-y) !important;
  display: flex !important;
  align-items: flex-start !important;
}

body.blog #left-area,
body.archive #left-area {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
  padding-right: 48px !important;
}

/* --------------------------------------------------------------------------
   Sidebar — thin left border divider, no card wrappers
   -------------------------------------------------------------------------- */

body.blog #sidebar,
body.archive #sidebar {
  flex: 0 0 280px !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 40px !important;
  border-left: 1px solid var(--hh-border-light) !important;
}

/* Remove card wrappers — clean, open layout */
body.blog #sidebar .et_pb_widget,
body.archive #sidebar .et_pb_widget,
body.single-post #sidebar .et_pb_widget {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

/* Hide the "Search" label above the search box */
body.blog #sidebar .wp-block-search__label,
body.archive #sidebar .wp-block-search__label,
body.single-post #sidebar .wp-block-search__label {
  display: none !important;
}

/* Search widget — square input + square green button */
body.blog #sidebar .wp-block-search,
body.archive #sidebar .wp-block-search,
body.single-post #sidebar .wp-block-search,
body.blog #sidebar .search-form,
body.archive #sidebar .search-form,
body.single-post #sidebar .search-form {
  display: flex !important;
  gap: 0 !important;
}

body.blog #sidebar input[type="search"],
body.archive #sidebar input[type="search"],
body.single-post #sidebar input[type="search"],
body.blog #sidebar .wp-block-search__input,
body.archive #sidebar .wp-block-search__input,
body.single-post #sidebar .wp-block-search__input {
  flex: 1 !important;
  font-family: var(--hh-font-body) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--hh-border-light) !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  outline: 2px solid transparent !important;
  -webkit-appearance: none !important;
}

body.blog #sidebar input[type="search"]:focus,
body.archive #sidebar input[type="search"]:focus,
body.single-post #sidebar input[type="search"]:focus {
  border-color: var(--hh-accent-sage) !important;
}

body.blog #sidebar input[type="search"]:focus-visible,
body.archive #sidebar input[type="search"]:focus-visible,
body.single-post #sidebar input[type="search"]:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}

body.blog #sidebar .wp-block-search__button,
body.archive #sidebar .wp-block-search__button,
body.single-post #sidebar .wp-block-search__button,
body.blog #sidebar input[type="submit"],
body.archive #sidebar input[type="submit"],
body.single-post #sidebar input[type="submit"] {
  background-color: var(--hh-accent-sage) !important;
  color: var(--hh-text-white) !important;
  border: 1px solid var(--hh-accent-sage) !important;
  border-radius: 0 !important;
  font-family: var(--hh-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  white-space: nowrap !important;
}

body.blog #sidebar .wp-block-search__button:hover,
body.archive #sidebar .wp-block-search__button:hover,
body.single-post #sidebar .wp-block-search__button:hover,
body.blog #sidebar input[type="submit"]:hover,
body.archive #sidebar input[type="submit"]:hover,
body.single-post #sidebar input[type="submit"]:hover,
body.blog #sidebar .wp-block-search__button:focus-visible,
body.archive #sidebar .wp-block-search__button:focus-visible,
body.single-post #sidebar .wp-block-search__button:focus-visible,
body.blog #sidebar input[type="submit"]:focus-visible,
body.archive #sidebar input[type="submit"]:focus-visible,
body.single-post #sidebar input[type="submit"]:focus-visible {
  background-color: var(--hh-btn-sage-hover-bg) !important;
  border-color: var(--hh-btn-sage-hover-bg) !important;
}

body.blog #sidebar .wp-block-search__button:focus-visible,
body.archive #sidebar .wp-block-search__button:focus-visible,
body.single-post #sidebar .wp-block-search__button:focus-visible,
body.blog #sidebar input[type="submit"]:focus-visible,
body.archive #sidebar input[type="submit"]:focus-visible,
body.single-post #sidebar input[type="submit"]:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}

/* Widget headings — heading font, clean */
body.blog #sidebar .et_pb_widget h4.widgettitle,
body.archive #sidebar .et_pb_widget h4.widgettitle,
body.single-post #sidebar .et_pb_widget h4.widgettitle,
body.blog #sidebar .wp-block-heading,
body.archive #sidebar .wp-block-heading,
body.single-post #sidebar .wp-block-heading {
  font-family: var(--hh-font-heading) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--hh-text-primary) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Widget links — underline content links for non-color indicator (SW-7) */
body.blog #sidebar .et_pb_widget a:not(.wp-block-search__button),
body.archive #sidebar .et_pb_widget a:not(.wp-block-search__button),
body.single-post #sidebar .et_pb_widget a:not(.wp-block-search__button) {
  color: var(--hh-text-secondary) !important;
  text-decoration: underline !important;
  font-family: var(--hh-font-body) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transition: color 0.2s ease;
}

/* Search button keeps no underline */
body.blog #sidebar .et_pb_widget a.wp-block-search__button,
body.archive #sidebar .et_pb_widget a.wp-block-search__button,
body.single-post #sidebar .et_pb_widget a.wp-block-search__button {
  text-decoration: none !important;
}

body.blog #sidebar .et_pb_widget a:hover,
body.archive #sidebar .et_pb_widget a:hover,
body.single-post #sidebar .et_pb_widget a:hover,
body.blog #sidebar .et_pb_widget a:focus-visible,
body.archive #sidebar .et_pb_widget a:focus-visible,
body.single-post #sidebar .et_pb_widget a:focus-visible {
  color: var(--hh-accent-sage) !important;
}

/* Widget list items — clean spacing */
body.blog #sidebar .et_pb_widget li,
body.archive #sidebar .et_pb_widget li,
body.single-post #sidebar .et_pb_widget li {
  padding: 8px 0 !important;
  border-bottom: none !important;
  list-style: none !important;
}

body.blog #sidebar .et_pb_widget ul,
body.archive #sidebar .et_pb_widget ul,
body.single-post #sidebar .et_pb_widget ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* "No comments" text */
body.blog #sidebar .no-comments,
body.archive #sidebar .no-comments,
body.single-post #sidebar .no-comments {
  font-family: var(--hh-font-body) !important;
  font-size: 15px !important;
  color: var(--hh-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Post entries — standard blog layout, no card wrappers
   -------------------------------------------------------------------------- */

body.blog .et_pb_post,
body.archive .et_pb_post {
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 48px !important;
  padding: 0 !important;
  border: none !important;

  /* Reorder: title above image */
  display: flex !important;
  flex-direction: column !important;

  /* Base text for bare excerpt nodes */
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--hh-text-secondary) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* No hover effects on standard layout */
body.blog .et_pb_post:hover,
body.archive .et_pb_post:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Post title — large heading font, left-aligned, above image */
body.blog .et_pb_post .entry-title,
body.archive .et_pb_post .entry-title {
  font-family: var(--hh-font-heading) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: var(--hh-ls-heading) !important;
  color: var(--hh-text-primary) !important;
  text-align: left !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  order: -1 !important; /* Move title above image */
}

body.blog .et_pb_post .entry-title a,
body.archive .et_pb_post .entry-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

body.blog .et_pb_post .entry-title a:hover,
body.archive .et_pb_post .entry-title a:hover,
body.blog .et_pb_post .entry-title a:focus-visible,
body.archive .et_pb_post .entry-title a:focus-visible {
  color: var(--hh-accent-sage) !important;
}

/* Featured image — full-width, natural aspect ratio */
body.blog .et_pb_post .entry-featured-image-url,
body.archive .et_pb_post .entry-featured-image-url {
  display: block;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
}

body.blog .et_pb_post .entry-featured-image-url img,
body.archive .et_pb_post .entry-featured-image-url img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 0 !important;
}

/* Post meta */
body.blog .et_pb_post .post-meta,
body.archive .et_pb_post .post-meta {
  font-family: var(--hh-font-body) !important;
  font-size: var(--hh-font-body-small) !important;
  color: var(--hh-text-secondary) !important;
  text-align: left !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

body.blog .et_pb_post .post-meta a,
body.archive .et_pb_post .post-meta a {
  color: var(--hh-accent-sage) !important;
  text-decoration: none !important;
}

/* Blog entry content links — underline for non-color indicator (SW-7) */
body.blog .et_pb_post .post-content a,
body.archive .et_pb_post .post-content a {
  text-decoration: underline;
}

/* Post excerpt */
body.blog .et_pb_post .post-content,
body.archive .et_pb_post .post-content {
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--hh-text-secondary) !important;
  padding: 0 !important;
}

/* Read more link */
body.blog .et_pb_post .more-link,
body.archive .et_pb_post .more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--hh-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hh-accent-sage) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  margin-top: 8px;
}

body.blog .et_pb_post .more-link:hover,
body.archive .et_pb_post .more-link:hover,
body.blog .et_pb_post .more-link:focus-visible,
body.archive .et_pb_post .more-link:focus-visible {
  color: var(--hh-btn-sage-hover-bg) !important;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

body.blog .pagination,
body.archive .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 0 20px;
  margin-top: 20px;
  border-top: 1px solid var(--hh-border-light);
}

body.blog .pagination a,
body.archive .pagination a,
body.blog .pagination span,
body.archive .pagination span {
  font-family: var(--hh-font-body) !important;
  font-size: 14px !important;
  font-weight: 500;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.blog .pagination a,
body.archive .pagination a {
  color: var(--hh-text-secondary) !important;
  background: transparent;
}

body.blog .pagination a:hover,
body.archive .pagination a:hover,
body.blog .pagination a:focus-visible,
body.archive .pagination a:focus-visible {
  color: var(--hh-accent-sage) !important;
  background: rgba(91, 111, 96, 0.1);
}

body.blog .pagination span.current,
body.archive .pagination span.current {
  color: var(--hh-text-white) !important;
  background: var(--hh-accent-sage);
}

/* --------------------------------------------------------------------------
   Single post page — clean article layout
   -------------------------------------------------------------------------- */

body.single-post #main-content {
  background-color: var(--hh-bg-cream) !important;
}

/* Hide Divi's default sidebar divider line */
body.single-post .container::before,
body.blog .container::before,
body.archive .container::before {
  display: none !important;
}

body.single-post #content-area {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px var(--hh-padding-section-x) var(--hh-padding-section-y) !important;
  display: flex !important;
  align-items: flex-start !important;
}

body.single-post #left-area {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
  padding-right: 48px !important;
}

body.single-post #sidebar {
  flex: 0 0 280px !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 40px !important;
  border-left: 1px solid var(--hh-border-light) !important;
}

body.single-post .entry-title {
  font-family: var(--hh-font-heading) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--hh-text-primary) !important;
  margin-bottom: 16px !important;
}

body.single-post .post-meta {
  font-family: var(--hh-font-body) !important;
  font-size: var(--hh-font-body-small) !important;
  color: var(--hh-text-secondary) !important;
  margin-bottom: 32px !important;
}

body.single-post .post-meta a {
  color: var(--hh-accent-sage) !important;
  text-decoration: none !important;
}

body.single-post .entry-content {
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--hh-text-primary) !important;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  color: var(--hh-text-primary) !important;
}

body.single-post .entry-content a {
  color: var(--hh-accent-sage) !important;
  text-decoration: underline;
}

body.single-post .entry-content a:hover,
body.single-post .entry-content a:focus-visible {
  color: var(--hh-btn-sage-hover-bg) !important;
}

/* --------------------------------------------------------------------------
   Global link & button overrides — replace Divi blue with sage green
   -------------------------------------------------------------------------- */

/* Comment form submit button */
body.single-post #commentform .form-submit input[type="submit"],
body.single-post #commentform .form-submit .et_pb_button,
body.single-post .comment-reply-link {
  background-color: var(--hh-accent-sage) !important;
  color: var(--hh-text-white) !important;
  border: none !important;
  border-radius: var(--hh-btn-radius) !important;
  font-family: var(--hh-font-body) !important;
  font-size: var(--hh-btn-font-size) !important;
  font-weight: var(--hh-btn-font-weight) !important;
  padding: var(--hh-btn-padding-y) var(--hh-btn-padding-x) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

body.single-post #commentform .form-submit input[type="submit"]:hover,
body.single-post #commentform .form-submit .et_pb_button:hover,
body.single-post .comment-reply-link:hover,
body.single-post #commentform .form-submit input[type="submit"]:focus-visible,
body.single-post #commentform .form-submit .et_pb_button:focus-visible,
body.single-post .comment-reply-link:focus-visible {
  background-color: var(--hh-btn-sage-hover-bg) !important;
}

body.single-post #commentform .form-submit input[type="submit"]:focus-visible,
body.single-post #commentform .form-submit .et_pb_button:focus-visible,
body.single-post .comment-reply-link:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}

/* Comment area links */
body.single-post #respond a,
body.single-post .comment-metadata a,
body.single-post .logged-in-as a {
  color: var(--hh-accent-sage) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

body.single-post #respond a:hover,
body.single-post .comment-metadata a:hover,
body.single-post .logged-in-as a:hover,
body.single-post #respond a:focus-visible,
body.single-post .comment-metadata a:focus-visible,
body.single-post .logged-in-as a:focus-visible {
  color: var(--hh-btn-sage-hover-bg) !important;
  text-decoration: underline !important;
}

/* Comment textarea focus */
body.single-post #commentform textarea:focus,
body.single-post #commentform input:focus {
  border-color: var(--hh-accent-sage) !important;
  outline: 2px solid transparent !important;
  box-shadow: 0 0 0 2px rgba(91, 111, 96, 0.15) !important;
}

body.single-post #commentform textarea:focus-visible,
body.single-post #commentform input:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}

/* Comment form placeholder contrast fix (WCAG AA) */
body.single-post #commentform textarea,
body.single-post #commentform input {
  color: #333 !important;
  background: #fff !important;
}
body.single-post #commentform textarea::placeholder,
body.single-post #commentform input::placeholder {
  color: #767676 !important;
}

/* General blog page links — override Divi blue */
body.blog a,
body.archive a,
body.single-post a {
  color: var(--hh-accent-sage);
}

body.blog a:hover,
body.archive a:hover,
body.single-post a:hover,
body.blog a:focus-visible,
body.archive a:focus-visible,
body.single-post a:focus-visible {
  color: var(--hh-btn-sage-hover-bg);
}

/* --------------------------------------------------------------------------
   Responsive — Tablet (max-width: 980px)
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hh-blog-hero {
    padding: 48px 40px 32px;
  }

  .hh-blog-hero-title {
    font-size: 36px !important;
  }

  body.blog #content-area,
  body.archive #content-area {
    flex-direction: column !important;
    padding: 0 40px 60px !important;
  }

  body.blog #left-area,
  body.archive #left-area {
    padding-right: 0 !important;
  }

  body.blog #sidebar,
  body.archive #sidebar {
    width: 100% !important;
    flex: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--hh-border-light) !important;
    padding-top: 32px !important;
    margin-top: 40px !important;
  }

  body.single-post #content-area {
    flex-direction: column !important;
    padding: 32px 40px 60px !important;
  }

  body.single-post #left-area {
    padding-right: 0 !important;
  }

  body.single-post #sidebar {
    width: 100% !important;
    flex: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--hh-border-light) !important;
    padding-top: 32px !important;
    margin-top: 40px !important;
  }

  body.blog .et_pb_post .entry-title,
  body.archive .et_pb_post .entry-title {
    font-size: 26px !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive — Phone (max-width: 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hh-blog-hero {
    padding: 40px 20px 24px;
  }

  .hh-blog-hero-title {
    font-size: 28px !important;
  }

  .hh-blog-hero-subtitle {
    font-size: 15px;
  }

  body.blog #content-area,
  body.archive #content-area {
    padding: 0 20px 48px !important;
  }

  body.blog .et_pb_post .entry-title,
  body.archive .et_pb_post .entry-title {
    font-size: 22px !important;
  }

  body.blog .et_pb_post,
  body.archive .et_pb_post {
    margin-bottom: 36px !important;
  }

  body.single-post .entry-title {
    font-size: 26px !important;
  }

  body.single-post #content-area {
    padding: 24px 20px 48px !important;
  }
}

/* --------------------------------------------------------------------------
   SW-6 — prefers-reduced-motion: disable transitions & animations
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.blog #sidebar .wp-block-search__button,
  body.archive #sidebar .wp-block-search__button,
  body.single-post #sidebar .wp-block-search__button,
  body.blog #sidebar input[type="submit"],
  body.archive #sidebar input[type="submit"],
  body.single-post #sidebar input[type="submit"],
  body.blog #sidebar .et_pb_widget a,
  body.archive #sidebar .et_pb_widget a,
  body.single-post #sidebar .et_pb_widget a,
  body.blog .et_pb_post .entry-title a,
  body.archive .et_pb_post .entry-title a,
  body.blog .et_pb_post .more-link,
  body.archive .et_pb_post .more-link,
  body.blog .pagination a,
  body.archive .pagination a,
  body.blog .pagination span,
  body.archive .pagination span,
  body.single-post #commentform .form-submit input[type="submit"],
  body.single-post #commentform .form-submit .et_pb_button,
  body.single-post .comment-reply-link,
  body.single-post #respond a,
  body.single-post .comment-metadata a,
  body.single-post .logged-in-as a {
    transition: none !important;
    animation: none !important;
  }
}