/*
Theme Name: Saving Graces Modern
Author: Saving Graces 4 Felines
Description: Friendly & Playful Saving Graces 4 Felines WordPress theme inspired by the approved B concept while preserving the existing top logo and current site functionality.
Version: 0.6.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
*/

:root {
    --lime: #9bd11e;
    --lime-bright: #a8dc27;
    --lime-deep: #5d8f06;
    --lime-soft: #eef8ce;
    --lime-pale: #f7fbe9;
    --orange: #ff8836;
    --orange-deep: #d96516;
    --orange-soft: #fff0df;
    --ink: #272a2e;
    --text: #4d5054;
    --muted: #73767a;
    --line: #e6e7df;
    --white: #fff;
    --page: #fffefa;
    --shadow: 0 15px 36px rgba(38, 46, 29, .09);
    --shadow-card: 0 8px 22px rgba(38, 46, 29, .08);
    --round: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 6% 18%, rgba(155,209,30,.05), transparent 22%),
        radial-gradient(circle at 94% 72%, rgba(255,136,54,.04), transparent 20%),
        var(--page);
    color: var(--text);
    font: 1rem/1.6 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

a { color: var(--lime-deep); }
a:hover { color: #466d03; }
img { max-width: 100%; height: auto; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* Top header: preserve the existing logo itself, redesign the surrounding layout. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    min-height: 118px;
    padding: 18px 4px 12px;
    background: transparent;
}
.brand a { display: inline-block; line-height: 0; }
.brand img { display: block; width: 300px; height: auto; }
.custom-logo { width: 300px; max-height: 112px; object-fit: contain; }

.site-header ul,
.site-footer ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header li,
.site-footer li { margin: 0; }
.site-header a {
    position: relative;
    display: inline-block;
    padding: 7px 6px;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}
.site-header nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 1px;
    height: 3px;
    border-radius: 999px;
    background: var(--lime);
    transition: left .18s ease, right .18s ease;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { left: 6px; right: 6px; }
.site-header nav a:hover { color: var(--ink); }

main { padding: 8px 0 54px; }
.reading { max-width: 930px; }

h1, h2, h3 {
    margin-top: 0;
    color: var(--ink);
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -.035em;
}
h1 { line-height: 1.02; }
h2 { line-height: 1.1; }
h3 { line-height: 1.18; }
h2 a, h3 a { color: var(--ink); text-decoration: none; }
h2 a:hover, h3 a:hover { color: var(--lime-deep); }
p { margin-top: 0; }
.meta { color: var(--muted); }

/* Buttons */
.entry-content .wp-block-button__link,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 11px 25px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-green,
.entry-content .wp-block-button__link {
    background: linear-gradient(135deg, var(--lime-bright), #82bf0e);
    color: #fff;
    box-shadow: 0 8px 18px rgba(99,151,11,.18);
}
.button-green:hover,
.entry-content .wp-block-button__link:hover { color: #fff; box-shadow: 0 11px 22px rgba(99,151,11,.24); }
.button-orange {
    background: linear-gradient(135deg, #ff9a4b, #f4731d);
    color: #fff;
    box-shadow: 0 8px 18px rgba(224,103,19,.18);
}
.button-orange:hover { color: #fff; box-shadow: 0 11px 22px rgba(224,103,19,.24); }
.button-orange-outline,
.outline {
    background: #fff;
    border-color: var(--orange);
    color: var(--orange-deep);
    box-shadow: none;
}
.button-orange-outline:hover,
.outline:hover { background: var(--orange-soft); color: #af4e0e; }
.outline-green {
    background: #fff;
    border-color: var(--lime-deep);
    color: var(--lime-deep);
    box-shadow: none;
}
.outline-green:hover { background: var(--lime-pale); color: #466d03; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Hero — mirrors the approved B concept: open layout, oversized type, organic cat crop and doodles. */
.hero-b {
    position: relative;
    display: grid;
    grid-template-columns: .98fr 1.02fr;
    align-items: center;
    gap: 20px;
    min-height: 470px;
    padding: 4px 4px 18px;
    overflow: visible;
}
.hero-copy { position: relative; z-index: 3; padding: 14px 0 12px 16px; }
.hero h1 {
    margin: 0 0 18px;
    max-width: 610px;
    font-size: clamp(3.45rem, 6vw, 5.8rem);
    font-weight: 900;
    letter-spacing: -.065em;
}
.hero h1 span { color: #78b907; }
.hero p {
    max-width: 560px;
    margin-bottom: 0;
    color: #45484c;
    font-size: clamp(1.15rem, 1.75vw, 1.45rem);
    line-height: 1.45;
}
.hero-actions .button { min-width: 188px; }
.hero-visual {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
}
.hero-photo-frame {
    position: relative;
    z-index: 2;
    width: min(430px, 82%);
    aspect-ratio: 1 / 1;
    padding: 10px;
    border-radius: 48% 52% 46% 54% / 49% 45% 55% 51%;
    background: linear-gradient(145deg, #a4d928, #74b208);
    transform: rotate(-2deg);
    box-shadow: 0 16px 32px rgba(74, 104, 29, .15);
}
.hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 47%;
    border-radius: 48% 52% 46% 54% / 49% 45% 55% 51%;
    transform: rotate(2deg);
}
.hero-badge {
    position: absolute;
    right: -4px;
    bottom: 44px;
    z-index: 4;
    width: 150px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 54% 46% 58% 42% / 45% 55% 45% 55%;
    background: linear-gradient(145deg, #eef8c9, #dff0a2);
    color: #355500;
    box-shadow: 0 12px 28px rgba(80, 105, 41, .12);
    font-family: "Comic Sans MS", "Segoe Print", cursive;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    transform: rotate(5deg);
}
.hero-badge b { margin-top: 3px; color: #77b507; font-size: 1.7rem; line-height: 1; }
.hero-heart,
.story-heart,
.support-heart,
.footer-heart {
    position: absolute;
    z-index: 5;
    font-family: Arial, sans-serif;
    line-height: 1;
}
.hero-heart-1 { left: 6%; top: 14%; color: var(--orange); font-size: 2.1rem; transform: rotate(-12deg); }
.hero-heart-2 { right: 4%; top: 25%; color: var(--lime); font-size: 2rem; transform: rotate(14deg); }
.hero-heart-3 { left: 8%; bottom: 12%; color: var(--lime-bright); font-size: 2.4rem; transform: rotate(-20deg); }
.doodle.hero-doodle {
    position: absolute;
    z-index: 4;
    width: 9px;
    height: 34px;
    border-radius: 999px;
    background: var(--orange);
}
.hero-doodle-1 { left: 9%; top: 17%; transform: rotate(-42deg); }
.hero-doodle-2 { left: 13%; top: 12%; transform: rotate(-13deg); }
.hero-doodle-3 { right: 8%; top: 14%; background: var(--lime-bright) !important; transform: rotate(32deg); }

/* Shared homepage section headings */
.home-section { position: relative; }
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.heading-with-icon { display: flex; align-items: center; gap: 14px; }
.heading-with-icon h2,
.section-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 3.3vw, 3rem);
    letter-spacing: -.045em;
}
.section-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
}
.section-icon svg { width: 48px; height: 48px; }
.paw-icon svg { fill: #83c50b; }
.megaphone-icon svg { width: 50px; height: 50px; fill: var(--orange); stroke: var(--orange); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cat-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f0f8d6, #e6f2c4);
    color: #345000;
    font-weight: 900;
    text-decoration: none;
}
.cat-search:hover { color: #345000; transform: translateY(-1px); }
.cat-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }

/* Cats */
.adopt-intro {
    margin-top: 14px;
    padding: 22px 0 34px;
    border-bottom: 1px solid #dfe6d5;
}
.cat-grid-shell { margin-top: 22px; }

/* Flexible selectors to restyle Cat Manager without altering plugin behavior. */
.cat-grid-shell .sg4f-cats,
.cat-grid-shell .sg4f-cat-grid,
.cat-grid-shell .sg4f-cats-grid,
.cat-grid-shell .cat-grid,
.cat-grid-shell > div {
    gap: 22px;
}
.cat-grid-shell .sg4f-cat,
.cat-grid-shell .sg4f-cat-card,
.cat-grid-shell .cat-card,
.cat-grid-shell article {
    position: relative;
    overflow: hidden;
    border: 1px solid #e4e5de;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-card);
}
.cat-grid-shell .sg4f-cat:hover,
.cat-grid-shell .sg4f-cat-card:hover,
.cat-grid-shell .cat-card:hover,
.cat-grid-shell article:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38,46,29,.11); }
.cat-grid-shell img {
    display: block;
    width: 100%;
    aspect-ratio: 1.45 / 1;
    object-fit: cover;
    border-radius: 0 !important;
}
.cat-grid-shell h2,
.cat-grid-shell h3,
.cat-grid-shell h4,
.cat-grid-shell .cat-name,
.cat-grid-shell .sg4f-cat-name {
    margin: 12px 18px 2px;
    color: var(--ink);
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.05;
}
.cat-grid-shell p,
.cat-grid-shell .cat-meta,
.cat-grid-shell .sg4f-cat-meta {
    margin: 3px 18px 10px;
    color: #65686b;
}
.cat-grid-shell a.button,
.cat-grid-shell .button,
.cat-grid-shell a[class*="button"],
.cat-grid-shell a[class*="profile"] {
    display: flex;
    width: calc(100% - 36px);
    min-height: 44px;
    margin: 10px 18px 18px;
    padding: 8px 16px;
    border: 2px solid #76b20a;
    border-radius: 999px;
    background: #fff;
    color: #5a8c05;
    box-shadow: none;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

/* Stories */
.stories { margin-top: 24px; padding: 24px 0 24px; border-bottom: 1px solid #dfe6d5; }
.story-heading { margin-bottom: 18px; }
.story-feature {
    position: relative;
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 26px;
    min-height: 180px;
    padding-right: 62px;
}
.story-image-link { display: block; line-height: 0; }
.story-image {
    width: 260px;
    height: 165px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}
.story-copy h3 { margin: 0 0 7px; font-size: clamp(1.55rem, 2.3vw, 2rem); }
.story-excerpt p { margin: 0 0 8px; font-size: 1.07rem; line-height: 1.5; }
.story-link { font-weight: 900; text-decoration: none; }
.story-heart-1 { right: 16px; top: 25px; color: var(--orange); font-size: 2.1rem; transform: rotate(16deg); }
.story-heart-2 { right: 45px; top: 64px; color: var(--orange); font-size: 1.2rem; transform: rotate(-12deg); }

/* Volunteer + donate */
.support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}
.support-card {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 190px;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: 26px;
    box-shadow: var(--shadow-card);
}
.support-volunteer { background: linear-gradient(135deg, #f2f9d8, #f7fbe9); }
.support-donate { background: linear-gradient(135deg, #fff2e4, #fff8f1); }
.support-icon { align-self: start; padding-top: 2px; }
.support-icon svg { width: 82px; height: 82px; }
.support-volunteer .support-icon svg { fill: #80bd0c; }
.support-donate .support-icon svg { fill: var(--orange); }
.support-card h2 { margin: 0 0 5px; font-size: 1.75rem; }
.support-card p { margin-bottom: 13px; line-height: 1.42; }
.support-card .button { min-height: 44px; padding: 9px 22px; }
.mail-donations { margin: 10px 0 0 !important; color: #706b66; font-size: .84rem; }
.support-mark {
    position: absolute;
    width: 8px;
    height: 30px;
    border-radius: 999px;
    transform: rotate(-35deg);
}
.support-mark-a { left: 24px; bottom: 16px; background: var(--lime-bright); box-shadow: 16px 6px 0 var(--lime-bright); }
.support-mark-b { right: 24px; top: 24px; background: var(--orange); box-shadow: 16px 6px 0 var(--orange); }
.support-heart { right: 35px; bottom: 25px; color: #79b806; font-size: 2rem; transform: rotate(15deg); }

/* Inner pages */
.reading > article,
main.reading > .full-post,
.existing-content,
.contact {
    padding: clamp(26px, 4vw, 42px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}
.full-post { margin-bottom: 24px; }
.full-post > .wp-post-image { max-height: 480px; width: auto; margin-bottom: 20px; border-radius: 20px; }
.entry-content { display: flow-root; overflow-wrap: anywhere; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content iframe { max-width: 100%; border-radius: 16px; }
.entry-content img { display: block; max-width: 100%; border-radius: 16px; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content pre { overflow-x: auto; }
.entry-content .alignleft { float: left; margin: 0 24px 20px 0; }
.entry-content .alignright { float: right; margin: 0 0 20px 24px; }
.entry-content .aligncenter { margin-inline: auto; }
.wp-block-columns { gap: 32px; }

input, textarea, select, button { font: inherit; }
input[type="search"], input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    max-width: 100%;
    padding: 11px 13px;
    border: 1px solid #a9b29f;
    border-radius: 12px;
    background: #fff;
}
button.button { border-width: 2px; cursor: pointer; }

/* Footer — the top logo remains untouched; this lower treatment follows concept B. */
.site-footer {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .8fr 1.15fr;
    align-items: center;
    gap: 28px;
    margin-top: 12px;
    margin-bottom: 26px;
    padding: 26px 18px 18px;
    border-top: 1px solid #dfe6d5;
    background: transparent;
}
.site-footer .brand img { width: 240px; }
.footer-tagline {
    margin: 3px 0 0;
    color: #666b63;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: .9rem;
}
.footer-details { display: grid; gap: 7px; }
.footer-location { display: flex; align-items: center; gap: 10px; color: #55595c; }
.footer-location svg { width: 24px; height: 24px; fill: #2d3032; }
.footer-location svg circle { fill: #fff; }
.footer-email { font-weight: 800; text-decoration: none; }
.footer-nav-wrap { display: grid; justify-items: end; gap: 8px; }
.site-footer nav ul { justify-content: flex-end; gap: 10px 14px; }
.site-footer nav a { color: #394e05; font-weight: 800; text-decoration: none; }
.volunteer-portal-link { font-weight: 900; text-decoration: none; }
.footer-copyright { margin: 0; color: #73766f; font-size: .82rem; }
.footer-heart { right: 4px; top: 10px; color: var(--orange); font-size: 2.2rem; transform: rotate(14deg); }

.skip { position: absolute; left: -10000px; }
.skip:focus { left: 20px; top: 10px; z-index: 999; padding: 12px; background: white; border-radius: 10px; }
:focus-visible { outline: 3px solid #73aa0d; outline-offset: 4px; }

@media (max-width: 980px) {
    .site-header { gap: 18px; }
    .brand img, .custom-logo { width: 255px; }
    .site-header ul { gap: 8px 12px; }
    .hero-b { grid-template-columns: 1fr 1fr; min-height: 420px; }
    .hero h1 { font-size: clamp(3rem, 7vw, 4.5rem); }
    .hero-photo-frame { width: min(370px, 86%); }
    .hero-badge { width: 128px; min-height: 128px; font-size: 1rem; }
    .support-card { grid-template-columns: 72px 1fr; padding: 23px; }
    .support-icon svg { width: 64px; height: 64px; }
    .site-footer { grid-template-columns: 1fr 1fr; }
    .footer-nav-wrap { grid-column: 1 / -1; justify-items: start; }
    .site-footer nav ul { justify-content: flex-start; }
}

@media (max-width: 760px) {
    .wrap { width: min(100% - 30px, 1180px); }
    .site-header { flex-direction: column; align-items: flex-start; min-height: 0; padding: 14px 0 8px; }
    .brand img, .custom-logo { width: 255px; }
    .site-header nav { width: 100%; overflow-x: auto; padding-bottom: 4px; }
    .site-header ul { flex-wrap: nowrap; gap: 14px; }
    .site-header a { white-space: nowrap; }
    main { padding-top: 4px; }
    .hero-b { grid-template-columns: 1fr; gap: 0; padding-top: 10px; }
    .hero-copy { padding-left: 0; }
    .hero h1 { font-size: clamp(3.1rem, 14vw, 4.7rem); }
    .hero-visual { min-height: 390px; margin-top: -6px; }
    .hero-photo-frame { width: min(390px, 82vw); }
    .hero-badge { right: 3%; bottom: 32px; }
    .section-heading { align-items: flex-start; }
    .heading-with-icon h2, .section-heading h2 { font-size: 2rem; }
    .section-icon svg { width: 40px; height: 40px; }
    .cat-search { padding: 9px 14px; }
    .story-feature { grid-template-columns: 190px 1fr; gap: 18px; padding-right: 40px; }
    .story-image { width: 190px; height: 140px; }
    .support { grid-template-columns: 1fr; }
    .site-footer { grid-template-columns: 1fr; padding-inline: 0; }
    .footer-nav-wrap { grid-column: auto; }
}

@media (max-width: 560px) {
    .hero h1 { font-size: clamp(2.75rem, 15vw, 4rem); }
    .hero p { font-size: 1.08rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .button { width: 100%; }
    .hero-badge { width: 115px; min-height: 115px; font-size: .92rem; }
    .section-heading { display: grid; grid-template-columns: 1fr; }
    .cat-search { justify-self: start; }
    .story-feature { grid-template-columns: 1fr; padding-right: 0; }
    .story-image { width: 100%; height: 210px; }
    .story-heart-1 { right: 8px; top: 195px; }
    .story-heart-2 { display: none; }
    .support-card { grid-template-columns: 60px 1fr; gap: 14px; padding: 20px; }
    .support-icon svg { width: 54px; height: 54px; }
    .support-card .button { width: 100%; }
    .site-footer .brand img { width: 215px; }
    .entry-content .alignleft,
    .entry-content .alignright { float: none; margin: 0 0 20px; }
}