/*==============================================================
#
# Animals Farming Theme
# Main Stylesheet — Classic & Fully Responsive
# Version: 2.0.1
#
# Notes on this revision (on top of the 2.0.0 notes already in
# this file):
# - Fixed an invalid rule in the Magazine Hero section:
#     .hero-featured{ ... max-width:1160px; !important }
#   The semicolon before "!important" made it a stray, invalid
#   token — browsers drop the whole declaration silently, which
#   is a very easy way to end up with "it's not responsive" bugs
#   that don't show up when you eyeball the CSS.
# - REMOVED the old Section 19 "FOOTER" block. It duplicated
#   .site-footer / .footer-wrapper / .copyright / .footer-credit
#   with different colors and only one (600px) breakpoint, and it
#   was fighting assets/css/footer.css — a newer, fully responsive
#   footer stylesheet with 7 breakpoints. Keeping both meant the
#   footer's final look depended on file load order in enqueue.php.
#   footer.css is now the only place the footer is styled.
#
# Everything else below is unchanged from your file.
#
#==============================================================*/

/*==============================================================
  TABLE OF CONTENTS
==============================================================

01. Root Variables
02. Reset
03. Typography
04. Global Layout
05. Utilities
06. Buttons
07. Forms
08. Tables
09. Images
10. WordPress Alignment
11. Accessibility
12. Animations
13. Spacing Helpers
14. Header
15. Navigation (desktop)
16. Dropdown Menu
17. Sub Menu Level 2
18. Mobile Menu (working)
19. [removed — see footer.css]
20. Page Header
21. Blog Grid
22. Post Card
23. Post Content (grid)
24. Single Post
25. Single Post + Sidebar Layout
26. Sidebar Widgets
27. Category List
28. Related Articles
29. Comments
30. Post Navigation (prev/next)
31. Pagination
32. Subcategory Grid
33. Magazine Hero
34. Responsive Overrides (global safety net)

==============================================================*/

/*==============================================================
01. ROOT VARIABLES
==============================================================*/

:root{
    /* Brand */
    --primary:#2e7d32;
    --primary-dark:#1b5e20;
    --primary-light:#66bb6a;
    --secondary:#ff9800;
    --accent-brown:#7b5e3b;

    /* Neutrals */
    --white:#ffffff;
    --black:#111111;
    --text:#444444;
    --heading:#1f2d24;
    --border:#e6e6e6;
    --bg:#ffffff;
    --bg-light:#f8f9fa;

    /* State */
    --danger:#dc3545;
    --success:#28a745;
    --warning:#ffc107;

    /* Type */
    --font-heading:Georgia,"Times New Roman",Times,serif;
    --font-body:Arial,Helvetica,sans-serif;

    /* Shape / Motion */
    --radius:6px;
    --radius-lg:12px;
    --shadow:0 8px 25px rgba(0,0,0,.05);
    --shadow-lg:0 12px 35px rgba(0,0,0,.08);
    --transition:.3s ease;

    /* Layout */
    --container:1200px;
    --container-narrow:900px;
    --gutter:clamp(16px,4vw,40px);
}

/* Reset WordPress's automatic body classes so they don't
   collide with the .search-results grid component class above */
body.search-results,
body.search-no-results,
body.search{
    display:block;
}



/*==============================================================
02. RESET
==============================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.8;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

picture{ display:block; }

ul,
ol{ list-style:none; }

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

input,
textarea,
select,
button{ font:inherit; }

textarea{ resize:vertical; }

iframe{
    width:100%;
    border:none;
    aspect-ratio:16/9;
    height:auto;
}

hr{
    border:0;
    border-top:1px solid var(--border);
    margin:30px 0;
}

table{ max-width:100%; }



/*==============================================================
03. TYPOGRAPHY (fluid — scales smoothly on every screen)
==============================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-heading);
    color:var(--heading);
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
}

h1{ font-size:clamp(28px,3.2vw + 1rem,42px); }
h2{ font-size:clamp(24px,2.6vw + 1rem,34px); }
h3{ font-size:clamp(20px,2vw + 1rem,28px); }
h4{ font-size:clamp(18px,1.4vw + 1rem,24px); }
h5{ font-size:clamp(16px,1vw + 1rem,20px); }
h6{ font-size:clamp(15px,.8vw + 1rem,18px); }

p{ margin-bottom:20px; }
strong{ font-weight:700; }
em{ font-style:italic; }
small{ font-size:14px; }

blockquote{
    border-left:5px solid var(--primary);
    background:#fafafa;
    padding:20px;
    margin:30px 0;
    font-style:italic;
    border-radius:0 var(--radius) var(--radius) 0;
}
blockquote p{ margin:0; }

code{
    background:#f3f3f3;
    padding:2px 6px;
    border-radius:4px;
    font-size:.9em;
}
pre{
    background:#f3f3f3;
    overflow:auto;
    padding:20px;
    border-radius:var(--radius);
}



/*==============================================================
04. GLOBAL LAYOUT
==============================================================*/

.site-main{ min-height:600px; }

section{ padding:clamp(36px,6vw,60px) 0; }

.container{
    width:var(--container);
    max-width:95%;
    margin:0 auto;
}

.content-area{ display:block; }



/*==============================================================
05. UTILITIES
==============================================================*/

.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }
.d-flex{ display:flex; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.align-center{ align-items:center; }
.flex-wrap{ flex-wrap:wrap; }
.w-100{ width:100%; }
.hidden{ display:none; }



/*==============================================================
06. BUTTONS
==============================================================*/

.btn{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:12px 28px;
    border-radius:var(--radius);
    transition:var(--transition);
    font-weight:600;
    text-align:center;
}

.btn:hover,
.btn:focus-visible{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.read-more{
    display:inline-block;
    margin-top:15px;
    color:var(--primary);
    font-weight:600;
}

.read-more:hover{ color:var(--primary-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}



/*==============================================================
07. FORMS
==============================================================*/

input,
textarea,
select{
    width:100%;
    border:1px solid var(--border);
    padding:14px;
    border-radius:var(--radius);
    outline:none;
    transition:var(--transition);
    font-size:16px; /* prevents iOS zoom-on-focus */
}

input:focus,
textarea:focus,
select:focus{ border-color:var(--primary); }

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.search-form{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.search-field{ flex:1 1 200px; }

.search-submit{
    background:var(--primary);
    color:#fff;
    padding:0 25px;
    min-height:48px;
    border-radius:var(--radius);
    flex:0 0 auto;
}

.search-submit:hover{ background:var(--primary-dark); }



/*==============================================================
08. TABLES
==============================================================*/

table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table th{
    background:var(--primary);
    color:#fff;
    padding:15px;
    text-align:left;
}

table td{
    padding:15px;
    border:1px solid var(--border);
}



/*==============================================================
09. IMAGES
==============================================================*/

.wp-post-image{ border-radius:var(--radius); }

figure{ margin-bottom:25px; }

figcaption{
    margin-top:10px;
    color:#777;
    font-size:14px;
    text-align:center;
}



/*==============================================================
10. WORDPRESS ALIGNMENTS
==============================================================*/

.alignleft{
    float:left;
    margin:0 25px 20px 0;
    max-width:50%;
}

.alignright{
    float:right;
    margin:0 0 20px 25px;
    max-width:50%;
}

.aligncenter{
    display:block;
    margin:auto;
}

@media(max-width:600px){
    .alignleft,
    .alignright{
        float:none;
        margin:20px auto;
        max-width:100%;
    }
}



/*==============================================================
11. ACCESSIBILITY
==============================================================*/

.screen-reader-text{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.screen-reader-text:focus{
    position:fixed;
    left:10px;
    top:10px;
    width:auto;
    height:auto;
    background:#fff;
    padding:12px 18px;
    z-index:9999;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}



/*==============================================================
12. ANIMATIONS
==============================================================*/

.fade-in{ animation:fadeIn .4s ease; }

@keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}



/*==============================================================
13. SPACING HELPERS
==============================================================*/

.mt-10{margin-top:10px;} .mt-20{margin-top:20px;} .mt-30{margin-top:30px;}
.mt-40{margin-top:40px;} .mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;} .mb-20{margin-bottom:20px;} .mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;} .mb-50{margin-bottom:50px;}

.pt-20{padding-top:20px;}
.pb-20{padding-bottom:20px;}
.py-50{ padding-top:50px; padding-bottom:50px; }



/*==============================================================
14. HEADER
==============================================================*/

.site-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    left:0;
    z-index:999;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.header-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:80px;
    gap:24px;
    flex-wrap:nowrap;
}

.site-branding{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.custom-logo{
    max-height:70px;
    width:auto;
}

.custom-logo-link{ display:inline-block; }

.site-title{
    font-family:var(--font-heading);
    font-size:clamp(22px,3vw,32px);
    font-weight:700;
    color:var(--heading);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.site-title:hover{ color:var(--primary); }

.site-description{
    color:#777;
    font-size:13px;
    margin-top:5px;
}

@media(max-width:600px){
    .header-wrapper{ min-height:64px; }
    .custom-logo{ max-height:48px; }
}



/*==============================================================
15. NAVIGATION (desktop)
==============================================================*/

.main-navigation{ margin-left:auto; }

.primary-menu{
    display:flex;
    align-items:center;
    gap:clamp(16px,2.5vw,35px);
}

.primary-menu li{ position:relative; }

.primary-menu > li > a{
    display:block;
    padding:28px 0;
    font-weight:600;
    color:var(--heading);
    transition:var(--transition);
}

.primary-menu > li:hover > a,
.primary-menu > li > a:focus-visible{ color:var(--primary); }

.current-menu-item > a,
.current-menu-parent > a,
.current_page_item > a{ color:var(--primary); }



/*==============================================================
16. DROPDOWN MENU
==============================================================*/

.primary-menu ul{
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    min-width:240px;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:var(--transition);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    z-index:10;
}

.primary-menu li:hover > ul,
.primary-menu li:focus-within > ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.primary-menu ul li{ width:100%; }

.primary-menu ul li a{
    display:block;
    padding:14px 20px;
    color:var(--heading);
}

.primary-menu ul li a:hover{
    background:var(--bg-light);
    color:var(--primary);
}



/*==============================================================
17. SUB MENU LEVEL 2
==============================================================*/

.primary-menu ul ul{
    left:100%;
    top:0;
}

@media(max-width:991px){
    /* on tablet/mobile the flyout submenu becomes an inline
       accordion instead — see section 18 */
    .primary-menu ul ul{ left:0; }
}



/*==============================================================
18. MOBILE MENU (working hamburger + slide-in panel)
    Toggling is done by adding/removing the class ".toggled"
    on .main-navigation — a single line of JS is enough:

    document.querySelector('.mobile-menu-toggle')
      .addEventListener('click', function(){
        document.querySelector('.main-navigation').classList.toggle('toggled');
        this.setAttribute('aria-expanded',
          this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
      });
==============================================================*/

.mobile-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border-radius:var(--radius);
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:var(--heading);
    background:transparent;
    flex-shrink:0;
}

.mobile-menu-toggle:hover{ color:var(--primary); }

.mobile-menu{ display:none; }

@media(max-width:991px){

    .mobile-menu-toggle{ display:flex; }

    .main-navigation{
        margin-left:0;
        position:fixed;
        top:0;
        right:0;
        width:min(320px,85vw);
        height:100vh;
        background:#fff;
        box-shadow:-10px 0 30px rgba(0,0,0,.12);
        transform:translateX(100%);
        transition:transform .35s ease;
        overflow-y:auto;
        z-index:1000;
        padding:90px 0 40px;
    }

    .main-navigation.toggled{ transform:translateX(0); }

    .primary-menu{
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:0 24px;
    }

    .primary-menu > li{ border-bottom:1px solid var(--border); }

    .primary-menu > li > a{ padding:16px 0; }

    .primary-menu ul{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        border:none;
        box-shadow:none;
        display:none;
        padding-left:16px;
        min-width:0;
    }

    .primary-menu li.menu-open > ul{ display:block; }

    .primary-menu ul li a{ padding:12px 10px; }
}

/* Simple full-screen backdrop shown alongside the panel — the
   theme's JS can toggle this the same way as .toggled above by
   adding class "nav-backdrop-visible" to a <div class="nav-backdrop">
   placed right after .site-header in markup. Purely optional. */
.nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:998;
}
.nav-backdrop.nav-backdrop-visible{ display:block; }



/*==============================================================
19. [removed]
    The footer used to be styled here. It has been removed
    because it duplicated and conflicted with assets/css/footer.css,
    which is the fully responsive, more complete version.
    Footer styling now lives only in footer.css.
==============================================================*/



/*==============================================================
20. PAGE HEADER
==============================================================*/

.page-header,
.archive-header,
.category-header,
.tag-header,
.author-header,
.search-header{ margin-bottom:clamp(30px,5vw,50px); }

.page-title,
.archive-title,
.category-title,
.tag-title,
.author-title,
.search-title{ margin-bottom:15px; }

.page-description,
.archive-description,
.category-description,
.tag-description,
.author-description{ color:#666; }



/*==============================================================
21. BLOG GRID
==============================================================*/

.blog-posts,
.archive-posts,
.category-posts,
.author-posts,
.search-results{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(20px,3vw,35px);
}



/*==============================================================
22. POST CARD
==============================================================*/

.post-card,
.archive-post,
.category-post,
.author-post,
.search-post{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:var(--transition);
    display:flex;
    flex-direction:column;
}

.post-card:hover,
.archive-post:hover,
.category-post:hover,
.author-post:hover,
.search-post:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}

.post-thumbnail{
    display:block;
    overflow:hidden;
    aspect-ratio:16/10;
}

.post-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.post-card:hover img,
.archive-post:hover img,
.category-post:hover img,
.author-post:hover img,
.search-post:hover img{ transform:scale(1.05); }



/*==============================================================
23. POST CONTENT (card)
==============================================================*/

.post-card .post-content,
.archive-post .post-content,
.category-post .post-content,
.author-post .post-content,
.search-post .post-content{
    padding:clamp(18px,3vw,25px);
    flex:1;
}

.post-card .post-title,
.archive-post .post-title,
.category-post .post-title,
.author-post .post-title,
.search-post .post-title{
    font-size:clamp(19px,2vw,24px);
    margin-bottom:15px;
}

.post-title a{ color:var(--heading); }
.post-title a:hover{ color:var(--primary); }

.post-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    font-size:13px;
    color:#777;
    margin-bottom:20px;
}

.post-excerpt{ margin-bottom:20px; }



/*==============================================================
24. SINGLE POST
==============================================================*/

.single-post{
    max-width:100%;
    margin:0;
}

.single-post .post-thumbnail{
    margin-bottom:clamp(24px,4vw,40px);
    aspect-ratio:16/9;
}

.single-post .post-title{
    font-size:clamp(28px,4vw,42px);
}

.single-post .post-tags{ margin-top:40px; }

.single-post-page .container{
    width:1200px;
    max-width:95%;
    margin:0 auto;
    box-sizing:border-box;
    padding:0 var(--gutter);
}

.page-content .container{
    width:var(--container-narrow);
    max-width:95%;
    margin:0 auto;
}



/*==============================================================
25. SINGLE POST + SIDEBAR LAYOUT
    Wide, breathable layout with a proper aside sidebar.
    Stacks cleanly on tablet/mobile instead of squeezing.

    NOTE: assets/css/blog.css also styles .single-post-layout
    (with !important, so it always wins on shared properties).
    That's not currently broken, but it is redundant — worth
    consolidating into one file eventually.
==============================================================*/

.single-post-layout{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:clamp(28px,4vw,56px);
    padding:clamp(28px,5vw,48px) 0 64px;
    width:100%;
}

.single-post-container{
    flex:1 1 560px;
    min-width:0; /* prevents overflow on long words/images */
    max-width:100%;
}

.site-sidebar{
    flex:0 1 320px;
    min-width:260px;
}

@media(max-width:900px){
    .single-post-container{ flex-basis:100%; }
    .site-sidebar{ flex-basis:100%; max-width:100%; }
}

/* ---------- Post header ---------- */
.post-header{ margin-bottom:28px; }

.single-post-container .post-title{
    font-size:clamp(26px,4vw,2.4rem);
    line-height:1.25;
    font-weight:700;
    color:var(--heading);
    margin:0 0 20px;
}

/* ---------- Featured image ---------- */
.single-post-container .post-thumbnail{
    margin:0 0 clamp(24px,4vw,36px);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.single-post-container .post-thumbnail img{
    width:100%;
    height:auto;
    display:block;
    border-radius:var(--radius-lg);
}

/* ---------- Body copy — comfortable reading spacing ---------- */
.single-post-container .post-content{
    font-size:clamp(1rem,.3vw + .95rem,1.08rem);
    line-height:1.85;
    color:#333;
    padding:0;
}

.single-post-container .post-content p{ margin:0 0 24px; }

.single-post-container .post-content h2{
    font-size:clamp(22px,3vw,1.65rem);
    line-height:1.35;
    font-weight:700;
    color:var(--heading);
    margin:clamp(32px,5vw,48px) 0 20px;
}

.single-post-container .post-content h3{
    font-size:clamp(19px,2.4vw,1.3rem);
    line-height:1.4;
    font-weight:700;
    color:var(--heading);
    margin:clamp(26px,4vw,36px) 0 16px;
}

.single-post-container .post-content h4{
    font-size:clamp(17px,2vw,1.12rem);
    font-weight:700;
    color:var(--heading);
    margin:clamp(20px,3vw,28px) 0 14px;
}

.single-post-container .post-content h2:first-child,
.single-post-container .post-content h3:first-child{ margin-top:0; }

.single-post-container .post-content ul,
.single-post-container .post-content ol{
    margin:0 0 24px;
    padding-left:28px;
}

.single-post-container .post-content li{
    margin-bottom:10px;
    line-height:1.75;
}

.single-post-container .post-content a{
    color:var(--primary-dark);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
}

.single-post-container .post-content a:hover{ color:var(--primary); }

.single-post-container .post-content strong{ color:var(--heading); }

.single-post-container .post-content blockquote{
    margin:28px 0;
    padding:16px 24px;
    border-left:4px solid var(--primary);
    background:#f6f8f6;
    font-style:italic;
    color:#444;
    border-radius:0 8px 8px 0;
}

.single-post-container .post-content img{
    max-width:100%;
    height:auto;
    display:block;
    margin:28px auto;
    border-radius:10px;
}

.single-post-container .post-content figure{ margin:28px 0; }

.single-post-container .post-content figcaption{
    text-align:center;
    font-size:.9rem;
    color:#777;
    margin-top:8px;
}

.single-post-container .post-content table{
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    display:block;
    overflow-x:auto;
}

.single-post-container .post-content table th,
.single-post-container .post-content table td{
    border:1px solid #e2e2e2;
    padding:12px 16px;
    text-align:left;
}

.single-post-container .post-content table th{
    background:#f6f8f6;
    font-weight:700;
}

/* ---------- Page links (multi-page posts) ---------- */
.page-links{
    margin:32px 0;
    font-weight:600;
}

@media(max-width:600px){
    .page-links{ display:flex; flex-wrap:wrap; gap:8px; }
}



/*==============================================================
26. SIDEBAR WIDGETS
==============================================================*/

.site-sidebar{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.sidebar-widget{
    background:#fff;
    border:1px solid #ececec;
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.widget-title{
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#1f2d24;
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:2px solid var(--primary);
}

@media(max-width:900px){
    .site-sidebar{
        flex-direction:row;
        flex-wrap:wrap;
        gap:20px;
    }
    .sidebar-widget{ flex:1 1 280px; }
}

@media(max-width:480px){
    .sidebar-widget{ padding:18px; border-radius:10px; }
    .widget-title{ font-size:.95rem; }
}



/*==============================================================
27. CATEGORY LIST
    NOTE: this is the sidebar-widget nested category tree
    (with .children). It is a different UI from the pill-style
    ".category-list" used on the 404 page — see the fix in
    404.css, which now scopes its rules under .error-404 so the
    two no longer collide.
==============================================================*/

.category-list,
.category-list ul{
    list-style:none;
    margin:0;
    padding:0;
}

.category-list li{
    padding:0;
    border-bottom:1px solid #f0f0f0;
}

.category-list li:last-child{ border-bottom:none; }

.category-list > li{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    font-size:.95rem;
}

/*.sidebar-widget .category-list > li > a{
    flex:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:12px 4px;
    color:#333;
    text-decoration:none;
    font-weight:500;
    transition:color .2s,padding-left .2s;
}
*/
.category-list > li > a::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#cfd8d2;
    margin-right:10px;
    flex-shrink:0;
    transition:background .2s;
}

.category-list > li > a:hover{
    color:var(--primary);
    padding-left:4px;
}

.category-list > li > a:hover::before{ background:var(--primary); }

.category-list > li > ul.children{ flex:0 0 100%; }

.category-list ul.children{
    margin-top:10px;
    margin-left:16px;
    padding-left:12px;
    border-left:2px solid #e2e2e2;
}

.category-list ul.children li{ display:flex; flex-wrap:wrap; }

.category-list ul.children li > a{
    flex:1;
    display:flex;
    justify-content:space-between;
    padding:8px 4px;
    text-decoration:none;
    color:#5c6b62;
    font-size:.88rem;
    transition:color .2s;
}

.category-list ul.children li > a:hover{ color:var(--primary); }

.category-list ul.children li > ul.children{ flex:0 0 100%; }



/*==============================================================
28. RELATED ARTICLES
==============================================================*/

.related-posts{ list-style:none; margin:0; padding:0; }

.related-posts li{ border-bottom:1px solid #f0f0f0; }
.related-posts li:last-child{ border-bottom:none; }

.related-posts li > a{
    display:block;
    padding:12px 2px;
    color:#333;
    text-decoration:none;
    font-size:.92rem;
    line-height:1.5;
    font-weight:500;
    transition:color .2s,padding-left .2s;
}

.related-posts li > a::before{
    content:"→";
    margin-right:8px;
    color:var(--primary);
    display:inline-block;
    transition:margin-right .2s;
}

.related-posts li > a:hover{ color:var(--primary); }
.related-posts li > a:hover::before{ margin-right:12px; }



/*==============================================================
29. COMMENTS AREA
==============================================================*/

.comments-area{
    margin-top:48px;
    padding-top:40px;
    border-top:1px solid #eaeaea;
}

.comment-reply-title{
    font-family:var(--font-heading);
    font-size:1.4rem;
    margin-bottom:20px;
}

.comment-form textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:14px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:inherit;
    font-size:16px;
    resize:vertical;
}

.comment-form .submit{
    margin-top:14px;
    padding:12px 28px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}

.comment-form .submit:hover{ background:var(--primary-dark); }



/*==============================================================
30. POST NAVIGATION (prev / next)
==============================================================*/

.post-navigation{
    display:flex;
    justify-content:space-between;
    margin:60px 0;
    gap:20px;
    flex-wrap:wrap;
    padding:24px 0;
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
}

.previous-post,
.next-post{
    flex:1 1 220px;
}

.next-post{ text-align:right; margin-left:auto; }

.previous-post a,
.next-post a{
    display:block;
    border:1px solid var(--border);
    padding:18px;
    border-radius:var(--radius);
    font-weight:600;
    color:var(--heading);
}

.previous-post a:hover,
.next-post a:hover{
    border-color:var(--primary);
    color:var(--primary);
}

@media(max-width:600px){
    .previous-post,
    .next-post{ flex:1 1 100%; text-align:left; margin-left:0; }
}



/*==============================================================
31. PAGINATION
==============================================================*/

.pagination{
    margin-top:60px;
    text-align:center;
}

.pagination .page-numbers{
    display:inline-block;
    padding:10px 16px;
    margin:4px;
    border:1px solid var(--border);
    border-radius:var(--radius);
}

.pagination .current{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.pagination a:hover{
    background:var(--primary);
    color:#fff;
}



/*==============================================================
32. SUBCATEGORY GRID
==============================================================*/

.subcategory-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
    gap:clamp(16px,3vw,25px);
    margin-bottom:60px;
}

.subcategory-card{
    border:1px solid var(--border);
    padding:clamp(18px,3vw,25px);
    border-radius:var(--radius);
    transition:var(--transition);
}

.subcategory-card:hover{
    box-shadow:var(--shadow);
    transform:translateY(-4px);
}

.subcategory-card h3{ margin-bottom:10px; }

.subcategory-card a:hover{ color:var(--primary); }



/*==============================================================
33. [removed]
    The old "Magazine Hero" (.hero-grid / .hero-small story-card
    layout) has been removed. It was dead weight fighting
    assets/css/home/home.css, which is the real homepage hero
    (badge + author avatar layout). Delete assets/css/home/hero.css
    from your theme too — it styled the same classes with the
    story-card layout and is no longer needed.
==============================================================*/



/*==============================================================
34. RESPONSIVE OVERRIDES — global safety net
    Applies broad, consistent rules on top of the component-level
    breakpoints above so nothing overflows or gets cramped.
==============================================================*/

@media(max-width:1200px){
    .container{ max-width:96%; }
}

@media(max-width:991px){
    section{ padding:44px 0; }
}

@media(max-width:768px){
    .container,
    .single-post-page .container,
    .page-content .container{
        padding-left:16px;
        padding-right:16px;
    }
    table{ font-size:14px; }
}

@media(max-width:600px){
    h1{ margin-bottom:14px; }
    section{ padding:32px 0; }
    .btn,
    .hero-button{ width:100%; text-align:center; }
}

@media(max-width:420px){
    .site-title{ font-size:20px; }
    .post-card .post-content,
    .archive-post .post-content,
    .category-post .post-content,
    .author-post .post-content,
    .search-post .post-content{ padding:16px; }
}


/* ==========================================================================
   Contact Page — Animals Farming theme
   Palette: white/light-gray background, barn red #A83E28 & sage #6B7C5D accents
   Display type: slab serif (signage feel) · Body: clean sans
   ========================================================================== */

.contact-page {
    background-color: #FAFAFA;
    padding: clamp(40px, 6vw, 64px) 24px clamp(64px, 8vw, 96px);
}

.contact-page .container {
    max-width: 640px;
    margin: 0 auto;
}

.contact-page h1 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    color: #2E2A24;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

/* Signature element: a rough "fence-rail" divider under the heading */
.contact-page h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 16px;
    background: repeating-linear-gradient(
        90deg,
        #A83E28,
        #A83E28 10px,
        transparent 10px,
        transparent 14px
    );
}

.contact-page > .container > p {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5C5C5C;
    margin: 20px 0 40px;
    max-width: 46ch;
}

/* Form card */
#contactForm {
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 6px;
    padding: clamp(20px, 4vw, 36px);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Corner "post" accents, evoking fence posts at the form's corners */
#contactForm::before,
#contactForm::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #6B7C5D;
    border-radius: 2px;
    top: -5px;
}
#contactForm::before { left: -5px; }
#contactForm::after  { right: -5px; }

.form-group {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7C5D;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-size: 1rem;
    color: #2E2A24;
    background: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: #C9C9C9;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background-color: #FFFFFF;
    border-color: #A83E28;
    box-shadow: 0 0 0 3px rgba(168, 62, 40, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

#contactForm button[type="submit"] {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background-color: #A83E28;
    border: none;
    border-radius: 4px;
    padding: 14px 32px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

#contactForm button[type="submit"]:hover {
    background-color: #8F3220;
}

#contactForm button[type="submit"]:active {
    transform: translateY(1px);
}

#contactForm button[type="submit"]:focus-visible {
    outline: 3px solid #6B7C5D;
    outline-offset: 2px;
}

/* Response message (success/error), populated via JS after submit */
#contact-response {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-size: 0.95rem;
    margin-top: 20px;
    padding: 0;
    transition: padding 0.15s ease;
}

#contact-response:not(:empty) {
    padding: 14px 16px;
    border-radius: 4px;
    background-color: #F1F4EE;
    border: 1px solid #6B7C5D;
    color: #3E4A34;
}

#contact-response.is-error {
    background-color: #FBECE8;
    border-color: #A83E28;
    color: #7A2E1D;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .form-group input,
    .form-group textarea,
    #contactForm button[type="submit"],
    #contact-response {
        transition: none;
    }
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
    .contact-page .container {
        max-width: 100%;
    }
}

/* Large phones / small tablets */
@media (max-width: 600px) {
    .contact-page {
        padding: 32px 16px 56px;
    }
    #contactForm {
        border-radius: 4px;
    }
    #contactForm button[type="submit"] {
        padding: 14px 24px;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .contact-page h1 {
        font-size: 1.7rem;
    }
    .contact-page > .container > p {
        font-size: 0.95rem;
        margin-bottom: 28px;
    }
    #contactForm {
        padding: 16px;
    }
    .form-group {
        margin-bottom: 16px;
    }
}
/* =========================================
   404 Error Page — Styles
   Add this to your theme's style.css,
   or enqueue as a separate stylesheet.

   FIX: .category-list and .btn were declared as bare, global
   selectors. main.css ALSO defines .category-list (the sidebar
   widget's nested category tree) and .btn (the sitewide button
   used for "read more" links, forms, etc.) — since this file has
   no scoping, whichever of the two files loads last would win
   and silently reshape the sidebar category widget / every button
   on the whole site, not just this page. Everything below is now
   scoped under .error-404 so it only ever affects this page.
========================================= */

.error-404 {
	padding: 80px 20px;
	background: #f9fafb;
	text-align: center;
}

.error-404 .container {
	max-width: 720px;
	margin: 0 auto;
}

/* ---------- Header ---------- */
.error-404 .error-header .error-code {
	font-size: 110px;
	font-weight: 800;
	line-height: 1;
	margin: 0;
	background: linear-gradient(135deg, #2f855a, #38a169);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -2px;
}

.error-404 .error-header .error-title {
	font-size: 28px;
	font-weight: 700;
	margin: 10px 0 12px;
	color: #1a202c;
}

.error-404 .error-header .error-desc {
	font-size: 16px;
	color: #4a5568;
	max-width: 480px;
	margin: 0 auto 30px;
	line-height: 1.6;
}

/* ---------- Search ---------- */
.error-404 .error-search {
	margin-bottom: 28px;
}

.error-404 .error-search form {
	display: flex;
	max-width: 420px;
	margin: 0 auto;
}

.error-404 .error-search input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid #cbd5e0;
	border-radius: 6px 0 0 6px;
	font-size: 15px;
	outline: none;
	transition: border-color 0.2s ease;
}

.error-404 .error-search input[type="search"]:focus {
	border-color: #38a169;
}

.error-404 .error-search button {
	padding: 12px 20px;
	background: #38a169;
	color: #fff;
	border: none;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.2s ease;
}

.error-404 .error-search button:hover {
	background: #2f855a;
}

/* ---------- Action Buttons ---------- */
.error-404 .error-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-bottom: 50px;
	flex-wrap: wrap;
}

.error-404 .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease;
}

.error-404 .btn-primary {
	background: #38a169;
	color: #fff;
}

.error-404 .btn-primary:hover {
	background: #2f855a;
	transform: translateY(-1px);
}

.error-404 .btn-secondary {
	background: transparent;
	border-color: #cbd5e0;
	color: #2d3748;
}

.error-404 .btn-secondary:hover {
	border-color: #38a169;
	color: #2f855a;
}

/* ---------- Popular Categories ---------- */
.error-404 .error-categories {
	margin-bottom: 50px;
}

.error-404 .error-categories h2 {
	font-size: 20px;
	margin-bottom: 18px;
	color: #1a202c;
}

.error-404 .error-categories .category-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.error-404 .error-categories .category-list a {
	display: inline-block;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	color: #2d3748;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.2s ease;
}

.error-404 .error-categories .category-list a:hover {
	background: #38a169;
	border-color: #38a169;
	color: #fff;
}

.error-404 .error-categories .cat-count {
	color: #a0aec0;
	font-size: 12px;
	margin-left: 3px;
}

.error-404 .error-categories .category-list a:hover .cat-count {
	color: #e6fffa;
}

/* ---------- Recent Posts ---------- */
.error-404 .recent-posts h2 {
	font-size: 20px;
	margin-bottom: 22px;
	color: #1a202c;
}

.error-404 .recent-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	text-align: left;
}

.error-404 .recent-post-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.error-404 .recent-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.error-404 .recent-post-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.error-404 .recent-post-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.error-404 .recent-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.error-404 .recent-post-card:hover .recent-post-thumb img {
	transform: scale(1.05);
}

.error-404 .recent-post-title {
	font-size: 15px;
	font-weight: 600;
	margin: 12px 14px 6px;
	color: #1a202c;
	line-height: 1.4;
}

.error-404 .recent-post-date {
	display: block;
	font-size: 12px;
	color: #a0aec0;
	margin: 0 14px 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.error-404 .error-header .error-code {
		font-size: 80px;
	}

	.error-404 .error-header .error-title {
		font-size: 22px;
	}

	.error-404 .error-search form {
		flex-direction: column;
	}

	.error-404 .error-search input[type="search"],
	.error-404 .error-search button {
		border-radius: 6px;
		width: 100%;
	}

	.error-404 .error-actions {
		flex-direction: column;
		align-items: center;
	}
}
/*==============================================================
END OF STYLESHEET
==============================================================*/