/*
 * Site-specific overrides — Cute Animal Planet
 * Loaded AFTER main.css. Survives master-theme updates (main.css is overwritten,
 * this file is not).
 *
 * 1. Typography: Fraunces (headings) + Public Sans (body) — the "Fraunces +
 *    Public Sans" variant chosen from the Stitch redesign project.
 * 2. Paw Wordmark: coral C-with-paw mark rendered as an inline-SVG ::before
 *    on the site title (header) and footer title, per the chosen logo concept.
 */

body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-styled-title,
.footer-site-title,
.related-posts-title {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Wordmark: slightly tighter, warmer */
.site-title,
.site-title a {
    letter-spacing: -0.01em;
}

/* Paw-in-C mark — coral version for the light header */
.site-title a::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.3em;
    vertical-align: -0.15em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 80.6 24.3 A 40 40 0 1 0 80.6 75.7' fill='none' stroke='%23d94a36' stroke-width='13' stroke-linecap='round'/%3E%3Cellipse cx='50' cy='60' rx='13.5' ry='11.5' fill='%23d94a36'/%3E%3Ccircle cx='33' cy='45' r='5.8' fill='%23d94a36'/%3E%3Ccircle cx='44' cy='37.5' r='6.2' fill='%23d94a36'/%3E%3Ccircle cx='56' cy='37.5' r='6.2' fill='%23d94a36'/%3E%3Ccircle cx='67' cy='45' r='5.8' fill='%23d94a36'/%3E%3C/svg%3E");
}

/* Header: tagline hidden so the wordmark centers on the menu row
   (the Stitch design has no tagline in the header) */
.site-header .site-description {
    display: none;
}

/* Paw-in-C mark — light version for the dark footer */
.footer-site-title::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.3em;
    vertical-align: -0.15em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 80.6 24.3 A 40 40 0 1 0 80.6 75.7' fill='none' stroke='%23fdf3ef' stroke-width='13' stroke-linecap='round'/%3E%3Cellipse cx='50' cy='60' rx='13.5' ry='11.5' fill='%23fdf3ef'/%3E%3Ccircle cx='33' cy='45' r='5.8' fill='%23fdf3ef'/%3E%3Ccircle cx='44' cy='37.5' r='6.2' fill='%23fdf3ef'/%3E%3Ccircle cx='56' cy='37.5' r='6.2' fill='%23fdf3ef'/%3E%3Ccircle cx='67' cy='45' r='5.8' fill='%23fdf3ef'/%3E%3C/svg%3E");
}

/* ============================================================
   Homepage — Stitch redesign ("Fraunces + Public Sans" variant)
   Sections: hero band, latest stories, most loved + newsletter,
   browse by animal. Flat, hairline borders, no shadows.
   ============================================================ */

/* Shared */
.home-section-title {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
    border-bottom: 3px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin: 0 0 2rem;
}

.category-chip {
    display: inline-block;
    background: #94f0df;
    color: #006f62;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
}
.category-chip:hover { background: #7ad7c6; color: #005047; }

/* 1. Hero band */
.home-hero-band {
    background: var(--color-background-light);
    padding: 3.5rem 0;
}
.hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: center;
}
.hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: block;
}
.hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hero-headline {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
    line-height: 1.15;
    margin: 0;
}
.hero-headline a { color: var(--color-heading); text-decoration: none; }
.hero-headline a:hover { color: var(--color-primary); }
.hero-dek { font-size: 1.05rem; color: var(--color-text-medium); margin: 0; }
.hero-cta {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.hero-cta:hover { background: var(--color-primary-hover); color: #fff; }

/* 2. Latest stories */
.home-latest { padding: 4rem 0 1rem; }
.latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.story-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.story-card:hover { border-color: var(--color-primary); }
.story-card-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.story-card-body { padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.story-card-title { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.story-card-title a { color: var(--color-heading); text-decoration: none; }
.story-card-title a:hover { color: var(--color-primary); }
.story-card-date { font-size: 0.85rem; color: var(--color-text-light); }

/* 3. Most loved + newsletter */
.home-loved-newsletter { padding: 3rem 0; }
.loved-newsletter-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: start;
}
.most-loved-list { list-style: none; margin: 0; padding: 0; }
.most-loved-item {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-border);
}
.most-loved-item:last-child { border-bottom: none; }
.most-loved-rank {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-border-light);
    min-width: 2.2rem;
    text-align: center;
    line-height: 1;
}
.most-loved-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.most-loved-title {
    font-weight: 600;
    color: var(--color-heading);
    text-decoration: none;
    line-height: 1.4;
}
.most-loved-title:hover { color: var(--color-primary); }

.home-newsletter-card {
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
}
.home-newsletter-icon { width: 2rem; height: 2rem; color: var(--color-primary); margin: 0 auto 0.75rem; display: block; }
.home-newsletter-title { font-size: 1.6rem; margin: 0 0 0.6rem; }
.home-newsletter-text { font-size: 0.95rem; color: var(--color-text-medium); margin: 0 0 1.4rem; }
.home-newsletter-card .newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; }
.home-newsletter-card .newsletter-form input[type="email"] {
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
}
.home-newsletter-card .newsletter-form input[type="email"]:focus {
    outline: none;
    border: 2px solid var(--color-primary);
}
.home-newsletter-card .newsletter-form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.home-newsletter-card .newsletter-form button:hover { background: var(--color-primary-hover); }

/* 4. Browse by animal */
.home-browse { padding: 2rem 0 4.5rem; }
.browse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    justify-items: center;
}
.browse-tile { text-decoration: none; text-align: center; display: block; }
.browse-tile-image {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    padding: 6px;
    border: 1px solid var(--color-border);
    background: #fff;
    margin: 0 auto 1rem;
    transition: border-color 0.2s ease;
}
.browse-tile:hover .browse-tile-image { border-color: var(--color-primary); }
.browse-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.browse-tile-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-heading);
}
.browse-tile:hover .browse-tile-label { color: var(--color-primary); }

/* Responsive */
@media (max-width: 900px) {
    .hero-grid, .loved-newsletter-grid { grid-template-columns: 1fr; gap: 2rem; }
    .latest-grid { grid-template-columns: repeat(2, 1fr); }
    .browse-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .latest-grid { grid-template-columns: 1fr; }
    .home-hero-band { padding: 2rem 0; }
    .browse-tile-image { width: 130px; height: 130px; }
}