/* ==========================================
   CHAOS GARDENING JOURNAL
   STYLE.CSS
   PART 1
========================================== */

/* ==========================================
   CSS VARIABLES
========================================== */

:root {

--color-primary: #59774a;
--color-primary-dark: #456039;

--color-accent: #d6b98c;

--color-bg: #faf8f4;
--color-bg-alt: #f3eee7;

--color-white: #ffffff;

--color-text: #2d2d2d;
--color-text-light: #666666;

--color-border: #e8e1d8;

--shadow-sm: 0 3px 12px rgba(0,0,0,.05);

--shadow-md: 0 10px 30px rgba(0,0,0,.08);

--shadow-lg: 0 18px 45px rgba(0,0,0,.12);

--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;

--container-width: 1280px;

--transition:
all .25s ease;

}

/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after {

margin: 0;
padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: "Inter", sans-serif;

background: var(--color-bg);

color: var(--color-text);

line-height: 1.8;

font-size: 16px;

overflow-x: hidden;

}

/* ==========================================
   IMAGES
========================================== */

img {

max-width: 100%;

display: block;

height: auto;

}

/* ==========================================
   LINKS
========================================== */

a {

text-decoration: none;

color: inherit;

transition: var(--transition);

}

a:hover {

opacity: .85;

}

/* ==========================================
   LISTS
========================================== */

ul {

list-style: none;

}

/* ==========================================
   TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

font-family:
"Cormorant Garamond",
serif;

font-weight: 600;

line-height: 1.15;

color: var(--color-text);

}

h1 {

font-size: clamp(
2.8rem,
6vw,
5rem
);

}

h2 {

font-size: clamp(
2rem,
4vw,
3.6rem
);

margin-bottom: 1rem;

}

h3 {

font-size: clamp(
1.4rem,
2vw,
2rem
);

}

p {

margin-bottom: 1rem;

color: var(--color-text-light);

}

.section-eyebrow {

display: inline-block;

letter-spacing: 2px;

font-size: .75rem;

font-weight: 700;

text-transform: uppercase;

color: var(--color-primary);

margin-bottom: 1rem;

}

/* ==========================================
   CONTAINER
========================================== */

.container {

width: min(
92%,
var(--container-width)
);

margin-inline: auto;

}

/* ==========================================
   GLOBAL SECTION SPACING
========================================== */

section {

padding: 6rem 0;

}

/* ==========================================
   SECTION HEADER
========================================== */

.section-header {

text-align: center;

max-width: 760px;

margin: 0 auto 4rem;

}

/* ==========================================
   BUTTONS
========================================== */

.primary-btn {

display: inline-flex;

align-items: center;

justify-content: center;

padding:
1rem
2rem;

background:
var(--color-primary);

color:
white;

border-radius:
999px;

font-weight:
600;

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.primary-btn:hover {

background:
var(--color-primary-dark);

transform:
translateY(-2px);

opacity: 1;

}

.secondary-btn {

display: inline-flex;

align-items: center;

justify-content: center;

padding:
1rem
2rem;

border:
2px solid white;

color:
white;

border-radius:
999px;

font-weight:
600;

}

.secondary-btn:hover {

background:
rgba(255,255,255,.15);

opacity: 1;

}

/* ==========================================
   ANNOUNCEMENT BAR
========================================== */

.announcement-bar {

background:
var(--color-primary);

color:
white;

text-align:
center;

padding:
.75rem
1rem;

font-size:
.85rem;

font-weight:
500;

}

/* ==========================================
   HEADER
========================================== */

.site-header {

position: sticky;

top: 0;

z-index: 999;

background: rgba(
255,
255,
255,
0.95
);

backdrop-filter:
blur(10px);

border-bottom:
1px solid
var(--color-border);

}

.header-inner {

display: flex;

align-items: center;

justify-content: space-between;

gap: 2rem;

padding:
1.25rem
0;

}

/* ==========================================
   LOGO
========================================== */

.logo {

font-family:
"Cormorant Garamond",
serif;

font-size:
2rem;

font-weight:
700;

letter-spacing:
1px;

color:
var(--color-primary);

}

/* ==========================================
   NAVIGATION
========================================== */

.main-nav ul {

display: flex;

align-items: center;

gap: 2rem;

}

.main-nav a {

font-size:
.95rem;

font-weight:
500;

position:
relative;

}

.main-nav a::after {

content: "";

position: absolute;

left: 0;

bottom: -6px;

width: 0;

height: 2px;

background:
var(--color-primary);

transition:
var(--transition);

}

.main-nav a:hover::after {

width: 100%;

}

.nav-button {

padding:
.85rem
1.5rem;

border-radius:
999px;

background:
var(--color-primary);

color:
white;

font-weight:
600;

}

/* ==========================================
   HERO
========================================== */

.hero {

position: relative;

min-height: 760px;

display: flex;

align-items: center;

background:

linear-gradient(
rgba(20,20,20,.35),
rgba(20,20,20,.35)
),

url("images/hero-garden.jpg");

background-size: cover;

background-position: center;

color: white;

overflow: hidden;

}

.hero-overlay {

position: absolute;

inset: 0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.45),
rgba(0,0,0,.1)
);

}

.hero-content {

position: relative;

z-index: 5;

max-width: 720px;

padding:
3rem 0;

}

.hero-eyebrow {

color:
rgba(255,255,255,.9);

letter-spacing:
3px;

text-transform:
uppercase;

font-size:
.8rem;

font-weight:
700;

margin-bottom:
1rem;

}

.hero h1 {

color:
white;

margin-bottom:
1.5rem;

}

.hero-text {

font-size:
1.15rem;

max-width:
620px;

color:
rgba(255,255,255,.92);

margin-bottom:
2rem;

}

.hero-buttons {

display: flex;

flex-wrap: wrap;

gap: 1rem;

}

/* ==========================================
   QUICK TOPICS
========================================== */

.quick-topics {

background:
var(--color-white);

padding:
0;

position:
relative;

margin-top:
-60px;

z-index:
50;

}

.topics-grid {

display:
grid;

grid-template-columns:
repeat(6,1fr);

gap:
1rem;

}

.topic-card {

background:
white;

padding:
2rem
1rem;

border-radius:
var(--radius-md);

text-align:
center;

box-shadow:
var(--shadow-sm);

font-weight:
600;

transition:
var(--transition);

}

.topic-card span {

display:
block;

font-size:
2rem;

margin-bottom:
.75rem;

}

.topic-card:hover {

transform:
translateY(-6px);

box-shadow:
var(--shadow-md);

opacity:
1;

}

/* ==========================================
   FEATURED GUIDES
========================================== */

.featured-guides {

background:
var(--color-bg);

}

.guide-grid {

display:
grid;

grid-template-columns:
repeat(3,1fr);

gap:
2rem;

}

.guide-card {

background:
white;

border-radius:
var(--radius-md);

overflow:
hidden;

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.guide-card:hover {

transform:
translateY(-8px);

box-shadow:
var(--shadow-lg);

}

.guide-image {

height:
280px;

background:
linear-gradient(
135deg,
#8fae7c,
#c8d8bb
);

}

.guide-content {

padding:
2rem;

}

.guide-category {

display:
inline-block;

font-size:
.75rem;

font-weight:
700;

letter-spacing:
2px;

text-transform:
uppercase;

color:
var(--color-primary);

margin-bottom:
1rem;

}

.guide-card h3 {

margin-bottom:
1rem;

}

.guide-card p {

margin-bottom:
1.5rem;

}

.guide-card a {

font-weight:
600;

color:
var(--color-primary);

}

/* ==========================================
   START HERE SECTION
========================================== */

.start-here-section {

background:
white;

}

.two-column {

display:
grid;

grid-template-columns:
1.4fr 1fr;

gap:
4rem;

align-items:
center;

}

.checklist {

display:
grid;

gap:
1rem;

margin-top:
2rem;

}

.checklist li {

position:
relative;

padding-left:
2rem;

font-weight:
500;

}

.checklist li::before {

content:
"✓";

position:
absolute;

left:
0;

top:
0;

color:
var(--color-primary);

font-weight:
700;

}

.feature-box {

background:
var(--color-bg-alt);

padding:
3rem;

border-radius:
var(--radius-lg);

box-shadow:
var(--shadow-sm);

}

.feature-box h3 {

margin-bottom:
1rem;

}

.feature-box p {

margin-bottom:
2rem;

}

/* ==========================================
   SEASONAL HUB
========================================== */

.seasonal-hub {

background:
var(--color-bg-alt);

}

.season-grid {

display:
grid;

grid-template-columns:
repeat(4,1fr);

gap:
2rem;

}

.season-card {

background:
white;

padding:
2rem;

border-radius:
var(--radius-md);

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.season-card:hover {

transform:
translateY(-6px);

box-shadow:
var(--shadow-md);

}

.season-label {

display:
inline-block;

padding:
.5rem 1rem;

border-radius:
999px;

background:
var(--color-primary);

color:
white;

font-size:
.75rem;

font-weight:
700;

margin-bottom:
1rem;

}

.season-card h3 {

margin-bottom:
1rem;

}

.season-card p {

margin-bottom:
1.5rem;

}

/* ==========================================
   POPULAR ARTICLES
========================================== */

.popular-articles {

background:
white;

}

.article-grid {

display:
grid;

grid-template-columns:
repeat(3,1fr);

gap:
2rem;

}

.article-card {

background:
white;

border-radius:
var(--radius-md);

overflow:
hidden;

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.article-card:hover {

transform:
translateY(-8px);

box-shadow:
var(--shadow-lg);

}

.article-image {

height:
260px;

background:
linear-gradient(
135deg,
#d6b98c,
#f0dfc4
);

}

.article-content {

padding:
2rem;

}

.article-category {

display:
inline-block;

margin-bottom:
1rem;

font-size:
.75rem;

font-weight:
700;

letter-spacing:
2px;

text-transform:
uppercase;

color:
var(--color-primary);

}

.article-card h3 {

margin-bottom:
1rem;

}

.article-card p {

margin-bottom:
1.5rem;

}

.article-card a {

font-weight:
600;

color:
var(--color-primary);

}

/* ==========================================
   PLANT LIBRARY
========================================== */

.plant-library-preview {

background:
var(--color-bg);

}

.plant-grid {

display:
grid;

grid-template-columns:
repeat(3,1fr);

gap:
2rem;

}

.plant-card {

background:
white;

padding:
1.5rem;

border-radius:
var(--radius-md);

text-align:
center;

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.plant-card:hover {

transform:
translateY(-6px);

box-shadow:
var(--shadow-md);

}

.plant-image {

height:
220px;

border-radius:
var(--radius-sm);

background:
linear-gradient(
135deg,
#a9c196,
#dce7d5
);

margin-bottom:
1.5rem;

}

.plant-card h3 {

margin-bottom:
.5rem;

}

.center-button {

text-align:
center;

margin-top:
3rem;

}

/* ==========================================
   POLLINATOR HUB
========================================== */

.pollinator-hub {

background:
white;

}

/* ==========================================
   WILDFLOWER SHOWCASE
========================================== */

.wildflower-showcase {

background:
var(--color-bg-alt);

}

.wildflower-grid {

display:
grid;

grid-template-columns:
repeat(3,1fr);

gap:
1.5rem;

}

.wildflower-tile {

height:
320px;

border-radius:
var(--radius-md);

background:
linear-gradient(
135deg,
#b5cb91,
#e4efd4
);

transition:
var(--transition);

}

.wildflower-tile:hover {

transform:
scale(1.03);

}

/* ==========================================
   RESOURCE SECTION
========================================== */

.resource-section {

background:
white;

}

.resource-grid {

display:
grid;

grid-template-columns:
repeat(4,1fr);

gap:
1.5rem;

}

.resource-card {

display:
flex;

align-items:
center;

justify-content:
center;

text-align:
center;

padding:
2rem;

background:
var(--color-bg-alt);

border-radius:
var(--radius-md);

font-weight:
600;

min-height:
140px;

transition:
var(--transition);

}

.resource-card:hover {

background:
var(--color-primary);

color:
white;

transform:
translateY(-5px);

opacity:
1;

}

/* ==========================================
   NEWSLETTER SECTION
========================================== */

.newsletter-section {

background:
linear-gradient(
135deg,
#f0ece5,
#e5ddd0
);

}

.newsletter-wrapper {

max-width:
900px;

margin:
0 auto;

text-align:
center;

background:
white;

padding:
4rem;

border-radius:
var(--radius-lg);

box-shadow:
var(--shadow-md);

}

.newsletter-text {

max-width:
650px;

margin:
0 auto 2rem;

}

.newsletter-form {

display:
flex;

gap:
1rem;

justify-content:
center;

align-items:
center;

margin:
2rem 0;

}

.newsletter-form input {

flex:
1;

max-width:
500px;

padding:
1rem 1.25rem;

border:
1px solid var(--color-border);

border-radius:
999px;

font-size:
1rem;

outline:
none;

}

.newsletter-form input:focus {

border-color:
var(--color-primary);

}

.newsletter-form button {

padding:
1rem 2rem;

border:
none;

border-radius:
999px;

background:
var(--color-primary);

color:
white;

font-weight:
600;

cursor:
pointer;

transition:
var(--transition);

}

.newsletter-form button:hover {

background:
var(--color-primary-dark);

}

.newsletter-disclaimer {

font-size:
.85rem;

opacity:
.8;

}

/* ==========================================
   FAQ SECTION
========================================== */

.faq-section {

background:
var(--color-bg);

}

.faq-grid {

max-width:
1000px;

margin:
0 auto;

display:
grid;

gap:
1rem;

}

.faq-item {

background:
white;

border-radius:
var(--radius-md);

padding:
1.5rem;

box-shadow:
var(--shadow-sm);

}

.faq-item summary {

cursor:
pointer;

font-weight:
600;

font-size:
1.1rem;

list-style:
none;

}

.faq-item summary::-webkit-details-marker {

display:
none;

}

.faq-item p {

margin-top:
1rem;

margin-bottom:
0;

}

/* ==========================================
   FOOTER
========================================== */

.site-footer {

background:
#1f241d;

color:
rgba(255,255,255,.9);

padding:
6rem 0 2rem;

}

.footer-grid {

display:
grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:
3rem;

margin-bottom:
4rem;

}

.footer-column h3,
.footer-column h4 {

color:
white;

margin-bottom:
1.25rem;

}

.footer-column p {

color:
rgba(255,255,255,.7);

}

.footer-column ul {

display:
grid;

gap:
.75rem;

}

.footer-column a {

color:
rgba(255,255,255,.8);

}

.footer-column a:hover {

color:
white;

opacity:
1;

}

.footer-bottom {

border-top:
1px solid rgba(255,255,255,.12);

padding-top:
2rem;

text-align:
center;

}

.footer-bottom p {

margin:
0;

color:
rgba(255,255,255,.6);

}

/* ==========================================
   UTILITY CLASSES
========================================== */

.text-center {

text-align:
center;

}

.mb-0 {

margin-bottom:
0;

}

.mb-1 {

margin-bottom:
1rem;

}

.mb-2 {

margin-bottom:
2rem;

}

.mb-3 {

margin-bottom:
3rem;

}

/* ==========================================
   LARGE TABLET
========================================== */

@media (max-width: 1200px) {

.topics-grid {

grid-template-columns:
repeat(3,1fr);

}

.guide-grid,
.article-grid {

grid-template-columns:
repeat(2,1fr);

}

.plant-grid {

grid-template-columns:
repeat(2,1fr);

}

.season-grid {

grid-template-columns:
repeat(2,1fr);

}

.resource-grid {

grid-template-columns:
repeat(2,1fr);

}

.footer-grid {

grid-template-columns:
repeat(2,1fr);

}

}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 992px) {

.header-inner {

flex-wrap:
wrap;

justify-content:
center;

}

.main-nav ul {

flex-wrap:
wrap;

justify-content:
center;

gap:
1rem;

}

.two-column {

grid-template-columns:
1fr;

gap:
2rem;

}

.wildflower-grid {

grid-template-columns:
repeat(2,1fr);

}

.hero {

min-height:
650px;

}

.hero-content {

text-align:
center;

margin:
0 auto;

}

.hero-buttons {

justify-content:
center;

}

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

section {

padding:
4rem 0;

}

.logo {

font-size:
1.6rem;

text-align:
center;

}

.main-nav {

width:
100%;

}

.main-nav ul {

flex-direction:
column;

gap:
.75rem;

}

.nav-button {

display:
none;

}

.hero {

min-height:
560px;

padding:
2rem 0;

}

.hero h1 {

font-size:
2.5rem;

}

.hero-text {

font-size:
1rem;

}

.topics-grid,
.guide-grid,
.season-grid,
.article-grid,
.plant-grid,
.wildflower-grid,
.resource-grid,
.footer-grid {

grid-template-columns:
1fr;

}

.newsletter-wrapper {

padding:
2rem;

}

.newsletter-form {

flex-direction:
column;

}

.newsletter-form input {

max-width:
100%;

width:
100%;

}

.newsletter-form button {

width:
100%;

}

.feature-box {

padding:
2rem;

}

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

.container {

width:
94%;

}

.hero h1 {

font-size:
2rem;

}

.section-header {

margin-bottom:
2.5rem;

}

.guide-content,
.article-content {

padding:
1.5rem;

}

.plant-card {

padding:
1rem;

}

}

/* ==========================================
   ACCESSIBILITY
========================================== */

a:focus,
button:focus,
input:focus {

outline:
3px solid rgba(89,119,74,.25);

outline-offset:
2px;

}

html {

scroll-padding-top:
120px;

}


/* ==========================================
   BLOG ARCHIVE PAGE
========================================== */

.archive-hero {

padding:
8rem 0;

background:
linear-gradient(
135deg,
#eef3ea,
#f8f5f0
);

text-align:
center;

}

.archive-hero-content {

max-width:
850px;

margin:
0 auto;

}

.archive-hero p {

font-size:
1.1rem;

max-width:
700px;

margin:
1rem auto 0;

}

.featured-archive-post {

background:
white;

}

.featured-post-grid {

display:
grid;

grid-template-columns:
1.2fr 1fr;

gap:
3rem;

align-items:
center;

}

.featured-post-image {

height:
520px;

border-radius:
var(--radius-lg);

background:
linear-gradient(
135deg,
#a9c196,
#dce7d5
);

}

.featured-post-content h2 {

margin:
1rem 0 1.5rem;

}

.featured-post-content p {

margin-bottom:
2rem;

}

.category-nav-section {

background:
var(--color-bg);

padding:
3rem 0;

}

.archive-categories {

display:
flex;

flex-wrap:
wrap;

justify-content:
center;

gap:
1rem;

}

.archive-categories a {

padding:
.85rem 1.4rem;

background:
white;

border-radius:
999px;

font-weight:
600;

box-shadow:
var(--shadow-sm);

transition:
var(--transition);

}

.archive-categories a:hover {

background:
var(--color-primary);

color:
white;

opacity:
1;

}

.popular-guides-section {

background:
var(--color-bg-alt);

}

.trending-topics {

background:
white;

}

/* Blog Responsive */

@media (max-width: 992px) {

.featured-post-grid {

grid-template-columns:
1fr;

}

.featured-post-image {

height:
380px;

}

}

@media (max-width: 768px) {

.archive-hero {

padding:
5rem 0;

}

.featured-post-image {

height:
280px;

}

.archive-categories {

justify-content:
flex-start;

}

}

/* ==========================================
   SINGLE ARTICLE PAGE
========================================== */

.article-hero {

padding: 6rem 0 3rem;

background:
linear-gradient(
135deg,
#eef3ea,
#f8f5f0
);

}

.breadcrumbs {

display: flex;

gap: .75rem;

flex-wrap: wrap;

margin-bottom: 2rem;

font-size: .9rem;

color: var(--color-text-light);

}

.article-header {

max-width: 900px;

}

.article-subtitle {

font-size: 1.15rem;

max-width: 700px;

}

.article-meta {

display: flex;

gap: 1rem;

flex-wrap: wrap;

margin-top: 1.5rem;

font-size: .9rem;

color: var(--color-text-light);

}

.article-category-badge {

display: inline-block;

padding: .5rem 1rem;

border-radius: 999px;

background: var(--color-primary);

color: white;

font-size: .75rem;

font-weight: 700;

letter-spacing: 1px;

margin-bottom: 1rem;

}

.featured-image-placeholder {

height: 550px;

border-radius: var(--radius-lg);

background:
linear-gradient(
135deg,
#a9c196,
#dce7d5
);

}

.article-layout {

padding-top: 4rem;

}

.article-grid {

display: grid;

grid-template-columns: 320px 1fr;

gap: 4rem;

align-items: start;

}

.article-sidebar {

position: sticky;

top: 140px;

}

.toc-box,
.author-box {

background: white;

padding: 2rem;

border-radius: var(--radius-md);

box-shadow: var(--shadow-sm);

margin-bottom: 2rem;

}

.toc-box ul {

display: grid;

gap: .75rem;

margin-top: 1rem;

}

.article-content-area {

max-width: 800px;

}

.article-content-area h2 {

margin-top: 3rem;

margin-bottom: 1rem;

}

.article-content-area h3 {

margin-top: 2rem;

margin-bottom: 1rem;

}

.intro-paragraph {

font-size: 1.2rem;

font-weight: 500;

}

.article-list {

padding-left: 1.5rem;

list-style: disc;

margin: 1rem 0 2rem;

}

.callout-box {

background: var(--color-bg-alt);

padding: 2rem;

border-radius: var(--radius-md);

margin: 2rem 0;

}

.article-quote {

font-family: "Cormorant Garamond", serif;

font-size: 2rem;

line-height: 1.4;

padding: 2rem;

margin: 2rem 0;

border-left: 4px solid var(--color-primary);

background: white;

border-radius: var(--radius-sm);

}

.inline-image-placeholder {

height: 350px;

border-radius: var(--radius-md);

background:
linear-gradient(
135deg,
#d6b98c,
#f0dfc4
);

margin: 2rem 0;

}

.related-content-box {

background: white;

padding: 2rem;

border-radius: var(--radius-md);

box-shadow: var(--shadow-sm);

margin: 2rem 0;

}

.plant-recommendation-grid {

display: grid;

grid-template-columns: repeat(2,1fr);

gap: 1.5rem;

margin: 2rem 0;

}

.plant-recommendation {

background: white;

padding: 1.5rem;

border-radius: var(--radius-md);

box-shadow: var(--shadow-sm);

}

.author-section {

padding-top: 2rem;

}

.author-card {

display: flex;

gap: 2rem;

align-items: center;

background: white;

padding: 2rem;

border-radius: var(--radius-lg);

box-shadow: var(--shadow-sm);

}

.author-avatar {

width: 120px;

height: 120px;

border-radius: 50%;

background:
linear-gradient(
135deg,
#a9c196,
#dce7d5
);

flex-shrink: 0;

}

.author-links {

display: flex;

gap: 1rem;

margin-top: 1rem;

}

.article-navigation {

padding-top: 2rem;

}

.article-nav-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 2rem;

}

.article-nav-card {

background: white;

padding: 2rem;

border-radius: var(--radius-md);

box-shadow: var(--shadow-sm);

}

.nav-label {

display: block;

font-size: .85rem;

margin-bottom: .75rem;

color: var(--color-primary);

font-weight: 700;

}

@media (max-width: 992px) {

.article-grid {

grid-template-columns: 1fr;

}

.article-sidebar {

position: static;

}

}

@media (max-width: 768px) {

.plant-recommendation-grid,
.article-nav-grid {

grid-template-columns: 1fr;

}

.author-card {

flex-direction: column;

text-align: center;

}

.featured-image-placeholder {

height: 300px;

}

}

/* ==========================================
   PLANT LIBRARY PAGE
========================================== */

.library-hero {

padding: 7rem 0;

text-align: center;

background:
linear-gradient(
135deg,
#eef3ea,
#f8f5f0
);

}

.library-hero-content {

max-width: 850px;

margin: 0 auto;

}

.library-search {

padding-top: 0;

}

.search-card {

background: white;

padding: 3rem;

border-radius: var(--radius-lg);

box-shadow: var(--shadow-md);

max-width: 900px;

margin: 0 auto;

text-align: center;

}

.plant-search {

width: 100%;

max-width: 600px;

padding: 1rem 1.25rem;

margin-top: 1.5rem;

border: 1px solid var(--color-border);

border-radius: 999px;

font-size: 1rem;

}

.plant-library-grid {

display: grid;

grid-template-columns: repeat(4,1fr);

gap: 2rem;

}

.plant-collections {

background: var(--color-bg-alt);

}

.plant-library-feature {

background: white;

}

.plant-directory {

background: var(--color-bg);

}

.alphabet-nav {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: .75rem;

margin-bottom: 3rem;

}

.alphabet-nav a {

width: 42px;

height: 42px;

display: flex;

align-items: center;

justify-content: center;

background: white;

border-radius: 50%;

box-shadow: var(--shadow-sm);

font-weight: 600;

}

.directory-columns {

display: grid;

grid-template-columns: repeat(3,1fr);

gap: 3rem;

}

.directory-columns ul {

display: grid;

gap: .9rem;

}

.directory-columns a {

color: var(--color-primary);

font-weight: 500;

}

.directory-columns a:hover {

text-decoration: underline;

}

@media (max-width: 1200px) {

.plant-library-grid {

grid-template-columns: repeat(3,1fr);

}

}

@media (max-width: 992px) {

.plant-library-grid {

grid-template-columns: repeat(2,1fr);

}

.directory-columns {

grid-template-columns: 1fr;

}

}

@media (max-width: 768px) {

.plant-library-grid {

grid-template-columns: 1fr;

}

.search-card {

padding: 2rem;

}

}

/* ==========================================
   PLANT PROFILE PAGE
========================================== */

.plant-profile-hero {

padding: 6rem 0;

background:
linear-gradient(
135deg,
#eef3ea,
#f8f5f0
);

}

.plant-profile-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

margin-top: 2rem;

}

.plant-profile-image {

height: 600px;

border-radius: var(--radius-lg);

background:
linear-gradient(
135deg,
#a9c196,
#dce7d5
);

}

.latin-name {

font-style: italic;

font-size: 1.1rem;

margin-bottom: 1rem;

}

.plant-intro {

font-size: 1.1rem;

max-width: 600px;

}

.plant-tags {

display: flex;

flex-wrap: wrap;

gap: .75rem;

margin-top: 2rem;

}

.plant-tags span {

padding: .65rem 1rem;

background: white;

border-radius: 999px;

box-shadow: var(--shadow-sm);

font-size: .9rem;

font-weight: 600;

}

.plant-stats-section {

background: white;

padding-top: 0;

}

.plant-stats-grid {

display: grid;

grid-template-columns: repeat(6,1fr);

gap: 1rem;

}

.plant-stat {

background: var(--color-bg-alt);

padding: 1.5rem;

border-radius: var(--radius-md);

text-align: center;

}

.plant-stat h4 {

margin-bottom: .5rem;

font-size: 1rem;

}

.plant-stat p {

margin: 0;

font-weight: 600;

color: var(--color-primary);

}

.plant-timeline {

display: grid;

grid-template-columns: repeat(12,1fr);

gap: .5rem;

margin: 2rem 0;

}

.timeline-month {

padding: .75rem;

text-align: center;

background: #ececec;

border-radius: var(--radius-sm);

font-size: .85rem;

font-weight: 600;

}

.timeline-month.bloom {

background: var(--color-primary);

color: white;

}

.related-plants-section {

background: var(--color-bg-alt);

}

@media (max-width: 1200px) {

.plant-stats-grid {

grid-template-columns: repeat(3,1fr);

}

}

@media (max-width: 992px) {

.plant-profile-grid {

grid-template-columns: 1fr;

}

.plant-profile-image {

height: 420px;

}

}

@media (max-width: 768px) {

.plant-stats-grid {

grid-template-columns: repeat(2,1fr);

}

.plant-timeline {

grid-template-columns: repeat(4,1fr);

}

}

/* ==========================================
   CATEGORY PAGE
========================================== */

.category-hero {

padding: 7rem 0;

background:
linear-gradient(
135deg,
#eef3ea,
#f8f5f0
);

}

.category-hero-content {

max-width: 850px;

}

.category-intro {

padding-top: 0;

}

.category-intro-card {

background: white;

padding: 3rem;

border-radius: var(--radius-lg);

box-shadow: var(--shadow-md);

max-width: 1000px;

margin: 0 auto;

}

.category-posts {

background: var(--color-bg);

}

.category-topics {

background: var(--color-bg-alt);

}

.category-linking {

background: white;

}

.related-categories-section {

background: var(--color-bg);

}

.posts-grid {

display: grid;

grid-template-columns: repeat(3,1fr);

gap: 2rem;

}

@media (max-width: 1200px) {

.posts-grid {

grid-template-columns: repeat(2,1fr);

}

}

@media (max-width: 768px) {

.posts-grid {

grid-template-columns: 1fr;

}

.category-intro-card {

padding: 2rem;

}

}
/* ==========================================
   END OF FILE
========================================== */