/* =========================================================
KIJABE ADVENTURES
TERMS & CONDITIONS PAGE
File: css/terms.css
========================================================= */

.terms-page {
background: #f7faf8;
}

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

.terms-hero {
position: relative;
min-height: 380px;
padding: 75px 20px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

text-align: center;
overflow: hidden;

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

.terms-hero h1 {
max-width: 900px;
margin: 0 0 18px;

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);
}

.terms-hero > p {
max-width: 760px;
margin: 0 auto;

color: rgba(255,255,255,.94);
font-size: 1.08rem;
line-height: 1.7;
}

.terms-highlight {
display: inline-block;

margin-top: 25px !important;
padding: 12px 20px;

border: 1px solid rgba(255,255,255,.2);
border-radius: 50px;

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

color: #fff !important;
font-size: .95rem !important;
}

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

.terms-intro {
max-width: 900px;
margin: 0 auto;

padding: 65px 20px 30px;

text-align: center;
}

.terms-intro-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;
}

.terms-intro h2 {
margin: 0 0 15px;

color: #155d27;
font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.terms-intro p {
max-width: 820px;
margin: 0 auto 15px;

color: #555;
line-height: 1.8;
}

.terms-date {
display: inline-flex;
align-items: center;
gap: 8px;

margin-top: 10px;
padding: 8px 15px;

border-radius: 30px;

background: #eef5f0;
color: #55705d;

font-size: .88rem;
}

/* =========================================================
QUICK INFORMATION CARDS
========================================================= */

.terms-quick-info {
max-width: 1180px;
margin: 0 auto;

padding: 15px 20px 35px;

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.terms-info-card {
padding: 24px;

background: #fff;

border: 1px solid rgba(21,93,39,.08);
border-radius: 16px;

box-shadow: 0 7px 25px rgba(0,0,0,.05);

text-align: center;
}

.terms-info-card i {
margin-bottom: 12px;

color: #155d27;
font-size: 1.7rem;
}

.terms-info-card h3 {
margin: 0 0 7px;

color: #333;
font-size: 1.05rem;
}

.terms-info-card p {
margin: 0;

color: #666;
font-size: .92rem;
line-height: 1.6;
}

/* =========================================================
MAIN CONTENT
========================================================= */

.terms-container {
max-width: 1180px;
margin: 0 auto;

padding: 25px 20px 80px;

display: grid;
grid-template-columns: 270px 1fr;
gap: 35px;

align-items: start;
}

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

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

.terms-toc {
padding: 25px 20px;

background: #fff;

border: 1px solid rgba(21,93,39,.1);
border-radius: 16px;

box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

.terms-toc h3 {
margin: 0 0 15px;

color: #155d27;
font-size: 1rem;
}

.terms-toc ul {
margin: 0;
padding: 0;

list-style: none;
}

.terms-toc li {
border-bottom: 1px solid #edf1ee;
}

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

.terms-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;
}

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

/* =========================================================
TERMS CONTENT
========================================================= */

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

.terms-section {
scroll-margin-top: 25px;

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);
}

.terms-section:last-child {
margin-bottom: 0;
}

.terms-section 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;
}

.terms-section h2 i {
flex: 0 0 auto;

width: 40px;
height: 40px;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: #eaf5ed;
color: #155d27;

font-size: 1rem;
}

.terms-section h3 {
margin: 25px 0 9px;

color: #333;
font-size: 1.1rem;
}

.terms-section h3:first-of-type {
margin-top: 5px;
}

.terms-section p {
margin: 0 0 15px;

color: #555;

font-size: 1rem;
line-height: 1.8;
}

.terms-section p:last-child {
margin-bottom: 0;
}

.terms-section ul {
margin: 10px 0 18px 20px;
padding: 0;
}

.terms-section li {
margin-bottom: 9px;

color: #555;

line-height: 1.7;
}

.terms-section strong {
color: #333;
}

/* =========================================================
NOTICE BOX
========================================================= */

.terms-notice {
margin: 20px 0;
padding: 20px 22px;

border-left: 4px solid #155d27;
border-radius: 8px;

background: #f1f8f3;
}

.terms-notice p {
margin: 0;
}

/* =========================================================
IMPORTANT NOTICE
========================================================= */

.terms-warning {
margin: 20px 0;
padding: 20px 22px;

border-left: 4px solid #c68a00;
border-radius: 8px;

background: #fff8e7;
}

.terms-warning p {
margin: 0;
}

/* =========================================================
BOOKING / PAYMENT HIGHLIGHT
========================================================= */

.booking-payment-box {
margin: 20px 0;
padding: 24px;

border-radius: 14px;

background:
linear-gradient(
135deg,
#f1f8f3,
#e7f3ea
);
}

.booking-payment-box strong {
color: #155d27;
}

.mpesa-number {
display: inline-block;

margin: 10px 0;

padding: 9px 16px;

border-radius: 8px;

background: #155d27;
color: #fff;

font-size: 1.1rem;
font-weight: 800;
letter-spacing: .5px;
}

/* =========================================================
CONTACT SECTION
========================================================= */

.terms-contact {
background:
linear-gradient(
135deg,
#155d27,
#0b4320
);

color: #fff;
}

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

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

.terms-contact-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;

margin-top: 22px;
}

.terms-contact-item {
padding: 17px;

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

background: rgba(255,255,255,.07);
}

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

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

/* =========================================================
BOTTOM CTA
========================================================= */

.terms-cta {
max-width: 900px;
margin: 0 auto;

padding: 0 20px 80px;

text-align: center;
}

.terms-cta h2 {
margin-bottom: 12px;

color: #155d27;
font-size: 2rem;
}

.terms-cta p {
max-width: 700px;
margin: 0 auto 25px;

color: #666;
line-height: 1.7;
}

.terms-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;
}

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

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

@media (max-width: 900px) {

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

.terms-sidebar {
position: static;
}

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

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

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

.terms-quick-info {
grid-template-columns: 1fr;
}
}

@media (max-width: 650px) {

.terms-hero {
min-height: 330px;
padding: 60px 18px;
}

.terms-highlight {
border-radius: 12px;
}

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

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

.terms-section {
padding: 25px 21px;
border-radius: 15px;
}

.terms-section h2 {
align-items: flex-start;
}

.terms-toc ul {
columns: 1;
}

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

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