/*
Theme Name:   ExoPetGuides
Theme URI:    https://exopetguides.com
Description:  ExoPetGuides custom child theme based on Astra
Author:       Joseph (OpenClaw Dev Team)
Template:     astra
Version:      1.0.0
*/

/* ===========================================
   DESIGN TOKENS
   =========================================== */
:root {
  --epg-green:        #2D5A27;
  --epg-green-light:  #3D7A35;
  --epg-green-pale:   #EBF3E8;
  --epg-amber:        #E8892B;
  --epg-amber-light:  #F5A653;
  --epg-bg:           #FAFAF7;
  --epg-bg-card:      #FFFFFF;
  --epg-text:         #1A1A1A;
  --epg-text-muted:   #5A5A5A;
  --epg-text-subtle:  #888888;
  --epg-border:       #E5E0D8;
  --epg-radius:       8px;
  --epg-radius-sm:    4px;
  --epg-shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --epg-shadow:       0 2px 12px rgba(0,0,0,0.10);
  --epg-max-content:  760px;
  --epg-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --epg-font-heading: 'Lora', Georgia, serif;
}

/* ===========================================
   GOOGLE FONTS LOAD
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

/* ===========================================
   BASE / BODY
   =========================================== */
body {
  background-color: var(--epg-bg);
  font-family: var(--epg-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--epg-text);
  -webkit-font-smoothing: antialiased;
}

/* ===========================================
   TYPOGRAPHY — HEADINGS
   =========================================== */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  font-family: var(--epg-font-heading);
  font-weight: 700;
  color: var(--epg-text);
  line-height: 1.25;
  margin-bottom: 0.75em;
}

h1, .entry-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 2em; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); margin-top: 1.75em; }
h4 { font-size: 1.1rem; margin-top: 1.5em; }

/* ===========================================
   LINKS
   =========================================== */
a { color: var(--epg-green); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--epg-green-light); text-decoration: underline; }

/* ===========================================
   SITE HEADER
   =========================================== */
.site-header,
#masthead,
.ast-site-header-wrap {
  background: #FFFFFF !important;
  border-bottom: 2px solid var(--epg-green);
  box-shadow: var(--epg-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Logo text (CSS wordmark) */
.site-title a,
.ast-site-identity .ast-site-title a {
  font-family: var(--epg-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--epg-green) !important;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-title a::before {
  content: '🦔 ';
  font-style: normal;
}

/* ===========================================
   PRIMARY NAVIGATION
   =========================================== */
.ast-nav-menu > li > a,
#ast-desktop-header .main-header-menu li a {
  font-family: var(--epg-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--epg-text) !important;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  transition: color 0.2s;
}
.ast-nav-menu > li > a:hover,
#ast-desktop-header .main-header-menu li a:hover {
  color: var(--epg-green) !important;
}
/* Active/current menu item */
.ast-nav-menu > .current-menu-item > a,
.ast-nav-menu > .current_page_item > a {
  color: var(--epg-green) !important;
  border-bottom: 2px solid var(--epg-green);
}

/* ===========================================
   ARTICLE PAGE — MAIN LAYOUT
   =========================================== */
.ast-article-single .site-content,
.single .ast-container {
  max-width: 1160px;
}

/* Content width rules:
   - Single posts: readable measure centered
   - Pages (incl homepage): no max-width so full-width blocks don't clip */
.single .entry-content {
  max-width: var(--epg-max-content);
  margin-left: auto;
  margin-right: auto;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.page .entry-content {
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* Post header */
.entry-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--epg-border);
}

/* Featured image */
.post-featured-image img,
.ast-single-post-featured-image img {
  border-radius: var(--epg-radius);
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  box-shadow: var(--epg-shadow);
}

/* ===========================================
   ARTICLE CONTENT STYLES
   =========================================== */
.entry-content p {
  margin-bottom: 1.5em;
  color: var(--epg-text);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.75rem;
  margin-bottom: 1.5em;
}
.entry-content li {
  margin-bottom: 0.4em;
  line-height: 1.7;
}

/* Blockquote */
.entry-content blockquote {
  border-left: 4px solid var(--epg-amber);
  background: var(--epg-green-pale);
  margin: 2em 0;
  padding: 1.25em 1.5em;
  border-radius: 0 var(--epg-radius) var(--epg-radius) 0;
  font-style: italic;
  color: var(--epg-text-muted);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* Inline code */
.entry-content code {
  background: #F3F0EB;
  padding: 0.15em 0.4em;
  border-radius: var(--epg-radius-sm);
  font-size: 0.9em;
  color: var(--epg-green);
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.9rem;
}
.entry-content th {
  background: var(--epg-green);
  color: #fff;
  padding: 0.75em 1em;
  text-align: left;
  font-weight: 600;
}
.entry-content td {
  padding: 0.65em 1em;
  border-bottom: 1px solid var(--epg-border);
}
.entry-content tr:nth-child(even) td { background: #F7F5F1; }

/* ===========================================
   POST META (author, date, category)
   =========================================== */
.ast-post-meta-single,
.entry-meta,
.posted-on,
.byline {
  font-size: 0.85rem;
  color: var(--epg-text-subtle);
  font-family: var(--epg-font-body);
}
.entry-meta a { color: var(--epg-text-subtle); }
.entry-meta a:hover { color: var(--epg-green); }

/* Category badge */
.ast-breadcrumbs-wrapper span,
.entry-meta .cat-links a {
  background: var(--epg-green);
  color: #fff !important;
  padding: 0.2em 0.75em;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}

/* ===========================================
   SIDEBAR
   =========================================== */
#secondary,
.widget-area {
  padding-left: 2rem;
}

.widget {
  background: var(--epg-bg-card);
  border: 1px solid var(--epg-border);
  border-radius: var(--epg-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--epg-shadow-sm);
}

.widget-title,
.widgettitle {
  font-family: var(--epg-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--epg-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--epg-green);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ===========================================
   BLOG / ARCHIVE CARDS
   =========================================== */
.ast-article-post,
.blog .hentry,
.archive .hentry,
.ast-grid-list-article {
  background: var(--epg-bg-card);
  border-radius: var(--epg-radius);
  box-shadow: var(--epg-shadow-sm);
  border: 1px solid var(--epg-border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 2rem;
}
.ast-article-post:hover,
.blog .hentry:hover {
  transform: translateY(-3px);
  box-shadow: var(--epg-shadow);
}

.ast-blog-featured-section img,
.blog .post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s;
}
.ast-article-post:hover img { transform: scale(1.03); }

/* ===========================================
   BUTTONS / CTA
   =========================================== */
.ast-button,
.wp-block-button__link,
button[type=submit],
input[type=submit],
.btn {
  background: var(--epg-green) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--epg-radius-sm);
  padding: 0.7em 1.75em;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}
.ast-button:hover,
.wp-block-button__link:hover,
button[type=submit]:hover {
  background: var(--epg-green-light) !important;
  transform: translateY(-1px);
}

/* ===========================================
   TABLE OF CONTENTS (TOC plugin)
   =========================================== */
#toc_container,
.toc_widget_list {
  background: var(--epg-green-pale);
  border: 1px solid #C5DAC1;
  border-radius: var(--epg-radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 0.9rem;
}
#toc_container .toc_title,
.toc_widget_list .toc_title {
  font-family: var(--epg-font-heading);
  font-weight: 700;
  color: var(--epg-green);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#toc_container a { color: var(--epg-green); }
#toc_container a:hover { color: var(--epg-amber); }
#toc_container ol,
#toc_container ul { margin: 0; padding-left: 1.25rem; }
#toc_container li { margin-bottom: 0.35em; }

/* ===========================================
   FOOTER
   =========================================== */
.site-footer,
#colophon {
  background: #1A2E18 !important;
  color: #C8D8C5 !important;
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}
.site-footer a { color: #A8C4A4; }
.site-footer a:hover { color: #fff; }
.site-footer .widget-title,
.site-footer .widgettitle {
  color: #fff;
  border-bottom-color: var(--epg-amber);
}
.ast-footer-copyright {
  color: #7A9877;
  font-size: 0.8rem;
  border-top: 1px solid #2A4A27;
  padding-top: 1rem;
  margin-top: 2rem;
  text-align: center;
}

/* ===========================================
   BREADCRUMBS
   =========================================== */
.ast-breadcrumbs-wrapper {
  font-size: 0.8rem;
  color: var(--epg-text-subtle);
  padding: 0.5rem 0 1rem;
}
.ast-breadcrumbs-wrapper a { color: var(--epg-green); }

/* ===========================================
   RESPONSIVE — MOBILE
   =========================================== */
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1, .entry-title { font-size: 1.7rem; }
  h2 { font-size: 1.3rem; }
  .entry-content { font-size: 1rem; }
  #secondary, .widget-area { padding-left: 0; margin-top: 2rem; }
  .ast-container { padding: 0 1rem; }
  .site-title a { font-size: 1.2rem; }
}

/* ===========================================
   MEDIAVINE AD SPACING
   =========================================== */
.mediavine-ad-unit,
[id^="mv_"],
.mv_slot_target {
  margin: 2rem auto !important;
  display: block;
  text-align: center;
}

/* ===========================================
   READING PROGRESS BAR
   =========================================== */
.epg-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--epg-amber);
  z-index: 9999;
  transition: width 0.1s linear;
  width: 0%;
}

/* ===========================================
   CATEGORY PAGES — HERO BANNER
   =========================================== */
.ast-archive-description,
.taxonomy-description {
  background: var(--epg-green);
  color: #fff;
  padding: 2rem;
  border-radius: var(--epg-radius);
  margin-bottom: 2rem;
}
.ast-archive-description p,
.taxonomy-description p { color: rgba(255,255,255,0.85); margin: 0; }
.archive-title,
.page-title {
  font-family: var(--epg-font-heading);
  color: var(--epg-green);
}

/* ===========================================
   HOMEPAGE — HERO
   =========================================== */
.epg-hero-section .wp-block-cover__inner-container {
  padding: 3rem 1.5rem;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}
.epg-hero-title { margin-bottom: 0.5rem !important; }
.epg-hero-subtitle { font-size: 1.1rem; opacity: 0.88; margin-bottom: 2rem !important; }
.epg-hero-divider { width: 60px !important; margin: 0 auto 2.5rem !important; border-width: 3px !important; }

/* Hero post cards */
.epg-hero-posts .wp-block-post-template { gap: 20px; }
.epg-hero-card {
  border-radius: var(--epg-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s;
}
.epg-hero-card:hover { transform: translateY(-3px); }
.epg-hero-card .wp-block-post-featured-image img {
  height: 180px; object-fit: cover; margin: 0;
  border-radius: var(--epg-radius) var(--epg-radius) 0 0;
  box-shadow: none;
}
.epg-hero-cat { padding: 8px 12px 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--epg-amber) !important; }
.epg-hero-cat a { color: var(--epg-amber) !important; }
.epg-hero-post-title { padding: 6px 12px 14px; }
.epg-hero-post-title a { color: #fff !important; font-size: 0.95rem; line-height: 1.3; }

/* ===========================================
   HOMEPAGE — CATEGORIES SECTION
   =========================================== */
.epg-categories-section { background: var(--epg-bg) !important; }
.epg-section-title { color: var(--epg-text); }
.epg-section-sub { color: var(--epg-text-muted); }
.epg-section-divider { width: 60px !important; border-width: 3px !important; }

.epg-cat-grid .wp-block-column { flex-basis: calc(25% - 12px) !important; }
.epg-cat-card {
  border-radius: var(--epg-radius) !important;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.epg-cat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.epg-cat-card h3 { font-size: 1.35rem !important; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.epg-cat-card h3 a { color: #fff !important; }

/* ===========================================
   HOMEPAGE — LATEST POSTS
   =========================================== */
.epg-latest-section { padding: 80px 20px !important; }
.epg-latest-section .wp-block-cover__inner-container {
  max-width: 1160px;
  margin: 0 auto;
}
.epg-latest-grid .wp-block-post-template { gap: 20px; }
.epg-post-card {
  border-radius: var(--epg-radius) !important;
  overflow: hidden;
  transition: transform 0.2s;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.epg-post-card:hover { transform: translateY(-3px); }
.epg-post-card .wp-block-post-featured-image img {
  height: 160px; object-fit: cover; border-radius: 8px 8px 0 0 !important; margin: 0; box-shadow: none;
}
.epg-card-cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.epg-card-cat a { color: var(--epg-amber) !important; }
.epg-post-card .wp-block-post-title a { color: #fff !important; font-size: 0.95rem; line-height: 1.3; }

/* Query pagination */
.epg-latest-grid .wp-block-query-pagination {
  margin-top: 2.5rem;
  justify-content: center;
}
.epg-latest-grid .wp-block-query-pagination a,
.epg-latest-grid .wp-block-query-pagination-numbers a {
  color: #fff; border: 1px solid rgba(255,255,255,0.3);
  padding: 0.4em 0.8em; border-radius: 4px;
}
.epg-latest-grid .wp-block-query-pagination-numbers a:hover { background: var(--epg-amber); border-color: var(--epg-amber); }

@media (max-width: 768px) {
  .epg-cat-grid .wp-block-column { flex-basis: calc(50% - 8px) !important; }
  .epg-latest-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .epg-cat-grid .wp-block-column { flex-basis: 100% !important; }
  .epg-latest-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
}