/* =========================================================
KIJABE ADVENTURES
PRIVACY / POLICY PAGE STYLES
File: css/policy.css
========================================================= */

.policy-page {
background: #f7faf8;
}

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

.policy-hero {
position: relative;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 70px 20px;
overflow: hidden;

background:
linear-gradient(
rgba(0, 55, 30, 0.82),
rgba(0, 30, 18, 0.88)
),
url("../images/hikes-near-nairobi.webp") center/cover no-repeat;
}

.policy-hero h1 {
max-width: 900px;
margin: 0 0 16px;
color: #fff;
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
text-shadow: 0 3px 15px rgba(0,0,0,.35);
}

.policy-hero p {
max-width: 750px;
margin: 0;
color: rgba(255,255,255,.94);
font-size: 1.08rem;
line-height: 1.7;
}

/* =========================================================
POLICY INTRO
========================================================= */

.policy-intro {
max-width: 900px;
margin: 0 auto;
padding: 65px 20px 30px;
text-align: center;
}

.policy-intro .policy-icon {
width: 72px;
height: 72px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e8f4eb;
color: #155d27;
font-size: 1.8rem;
}

.policy-intro h2 {
margin: 0 0 15px;
color: #155d27;
font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.policy-intro p {
margin: 0 auto 15px;
max-width: 820px;
color: #555;
line-height: 1.8;
}

/* =========================================================
LAST UPDATED
========================================================= */

.policy-meta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 15px;
border-radius: 30px;
background: #eef5f0;
color: #55705d;
font-size: .88rem;
}

/* =========================================================
POLICY LAYOUT
========================================================= */

.policy-container {
max-width: 1180px;
margin: 0 auto;
padding: 25px 20px 80px;

display: grid;
grid-template-columns: 270px 1fr;
gap: 35px;
align-items: start;
}

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

.policy-sidebar {
position: sticky;
top: 25px;
}

.policy-toc {
padding: 25px 20px;
background: #fff;
border: 1px solid rgba(21,93,39,.10);
border-radius: 16px;
box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

.policy-toc h3 {
margin: 0 0 15px;
color: #155d27;
font-size: 1rem;
}

.policy-toc ul {
margin: 0;
padding: 0;
list-style: none;
}

.policy-toc li {
margin: 0;
border-bottom: 1px solid #edf1ee;
}

.policy-toc li:last-child {
border-bottom: 0;
}

.policy-toc a {
display: block;
padding: 9px 3px;
color: #555;
font-size: .91rem;
line-height: 1.4;
text-decoration: none;
transition: color .2s ease, padding-left .2s ease;
}

.policy-toc a:hover {
color: #155d27;
padding-left: 6px;
}

/* =========================================================
POLICY CONTENT
========================================================= */

.policy-content {
min-width: 0;
}

.policy-card {
margin-bottom: 22px;
padding: 34px 36px;
background: #fff;
border: 1px solid rgba(21,93,39,.08);
border-radius: 18px;
box-shadow: 0 7px 28px rgba(0,0,0,.055);
}

.policy-card:last-child {
margin-bottom: 0;
}

.policy-card h2 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
color: #155d27;
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
line-height: 1.3;
}

.policy-card h2 i {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #eaf5ed;
color: #155d27;
font-size: 1rem;
}

.policy-card h3 {
margin: 25px 0 9px;
color: #333;
font-size: 1.1rem;
}

.policy-card h3:first-of-type {
margin-top: 5px;
}

.policy-card p {
margin: 0 0 15px;
color: #555;
font-size: 1rem;
line-height: 1.8;
}

.policy-card p:last-child {
margin-bottom: 0;
}

.policy-card ul {
margin: 10px 0 18px 20px;
padding: 0;
}

.policy-card li {
margin-bottom: 9px;
color: #555;
line-height: 1.7;
}

.policy-card strong {
color: #333;
}

/* =========================================================
HIGHLIGHT BOX
========================================================= */

.policy-highlight {
margin: 20px 0;
padding: 20px 22px;
border-left: 4px solid #155d27;
border-radius: 8px;
background: #f1f8f3;
}

.policy-highlight p {
margin: 0;
}

/* =========================================================
CONTACT CARD
========================================================= */

.policy-contact {
background:
linear-gradient(
135deg,
#155d27,
#0b4320
);
color: #fff;
}

.policy-contact h2,
.policy-contact p,
.policy-contact strong {
color: #fff;
}

.policy-contact h2 i {
background: rgba(255,255,255,.14);
color: #fff;
}

.policy-contact a {
color: #fff;
font-weight: 700;
}

.policy-contact-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 22px;
}

.policy-contact-item {
padding: 17px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 12px;
background: rgba(255,255,255,.07);
}

.policy-contact-item i {
margin-right: 8px;
}

/* =========================================================
POLICY CTA
========================================================= */

.policy-cta {
max-width: 900px;
margin: 0 auto;
padding: 0 20px 80px;
text-align: center;
}

.policy-cta h2 {
margin-bottom: 12px;
color: #155d27;
font-size: 2rem;
}

.policy-cta p {
max-width: 700px;
margin: 0 auto 25px;
color: #666;
line-height: 1.7;
}

.policy-cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 27px;
border-radius: 50px;
background: #155d27;
color: #fff;
text-decoration: none;
font-weight: 700;
transition: transform .2s ease, background .2s ease;
}

.policy-cta-button:hover {
transform: translateY(-3px);
background: #0d4720;
}

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

@media (max-width: 900px) {

.policy-container {
grid-template-columns: 1fr;
}

.policy-sidebar {
position: static;
}

.policy-toc {
max-width: 700px;
margin: 0 auto;
}

.policy-toc ul {
columns: 2;
column-gap: 25px;
}

.policy-toc li {
break-inside: avoid;
}
}

@media (max-width: 650px) {

.policy-hero {
min-height: 320px;
padding: 60px 18px;
}

.policy-intro {
padding: 50px 18px 25px;
}

.policy-container {
padding: 20px 15px 60px;
gap: 20px;
}

.policy-card {
padding: 25px 21px;
border-radius: 15px;
}

.policy-card h2 {
align-items: flex-start;
}

.policy-toc ul {
columns: 1;
}

.policy-contact-details {
grid-template-columns: 1fr;
}

.policy-cta {
padding: 0 18px 60px;
}
}