/* ********|| SITE PAGES ||******** */
/* Shared building blocks for the planting page, content pages and footer. Loaded after style.css and uses its colour variables. */

/* ********|| BUTTONS ||******** */
.btn-pill{display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-height: 52px;padding: 0 28px;border-radius: 52px;border: 2px solid transparent;font-size: 16px;font-weight: 600;line-height: 1.2;text-align: center;cursor: pointer;transition: all 0.3s ease;}
.btn-pill:focus-visible{outline: 3px solid var(--orange01) !important;outline-offset: 3px !important;}
.btn-pill-primary{background-color: var(--orange01);border-color: var(--orange01);color: var(--green02);}
.btn-pill-primary:hover{background-color: var(--green02);border-color: var(--green02);color: var(--shades01);}
.btn-pill-outline{background-color: transparent;border-color: var(--green01);color: var(--green02);}
.btn-pill-outline:hover{background-color: var(--green01);color: var(--green02);}
.btn-pill-light{background-color: transparent;border-color: rgba(var(--shades01-rgb), 0.8);color: var(--shades01);}
.btn-pill-light:hover{background-color: var(--shades01);color: var(--green02);}
.btn-pill[disabled]{opacity: 0.6;cursor: wait;}

header .btn-header-plant{min-height: 40px;padding: 0 20px;font-size: 15px;}

/* language and currency menu */
header .language .dropdown-toggle.show{border-radius: 18px;}
header .language .dropdown-menu{min-width: 210px;width: auto;max-height: 70vh;overflow-y: auto;padding: 6px 0;margin-top: 8px !important;border-color: var(--green02);border-radius: 18px !important;background-color: var(--green02);}
header .language .dropdown-heading{padding: 10px 16px 4px;font-size: 11px;font-weight: 600;letter-spacing: 0.08em;text-transform: uppercase;color: var(--green01);}
header .language .dropdown-item{color: var(--shades01);}
header .language .dropdown-item:hover{background-color: rgba(var(--shades01-rgb), 0.12);color: var(--shades01);}
header .language .dropdown-item.active{color: var(--green01);}
header.scrolled .language .dropdown-menu{border-color: rgba(var(--green02-rgb), 0.15);background-color: var(--shades01);}
header.scrolled .language .dropdown-heading{color: var(--green04);}
header.scrolled .language .dropdown-item{color: var(--green02);}
header.scrolled .language .dropdown-item.active{color: var(--green04);}

/* currency on the planting page */
.plant-price-row{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 12px;margin-top: 16px;}
.plant-price-row .plant-price{margin: 0;}
.currency-switch{display: flex;align-items: center;gap: 8px;margin: 0;font-size: 14px;color: var(--green04);}
.currency-switch select{height: 38px;padding: 0 12px;border: 1px solid rgba(var(--green02-rgb), 0.25);border-radius: 19px;background-color: var(--shades01);font-size: 14px;color: var(--green02);}
header.scrolled .btn-header-plant:hover{background-color: var(--green02);}
header .menu-item-plant{display: none !important;}

/* ********|| PAGE HERO ||******** */
.page-hero{position: relative;padding: 190px 0 100px;background-color: var(--green02);color: var(--shades01);overflow: hidden;}
.page-hero-image{position: absolute;inset: 0;z-index: 0;}
.page-hero-image img{width: 100%;height: 100%;object-fit: cover;}
.page-hero-image:after{content: "";position: absolute;inset: 0;background: linear-gradient(90deg, rgba(20, 32, 22, 0.8) 0%, rgba(20, 32, 22, 0.4) 100%);}
.page-hero .container{position: relative;z-index: 1;}
.page-hero .eyebrow{font-size: 14px;font-weight: 600;letter-spacing: 0.08em;text-transform: uppercase;color: var(--green01);margin: 0 0 14px;}
.page-hero h1{font-size: clamp(34px, 5vw, 56px);font-weight: 700;line-height: 1.1;margin: 0;max-width: 820px;color: var(--shades01);}
.page-hero .lead{font-size: clamp(17px, 2vw, 21px);font-weight: 400;line-height: 1.55;margin: 20px 0 0;max-width: 660px;color: rgba(var(--shades01-rgb), 0.9);}
.page-hero .hero-actions{display: flex;flex-wrap: wrap;gap: 12px;margin-top: 32px;}

/* ********|| SECTIONS ||******** */
.page-section{padding: 90px 0;background-color: var(--shades01);}
.page-section.tint{background-color: var(--green05);}
.section-heading{font-size: clamp(28px, 3.5vw, 42px);font-weight: 700;line-height: 1.15;color: var(--green02);margin: 0 0 16px;}
.section-heading span{color: var(--green01);}
.section-intro{font-size: 18px;line-height: 1.6;color: var(--shades05);max-width: 680px;margin: 0 0 44px;}
.text-center .section-intro{margin-left: auto;margin-right: auto;}
.section-actions{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin-top: 44px;}

.prose{max-width: 760px;font-size: 17px;line-height: 1.75;color: var(--shades05);}
.prose p{margin: 0 0 18px;}
.prose h2{font-size: 26px;font-weight: 700;color: var(--green02);margin: 40px 0 14px;}
.prose h3{font-size: 20px;font-weight: 700;color: var(--green02);margin: 32px 0 10px;}
.prose ul, .prose ol{padding-left: 22px;margin: 0 0 18px;}
.prose li{margin-bottom: 6px;}
.prose a{color: var(--green04);text-decoration: underline;}
.prose strong{color: var(--green02);}

.soft-card{background-color: var(--shades01);border-radius: 24px;padding: 36px;box-shadow: 0 10px 40px rgba(var(--green02-rgb), 0.08);}
.soft-card.tinted{background-color: var(--green05);box-shadow: none;}
.soft-card h2, .soft-card h3{font-size: 22px;font-weight: 700;color: var(--green02);margin: 0 0 18px;}

.split{display: grid;grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);gap: 48px;align-items: start;}
.split-even{grid-template-columns: repeat(2, minmax(0, 1fr));align-items: center;}

/* ********|| STEPS ||******** */
.steps{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 24px;padding: 0;margin: 0;list-style: none;}
.steps.three{grid-template-columns: repeat(3, minmax(0, 1fr));}
.step{background-color: var(--shades01);border-radius: 24px;padding: 32px 28px;box-shadow: 0 10px 40px rgba(var(--green02-rgb), 0.08);}
.step-number{display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 50%;background-color: var(--green01);color: var(--green02);font-size: 20px;font-weight: 700;margin-bottom: 20px;}
.step h3{font-size: 20px;font-weight: 700;color: var(--green02);margin: 0 0 10px;}
.step p{font-size: 15px;line-height: 1.6;color: var(--shades05);margin: 0;}

.check-list{display: grid;gap: 12px;padding: 0;margin: 0;list-style: none;}
.check-list li{position: relative;padding-left: 36px;font-size: 16px;line-height: 1.5;color: var(--shades05);}
.check-list li:before{content: "\f00c";position: absolute;left: 0;top: 1px;display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background-color: var(--green01);color: var(--green02);font-family: "Font Awesome 6 Pro";font-size: 11px;font-weight: 900;}

/* ********|| CALL TO ACTION BAND ||******** */
.cta-section{padding: 90px 0;background-color: var(--shades01);}
main:has(> section:last-child:not(.tint)) + .cta-section{padding-top: 0;}
.cta-band{position: relative;display: flex;align-items: center;justify-content: space-between;gap: 32px;padding: 56px;border-radius: 32px;background: linear-gradient(120deg, var(--green02) 55%, var(--green04) 140%);color: var(--shades01);overflow: hidden;}
.cta-band h2{font-size: clamp(26px, 3vw, 38px);font-weight: 700;margin: 0 0 8px;color: var(--shades01);}
.cta-band p{font-size: 18px;margin: 0;color: rgba(var(--shades01-rgb), 0.85);}
.cta-band .leaf{position: absolute;right: 28%;top: -14px;width: 34px;opacity: 0.8;transform: rotate(20deg);}

/* ********|| PLANTING ||******** */
.plant-form .form-step{padding-bottom: 28px;margin-bottom: 28px;border-bottom: 1px solid rgba(var(--green02-rgb), 0.1);}
.plant-form .form-step-title{display: flex;align-items: center;gap: 12px;font-size: 20px;font-weight: 700;color: var(--green02);margin: 0 0 20px;}
.plant-form .form-step-title span{display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 50%;background-color: var(--green01);font-size: 15px;}
.amounts{display: flex;flex-wrap: wrap;align-items: center;gap: 12px;}
.amount-choice{position: relative;margin: 0;}
.amount-choice input{position: absolute;inset: 0;opacity: 0;cursor: pointer;}
.amount-choice span{display: flex;align-items: center;justify-content: center;min-width: 64px;height: 64px;padding: 0 18px;border: 2px solid var(--green01);border-radius: 64px;font-size: 20px;font-weight: 600;color: var(--green02);transition: all 0.2s ease;}
.amount-choice input:checked + span{background-color: var(--green01);}
.amount-choice input:focus-visible + span{outline: 3px solid var(--orange01);outline-offset: 2px;}
.amount-other{width: 200px;height: 64px;padding: 0 22px;border: 2px solid var(--green01);border-radius: 64px;font-size: 17px;color: var(--green02);}
.amount-other:focus{border-color: var(--green02);}
.plant-price{margin: 16px 0 0;font-size: 15px;color: var(--green04);}
.plant-form label.control-label{display: block;font-size: 14px;font-weight: 600;color: var(--green02);margin: 0 0 6px;}
.plant-form .form-control{height: 50px;border-radius: 12px;border: 1px solid rgba(var(--green02-rgb), 0.2);font-size: 16px;}
.plant-form textarea.form-control{height: 96px;}
.plant-form .form-control:focus{border-color: var(--green01);box-shadow: 0 0 0 3px rgba(var(--green01-rgb), 0.25);}
.plant-form .form-group{margin-bottom: 16px;}
.plant-form .form-check-label a{color: var(--green04);text-decoration: underline;}
.plant-form .form-control.form-error, .plant-form .form-check-input.form-error{border-color: #c0392b;}
.plant-total{display: flex;align-items: baseline;justify-content: space-between;gap: 16px;margin: 8px 0 24px;}
.plant-total > span{font-size: 16px;font-weight: 600;color: var(--green02);}
.plant-total strong{font-size: 38px;font-weight: 700;color: var(--green02);}
.plant-form .btn-pill{width: 100%;}
.pay-note{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 8px 14px;margin-top: 18px;font-size: 13px;color: var(--shades05);}
.pay-note img{height: 22px;}
.plant-side{display: grid;gap: 24px;position: sticky;top: 120px;}
.hero-progress-inline strong{display: block;font-size: 44px;font-weight: 700;line-height: 1;color: var(--green02);}
.hero-progress-inline span{display: block;margin-top: 8px;font-size: 14px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--green04);}

/* ********|| HOME HERO CARD ||******** */
.banner .hero-progress{text-align: center;margin-bottom: 28px;}
.banner .hero-progress strong{display: block;font-size: 64px;font-weight: 700;line-height: 1;color: var(--green01);}
.banner .hero-progress span{display: block;margin-top: 8px;font-size: 16px;font-weight: 500;text-transform: uppercase;letter-spacing: 0.05em;color: var(--shades01);}
.banner .hero-pick-text{text-align: center;font-size: 18px;font-weight: 600;color: var(--shades01);margin: 0 0 6px;}
.banner .hero-note{text-align: center;font-size: 14px;color: rgba(var(--shades01-rgb), 0.75);margin: 20px 0 0;}

/* ********|| TREES ||******** */
.tree-cards{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 28px;}
.tree-card{display: flex;flex-direction: column;overflow: hidden;border-radius: 24px;background-color: var(--shades01);box-shadow: 0 10px 40px rgba(var(--green02-rgb), 0.08);color: var(--shades05);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.tree-card:hover{transform: translateY(-4px);box-shadow: 0 16px 48px rgba(var(--green02-rgb), 0.14);color: var(--shades05);}
.tree-card-art{display: flex;align-items: flex-end;justify-content: center;height: 220px;padding-top: 24px;background: linear-gradient(180deg, var(--green05) 0%, #dcebd0 100%);}
.tree-card-art img{height: 90%;}
.tree-card-body{display: flex;flex-direction: column;flex-grow: 1;padding: 28px;}
.tree-card h3{font-size: 22px;font-weight: 700;color: var(--green02);margin: 0;}
.tree-latin{font-size: 14px;font-style: italic;color: var(--green04);margin: 4px 0 14px;}
.tree-card p{font-size: 15px;line-height: 1.6;margin: 0 0 18px;}
.tree-card .more{margin-top: auto;font-weight: 600;color: var(--green04);}
.tree-art-large{display: flex;align-items: flex-end;justify-content: center;height: 360px;padding-top: 30px;border-radius: 24px;background: linear-gradient(180deg, var(--green05) 0%, #dcebd0 100%);}
.tree-art-large img{height: 92%;}
.fact-list{display: grid;grid-template-columns: max-content 1fr;gap: 12px 24px;margin: 0;font-size: 15px;line-height: 1.5;}
.fact-list dt{font-weight: 600;color: var(--green02);}
.fact-list dd{margin: 0;color: var(--shades05);}
.tree-why{border-left: 4px solid var(--green01);padding: 6px 0 6px 20px;font-size: 18px;line-height: 1.6;color: var(--green02);}

/* ********|| FEATURES ||******** */
.feature-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 24px;}
.feature{padding: 32px;border-radius: 24px;background-color: var(--green05);}
.feature h3{font-size: 20px;font-weight: 700;color: var(--green02);margin: 0 0 10px;}
.feature p{font-size: 15px;line-height: 1.6;margin: 0;}
.form-result{margin-top: 16px;font-weight: 600;}
.form-result.ok{color: var(--green04);}
.form-result.fail{color: #c0392b;}

/* ********|| THANK YOU ||******** */
.share-buttons{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 20px;}
.share-buttons a, .share-buttons button{display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;border: 0;border-radius: 50%;background-color: var(--green02);color: var(--shades01);font-size: 20px;transition: all 0.3s ease;}
.share-buttons a:hover, .share-buttons button:hover{background-color: var(--green01);color: var(--green02);}
.share-buttons button.copied{background-color: var(--green01);color: var(--green02);}

/* ********|| FAQ PAGE ||******** */
.section-faq.page-faq{padding-top: 90px;}

/* ********|| FOOTER ||******** */
.site-footer{padding: 64px 0 28px;background-color: var(--green02);color: rgba(var(--shades01-rgb), 0.8);}
.site-footer-grid{display: grid;grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));gap: 40px;}
.site-footer .logo{display: inline-block;height: 50px;margin-bottom: 18px;}
.site-footer .logo img{height: 100%;}
.site-footer p{font-size: 15px;line-height: 1.6;max-width: 320px;}
.site-footer h4{font-size: 15px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.06em;color: var(--shades01);margin: 6px 0 16px;}
.site-footer ul{display: grid;gap: 10px;padding: 0;margin: 0;list-style: none;}
.site-footer a{color: rgba(var(--shades01-rgb), 0.8);font-size: 15px;}
.site-footer a:hover{color: var(--green01);}
.site-footer .social{display: flex;gap: 14px;margin-top: 20px;}
.site-footer .social a{font-size: 26px;color: var(--shades01);}
.site-footer-bottom{margin-top: 48px;padding-top: 24px;border-top: 1px solid rgba(var(--shades01-rgb), 0.15);font-size: 13px;}

/* ********|| RESPONSIVE ||******** */
@media screen and (max-width: 1160px) {
	header .btn-header-plant{display: none;}
	header .menu-item-plant{display: block !important;}
}
@media screen and (max-width: 1024px) {
	.steps{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.split, .split-even{grid-template-columns: minmax(0, 1fr);}
	.plant-side{position: static;}
	.tree-cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.site-footer-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.site-footer-grid > :first-child{grid-column: 1 / -1;}
}
@media screen and (max-width: 640px) {
	.page-hero{padding: 140px 0 70px;}
	.page-section{padding: 64px 0;}
	.cta-section{padding: 64px 0;}
	.steps, .steps.three, .tree-cards, .feature-grid{grid-template-columns: minmax(0, 1fr);}
	.soft-card{padding: 24px;}
	.cta-band{flex-direction: column;align-items: flex-start;padding: 36px 28px;}
	.amount-choice span, .amount-other{height: 56px;}
	.amount-choice span{min-width: 56px;}
	.amount-other{width: 100%;}
	.fact-list{grid-template-columns: minmax(0, 1fr);gap: 2px;}
	.fact-list dd{margin-bottom: 10px;}
	.banner .hero-progress strong{font-size: 48px;}
	.site-footer-grid{grid-template-columns: minmax(0, 1fr);}
}