/*
Theme Name: Hannah Pet Hospital
Theme URI: https://hannahpethospital.com/blogs/
Author: Hannah Pet Hospital
Author URI: https://hannahpethospital.com/
Description: Custom classic WordPress theme that visually matches the Hannah Pet Hospital marketing site. Shares the same fonts, color tokens, header, and footer chrome via assets served from the parent domain (/css/, /fonts/, /icons/, /js/site.js). Comments-enabled. Single-column reading layout for posts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: All rights reserved
Text Domain: hannah
Tags: classic-blog, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================================
   Hannah Pet Hospital — WordPress theme styles.

   The brand design system (tokens, fonts, header, footer, mobile
   menu, buttons, cookie banner, mobile CTA, BBB seal, OVMEB trust
   strip) is loaded from the static site's shared stylesheet at
   /css/styles.css — enqueued by functions.php BEFORE this file.

   This file adds only the styles that don't exist on the static
   site: blog post layouts, comment threads, archive lists, search,
   pagination, and WP core block alignments.
   ============================================================= */

/* ---------- WP core: alignment + image classes ---------- */
.alignleft   { float: left;  margin: 0 24px 16px 0; }
.alignright  { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide   { max-width: 1180px; margin-left: auto; margin-right: auto; }
.alignfull   { max-width: 100%; }
img.wp-post-image { max-width: 100%; height: auto; display: block; }
figure { margin: 32px 0; }
figure figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------- Blog landing (home.php) ---------- */
.blog-hero {
  padding: 80px 0 32px;
  background:
    linear-gradient(90deg, rgba(31, 59, 84, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 59, 84, 0.018) 1px, transparent 1px),
    var(--cream);
  background-size: 7px 7px, 9px 9px;
}
.blog-hero .container { max-width: 980px; }
.blog-hero h1 {
  color: var(--hannah-navy);
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.blog-hero p {
  color: var(--muted);
  font-size: 1.13rem;
  max-width: 720px;
  line-height: 1.6;
  margin: 0;
}

.post-list {
  padding: 56px 0 80px;
  background: var(--warm-cream);
}
.post-list .container { max-width: 1080px; }
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(31, 59, 84, 0.12);
}
.post-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream);
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.post-card-category {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hannah-orange);
}
.post-card-title {
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--hannah-navy);
  margin: 0;
  letter-spacing: -0.015em;
}
.post-card-title a { color: inherit; }
.post-card-title a:hover { color: var(--hannah-orange); }
.post-card-excerpt {
  font-size: 0.96rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.post-card-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- Single post (single.php) ---------- */
.single-hero {
  padding: 80px 0 36px;
  background:
    linear-gradient(90deg, rgba(31, 59, 84, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 59, 84, 0.018) 1px, transparent 1px),
    var(--cream);
  background-size: 7px 7px, 9px 9px;
}
.single-hero .container { max-width: 820px; }
.single-hero .post-category {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hannah-orange);
  margin: 0 0 16px;
}
.single-hero h1 {
  color: var(--hannah-navy);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 18px;
}
.single-hero .post-meta {
  font-size: 0.95rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
.single-hero .post-meta .dot {
  width: 4px;
  height: 4px;
  background: var(--muted);
  border-radius: 50%;
  display: inline-block;
}

.single-feature {
  background: var(--warm-cream);
  padding: 32px 0 0;
}
.single-feature .container { max-width: 980px; }
.single-feature img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  box-shadow: 0 18px 50px rgba(31, 59, 84, 0.12);
}

.entry-content {
  padding: 56px 0 72px;
  background: var(--warm-cream);
}
.entry-content > .container { max-width: 720px; }
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 22px;
}
.entry-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--hannah-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 48px 0 18px;
}
.entry-content h3 {
  font-size: 1.35rem;
  color: var(--hannah-navy);
  margin: 36px 0 14px;
  letter-spacing: -0.015em;
}
.entry-content h4 {
  font-size: 1.1rem;
  color: var(--hannah-navy);
  margin: 32px 0 12px;
  font-weight: 800;
}
.entry-content a {
  color: var(--hannah-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover {
  color: var(--hannah-orange);
}
.entry-content ul,
.entry-content ol {
  padding-left: 24px;
}
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote {
  border-left: 4px solid var(--hannah-orange);
  padding: 14px 22px;
  background: rgba(255, 99, 8, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.12rem;
  font-style: italic;
  color: var(--hannah-navy);
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  font-style: normal;
  color: var(--muted);
}
.entry-content img,
.entry-content .wp-block-image {
  margin: 28px 0;
  border-radius: var(--radius);
}
.entry-content code {
  background: var(--cream);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.entry-content pre {
  background: var(--hannah-navy);
  color: var(--white);
  padding: 18px 22px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 24px 0;
}
.entry-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* Tags + share + nav under the post */
.single-tags {
  padding: 0 0 48px;
  background: var(--warm-cream);
}
.single-tags .container { max-width: 720px; }
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-list a {
  background: var(--cream);
  color: var(--hannah-navy);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tag-list a:hover {
  background: var(--hannah-orange);
  color: var(--white);
}

.post-nav {
  background: var(--cream);
  padding: 48px 0;
}
.post-nav .container { max-width: 980px; }
.post-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.post-nav-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 59, 84, 0.1);
}
.post-nav-label {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hannah-orange);
  margin: 0 0 6px;
}
.post-nav-title {
  font-size: 1.06rem;
  color: var(--hannah-navy);
  margin: 0;
  line-height: 1.3;
}
.post-nav-card.next { text-align: right; }

/* ---------- Comments ---------- */
.comments-area {
  background: var(--cream);
  padding: 64px 0 80px;
}
.comments-area .container { max-width: 720px; }
.comments-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--hannah-navy);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.comment-list li.comment {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 14px;
}
.comment-list li.comment .children {
  list-style: none;
  margin: 18px 0 0;
  padding-left: 28px;
  border-left: 2px solid var(--border);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.comment-author .avatar {
  border-radius: 50%;
}
.comment-author .fn {
  font-weight: 800;
  color: var(--hannah-navy);
  font-style: normal;
}
.comment-meta {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.comment-content p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.65;
}
.reply { margin-top: 8px; }
.comment-reply-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hannah-blue);
}
.comment-reply-link:hover { color: var(--hannah-orange); }

.comment-respond {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
}
.comment-reply-title {
  font-size: 1.3rem;
  color: var(--hannah-navy);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.comment-form label {
  display: block;
  font-weight: 700;
  color: var(--hannah-navy);
  font-size: 0.9rem;
  margin: 14px 0 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s ease;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--hannah-blue);
  box-shadow: 0 0 0 3px rgba(81, 181, 224, 0.18);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  font-size: 0.92rem;
}
.comment-form .comment-form-cookies-consent input { width: auto; }
.form-submit { margin-top: 18px; }
.form-submit .submit {
  background: var(--hannah-orange);
  color: var(--white);
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.form-submit .submit:hover {
  transform: translateY(-1px);
  background: #d94f00;
}
.comments-closed {
  font-style: italic;
  color: var(--muted);
}

/* ---------- Archives / search results ---------- */
.archive-hero {
  padding: 64px 0 28px;
  background:
    linear-gradient(90deg, rgba(31, 59, 84, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 59, 84, 0.018) 1px, transparent 1px),
    var(--cream);
  background-size: 7px 7px, 9px 9px;
}
.archive-hero .container { max-width: 980px; }
.archive-hero .eyebrow {
  color: var(--hannah-orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.archive-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--hannah-navy);
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.archive-hero .archive-description {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 680px;
  margin: 0;
}

/* ---------- Pagination ---------- */
.pagination-row {
  padding: 36px 0 64px;
  background: var(--warm-cream);
  text-align: center;
}
.pagination-row .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pagination-row .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--hannah-navy);
  font-weight: 700;
  text-decoration: none;
}
.pagination-row .page-numbers:hover,
.pagination-row .page-numbers.current {
  background: var(--hannah-orange);
  color: var(--white);
  border-color: var(--hannah-orange);
}

/* ---------- Search form ---------- */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}
.search-form label { flex: 1; }
.search-field {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--white);
}
.search-field:focus {
  outline: none;
  border-color: var(--hannah-blue);
  box-shadow: 0 0 0 3px rgba(81, 181, 224, 0.18);
}
.search-submit {
  background: var(--hannah-navy);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
}
.search-submit:hover { background: var(--hannah-orange); }

/* ---------- 404 ---------- */
.error-404 {
  padding: 120px 0;
  background:
    linear-gradient(90deg, rgba(31, 59, 84, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 59, 84, 0.018) 1px, transparent 1px),
    var(--cream);
  background-size: 7px 7px, 9px 9px;
  text-align: center;
}
.error-404 h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--hannah-navy);
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.error-404 p {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 auto 28px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .post-nav-grid { grid-template-columns: 1fr; }
  .post-nav-card.next { text-align: left; }
  .comment-list li.comment .children { padding-left: 14px; }
}