*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f3e9;color:#17392c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}button,a{touch-action:manipulation}.wkh-hero{min-height:650px;position:relative;overflow:hidden;color:#fff;background:#123d2d}.wkh-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 34%,rgba(203,174,89,.30),transparent 21%),linear-gradient(112deg,#0a3024 0%,#15523a 53%,#617442 100%)}.wkh-hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,28,20,.55)),radial-gradient(ellipse at 72% 100%,rgba(23,91,54,.75),transparent 48%)}.wkh-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,22,.7),rgba(5,30,22,.12) 62%,rgba(5,30,22,.18))}.wkh-nav{position:relative;z-index:4;width:min(1320px,calc(100% - 40px));height:86px;margin:auto;display:flex;align-items:center;gap:28px;border-bottom:1px solid rgba(255,255,255,.18)}.wkh-brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:280px}.wkh-brand-mark{width:44px;height:44px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:13px}.wkh-brand strong{display:block;font-family:Georgia,serif;font-size:18px;letter-spacing:.03em}.wkh-brand small{display:block;font-size:8px;opacity:.78;margin-top:3px}.wkh-main-links{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}.wkh-main-links a,.wkh-nav-actions a{text-decoration:none;font-size:13px;font-weight:700}.wkh-main-links a:hover,.wkh-nav-actions a:hover{color:#cde6d6}.wkh-nav-actions{display:flex;align-items:center;min-width:180px;justify-content:flex-end}.wkh-nav-actions [data-wkh-auth-status]{display:inline-flex!important;margin-left:0!important;gap:12px!important}.wkh-nav-actions [data-wkh-auth-status] a:last-child{padding:9px 14px;border:1px solid rgba(255,255,255,.55);border-radius:8px}.wkh-menu-btn{display:none;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;padding:8px 12px}.wkh-hero-content{position:relative;z-index:2;width:min(1320px,calc(100% - 40px));margin:0 auto;padding:90px 0 76px;display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:850;margin:0 0 16px;color:#cce1d4}.eyebrow.dark{color:#327257}.wkh-hero h1{font-family:Georgia,serif;font-size:clamp(50px,5vw,78px);line-height:.98;margin:0 0 24px;letter-spacing:-.035em}.hero-lead{max-width:650px;font-size:18px;line-height:1.65;color:#e0ebe4}.hero-actions,.feature-actions,.map-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:800}.btn-primary{background:#1f8b61;color:#fff}.btn-primary:hover{background:#176f4c}.btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff}.btn-light{background:#fff;color:#174632}.btn-outline-dark{border:1px solid #245e47;color:#174632}.hero-wildlife-card{justify-self:end;width:min(370px,100%);margin:0}.hero-bird-placeholder{aspect-ratio:1/1;border-radius:50%;border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;background:radial-gradient(circle at 48% 38%,#e2bf58 0 7%,#7ba64d 8% 18%,#193f2e 19% 48%,#0a291f 49% 100%);box-shadow:0 24px 65px rgba(0,0,0,.25)}.hero-bird-placeholder span{font-size:13px;padding:9px 13px;background:rgba(4,28,20,.62);border-radius:999px}.hero-wildlife-meta{text-align:center;margin-top:15px}.hero-wildlife-meta small,.hero-wildlife-meta strong{display:block}.hero-wildlife-meta small{font-size:10px;letter-spacing:.13em;color:#cce1d4}.hero-wildlife-meta strong{font-family:Georgia,serif;font-size:20px;margin:5px 0}.photo-info{border:0;background:transparent;color:#d9e7df;font-size:11px;cursor:pointer}.quick-tools{width:min(1320px,calc(100% - 40px));margin:-30px auto 0;position:relative;z-index:5;background:#fff;border-radius:14px;box-shadow:0 15px 45px rgba(24,55,43,.12);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.tool-card{display:flex;gap:16px;padding:26px;text-decoration:none;border-right:1px solid #e4e8e1}.tool-card:last-child{border-right:0}.tool-icon{font-size:27px;color:#2d7b59}.tool-card strong{font-family:Georgia,serif;font-size:19px}.tool-card p{font-size:13px;line-height:1.45;color:#69776f;margin:7px 0 12px}.tool-card b{font-size:12px;color:#257957}.destination-feature{margin:70px 0 0;background:#103e2d;color:#fff;display:grid;grid-template-columns:1fr 1fr;min-height:430px}.section-copy{padding:70px max(40px,calc((100vw - 1320px)/2))}.section-copy h2,.content-section h2,.species-section h2,.map-section h2,.journey-section h2,.articles-section h2{font-family:Georgia,serif;font-size:clamp(34px,4vw,54px);margin:0 0 12px}.section-copy h3{font-family:Georgia,serif;font-size:23px;margin:0 0 20px}.section-copy p:not(.eyebrow){max-width:640px;color:#d9e7df;line-height:1.7}.text-link{color:#d8eadf;font-weight:800;font-size:13px;text-decoration:none}.destination-visual{padding:40px;display:flex;flex-direction:column;justify-content:center;background:#174a35}.landscape-placeholder{height:290px;border-radius:18px;background:linear-gradient(180deg,#7ca08b 0 34%,#315e48 35% 56%,#123d2d 57%);display:grid;place-items:center;border:1px solid rgba(255,255,255,.25)}.landscape-placeholder span{background:rgba(8,41,29,.7);padding:10px 14px;border-radius:999px}.destination-visual small{margin-top:10px;color:#c9dbd0}.content-section,.species-section,.journey-section,.articles-section{width:min(1320px,calc(100% - 40px));margin:0 auto;padding:76px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-heading h2{font-size:40px}.section-heading>a{font-size:13px;color:#257957;font-weight:800}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(31,61,48,.07)}.card-image{height:235px;display:flex;align-items:end;padding:20px;color:#fff;font-weight:800}.card-image.eagle{background:linear-gradient(145deg,#587166,#1c392e)}.card-image.forest{background:linear-gradient(145deg,#80a57b,#174f38)}.card-image.map{background:linear-gradient(145deg,#b7c9ad,#4f7358)}.card-image span{background:rgba(10,43,31,.72);padding:7px 10px;border-radius:6px;font-size:12px}.card-body{padding:22px}.card-body small,.article-grid small{font-size:10px;letter-spacing:.1em;color:#327257;font-weight:850}.card-body h3,.article-grid h3{font-family:Georgia,serif;font-size:24px;margin:8px 0}.card-body p,.article-grid p{color:#65736b;line-height:1.55;font-size:14px}.card-body a,.article-grid a{font-size:13px;font-weight:800;color:#257957;text-decoration:none}.species-section{padding-top:28px}.muted{font-size:12px;color:#748078}.species-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.species{text-align:center;text-decoration:none}.species-circle{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;background:radial-gradient(circle at 40% 35%,#6ea773,#1a4a35 65%);color:#fff;font-family:Georgia,serif;font-size:40px;box-shadow:0 8px 20px rgba(24,62,46,.15)}.species strong{font-family:Georgia,serif;font-size:15px}.map-section{background:#e1e9df;padding:70px max(40px,calc((100vw - 1320px)/2));display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:center}.map-copy p:not(.eyebrow){color:#5e6e65;line-height:1.65}.map-preview{height:420px;border-radius:20px;position:relative;background:linear-gradient(135deg,#c4d4c1,#9db9a5);border:1px solid #afc4b2;overflow:hidden}.map-preview:before{content:"COSTA RICA";position:absolute;inset:40px 60px;background:#d8e2cf;clip-path:polygon(12% 10%,48% 0,78% 22%,92% 54%,70% 68%,62% 100%,36% 77%,10% 83%,0 52%);display:grid;place-items:center;color:#7b987e;font:800 28px Georgia,serif}.map-label{position:absolute;background:#fff;padding:8px 10px;border-radius:8px;box-shadow:0 4px 15px rgba(25,61,45,.13);font-size:11px;font-weight:800;color:#1f6549}.north{top:45px;left:42%}.arenal{top:130px;left:22%}.caribbean{top:150px;right:8%}.highlands{top:225px;left:42%}.talamanca{bottom:70px;right:17%}.pacific{bottom:90px;left:9%}.map-legend{position:absolute;bottom:15px;left:20px;font-size:11px;color:#365c49}.journey-section{text-align:center}.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}.journey-grid a{background:#fff;border-radius:12px;padding:25px;text-decoration:none;text-align:left}.journey-grid b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#dceadf;color:#1d694b;margin-bottom:15px}.journey-grid strong,.journey-grid span{display:block}.journey-grid strong{font-family:Georgia,serif;font-size:18px}.journey-grid span{font-size:12px;color:#718078;margin-top:8px;line-height:1.45}.articles-section{border-top:1px solid #d9dfd7}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.article-grid article{background:#fff;padding:28px;border-radius:12px}.wkh-footer{background:#0b3023;color:#dbe7e0;padding:42px max(40px,calc((100vw - 1320px)/2));display:grid;grid-template-columns:1fr auto;gap:20px}.wkh-footer strong{font-family:Georgia,serif;font-size:20px;color:#fff}.wkh-footer p{font-size:12px;color:#a9c1b4}.footer-links{display:flex;gap:20px;align-items:center}.footer-links a{font-size:12px;text-decoration:none}.footer-note{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:15px;display:flex;justify-content:space-between;color:#9fb8aa;font-size:11px}.footer-note button{border:0;background:transparent;color:#bcd2c6;padding:0;cursor:pointer}.credit-modal{position:fixed;inset:0;background:rgba(4,23,17,.7);z-index:100;display:grid;place-items:center;padding:20px}.credit-modal[hidden]{display:none}.credit-dialog{position:relative;width:min(520px,100%);background:#fff;color:#17392c;padding:30px;border-radius:16px}.credit-dialog h2{font-family:Georgia,serif}.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}@media(max-width:1000px){.wkh-main-links{position:absolute;top:78px;left:0;right:0;background:#0c3426;padding:18px;display:none;flex-wrap:wrap}.wkh-main-links.open{display:flex}.wkh-menu-btn{display:block;margin-left:auto}.wkh-nav-actions{min-width:auto}.wkh-hero-content{grid-template-columns:1fr .5fr}.quick-tools{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:last-child{grid-column:1/-1}.species-row{grid-template-columns:repeat(3,1fr)}.map-section{grid-template-columns:1fr}.journey-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.wkh-nav{height:auto;min-height:72px;width:calc(100% - 24px);gap:10px}.wkh-brand{min-width:0}.wkh-brand strong{font-size:15px}.wkh-brand small{display:none}.wkh-nav-actions{display:none}.wkh-hero{min-height:auto}.wkh-hero-content{width:calc(100% - 32px);padding:62px 0;grid-template-columns:1fr}.wkh-hero h1{font-size:46px}.hero-wildlife-card{width:230px;justify-self:center}.quick-tools{width:calc(100% - 24px);grid-template-columns:1fr;margin-top:-18px}.tool-card{border-right:0;border-bottom:1px solid #e4e8e1}.destination-feature{grid-template-columns:1fr}.section-copy{padding:50px 24px}.destination-visual{padding:24px}.content-section,.species-section,.journey-section,.articles-section{width:calc(100% - 32px);padding:55px 0}.feature-grid,.article-grid,.journey-grid{grid-template-columns:1fr}.feature-card:last-child{grid-column:auto}.section-heading{align-items:flex-start;flex-direction:column}.species-row{grid-template-columns:repeat(2,1fr)}.species-circle{width:105px;height:105px}.map-section{padding:50px 20px}.map-preview{height:360px}.wkh-footer{padding:38px 24px;grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.footer-note{grid-column:auto;flex-direction:column;gap:8px}}\n/* V22 Batch 2: approved photographic identity */\n.wkh-hero-bg{background-image:linear-gradient(90deg,rgba(5,30,22,.82) 0%,rgba(5,30,22,.45) 43%,rgba(5,30,22,.12) 72%,rgba(5,30,22,.34) 100%),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Eastern%20arenal%20volcano%20panorama.jpg?width=3840");background-size:cover;background-position:center 45%;}\n.wkh-hero-shade{background:linear-gradient(180deg,rgba(3,25,18,.18),rgba(3,25,18,.48));}\n.wkh-brand{min-width:300px}.wkh-logo{width:245px;height:70px;object-fit:contain;object-position:left center;display:block}.wkh-brand-mark{display:none}.hero-wildlife-card{width:min(410px,100%)}.hero-bird-photo{width:360px;height:360px;margin-left:auto;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.45);box-shadow:0 24px 65px rgba(0,0,0,.32);background:#123d2d}.hero-bird-photo img{width:100%;height:100%;object-fit:cover;object-position:center}.landscape-photo{height:300px;border-radius:18px;background-image:linear-gradient(180deg,rgba(10,40,29,.03),rgba(10,40,29,.26)),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Eastern%20arenal%20volcano%20panorama.jpg?width=1920");background-size:cover;background-position:center;box-shadow:0 18px 40px rgba(5,29,20,.18);border:1px solid rgba(255,255,255,.25)}.card-image{background-size:cover!important;background-position:center!important}.card-image.eagle{background-image:linear-gradient(180deg,transparent 45%,rgba(8,34,25,.75)),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Resplendent%20quetzal%20in%20Costa%20Rica%2001.jpg?width=1200")}.card-image.forest{background-image:linear-gradient(180deg,transparent 45%,rgba(8,34,25,.75)),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Eastern%20arenal%20volcano%20panorama.jpg?width=1280")}.card-image.map{background-image:linear-gradient(180deg,transparent 45%,rgba(8,34,25,.75)),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Scarlet%20macaw%20in%20Costa%20Rica.jpg?width=1200")}.species-circle{overflow:hidden;background:#174a35}.species-circle img{width:100%;height:100%;object-fit:cover;display:block}.credit-list{padding-left:20px;color:#53685c;line-height:1.55;font-size:13px}.credit-list li{margin:7px 0}\n@media(max-width:700px){.wkh-logo{width:180px;height:54px}.hero-bird-photo{width:230px;height:230px}.wkh-brand{min-width:0}}\n
/* ============================================================
V22 HEADER PASS 1
Approved direction: Costa Rica photographic hero
Header only. Body sections below remain unchanged.
============================================================ */
.wkh-hero{
min-height:620px;
background:#071d16;
isolation:isolate;
}
.wkh-hero-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(90deg,rgba(3,20,15,.86) 0%,rgba(3,20,15,.68) 31%,rgba(3,20,15,.25) 58%,rgba(3,20,15,.18) 77%,rgba(3,20,15,.50) 100%),
linear-gradient(180deg,rgba(4,24,18,.12) 0%,rgba(4,24,18,.08) 55%,rgba(4,24,18,.70) 100%),
url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Eastern%20arenal%20volcano%20panorama.jpg?width=3840");
background-size:cover;
background-position:center 47%;
transform:scale(1.01);
}
.wkh-hero-bg::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 74% 46%,rgba(247,183,80,.14),transparent 23%),
linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.20));
}
.wkh-hero-shade{
background:linear-gradient(90deg,rgba(2,16,12,.32),transparent 54%,rgba(2,16,12,.12));
}
.wkh-nav{
width:min(1460px,calc(100% - 54px));
height:94px;
gap:22px;
border-bottom:1px solid rgba(255,255,255,.22);
}
.wkh-brand{
min-width:290px;
max-width:310px;
}
.wkh-logo{
width:250px;
height:76px;
object-fit:contain;
object-position:left center;
filter:drop-shadow(0 2px 10px rgba(0,0,0,.28));
}
.wkh-main-links{
gap:25px;
}
.wkh-main-links a,
.wkh-nav-actions a{
font-size:13px;
font-weight:700;
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.32);
}
.wkh-main-links a:first-child{
position:relative;
}
.wkh-main-links a:first-child::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-13px;
height:2px;
border-radius:2px;
background:linear-gradient(90deg,#e7d96c,#2fd39a);
}
.wkh-nav-actions [data-wkh-auth-status] a:last-child{
background:#15986c;
border-color:#15986c;
padding:10px 17px;
box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.wkh-hero-content{
width:min(1460px,calc(100% - 54px));
padding:78px 0 88px;
grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
gap:42px;
}
.wkh-hero-copy{
max-width:720px;
padding-left:8px;
}
.wkh-hero .eyebrow{
color:#f2f0dc;
letter-spacing:.23em;
font-size:11px;
margin-bottom:15px;
}
.wkh-hero h1{
max-width:700px;
font-size:clamp(54px,5.2vw,82px);
line-height:.95;
letter-spacing:-.045em;
text-shadow:0 4px 22px rgba(0,0,0,.30);
}
.hero-lead{
max-width:610px;
font-size:17px;
line-height:1.55;
color:rgba(255,255,255,.90);
text-shadow:0 2px 12px rgba(0,0,0,.24);
}
.hero-actions{
margin-top:25px;
}
.hero-actions .btn{
min-height:48px;
border-radius:7px;
padding:0 22px;
}
.hero-actions .btn-primary{
background:#17a775;
box-shadow:0 9px 26px rgba(0,0,0,.20);
}
.hero-actions .btn-ghost{
background:rgba(3,22,16,.26);
backdrop-filter:blur(7px);
}
/* Featured bird becomes part of the landscape, not a circular badge */
.hero-wildlife-card{
width:min(520px,100%);
align-self:end;
justify-self:end;
position:relative;
margin-bottom:-26px;
}
.hero-bird-photo{
width:100%;
height:405px;
margin:0;
border:0;
border-radius:0;
overflow:hidden;
background:transparent;
box-shadow:none;
-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 84%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 84%,transparent 100%);
}
.hero-bird-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:scale(1.03);
filter:saturate(1.05) contrast(1.04);
}
.hero-wildlife-meta{
position:absolute;
right:12px;
bottom:6px;
width:230px;
text-align:right;
padding:13px 15px;
border-radius:9px;
background:linear-gradient(90deg,transparent,rgba(2,18,13,.72));
text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.hero-wildlife-meta small{
color:#f0e9c7;
font-size:9px;
letter-spacing:.17em;
}
.hero-wildlife-meta strong{
font-size:19px;
color:#fff;
}
.photo-info{
color:rgba(255,255,255,.82);
}
/* Small editorial phrase from the approved visual direction */
.hero-wildlife-card::after{
content:"Wild Places.\A Brighter Days.";
white-space:pre;
position:absolute;
top:25px;
right:8px;
z-index:3;
color:#fff;
text-align:right;
font-family:Georgia,serif;
font-style:italic;
font-size:24px;
line-height:1.18;
text-shadow:0 3px 14px rgba(0,0,0,.62);
}
@media(max-width:1100px){
.wkh-nav{width:min(100% - 30px,1460px)}
.wkh-brand{min-width:230px}
.wkh-logo{width:205px}
.wkh-main-links{gap:17px}
.wkh-hero-content{grid-template-columns:1fr .72fr}
.hero-bird-photo{height:340px}
.hero-wildlife-card::after{font-size:20px}
}
@media(max-width:700px){
.wkh-hero{min-height:auto}
.wkh-nav{width:calc(100% - 24px);min-height:74px}
.wkh-logo{width:165px;height:56px}
.wkh-hero-content{
width:calc(100% - 32px);
padding:54px 0 64px;
grid-template-columns:1fr;
}
.wkh-hero h1{font-size:48px}
.hero-wildlife-card{
width:100%;
margin:0;
}
.hero-bird-photo{height:280px}
.hero-wildlife-card::after{
top:18px;
right:8px;
font-size:18px;
}
.hero-wildlife-meta{
right:4px;
bottom:4px;
}
}
/* ============================================================
V22 HEADER PASS 2
Compact desktop hero to reduce above-the-fold height.
Keeps the approved visual direction and active combination flow.
============================================================ */
@media (min-width:701px){
.wkh-hero{
min-height:500px;
}
.wkh-nav{
height:76px;
}
.wkh-brand{
min-width:250px;
max-width:270px;
}
.wkh-logo{
width:210px;
height:60px;
}
.wkh-main-links{
gap:21px;
}
.wkh-hero-content{
padding:38px 0 48px;
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
gap:34px;
}
.wkh-hero-copy{
max-width:670px;
}
.wkh-hero .eyebrow{
margin-bottom:11px;
}
.wkh-hero h1{
max-width:650px;
font-size:clamp(46px,4.5vw,68px);
line-height:.96;
margin-bottom:18px;
}
.hero-lead{
max-width:585px;
font-size:16px;
line-height:1.48;
}
.hero-actions{
margin-top:19px;
}
.hero-actions .btn{
min-height:44px;
padding:0 19px;
}
.hero-wildlife-card{
width:min(440px,100%);
margin-bottom:-12px;
}
.hero-bird-photo{
height:310px;
}
.hero-wildlife-card::after{
top:20px;
font-size:20px;
}
.hero-wildlife-meta{
bottom:4px;
width:215px;
padding:10px 12px;
}
.hero-wildlife-meta strong{
font-size:17px;
}
.quick-tools{
margin-top:-22px;
}
.tool-card{
padding:18px 22px;
gap:13px;
}
.tool-icon{
font-size:23px;
}
.tool-card strong{
font-size:18px;
}
.tool-card p{
font-size:12px;
margin:5px 0 8px;
}
.destination-feature{
margin-top:52px;
}
}
@media (min-width:701px) and (max-width:1100px){
.wkh-hero{
min-height:490px;
}
.wkh-nav{
height:72px;
}
.wkh-logo{
width:185px;
height:56px;
}
.wkh-hero-content{
padding:34px 0 44px;
grid-template-columns:1fr .68fr;
}
.wkh-hero h1{
font-size:clamp(44px,5vw,60px);
}
.hero-bird-photo{
height:275px;
}
.hero-wildlife-card::after{
font-size:18px;
}
}
@media (max-width:700px){
.wkh-hero{
min-height:auto;
}
.wkh-nav{
min-height:70px;
}
.wkh-hero-content{
padding:42px 0 52px;
}
.wkh-hero h1{
font-size:44px;
margin-bottom:18px;
}
.hero-bird-photo{
height:245px;
}
.quick-tools{
margin-top:-16px;
}
}
/* ============================================================
V22 HEADER PASS 3
Compact WKH brand block in the existing left nav area.
============================================================ */
.wkh-brand{
min-width:248px !important;
max-width:260px !important;
display:flex;
align-items:center;
gap:9px;
text-decoration:none;
line-height:1;
}
.wkh-brand-logo-wrap{
width:38px;
height:38px;
flex:0 0 38px;
overflow:hidden;
display:block;
}
.wkh-brand-logo-wrap .wkh-logo{
width:auto !important;
max-width:none !important;
height:38px !important;
display:block;
object-fit:contain;
object-position:left center;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.26));
}
.wkh-brand-copy{
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
gap:4px;
}
.wkh-brand-copy strong{
display:block;
margin:0;
color:#fff;
font-family:Georgia,serif;
font-size:14px;
line-height:1.05;
letter-spacing:.015em;
font-weight:700;
white-space:nowrap;
text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.wkh-brand-copy small{
display:block;
margin:0;
color:rgba(255,255,255,.76);
font-size:6.8px;
line-height:1.05;
letter-spacing:.035em;
font-weight:700;
white-space:nowrap;
text-shadow:0 1px 6px rgba(0,0,0,.35);
}
@media(max-width:1100px){
.wkh-brand{
min-width:210px !important;
max-width:220px !important;
gap:7px;
}
.wkh-brand-logo-wrap{
width:32px;
height:32px;
flex-basis:32px;
}
.wkh-brand-logo-wrap .wkh-logo{
height:32px !important;
}
.wkh-brand-copy strong{
font-size:12px;
}
.wkh-brand-copy small{
font-size:5.8px;
}
}
@media(max-width:700px){
.wkh-brand{
min-width:0 !important;
max-width:210px !important;
}
.wkh-brand-copy strong{
font-size:11.5px;
}
.wkh-brand-copy small{
font-size:5.5px;
}
}
/* ============================================================
V22 HEADER PASS 4
Slightly larger compact brand block.
============================================================ */
@media (min-width:1101px){
.wkh-brand{
min-width:282px !important;
max-width:295px !important;
gap:10px;
}
.wkh-brand-logo-wrap{
width:44px;
height:44px;
flex-basis:44px;
}
.wkh-brand-logo-wrap .wkh-logo{
height:44px !important;
}
.wkh-brand-copy strong{
font-size:16px;
}
.wkh-brand-copy small{
font-size:7.8px;
letter-spacing:.03em;
}
}
@media (min-width:701px) and (max-width:1100px){
.wkh-brand{
min-width:232px !important;
max-width:242px !important;
}
.wkh-brand-logo-wrap{
width:36px;
height:36px;
flex-basis:36px;
}
.wkh-brand-logo-wrap .wkh-logo{
height:36px !important;
}
.wkh-brand-copy strong{
font-size:13px;
}
.wkh-brand-copy small{
font-size:6.3px;
}
}
/* ============================================================
V22 HEADER PASS 5
Double only the WKH logo size. Brand text and tagline stay unchanged.
============================================================ */
@media (min-width:1101px){
.wkh-brand-logo-wrap{
width:88px;
height:76px;
flex:0 0 88px;
overflow:visible;
}
.wkh-brand-logo-wrap .wkh-logo{
height:88px !important;
width:auto !important;
max-width:none !important;
}
.wkh-brand{
min-width:326px !important;
max-width:340px !important;
}
}
@media (min-width:701px) and (max-width:1100px){
.wkh-brand-logo-wrap{
width:72px;
height:68px;
flex:0 0 72px;
overflow:visible;
}
.wkh-brand-logo-wrap .wkh-logo{
height:72px !important;
width:auto !important;
max-width:none !important;
}
.wkh-brand{
min-width:268px !important;
max-width:280px !important;
}
}
/* ============================================================
V22 HEADER PASS 6
Destination-first homepage hierarchy.
Goal: keep the hero strong while revealing Destination of the
Month as the next important information in the first viewport.
============================================================ */
@media (min-width:1101px){
.wkh-hero{
min-height:438px;
}
.wkh-hero-content{
padding:20px 0 30px;
align-items:center;
}
.wkh-hero-copy{
transform:translateY(-6px);
}
.wkh-hero .eyebrow{
margin-bottom:8px;
font-size:10px;
}
.wkh-hero h1{
max-width:590px;
font-size:clamp(42px,3.85vw,58px);
line-height:.96;
margin-bottom:13px;
}
.hero-lead{
max-width:560px;
font-size:14.5px;
line-height:1.42;
}
.hero-actions{
margin-top:15px;
}
.hero-actions .btn{
min-height:40px;
padding:0 17px;
font-size:13px;
}
.hero-wildlife-card{
width:min(405px,100%);
margin-bottom:-4px;
transform:translateY(-5px);
}
.hero-bird-photo{
height:270px;
}
.hero-wildlife-card::after{
top:15px;
font-size:18px;
}
.hero-wildlife-meta{
bottom:2px;
width:205px;
padding:8px 10px;
}
.hero-wildlife-meta strong{
font-size:16px;
}
.quick-tools{
margin-top:-18px;
}
.tool-card{
padding:15px 20px;
}
.tool-card p{
margin:4px 0 6px;
}
.destination-feature{
margin-top:28px;
min-height:390px;
}
.destination-feature .section-copy{
padding-top:48px;
padding-bottom:48px;
}
.destination-feature .section-copy .eyebrow{
font-size:11px;
letter-spacing:.13em;
margin-bottom:10px;
}
.destination-feature .section-copy h2{
font-size:clamp(42px,3.4vw,50px);
margin-bottom:8px;
}
}
@media (min-width:701px) and (max-width:1100px){
.wkh-hero{
min-height:445px;
}
.wkh-hero-content{
padding:22px 0 34px;
}
.wkh-hero h1{
font-size:clamp(40px,4.7vw,54px);
margin-bottom:14px;
}
.hero-lead{
font-size:14px;
}
.hero-bird-photo{
height:248px;
}
.destination-feature{
margin-top:32px;
}
}
/* ============================================================
V22 DESTINATION SHOWCASE PASS 1
Turn Destination of the Month into a visual hook instead of
a narrow informational block.
============================================================ */
@media (min-width:1001px){
.destination-feature{
margin-top:26px;
min-height:360px;
grid-template-columns:minmax(440px,.88fr) minmax(0,1.12fr);
background:#0d3a2b;
}
.destination-feature .destination-copy{
padding:38px clamp(42px,5vw,78px);
display:flex;
flex-direction:column;
justify-content:center;
}
.destination-feature .destination-copy .eyebrow{
margin:0 0 9px;
font-size:10px;
letter-spacing:.15em;
color:#d8e8df;
}
.destination-feature .destination-copy h2{
margin:0 0 10px;
font-size:clamp(40px,3.5vw,52px);
line-height:.95;
}
.destination-kicker{
max-width:650px !important;
margin:0 0 12px !important;
color:#fff !important;
font-family:Georgia,serif;
font-size:clamp(22px,2vw,30px);
line-height:1.12 !important;
letter-spacing:-.015em;
}
.destination-intro{
max-width:640px !important;
margin:0 !important;
color:rgba(235,244,239,.86) !important;
font-size:14px;
line-height:1.48 !important;
}
.destination-highlights{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:16px;
}
.destination-highlights span{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
background:rgba(255,255,255,.07);
color:#eef5f1;
font-size:10px;
font-weight:800;
letter-spacing:.04em;
}
.destination-feature .feature-actions{
margin-top:18px;
}
.destination-feature .btn-light{
min-height:40px;
padding:0 17px;
}
.destination-feature .destination-visual{
padding:24px 34px 24px 12px;
background:#174a35;
}
.destination-showcase-photo{
position:relative;
height:312px;
overflow:hidden;
border-radius:18px;
box-shadow:0 18px 42px rgba(4,27,18,.24);
}
.destination-showcase-photo::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,transparent 48%,rgba(4,25,18,.72) 100%),
linear-gradient(90deg,rgba(4,25,18,.12),transparent 45%);
pointer-events:none;
}
.destination-photo-overlay{
position:absolute;
left:24px;
right:24px;
bottom:20px;
z-index:2;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.48);
}
.destination-photo-overlay span{
display:block;
margin-bottom:5px;
font-size:9px;
font-weight:900;
letter-spacing:.18em;
color:#e7e2b8;
}
.destination-photo-overlay strong{
display:block;
font-family:Georgia,serif;
font-size:29px;
line-height:1;
}
.destination-photo-overlay small{
display:block;
margin-top:6px;
font-size:12px;
color:rgba(255,255,255,.88);
}
}
@media (min-width:701px) and (max-width:1000px){
.destination-feature{
grid-template-columns:1fr;
margin-top:28px;
}
.destination-feature .destination-copy{
padding:38px 36px 26px;
}
.destination-kicker{
max-width:760px !important;
font-family:Georgia,serif;
font-size:25px;
line-height:1.16 !important;
color:#fff !important;
}
.destination-intro{
max-width:760px !important;
}
.destination-highlights{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:14px;
}
.destination-highlights span{
padding:7px 10px;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
font-size:10px;
font-weight:800;
}
.destination-feature .destination-visual{
padding:0 36px 32px;
}
.destination-showcase-photo{
position:relative;
height:300px;
overflow:hidden;
}
.destination-photo-overlay{
position:absolute;
left:22px;
bottom:18px;
color:#fff;
}
}
@media (max-width:700px){
.destination-copy{
padding:42px 24px 26px !important;
}
.destination-kicker{
margin:0 0 12px !important;
color:#fff !important;
font-family:Georgia,serif;
font-size:24px;
line-height:1.15 !important;
}
.destination-intro{
margin:0 !important;
}
.destination-highlights{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:14px;
}
.destination-highlights span{
padding:7px 9px;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
font-size:10px;
font-weight:800;
}
.destination-showcase-photo{
position:relative;
height:260px;
overflow:hidden;
}
.destination-photo-overlay{
position:absolute;
left:18px;
right:18px;
bottom:16px;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.destination-photo-overlay span{
display:block;
margin-bottom:5px;
font-size:9px;
font-weight:900;
letter-spacing:.16em;
}
.destination-photo-overlay strong{
display:block;
font-family:Georgia,serif;
font-size:26px;
}
.destination-photo-overlay small{
display:block;
margin-top:4px;
font-size:11px;
}
}
/* ============================================================
V22 DESTINATION SHOWCASE PASS 2
Align Costa Rica content to hero width and improve readability.
No carousel or content changes in this pass.
============================================================ */
@media (min-width:1001px){
.destination-feature{
width:100%;
padding-left:max(27px,calc((100vw - 1460px)/2 + 27px));
padding-right:max(27px,calc((100vw - 1460px)/2 + 27px));
column-gap:26px;
grid-template-columns:minmax(460px,.9fr) minmax(0,1.1fr);
}
.destination-feature .destination-copy{
padding:34px 0;
}
.destination-feature .destination-visual{
padding:22px 0;
background:transparent;
}
.destination-feature .destination-copy .eyebrow{
font-size:11px;
}
.destination-feature .destination-copy h2{
font-size:clamp(42px,3.4vw,52px);
}
.destination-kicker{
max-width:680px !important;
}
.destination-intro{
max-width:680px !important;
font-size:14.5px;
}
.destination-highlights{
gap:9px;
margin-top:18px;
}
.destination-highlights span{
min-height:36px;
padding:0 14px;
font-size:12.5px;
letter-spacing:.025em;
border-color:rgba(255,255,255,.34);
background:rgba(255,255,255,.11);
color:#fff;
}
.destination-showcase-photo{
height:300px;
}
}
@media (min-width:701px) and (max-width:1000px){
.destination-feature{
padding-left:24px;
padding-right:24px;
}
.destination-feature .destination-copy{
padding:34px 0 24px;
}
.destination-feature .destination-visual{
padding:0 0 30px;
}
.destination-highlights{
gap:8px;
}
.destination-highlights span{
min-height:34px;
padding:0 13px;
display:inline-flex;
align-items:center;
font-size:12px;
background:rgba(255,255,255,.11);
color:#fff;
}
}
@media (max-width:700px){
.destination-highlights{
gap:8px;
}
.destination-highlights span{
min-height:34px;
padding:0 12px;
display:inline-flex;
align-items:center;
font-size:12px;
background:rgba(255,255,255,.11);
color:#fff;
}
}
/* ============================================================
V22 DESTINATION SHOWCASE PASS 3
Manual scenery carousel. No automatic rotation.
============================================================ */
.destination-carousel{
position:relative;
width:100%;
border-radius:18px;
outline:none;
}
.destination-carousel:focus-visible{
box-shadow:0 0 0 3px rgba(255,255,255,.55);
}
.destination-carousel-track{
position:relative;
width:100%;
height:300px;
overflow:hidden;
border-radius:18px;
box-shadow:0 18px 42px rgba(4,27,18,.24);
}
.destination-carousel-slide{
position:absolute;
inset:0;
width:100%;
height:100% !important;
margin:0 !important;
border:0;
border-radius:18px;
background-size:cover;
background-position:center;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .35s ease;
}
.destination-carousel-slide.is-active{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.destination-carousel-slide[hidden]{
display:none !important;
}
.destination-carousel-slide::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,transparent 46%,rgba(4,25,18,.74) 100%),
linear-gradient(90deg,rgba(4,25,18,.10),transparent 46%);
pointer-events:none;
}
.destination-carousel-arrow{
position:absolute;
top:50%;
z-index:4;
width:44px;
height:44px;
margin-top:-22px;
border:1px solid rgba(255,255,255,.55);
border-radius:50%;
background:rgba(4,26,18,.54);
color:#fff;
font-family:Georgia,serif;
font-size:31px;
line-height:1;
cursor:pointer;
backdrop-filter:blur(5px);
box-shadow:0 6px 18px rgba(0,0,0,.20);
}
.destination-carousel-arrow:hover{
background:rgba(4,26,18,.78);
}
.destination-carousel-arrow.previous{
left:14px;
}
.destination-carousel-arrow.next{
right:14px;
}
.destination-carousel-dots{
position:absolute;
left:50%;
bottom:13px;
z-index:5;
display:flex;
gap:8px;
transform:translateX(-50%);
}
.destination-carousel-dots button{
width:10px;
height:10px;
padding:0;
border:1px solid rgba(255,255,255,.78);
border-radius:50%;
background:rgba(4,25,18,.35);
cursor:pointer;
}
.destination-carousel-dots button.is-active{
width:24px;
border-radius:999px;
background:#fff;
}
.destination-carousel .destination-photo-overlay{
bottom:25px;
padding-right:72px;
}
@media(max-width:1000px){
.destination-carousel-track{
height:300px;
}
}
@media(max-width:700px){
.destination-carousel-track{
height:260px;
}
.destination-carousel-arrow{
width:38px;
height:38px;
margin-top:-19px;
font-size:27px;
}
.destination-carousel-arrow.previous{
left:10px;
}
.destination-carousel-arrow.next{
right:10px;
}
.destination-carousel .destination-photo-overlay{
bottom:24px;
padding-right:48px;
}
}
@media(prefers-reduced-motion:reduce){
.destination-carousel-slide{
transition:none;
}
}
/* ============================================================
V22 DESTINATION SHOWCASE PASS 4
Campaign-driven carousel. Images now come from Homepage Studio.
============================================================ */
.destination-carousel .landscape-photo{
background-image:linear-gradient(135deg,#315e48,#123d2d);
background-color:#123d2d;
}
/* ============================================================
V24 COSTA RICA HUMMINGBIRD MAP PROTOTYPE
Scope: map section only. Uses the approved local PNG and
WKH's stored 30-day bird data. No external map service.
============================================================ */
.cr-bird-map{
width:min(1460px,calc(100% - 40px));
margin:0 auto;
padding:70px 0 66px;
color:#17392c;
}
.cr-map-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:34px;
margin-bottom:24px;
}
.cr-map-heading>div:first-child{
max-width:930px;
}
.cr-map-heading h2{
margin:0 0 12px;
font-family:Georgia,serif;
font-size:clamp(38px,4vw,58px);
line-height:.98;
letter-spacing:-.025em;
}
.cr-map-heading p:not(.eyebrow){
max-width:860px;
margin:0;
color:#53665c;
font-size:14px;
line-height:1.55;
}
.cr-map-group{
display:flex;
align-items:center;
gap:10px;
padding-bottom:4px;
flex:0 0 auto;
}
.cr-map-group span{
font-size:9px;
font-weight:900;
letter-spacing:.13em;
color:#62736a;
}
.cr-map-group strong{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 14px;
border-radius:999px;
background:#176e4e;
color:#fff;
font-size:11px;
}
.cr-map-shell{
display:grid;
grid-template-columns:minmax(340px,410px) minmax(0,1fr);
align-items:stretch;
overflow:hidden;
border:1px solid rgba(38,73,57,.18);
border-radius:18px;
background:#fff;
box-shadow:0 16px 42px rgba(28,59,46,.10);
}
.cr-map-panel{
display:flex;
flex-direction:column;
min-width:0;
border-right:1px solid #dfe5de;
background:#fffdfa;
}
.cr-map-panel-head{
padding:23px 20px 15px;
border-bottom:1px solid #e6eae5;
}
.cr-map-back{
margin:0 0 10px;
padding:0;
border:0;
background:transparent;
color:#176e4e;
font-size:11px;
font-weight:850;
cursor:pointer;
}
.cr-map-kicker{
margin:0 0 5px;
color:#327257;
font-size:9px;
font-weight:900;
letter-spacing:.22em;
}
.cr-map-panel h3{
margin:0 0 8px;
color:#183328;
font-family:Georgia,serif;
font-size:29px;
line-height:1.04;
}
.cr-map-panel-head>p:last-child{
margin:0;
color:#596b62;
font-size:12.5px;
line-height:1.42;
}
.cr-map-list{
flex:1 1 auto;
min-height:300px;
overflow:auto;
padding:0 13px;
}
.cr-map-loading,
.cr-map-empty{
padding:24px 8px;
color:#697970;
font-size:12px;
line-height:1.5;
}
.cr-region-row,
.cr-hotspot-row{
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:11px 5px;
border:0;
border-bottom:1px solid #e8ebe7;
background:transparent;
color:#17392c;
text-align:left;
cursor:pointer;
}
.cr-region-row:hover,
.cr-region-row:focus-visible,
.cr-region-row.is-selected,
.cr-hotspot-row:hover,
.cr-hotspot-row:focus-visible,
.cr-hotspot-row.is-selected{
outline:none;
background:#f1f7f1;
}
.cr-region-copy strong,
.cr-hotspot-copy strong{
display:block;
color:#1a352a;
font-family:Georgia,serif;
font-size:13.5px;
line-height:1.2;
}
.cr-region-copy small,
.cr-hotspot-copy small{
display:block;
margin-top:4px;
color:#68786f;
font-size:9.5px;
line-height:1.3;
}
.cr-region-count{
min-width:52px;
color:#176e4e;
text-align:right;
}
.cr-region-count b{
display:block;
font-family:Georgia,serif;
font-size:24px;
line-height:.9;
}
.cr-region-count span{
display:block;
margin-top:4px;
color:#728078;
font-size:8px;
letter-spacing:.05em;
text-transform:uppercase;
}
.cr-map-note{
padding:13px 18px 15px;
border-top:1px solid #dbe4d7;
background:#eef4e9;
}
.cr-map-note strong{
display:block;
margin-bottom:4px;
font-size:10px;
}
.cr-map-note p{
margin:4px 0;
color:#607067;
font-size:9px;
line-height:1.36;
}
.cr-map-note a{
display:inline-block;
margin-top:6px;
color:#176e4e;
font-size:9px;
font-weight:850;
text-decoration:none;
}
.cr-map-art{
position:relative;
width:100%;
aspect-ratio:928 / 796;
overflow:hidden;
background:#9fcfd6;
}
.cr-map-art>img{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:contain;
user-select:none;
-webkit-user-drag:none;
}
.cr-map-region-overlay{
position:absolute;
inset:0;
z-index:3;
}
.cr-map-region-button{
position:absolute;
width:52px;
height:52px;
padding:0;
transform:translate(-50%,-50%);
border:0;
border-radius:50%;
background:transparent;
cursor:pointer;
}
.cr-map-region-button::after{
content:"";
position:absolute;
inset:5px;
border:2px solid transparent;
border-radius:50%;
transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.cr-map-region-button:hover::after,
.cr-map-region-button:focus-visible::after,
.cr-map-region-button.is-selected::after{
border-color:rgba(255,255,255,.95);
box-shadow:0 0 0 3px rgba(23,110,78,.72),0 4px 14px rgba(0,0,0,.25);
transform:scale(1.08);
}
.cr-map-region-button:focus-visible{
outline:none;
}
.cr-map-status{
position:absolute;
left:12px;
bottom:12px;
z-index:4;
padding:6px 9px;
border-radius:7px;
background:rgba(255,255,255,.92);
color:#53675c;
font-size:9px;
box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.cr-hotspot-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:12px 4px 6px;
}
.cr-hotspot-meta span{
padding:5px 7px;
border-radius:999px;
background:#edf3ed;
color:#52675c;
font-size:9px;
font-weight:750;
}
.cr-species-list{
margin:0;
padding:10px 10px 20px 28px;
color:#304c3f;
}
.cr-species-list li{
padding:5px 0;
font-size:11.5px;
line-height:1.3;
}
.cr-species-list em{
display:block;
margin-top:2px;
color:#738078;
font-size:9.5px;
}
@media(max-width:1000px){
.cr-map-heading{
align-items:flex-start;
flex-direction:column;
}
.cr-map-shell{
grid-template-columns:1fr;
}
.cr-map-panel{
border-right:0;
border-bottom:1px solid #dfe5de;
}
.cr-map-list{
max-height:380px;
}
.cr-map-art{
aspect-ratio:928 / 796;
}
}
@media(max-width:700px){
.cr-bird-map{
width:calc(100% - 28px);
padding:52px 0 44px;
}
.cr-map-heading h2{
font-size:40px;
}
.cr-map-shell{
border-radius:13px;
}
.cr-map-panel-head{
padding:19px 15px 12px;
}
.cr-map-panel h3{
font-size:25px;
}
.cr-map-list{
max-height:340px;
padding:0 10px;
}
.cr-map-region-button{
width:44px;
height:44px;
}
.cr-map-status{
left:8px;
bottom:8px;
font-size:8px;
}
}
/* ============================================================
V24 COSTA RICA HUMMINGBIRD MAP — BATCH 2
Frontend-only refinement:
1) map stays pinned at the top while long hotspot lists scroll
2) selected region shows hotspot markers on the approved map
3) selected hotspot is highlighted on the map
============================================================ */
@media (min-width:1001px){
.cr-map-shell{
align-items:start;
}
.cr-map-panel{
min-height:0;
overflow:hidden;
}
.cr-map-list{
min-height:0;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
.cr-map-art{
align-self:start;
}
}
.cr-map-hotspot-overlay{
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
}
.cr-map-hotspot-marker{
position:absolute;
width:18px;
height:18px;
padding:0;
transform:translate(-50%,-50%);
border:2px solid rgba(255,255,255,.96);
border-radius:50%;
background:#176e4e;
box-shadow:0 2px 8px rgba(0,0,0,.30);
cursor:pointer;
pointer-events:auto;
transition:transform .14s ease,background .14s ease,box-shadow .14s ease;
}
.cr-map-hotspot-marker::after{
content:"";
position:absolute;
inset:-6px;
border-radius:50%;
}
.cr-map-hotspot-marker:hover,
.cr-map-hotspot-marker:focus-visible{
outline:none;
transform:translate(-50%,-50%) scale(1.28);
background:#0e5038;
box-shadow:0 0 0 4px rgba(255,255,255,.68),0 4px 13px rgba(0,0,0,.34);
z-index:3;
}
.cr-map-hotspot-marker.is-selected{
width:24px;
height:24px;
background:#17392c;
box-shadow:0 0 0 5px rgba(255,255,255,.82),0 5px 16px rgba(0,0,0,.36);
z-index:4;
}
.cr-map-hotspot-marker.is-zero{
width:11px;
height:11px;
border-width:1px;
background:rgba(23,110,78,.52);
box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.cr-map-context{
position:absolute;
top:14px;
left:14px;
z-index:6;
width:min(310px,calc(100% - 28px));
padding:12px 14px;
border:1px solid rgba(255,255,255,.68);
border-radius:10px;
background:rgba(255,255,255,.91);
color:#17392c;
box-shadow:0 6px 20px rgba(18,52,39,.18);
backdrop-filter:blur(6px);
pointer-events:none;
}
.cr-map-context[hidden]{
display:none;
}
.cr-map-context small,
.cr-map-context strong,
.cr-map-context span{
display:block;
}
.cr-map-context small{
margin-bottom:4px;
color:#327257;
font-size:8px;
font-weight:900;
letter-spacing:.18em;
}
.cr-map-context strong{
font-family:Georgia,serif;
font-size:18px;
line-height:1.08;
}
.cr-map-context span{
margin-top:5px;
color:#62736a;
font-size:9.5px;
line-height:1.35;
}
.cr-map-region-button.is-selected::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:92px;
height:92px;
transform:translate(-50%,-50%);
border:2px solid rgba(255,255,255,.82);
border-radius:50%;
box-shadow:0 0 0 4px rgba(23,110,78,.25);
pointer-events:none;
}
@media(max-width:1000px){
.cr-map-hotspot-marker{
width:16px;
height:16px;
}
.cr-map-hotspot-marker.is-selected{
width:22px;
height:22px;
}
.cr-map-context{
top:10px;
left:10px;
}
}
@media(max-width:700px){
.cr-map-context{
width:min(260px,calc(100% - 20px));
padding:9px 10px;
}
.cr-map-context strong{
font-size:15px;
}
.cr-map-context span{
font-size:8.5px;
}
.cr-map-hotspot-marker{
width:14px;
height:14px;
}
.cr-map-hotspot-marker.is-selected{
width:20px;
height:20px;
}
.cr-map-region-button.is-selected::before{
width:68px;
height:68px;
}
}
/* ============================================================
V24 COSTA RICA HUMMINGBIRD MAP — BATCH 3
Region focus layer. Uses the same approved local PNG.
============================================================ */
.cr-map-stage{
position:absolute;
inset:0;
width:100%;
height:100%;
transform-origin:0 0;
transition:transform .34s ease;
will-change:transform;
}
.cr-map-stage>img{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:contain;
user-select:none;
-webkit-user-drag:none;
}
.cr-map-art.is-region-view .cr-map-region-button:not(.is-selected){
opacity:.18;
pointer-events:none;
}
.cr-map-art.is-region-view .cr-map-region-button.is-selected::before{
width:72px;
height:72px;
border-color:rgba(255,255,255,.95);
box-shadow:0 0 0 5px rgba(23,110,78,.34);
}
.cr-map-art.is-region-view .cr-map-hotspot-marker{
transform:translate(-50%,-50%) scale(.72);
}
.cr-map-art.is-region-view .cr-map-hotspot-marker:hover,
.cr-map-art.is-region-view .cr-map-hotspot-marker:focus-visible{
transform:translate(-50%,-50%) scale(.94);
}
.cr-map-art.is-region-view .cr-map-hotspot-marker.is-selected{
transform:translate(-50%,-50%) scale(.88);
}
.cr-map-context{
z-index:8;
}
.cr-map-status{
z-index:8;
}
.cr-map-back-map{
display:none;
}
@media(prefers-reduced-motion:reduce){
.cr-map-stage{
transition:none;
}
}
/* ============================================================
V24 COSTA RICA HUMMINGBIRD MAP — BATCH 4
Layer 1: approved illustrated Costa Rica region map.
Layer 2: Google Map for selected region with numbered hotspots
and nearest-airport travel context.
============================================================ */
.cr-map-stage[hidden],
.cr-google-map[hidden],
.cr-google-map-message[hidden],
.cr-airport-card[hidden]{
display:none !important;
}
.cr-google-map{
position:absolute;
inset:0;
z-index:2;
width:100%;
height:100%;
background:#e8ece8;
}
.cr-google-map-message{
position:absolute;
left:50%;
top:50%;
z-index:9;
transform:translate(-50%,-50%);
width:min(390px,calc(100% - 40px));
padding:15px 17px;
border:1px solid #d9e1d8;
border-radius:10px;
background:rgba(255,255,255,.96);
color:#53665c;
font-size:11px;
line-height:1.45;
text-align:center;
box-shadow:0 10px 28px rgba(20,49,37,.18);
}
.cr-map-art.is-google-view{
background:#e8ece8;
}
.cr-map-art.is-google-view .cr-map-context{
z-index:7;
}
.cr-map-art.is-google-view .cr-map-status{
z-index:7;
}
.cr-airport-card{
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
margin:0;
padding:12px 16px;
border-bottom:1px solid #dde6dd;
background:#f3f7f0;
}
.cr-airport-icon{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:50%;
background:#244f72;
color:#fff;
font-size:15px;
}
.cr-airport-copy span{
display:block;
color:#52705f;
font-size:8px;
font-weight:900;
letter-spacing:.15em;
}
.cr-airport-copy strong{
display:block;
margin-top:3px;
color:#183328;
font-family:Georgia,serif;
font-size:13px;
line-height:1.2;
}
.cr-airport-copy p{
margin:4px 0 0;
color:#65766d;
font-size:9.5px;
line-height:1.35;
}
.cr-airport-actions{
display:flex;
align-items:center;
gap:12px;
margin-top:7px;
}
.cr-airport-actions button,
.cr-airport-actions a{
border:0;
padding:0;
background:transparent;
color:#176e4e;
font:800 9px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
text-decoration:none;
cursor:pointer;
}
.cr-hotspot-row{
grid-template-columns:28px minmax(0,1fr) auto;
}
.cr-hotspot-number{
width:24px;
height:24px;
display:grid;
place-items:center;
align-self:start;
margin-top:1px;
border-radius:50%;
background:#176e4e;
color:#fff;
font-size:9px;
font-weight:900;
line-height:1;
}
.cr-hotspot-row:hover .cr-hotspot-number,
.cr-hotspot-row:focus-visible .cr-hotspot-number,
.cr-hotspot-row.is-selected .cr-hotspot-number{
background:#17392c;
}
.cr-google-info{
min-width:180px;
max-width:250px;
color:#17392c;
font-family:Inter,ui-sans-serif,system-ui,sans-serif;
}
.cr-google-info strong{
display:block;
margin-bottom:4px;
font-family:Georgia,serif;
font-size:14px;
line-height:1.2;
}
.cr-google-info span{
display:block;
color:#617168;
font-size:10px;
line-height:1.35;
}
.cr-google-info button{
margin-top:8px;
padding:6px 9px;
border:0;
border-radius:6px;
background:#176e4e;
color:#fff;
font-size:10px;
font-weight:800;
cursor:pointer;
}
/* Batch 4 replaces the illustrated-map region zoom and hotspot dots.
The approved illustration remains unchanged for the 10-region layer. */
.cr-map-art.is-google-view .cr-map-stage{
display:none;
}
@media(max-width:700px){
.cr-airport-card{
padding:10px 13px;
}
.cr-hotspot-row{
grid-template-columns:26px minmax(0,1fr) auto;
}
.cr-hotspot-number{
width:22px;
height:22px;
font-size:8px;
}
}
/* ============================================================
V24 COSTA RICA MAP — BATCH 4.2
Region hit-area correction + softer map information surfaces.
============================================================ */
/* Region buttons are now custom-sized from JS to match the illustrated
region areas. Keep them invisible; only show a compact focus halo. */
.cr-map-region-button{
min-width:72px;
min-height:72px;
border-radius:28px;
}
.cr-map-region-button::after{
left:50%;
top:50%;
right:auto;
bottom:auto;
width:46px;
height:46px;
inset:auto;
transform:translate(-50%,-50%);
}
.cr-map-region-button:hover::after,
.cr-map-region-button:focus-visible::after,
.cr-map-region-button.is-selected::after{
transform:translate(-50%,-50%) scale(1.08);
}
/* The selected-region halo remains compact even though the click target
itself can be much larger. */
.cr-map-region-button.is-selected::before{
width:68px;
height:68px;
}
/* Softer information surfaces for easier reading than pure white. */
.cr-map-context{
border-color:rgba(76,108,91,.32);
background:rgba(232,240,232,.96);
color:#17392c;
box-shadow:0 6px 20px rgba(18,52,39,.16);
}
.cr-map-context small{
color:#245f47;
}
.cr-map-context span{
color:#445f52;
}
.cr-map-status{
background:rgba(232,240,232,.96);
color:#405a4d;
border:1px solid rgba(76,108,91,.24);
}
.cr-google-map-message{
border-color:#c8d6ca;
background:rgba(232,240,232,.97);
color:#405a4d;
}
.cr-google-info{
padding:8px 9px;
border-radius:8px;
background:#edf4ed;
color:#17392c;
}
.cr-google-info span{
color:#496153;
}
@media(max-width:700px){
.cr-map-region-button{
min-width:62px;
min-height:62px;
}
.cr-map-region-button::after{
width:40px;
height:40px;
}
.cr-map-region-button.is-selected::before{
width:58px;
height:58px;
}
}
/* ============================================================
V24 COSTA RICA MAP — ALIGNMENT FIX
New approved PNG is 1536 x 1024 (3:2).
Region badges are dynamic and rendered from region.speciesCount.
============================================================ */
.cr-map-art{
aspect-ratio:3 / 2;
background:#9fcfd6;
}
.cr-map-stage,
.cr-map-stage>img{
width:100%;
height:100%;
}
.cr-map-stage>img{
object-fit:contain;
object-position:center center;
}
/* Dynamic region badge. The number comes from JavaScript/API data. */
.cr-map-region-button{
display:grid;
place-items:center;
min-width:0;
min-height:0;
border-radius:34px;
background:transparent;
overflow:visible;
}
.cr-map-region-button::after,
.cr-map-region-button.is-selected::before{
display:none !important;
}
.cr-map-region-value{
position:absolute;
left:50%;
top:50%;
width:58px;
height:44px;
display:grid;
place-items:center;
transform:translate(-50%,-50%);
border:2px solid rgba(255,255,255,.92);
border-radius:999px;
background:#241d18;
color:#fff;
font-family:Georgia,serif;
font-size:24px;
font-weight:700;
line-height:1;
text-shadow:0 1px 2px rgba(0,0,0,.45);
box-shadow:0 3px 10px rgba(0,0,0,.28);
pointer-events:none;
transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.cr-map-region-button:hover .cr-map-region-value,
.cr-map-region-button:focus-visible .cr-map-region-value{
transform:translate(-50%,-50%) scale(1.08);
background:#17392c;
box-shadow:0 0 0 4px rgba(255,255,255,.72),0 5px 16px rgba(0,0,0,.34);
}
.cr-map-region-button:focus-visible{
outline:none;
}
.cr-map-boundary-note{
margin-top:8px !important;
padding-top:8px;
border-top:1px solid rgba(68,102,84,.18);
}
.cr-map-boundary-note strong{
display:inline;
margin:0 4px 0 0;
color:#405e4e;
}
@media(max-width:1000px){
.cr-map-art{
aspect-ratio:3 / 2;
}
}
@media(max-width:700px){
.cr-map-region-value{
width:50px;
height:38px;
font-size:20px;
}
}
/* ============================================================
V24 COSTA RICA MAP — LEFT PANEL FIT FIX
Desktop: show all 10 regions without an internal scrollbar.
Keeps the 3:2 approved map unchanged.
============================================================ */
@media (min-width:1001px){
.cr-map-panel{
overflow:hidden;
}
.cr-map-panel-head{
padding:16px 16px 10px;
}
.cr-map-kicker{
margin-bottom:3px;
font-size:8px;
}
.cr-map-panel h3{
margin-bottom:5px;
font-size:25px;
line-height:1;
}
.cr-map-panel-head>p:last-child{
font-size:11px;
line-height:1.28;
}
.cr-map-list{
flex:1 1 auto;
min-height:0;
overflow:hidden;
padding:0 10px;
scrollbar-gutter:auto;
}
.cr-region-row{
gap:9px;
padding:6px 4px;
}
.cr-region-copy strong{
font-size:12.3px;
line-height:1.08;
}
.cr-region-copy small{
margin-top:2px;
font-size:8.4px;
line-height:1.18;
}
.cr-region-count{
min-width:46px;
}
.cr-region-count b{
font-size:21px;
line-height:.88;
}
.cr-region-count span{
margin-top:2px;
font-size:7px;
}
.cr-map-note{
flex:0 0 auto;
padding:8px 14px 9px;
}
.cr-map-note strong{
margin-bottom:2px;
font-size:8.5px;
}
.cr-map-note p{
margin:2px 0;
font-size:7.7px;
line-height:1.22;
}
.cr-map-note a{
margin-top:3px;
font-size:8px;
}
.cr-map-boundary-note{
margin-top:4px !important;
padding-top:4px;
}
}
/* ============================================================
V24 COSTA RICA MAP — RESPONSIVE BADGE ANCHORS
Badge x/y and hit areas are percentage-based in wkh-home.js.
These minimums keep the same targets usable on smaller screens.
============================================================ */
.cr-map-region-button{
min-width:54px;
min-height:46px;
max-width:150px;
max-height:120px;
touch-action:manipulation;
}
@media(max-width:700px){
.cr-map-region-button{
min-width:46px;
min-height:42px;
max-width:96px;
max-height:82px;
}
.cr-map-region-value{
width:46px;
height:36px;
font-size:19px;
}
}
/* ============================================================
V24 COSTA RICA MAP — TWO-WAY REGION HOVER / FOCUS
Left region row <-> illustrated-map dynamic badge.
============================================================ */
.cr-region-row{
transition:
background .14s ease,
box-shadow .14s ease,
transform .14s ease;
}
.cr-region-row.is-linked-hover{
background:#e7f1e8;
box-shadow:inset 4px 0 0 #176e4e;
}
.cr-region-row.is-linked-hover .cr-region-copy strong{
color:#0f4f37;
}
.cr-region-row.is-linked-hover .cr-region-count{
color:#0f5f42;
}
.cr-map-region-button.is-linked-hover .cr-map-region-value{
transform:translate(-50%,-50%) scale(1.12);
background:#17392c;
box-shadow:
0 0 0 5px rgba(255,255,255,.78),
0 0 0 8px rgba(23,110,78,.55),
0 6px 18px rgba(0,0,0,.32);
}
@media (hover:none){
.cr-region-row.is-linked-hover{
background:#edf5ee;
}
}
@media(prefers-reduced-motion:reduce){
.cr-region-row,
.cr-map-region-value{
transition:none;
}
}
/* ============================================================
V24 COSTA RICA MAP — CLICKABLE BIRD PROFILE LINKS
Hotspot species open the existing WKH Bird Profile page.
============================================================ */
.cr-species-link{
display:block;
margin:-3px -6px;
padding:6px;
border-radius:7px;
color:inherit;
text-decoration:none;
transition:background .14s ease,color .14s ease,transform .14s ease;
}
.cr-species-link strong{
color:#17392c;
}
.cr-species-link:hover,
.cr-species-link:focus-visible{
outline:none;
background:#edf4ed;
}
.cr-species-link:hover strong,
.cr-species-link:focus-visible strong{
color:#0f6547;
text-decoration:underline;
text-underline-offset:2px;
}
.cr-species-link:focus-visible{
box-shadow:0 0 0 2px rgba(23,110,78,.30);
}
@media(prefers-reduced-motion:reduce){
.cr-species-link{
transition:none;
}
}
/* ============================================================
V24 COSTA RICA MAP — SPECIES LIST SCROLL FIX
Desktop: keep the compact 10-region layout, but allow longer
hotspot/species content to scroll inside the left panel.
============================================================ */
@media (min-width:1001px){
.cr-map-list{
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
}
/* ============================================================
V24 COSTA RICA MAP — LOCATION PROFILE
Reuses the existing BirdIntel travel-location APIs while keeping
the user inside the Costa Rica map page.
============================================================ */
.cr-hotspot-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:8px 4px 4px;
}
.cr-hotspot-action{
min-height:34px;
padding:0 12px;
border:1px solid #176e4e;
border-radius:7px;
background:#176e4e;
color:#fff;
font:800 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
}
.cr-hotspot-action:hover,
.cr-hotspot-action:focus-visible{
outline:none;
background:#12583f;
border-color:#12583f;
}
.cr-google-info .cr-google-info-secondary{
margin-left:6px;
background:#edf4ed;
color:#176e4e;
border:1px solid #b8cfbd;
}
.cr-google-info .cr-google-info-secondary:hover,
.cr-google-info .cr-google-info-secondary:focus-visible{
background:#dfece1;
}
.cr-location-profile-overlay{
position:fixed;
inset:0;
z-index:1500;
display:grid;
place-items:center;
padding:22px;
background:rgba(4,22,16,.76);
backdrop-filter:blur(5px);
}
.cr-location-profile-overlay[hidden]{
display:none !important;
}
.cr-location-profile-page{
width:min(1180px,100%);
max-height:calc(100vh - 44px);
overflow:auto;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
background:#f6f3e9;
color:#17392c;
box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.cr-location-profile-hero{
position:relative;
padding:28px 72px 28px 34px;
background:
radial-gradient(circle at 86% 20%,rgba(64,163,114,.24),transparent 28%),
linear-gradient(135deg,#0b3325,#14503a);
color:#fff;
}
.cr-location-profile-back{
margin:0 0 18px;
padding:0;
border:0;
background:transparent;
color:#d9eee3;
font:800 11px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
}
.cr-location-profile-back:hover,
.cr-location-profile-back:focus-visible{
outline:none;
color:#fff;
text-decoration:underline;
text-underline-offset:3px;
}
.cr-location-profile-eyebrow{
margin:0 0 5px;
color:#c7ddcf;
font-size:9px;
font-weight:900;
letter-spacing:.18em;
}
.cr-location-profile-label{
display:inline-flex;
min-height:25px;
align-items:center;
padding:0 9px;
border:1px solid rgba(255,255,255,.32);
border-radius:999px;
background:rgba(255,255,255,.08);
color:#eff7f2;
font-size:9px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}
.cr-location-profile-hero h2{
margin:10px 0 6px;
font-family:Georgia,serif;
font-size:clamp(34px,4vw,52px);
line-height:1;
letter-spacing:-.025em;
}
.cr-location-profile-hero-copy>p:last-child{
margin:0;
color:#d6e7dd;
font-size:12px;
}
.cr-location-profile-close{
position:absolute;
top:20px;
right:22px;
width:40px;
height:40px;
padding:0;
border:1px solid rgba(255,255,255,.34);
border-radius:50%;
background:rgba(3,25,18,.24);
color:#fff;
font-size:27px;
line-height:1;
cursor:pointer;
}
.cr-location-profile-close:hover,
.cr-location-profile-close:focus-visible{
outline:none;
background:rgba(255,255,255,.15);
}
.cr-location-profile-body{
padding:24px;
}
.cr-location-profile-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
gap:18px;
}
.cr-location-profile-card{
border:1px solid #dce4db;
border-radius:14px;
background:#fffdfa;
padding:22px;
box-shadow:0 8px 24px rgba(27,58,45,.06);
}
.cr-location-profile-kicker{
margin:0 0 8px;
color:#327257;
font-size:9px;
font-weight:900;
letter-spacing:.18em;
}
.cr-location-profile-card h3{
margin:0;
color:#183328;
font-family:Georgia,serif;
font-size:24px;
}
.cr-location-profile-summary-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}
.cr-location-profile-summary-head strong{
display:block;
font-family:Georgia,serif;
font-size:25px;
line-height:1.05;
}
.cr-location-profile-summary-head small{
display:block;
margin-top:5px;
color:#66776d;
font-size:10px;
}
.cr-location-profile-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
.cr-location-profile-badge{
display:inline-flex;
min-height:26px;
align-items:center;
padding:0 8px;
border-radius:999px;
background:#edf4ed;
color:#355c49;
font-size:9px;
font-weight:850;
}
.cr-location-profile-badge.is-verified{
background:#176e4e;
color:#fff;
}
.cr-location-profile-summary>p{
margin:0;
color:#52655a;
font-size:13px;
line-height:1.62;
}
.cr-location-profile-booking-note{
margin-top:13px;
padding:10px 12px;
border-radius:8px;
background:#f0f5ed;
color:#53675c;
font-size:10px;
line-height:1.45;
}
.cr-location-profile-actions,
.cr-location-stay-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:15px;
}
.cr-location-profile-actions a,
.cr-location-stay-actions a{
display:inline-flex;
min-height:32px;
align-items:center;
padding:0 10px;
border:1px solid #bdd0c2;
border-radius:7px;
background:#f3f7f2;
color:#176e4e;
font-size:9px;
font-weight:850;
text-decoration:none;
}
.cr-location-profile-actions a:hover,
.cr-location-profile-actions a:focus-visible,
.cr-location-stay-actions a:hover,
.cr-location-stay-actions a:focus-visible{
outline:none;
background:#e5efe6;
border-color:#99b8a1;
}
.cr-location-profile-facts{
display:grid;
gap:9px;
margin-top:15px;
}
.cr-location-profile-fact{
display:grid;
grid-template-columns:100px minmax(0,1fr);
gap:10px;
padding-bottom:9px;
border-bottom:1px solid #edf0ec;
}
.cr-location-profile-fact:last-child{
border-bottom:0;
padding-bottom:0;
}
.cr-location-profile-fact span{
color:#718078;
font-size:9px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}
.cr-location-profile-fact strong{
color:#29483a;
font-size:11px;
line-height:1.35;
}
.cr-location-profile-stays-card{
margin-top:18px;
}
.cr-location-profile-section-head{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-end;
margin-bottom:16px;
}
.cr-location-profile-section-head p:last-child{
margin:5px 0 0;
color:#68786f;
font-size:11px;
}
.cr-location-profile-stays{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.cr-location-stay-card{
padding:15px;
border:1px solid #e0e6df;
border-radius:11px;
background:#fafcf8;
}
.cr-location-stay-title{
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}
.cr-location-stay-title strong{
color:#1b382c;
font-family:Georgia,serif;
font-size:16px;
line-height:1.15;
}
.cr-location-stay-tag{
flex:0 0 auto;
padding:4px 7px;
border-radius:999px;
background:#e4f0e5;
color:#176e4e;
font-size:8px;
font-weight:900;
}
.cr-location-stay-meta{
margin-top:6px;
color:#687970;
font-size:9.5px;
line-height:1.4;
}
.cr-location-profile-loading,
.cr-location-profile-empty,
.cr-location-profile-error{
margin:0 !important;
color:#65766c !important;
font-size:11px !important;
line-height:1.5 !important;
}
.cr-location-profile-error{
color:#8a3c34 !important;
}
.cr-location-profile-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:16px;
}
.cr-location-profile-pagination[hidden]{
display:none !important;
}
.cr-location-profile-pagination button{
min-height:32px;
padding:0 11px;
border:1px solid #b8cdbd;
border-radius:7px;
background:#edf4ed;
color:#176e4e;
font-size:9px;
font-weight:850;
cursor:pointer;
}
.cr-location-profile-pagination button:disabled{
opacity:.45;
cursor:default;
}
.cr-location-profile-pagination span{
color:#617168;
font-size:9px;
font-weight:800;
}
@media(max-width:800px){
.cr-location-profile-overlay{
padding:0;
align-items:stretch;
}
.cr-location-profile-page{
max-height:100vh;
border:0;
border-radius:0;
}
.cr-location-profile-hero{
padding:22px 58px 22px 20px;
}
.cr-location-profile-body{
padding:14px;
}
.cr-location-profile-grid{
grid-template-columns:1fr;
}
.cr-location-profile-stays{
grid-template-columns:1fr;
}
}
@media(max-width:520px){
.cr-location-profile-card{
padding:17px;
}
.cr-location-profile-summary-head{
flex-direction:column;
}
.cr-location-profile-badges{
justify-content:flex-start;
}
.cr-location-profile-fact{
grid-template-columns:88px minmax(0,1fr);
}
}
/* ============================================================
V24 COSTA RICA MAP — MULTI-BIRD TRIP SELECTION
Hotspot birds can be selected in place and sent through the
existing BirdIntel -> Trip Planner import contract.
============================================================ */
.cr-trip-selection-tools{
margin:7px 4px 2px;
padding:10px;
border:1px solid #d9e4d9;
border-radius:9px;
background:#f4f8f2;
}
.cr-trip-selection-copy{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.cr-trip-selection-copy strong{
color:#183328;
font-family:Georgia,serif;
font-size:13px;
}
.cr-trip-selection-copy span{
color:#65776d;
font-size:9px;
font-weight:800;
white-space:nowrap;
}
.cr-trip-selection-actions{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.cr-trip-selection-actions button{
min-height:30px;
border-radius:6px;
font:800 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
}
.cr-trip-selection-link{
padding:0 8px;
border:1px solid #bed0c1;
background:#fff;
color:#176e4e;
}
.cr-trip-selection-link:hover,
.cr-trip-selection-link:focus-visible{
outline:none;
background:#e9f1e9;
border-color:#9fb9a5;
}
.cr-trip-selection-add{
margin-left:auto;
padding:0 10px;
border:1px solid #176e4e;
background:#176e4e;
color:#fff;
}
.cr-trip-selection-add:hover,
.cr-trip-selection-add:focus-visible{
outline:none;
background:#12583f;
border-color:#12583f;
}
.cr-trip-selection-actions button:disabled{
opacity:.45;
cursor:default;
}
.cr-species-trip-list{
list-style:none;
padding-left:8px;
}
.cr-species-trip-row{
display:grid;
grid-template-columns:24px minmax(0,1fr);
gap:5px;
align-items:start;
padding:2px 0 !important;
border-bottom:1px solid #edf0ec;
border-radius:7px;
}
.cr-species-trip-row:last-child{
border-bottom:0;
}
.cr-species-trip-row.is-selected{
background:#edf5ee;
}
.cr-species-trip-checkbox{
width:15px;
height:15px;
margin:9px 0 0 4px;
accent-color:#176e4e;
cursor:pointer;
}
.cr-species-trip-row .cr-species-link{
margin:0;
padding:6px 7px;
}
@media(max-width:520px){
.cr-trip-selection-copy{
align-items:flex-start;
flex-direction:column;
gap:3px;
}
.cr-trip-selection-add{
width:100%;
margin-left:0;
}
}
/* ============================================================
V24 COSTA RICA MAP — ADD DESTINATION TO TRIP PLANNER
Hotspot destination handoff only. Regions remain navigation.
============================================================ */
.cr-hotspot-action:disabled,
.cr-google-info button:disabled{
opacity:.55;
cursor:wait;
}
.cr-hotspot-action.is-secondary{
background:#f2f7f2;
border-color:#b8cfbd;
color:#176e4e;
}
.cr-hotspot-action.is-secondary:hover,
.cr-hotspot-action.is-secondary:focus-visible{
background:#e3eee4;
border-color:#9db9a3;
color:#12583f;
}
.cr-google-info .cr-google-info-trip{
background:#176e4e;
border-color:#176e4e;
color:#fff;
}
.cr-google-info .cr-google-info-trip:hover,
.cr-google-info .cr-google-info-trip:focus-visible{
background:#12583f;
border-color:#12583f;
color:#fff;
}
@media(max-width:520px){
.cr-hotspot-actions .cr-hotspot-action{
flex:1 1 100%;
}
}
/* ============================================================
V24 COSTA RICA MULTI-BIRD GROUP SELECTOR
Scope: Costa Rica map only.
============================================================ */
.cr-map-diversity{
flex:0 0 250px;
display:flex;
flex-direction:column;
align-items:flex-end;
padding:13px 16px;
border:1px solid #d8e2da;
border-radius:14px;
background:#f7faf6;
text-align:right;
}
.cr-map-diversity strong{
color:#176e4e;
font-family:Georgia,serif;
font-size:31px;
line-height:.95;
}
.cr-map-diversity span{
margin-top:4px;
color:#244c3b;
font-size:12px;
font-weight:850;
}
.cr-map-diversity small{
max-width:220px;
margin-top:5px;
color:#748078;
font-size:8.5px;
line-height:1.25;
}
.cr-bird-group-explorer{
margin:0 0 24px;
padding:18px 20px 17px;
border:1px solid rgba(38,73,57,.16);
border-radius:16px;
background:#fff;
box-shadow:0 9px 26px rgba(28,59,46,.07);
}
.cr-bird-group-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:15px;
}
.cr-bird-group-head>div:first-child{
display:flex;
flex-direction:column;
gap:3px;
}
.cr-bird-group-label,
.cr-bird-group-select-wrap>span,
.cr-bird-group-stats span,
.cr-bird-group-spotlight-copy>span{
color:#66776e;
font-size:8.5px;
font-weight:900;
letter-spacing:.12em;
}
.cr-bird-group-select-wrap{
display:flex;
align-items:center;
gap:9px;
}
.cr-bird-group-select-wrap select{
min-width:190px;
height:38px;
padding:0 34px 0 12px;
border:1px solid #cad7ce;
border-radius:9px;
background:#fbfcfa;
color:#17392c;
font:800 12px Inter,ui-sans-serif,system-ui,sans-serif;
}
.cr-bird-group-content{
display:grid;
grid-template-columns:minmax(300px,.82fr) minmax(0,1.45fr);
gap:26px;
align-items:center;
}
.cr-bird-group-spotlight{
min-height:150px;
display:grid;
grid-template-columns:128px minmax(0,1fr);
gap:18px;
align-items:center;
padding:16px 18px;
border:1px solid #dde7df;
border-radius:14px;
background:linear-gradient(135deg,#f4f8f3,#fbfcf9);
}
.cr-bird-group-spotlight-photo{
width:128px;
height:128px;
display:block;
overflow:hidden;
border:4px solid #fff;
border-radius:50%;
background:#e8efe9;
box-shadow:0 8px 22px rgba(26,64,48,.18);
}
.cr-bird-group-spotlight-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-bird-group-spotlight-copy{
min-width:0;
}
.cr-bird-group-spotlight-copy>span{
display:block;
margin-bottom:5px;
color:#327257;
}
.cr-bird-group-spotlight-copy>strong{
display:block;
color:#17392c;
font-family:Georgia,serif;
font-size:24px;
line-height:1.05;
}
.cr-bird-group-spotlight-copy p{
max-width:360px;
margin:8px 0 0;
color:#596b62;
font-size:11.5px;
line-height:1.5;
}
.cr-bird-group-circles{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
min-width:0;
padding:5px 3px 4px;
}
.cr-bird-group-choice{
width:122px;
min-width:0;
padding:0;
border:0;
background:transparent;
color:#355247;
text-align:center;
cursor:pointer;
}
.cr-bird-group-photo{
width:88px;
height:88px;
display:block;
margin:0 auto 8px;
overflow:hidden;
border:3px solid transparent;
border-radius:50%;
background:#e8efe9;
box-shadow:0 5px 15px rgba(26,64,48,.13);
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.cr-bird-group-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-bird-group-choice strong{
display:block;
font-family:Georgia,serif;
font-size:13px;
line-height:1.15;
}
.cr-bird-group-choice:hover .cr-bird-group-photo,
.cr-bird-group-choice:focus-visible .cr-bird-group-photo{
transform:translateY(-2px);
border-color:#9ebcab;
box-shadow:0 7px 18px rgba(26,64,48,.18);
}
.cr-bird-group-choice:focus-visible{
outline:none;
}
.cr-bird-group-choice.is-active .cr-bird-group-photo{
border-color:#176e4e;
box-shadow:0 0 0 4px rgba(23,110,78,.14),0 7px 18px rgba(26,64,48,.20);
}
.cr-bird-group-choice.is-active strong{
color:#176e4e;
}
.cr-bird-group-stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:14px;
padding-top:13px;
border-top:1px solid #e5ebe6;
}
.cr-bird-group-stats>div{
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
column-gap:10px;
align-items:center;
padding:9px 11px;
border-radius:10px;
background:#f4f7f3;
}
.cr-bird-group-stats span{
grid-column:1/-1;
}
.cr-bird-group-stats strong{
grid-row:2;
color:#176e4e;
font-family:Georgia,serif;
font-size:25px;
}
.cr-bird-group-stats small{
grid-row:2;
color:#53665c;
font-size:10px;
line-height:1.25;
}
.cr-bird-group-explorer.is-loading{
opacity:.72;
}
.cr-bird-group-explorer.is-loading .cr-bird-group-choice,
.cr-bird-group-explorer.is-loading select{
pointer-events:none;
}
@media(max-width:1100px){
.cr-map-heading{
align-items:flex-start;
}
.cr-map-diversity{
flex-basis:220px;
}
.cr-bird-group-content{
grid-template-columns:1fr;
gap:16px;
}
.cr-bird-group-spotlight{
grid-template-columns:110px minmax(0,1fr);
min-height:0;
}
.cr-bird-group-spotlight-photo{
width:110px;
height:110px;
}
.cr-bird-group-spotlight-copy p{
max-width:680px;
}
.cr-bird-group-circles{
justify-content:flex-start;
gap:18px;
overflow-x:auto;
padding:4px 3px 10px;
scrollbar-width:thin;
}
.cr-bird-group-choice{
flex:0 0 110px;
}
}
@media(max-width:700px){
.cr-map-heading{
flex-direction:column;
gap:16px;
}
.cr-map-diversity{
width:100%;
flex-basis:auto;
align-items:flex-start;
text-align:left;
}
.cr-bird-group-explorer{
padding:15px 14px;
}
.cr-bird-group-head{
align-items:stretch;
flex-direction:column;
gap:11px;
}
.cr-bird-group-content{
gap:13px;
}
.cr-bird-group-spotlight{
grid-template-columns:82px minmax(0,1fr);
gap:13px;
padding:13px;
}
.cr-bird-group-spotlight-photo{
width:82px;
height:82px;
border-width:3px;
}
.cr-bird-group-spotlight-copy>strong{
font-size:20px;
}
.cr-bird-group-spotlight-copy p{
margin-top:6px;
font-size:10.5px;
line-height:1.42;
}
.cr-bird-group-select-wrap{
display:flex;
align-items:center;
justify-content:space-between;
}
.cr-bird-group-select-wrap select{
flex:1;
min-width:0;
max-width:240px;
}
.cr-bird-group-circles{
gap:12px;
margin-right:-14px;
}
.cr-bird-group-choice{
flex-basis:94px;
}
.cr-bird-group-photo{
width:72px;
height:72px;
}
.cr-bird-group-choice strong{
font-size:11.5px;
}
.cr-bird-group-stats{
grid-template-columns:1fr;
}
}
/* ============================================================
V24 COSTA RICA MAP — VISUAL REFINEMENT
Scope: presentation only. No map, data, navigation, or sizing logic changes.
Adds stronger Bird Intelligence section hierarchy and a more intentional
region / hotspot navigation panel while preserving the compact desktop fit.
============================================================ */
/* Give the complete Bird Intelligence area its own visual identity. */
.cr-bird-map{
position:relative;
width:min(1500px,calc(100% - 24px));
margin:34px auto 0;
padding:42px 22px 54px;
border:1px solid rgba(32,74,55,.16);
border-top:6px solid #17392c;
border-radius:24px 24px 0 0;
background:
radial-gradient(circle at 88% 7%,rgba(55,128,91,.10),transparent 24%),
linear-gradient(180deg,#eef4ec 0%,#f4f6ef 42%,#f7f5ee 100%);
box-shadow:0 18px 54px rgba(24,55,43,.08);
}
/* Make the section heading feel like the editorial header of one feature. */
.cr-map-heading{
position:relative;
overflow:hidden;
align-items:center;
margin-bottom:18px;
padding:24px 26px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:
radial-gradient(circle at 84% 16%,rgba(104,188,137,.20),transparent 25%),
linear-gradient(135deg,#0c3326 0%,#14513b 58%,#1a6348 100%);
box-shadow:0 14px 34px rgba(18,52,39,.18);
}
.cr-map-heading::after{
content:"";
position:absolute;
left:26px;
bottom:0;
width:118px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#d6c66b,#53ba86);
}
.cr-map-heading .eyebrow.dark{
color:#d8e6dc;
}
.cr-map-heading h2{
color:#fff;
text-shadow:0 2px 14px rgba(0,0,0,.16);
}
.cr-map-heading p:not(.eyebrow){
color:rgba(239,247,242,.84);
}
.cr-map-diversity{
border-color:rgba(255,255,255,.26);
background:rgba(248,252,248,.94);
box-shadow:0 9px 24px rgba(7,35,25,.16);
}
/* Lift the group selector off the sage background without overpowering the map. */
.cr-bird-group-explorer{
position:relative;
margin:0 8px 18px;
border-color:rgba(36,80,59,.22);
background:rgba(255,255,255,.96);
box-shadow:0 14px 34px rgba(27,60,45,.11);
}
.cr-bird-group-explorer::before{
content:"";
position:absolute;
left:18px;
right:18px;
top:0;
height:3px;
border-radius:0 0 999px 999px;
background:linear-gradient(90deg,#176e4e,#70a77d 62%,#d1c46a);
opacity:.82;
}
.cr-bird-group-spotlight{
border-color:#d4e1d7;
background:
radial-gradient(circle at 12% 20%,rgba(69,145,102,.10),transparent 30%),
linear-gradient(135deg,#f2f7f1,#fbfcf8);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
/* Pull the map closer to the selector so the two pieces read as one module. */
.cr-map-shell{
position:relative;
margin-top:-2px;
border-color:rgba(34,75,56,.28);
box-shadow:0 20px 48px rgba(24,55,43,.14);
}
/* Stronger left-panel identity. */
.cr-map-panel{
border-right-color:rgba(21,60,43,.22);
background:linear-gradient(180deg,#fbfcf8 0%,#f6f8f2 100%);
}
.cr-map-panel-head{
position:relative;
overflow:hidden;
border-bottom:1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 90% 15%,rgba(102,180,133,.18),transparent 28%),
linear-gradient(135deg,#0d3628,#14523b 72%,#176247);
color:#fff;
}
.cr-map-panel-head::after{
content:"";
position:absolute;
left:16px;
bottom:0;
width:74px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#d7c86b,#68b98b);
}
.cr-map-back{
color:#dcebe2;
}
.cr-map-back:hover,
.cr-map-back:focus-visible{
color:#fff;
text-decoration:underline;
text-underline-offset:3px;
outline:none;
}
.cr-map-kicker{
color:#c7ddcf;
}
.cr-map-panel h3{
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.15);
}
.cr-map-panel-head>p:last-child{
color:rgba(235,245,239,.80);
}
/* Region/hotspot rows read as choices rather than spreadsheet lines. */
.cr-map-list{
background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(244,247,241,.86));
}
.cr-region-row,
.cr-hotspot-row{
border-bottom-color:rgba(70,102,85,.13);
border-radius:8px;
box-shadow:inset 3px 0 0 transparent;
}
.cr-region-row:hover,
.cr-region-row:focus-visible,
.cr-region-row.is-selected,
.cr-region-row.is-linked-hover,
.cr-hotspot-row:hover,
.cr-hotspot-row:focus-visible,
.cr-hotspot-row.is-selected{
background:linear-gradient(90deg,#e7f1e8 0%,#f2f7f1 100%);
box-shadow:inset 3px 0 0 #176e4e;
}
.cr-region-copy strong,
.cr-hotspot-copy strong{
color:#18392b;
}
.cr-region-row:hover .cr-region-copy strong,
.cr-region-row:focus-visible .cr-region-copy strong,
.cr-region-row.is-linked-hover .cr-region-copy strong,
.cr-hotspot-row:hover .cr-hotspot-copy strong,
.cr-hotspot-row:focus-visible .cr-hotspot-copy strong{
color:#0f5439;
}
/* Turn the count into a compact visual badge while retaining the same data. */
.cr-region-count{
min-width:50px;
padding:5px 6px 4px;
border:1px solid #cdddcf;
border-radius:10px;
background:#edf4ed;
color:#176e4e;
text-align:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;
}
.cr-region-count b{
color:inherit;
}
.cr-region-count span{
color:#63766b;
}
.cr-region-row:hover .cr-region-count,
.cr-region-row:focus-visible .cr-region-count,
.cr-region-row.is-linked-hover .cr-region-count,
.cr-hotspot-row:hover .cr-region-count,
.cr-hotspot-row:focus-visible .cr-region-count{
border-color:#176e4e;
background:#176e4e;
color:#fff;
transform:translateY(-1px);
}
.cr-region-row:hover .cr-region-count span,
.cr-region-row:focus-visible .cr-region-count span,
.cr-region-row.is-linked-hover .cr-region-count span,
.cr-hotspot-row:hover .cr-region-count span,
.cr-hotspot-row:focus-visible .cr-region-count span{
color:rgba(255,255,255,.78);
}
/* Keep supporting information visually separate from the interactive choices. */
.cr-map-note{
border-top-color:#cad9cb;
background:linear-gradient(180deg,#edf4e9,#e8f0e4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.cr-map-note strong{
color:#274b39;
}
.cr-map-note a{
color:#0f6848;
}
@media (min-width:1001px){
/* Preserve the existing all-regions desktop fit. */
.cr-map-panel-head{
padding:16px 16px 11px;
}
.cr-region-row{
padding:5px 6px;
}
.cr-region-count{
min-width:46px;
padding:4px 5px 3px;
}
.cr-region-count b{
font-size:19px;
}
.cr-region-count span{
font-size:6.7px;
}
.cr-map-note{
padding:8px 14px 9px;
}
}
@media(max-width:1000px){
.cr-bird-map{
width:min(100% - 18px,1500px);
margin-top:24px;
padding:32px 14px 44px;
border-radius:20px 20px 0 0;
}
.cr-map-heading{
align-items:flex-start;
padding:22px;
}
.cr-bird-group-explorer{
margin-left:2px;
margin-right:2px;
}
.cr-map-panel{
border-right:0;
border-bottom:1px solid rgba(21,60,43,.22);
}
}
@media(max-width:700px){
.cr-bird-map{
width:calc(100% - 12px);
margin-top:18px;
padding:26px 8px 36px;
border-top-width:5px;
border-radius:16px 16px 0 0;
}
.cr-map-heading{
gap:15px;
padding:20px 16px;
border-radius:14px;
}
.cr-map-heading::after{
left:16px;
width:86px;
}
.cr-map-heading h2{
font-size:38px;
}
.cr-map-diversity{
width:100%;
align-items:flex-start;
text-align:left;
}
.cr-bird-group-explorer{
margin:0 0 14px;
border-radius:13px;
}
.cr-map-shell{
border-radius:13px;
}
.cr-map-panel-head::after{
left:15px;
}
.cr-region-count{
min-width:44px;
padding:4px;
border-radius:9px;
}
}
@media(prefers-reduced-motion:reduce){
.cr-region-count{
transition:none;
}
}
/* ============================================================
V24 COSTA RICA MAP — EDITORIAL BIRD-GROUP PASS
Scope: presentation and approved group-panel structure only.
Existing IDs, bird-group controls, counts and map behavior are preserved.
============================================================ */
/* Make the Bird Intelligence header more compact and integrated. */
.cr-map-heading{
padding:19px 24px 18px;
min-height:0;
gap:28px;
}
.cr-map-heading>div:first-child{
max-width:900px;
}
.cr-map-heading .eyebrow.dark{
margin-bottom:8px;
font-size:9px;
letter-spacing:.2em;
}
.cr-map-heading h2{
margin-bottom:8px;
font-size:clamp(35px,3.5vw,50px);
line-height:.96;
}
.cr-map-heading p:not(.eyebrow){
max-width:820px;
font-size:12.5px;
line-height:1.45;
}
/* The Costa Rica diversity fact belongs to the editorial header, not a floating white card. */
.cr-map-diversity{
flex:0 0 230px;
min-height:82px;
justify-content:center;
padding:12px 15px;
border:1px solid rgba(255,255,255,.18);
border-radius:13px;
background:rgba(255,255,255,.075);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(3px);
}
.cr-map-diversity strong{
color:#f0e49a;
font-size:29px;
text-shadow:0 2px 8px rgba(0,0,0,.16);
}
.cr-map-diversity span{
color:#fff;
font-size:11px;
}
.cr-map-diversity small{
color:rgba(230,242,235,.70);
font-size:7.8px;
}
/* One editorial composition: selected group + integrated stats + category navigation. */
.cr-bird-group-explorer{
padding:15px 18px 17px;
}
.cr-bird-group-head{
align-items:center;
margin-bottom:12px;
padding-bottom:10px;
border-bottom:1px solid #e6ece7;
}
.cr-bird-group-label{
color:#315e4a;
font-size:9px;
letter-spacing:.16em;
}
.cr-bird-group-select-wrap>span{
color:#718078;
font-size:8px;
}
.cr-bird-group-select-wrap select{
height:34px;
min-width:176px;
font-size:11px;
background:#f7faf6;
}
.cr-bird-group-content{
grid-template-columns:minmax(430px,1.08fr) minmax(0,.92fr);
gap:22px;
align-items:stretch;
}
.cr-bird-group-spotlight{
min-height:174px;
grid-template-columns:150px minmax(0,1fr);
gap:20px;
padding:18px 20px;
border-color:#d0dfd3;
background:
radial-gradient(circle at 13% 22%,rgba(66,143,100,.13),transparent 32%),
linear-gradient(135deg,#eef5ee 0%,#f9fbf7 76%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px rgba(27,60,45,.06);
}
.cr-bird-group-spotlight-photo{
width:150px;
height:150px;
margin-left:-4px;
border-width:5px;
box-shadow:0 10px 28px rgba(20,56,40,.22);
}
.cr-bird-group-spotlight-copy{
display:flex;
flex-direction:column;
justify-content:center;
}
.cr-bird-group-spotlight-copy>span{
margin-bottom:4px;
color:#327257;
font-size:8px;
letter-spacing:.16em;
}
.cr-bird-group-spotlight-copy>strong{
font-size:29px;
letter-spacing:-.015em;
}
.cr-bird-group-spotlight-copy p{
max-width:480px;
margin:7px 0 0;
font-size:11px;
line-height:1.48;
}
/* Counts now belong to the selected-group story instead of forming a detached strip. */
.cr-bird-group-stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:13px;
padding-top:11px;
border-top:1px solid #dce6dd;
}
.cr-bird-group-stats>div{
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:8px;
align-items:center;
padding:8px 9px;
border:1px solid rgba(69,105,86,.10);
border-radius:9px;
background:rgba(255,255,255,.66);
}
.cr-bird-group-stats span{
grid-column:1/-1;
color:#728078;
font-size:7px;
letter-spacing:.11em;
}
.cr-bird-group-stats strong{
grid-row:2;
color:#176e4e;
font-size:23px;
line-height:1;
}
.cr-bird-group-stats small{
grid-row:2;
color:#53665c;
font-size:8.7px;
line-height:1.2;
}
.cr-bird-group-nav{
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:14px 12px 10px;
border:1px solid #e0e7e1;
border-radius:14px;
background:linear-gradient(180deg,#fff 0%,#fafcf8 100%);
}
.cr-bird-group-nav-head{
margin-bottom:12px;
padding:0 5px;
}
.cr-bird-group-nav-head span{
display:block;
color:#315e4a;
font-size:8px;
font-weight:900;
letter-spacing:.15em;
}
.cr-bird-group-nav-head small{
display:block;
margin-top:4px;
color:#718078;
font-size:9px;
line-height:1.3;
}
.cr-bird-group-circles{
justify-content:space-around;
gap:8px;
padding:2px 0 4px;
}
.cr-bird-group-choice{
width:92px;
}
.cr-bird-group-photo{
width:68px;
height:68px;
margin-bottom:6px;
border-width:2px;
box-shadow:0 4px 12px rgba(26,64,48,.11);
}
.cr-bird-group-choice strong{
font-size:11px;
line-height:1.12;
}
.cr-bird-group-choice.is-active .cr-bird-group-photo{
box-shadow:0 0 0 3px rgba(23,110,78,.12),0 6px 16px rgba(26,64,48,.16);
}
/* A small editorial bridge turns the map into the next step of the story. */
.cr-map-transition{
display:flex;
align-items:baseline;
gap:12px;
margin:1px 10px 9px;
padding:0 4px;
}
.cr-map-transition span{
color:#176e4e;
font-size:8px;
font-weight:900;
letter-spacing:.16em;
}
.cr-map-transition strong{
color:#4d6257;
font-family:Georgia,serif;
font-size:13px;
font-weight:600;
}
/* Slightly polish the already-approved region navigator without changing its fit. */
.cr-region-row:nth-child(even){
background:rgba(241,246,240,.42);
}
.cr-region-row:hover,
.cr-region-row:focus-visible,
.cr-region-row.is-selected,
.cr-region-row.is-linked-hover{
background:linear-gradient(90deg,#e3efe5 0%,#f2f7f1 100%);
}
.cr-region-count{
border-radius:999px;
min-width:44px;
}
@media(max-width:1100px){
.cr-bird-group-content{
grid-template-columns:1fr;
}
.cr-bird-group-spotlight{
grid-template-columns:126px minmax(0,1fr);
}
.cr-bird-group-spotlight-photo{
width:126px;
height:126px;
}
.cr-bird-group-nav{
padding-bottom:12px;
}
.cr-bird-group-circles{
justify-content:flex-start;
overflow-x:auto;
gap:14px;
}
.cr-bird-group-choice{
flex:0 0 92px;
}
}
@media(max-width:700px){
.cr-map-heading{
padding:17px 15px 16px;
}
.cr-map-heading h2{
font-size:34px;
}
.cr-map-diversity{
min-height:0;
padding:10px 12px;
background:rgba(255,255,255,.08);
}
.cr-map-diversity strong{
font-size:26px;
}
.cr-bird-group-explorer{
padding:13px 12px 14px;
}
.cr-bird-group-head{
align-items:stretch;
flex-direction:column;
gap:9px;
}
.cr-bird-group-spotlight{
grid-template-columns:86px minmax(0,1fr);
gap:12px;
min-height:0;
padding:13px;
}
.cr-bird-group-spotlight-photo{
width:86px;
height:86px;
margin-left:0;
border-width:3px;
}
.cr-bird-group-spotlight-copy>strong{
font-size:21px;
}
.cr-bird-group-spotlight-copy p{
font-size:10px;
line-height:1.4;
}
.cr-bird-group-stats{
grid-column:1/-1;
grid-template-columns:1fr;
margin-top:10px;
}
.cr-bird-group-stats>div{
padding:7px 8px;
}
.cr-bird-group-nav{
padding:12px 9px 9px;
}
.cr-bird-group-nav-head{
margin-bottom:10px;
}
.cr-bird-group-circles{
gap:10px;
margin-right:-9px;
}
.cr-bird-group-choice{
flex-basis:82px;
}
.cr-bird-group-photo{
width:62px;
height:62px;
}
.cr-bird-group-choice strong{
font-size:10.5px;
}
.cr-map-transition{
align-items:flex-start;
flex-direction:column;
gap:3px;
margin:0 5px 8px;
}
.cr-map-transition strong{
font-size:12px;
}
}
/* ============================================================
V24 COSTA RICA MAP — HIDE SELECTED BIRD GROUP FROM ALTERNATES
The active bird is already featured on the left, so only the
remaining groups appear under "Explore another bird group".
============================================================ */
.cr-bird-group-nav .cr-bird-group-choice.is-active{
display:none;
}
/* ============================================================
V24 COSTA RICA MAP — INDIVIDUAL BIRD SEARCH
Adds a second exploration mode beside Bird Groups while
preserving the existing map, region and hotspot experience.
============================================================ */
.cr-bird-explore-heading{
display:flex;
flex-direction:column;
gap:8px;
}
.cr-bird-mode-tabs{
display:inline-flex;
align-items:center;
align-self:flex-start;
gap:3px;
padding:3px;
border:1px solid #d5e0d7;
border-radius:999px;
background:#f2f6f1;
}
.cr-bird-mode-tab{
min-height:30px;
padding:0 13px;
border:0;
border-radius:999px;
background:transparent;
color:#65776d;
font-size:10px;
font-weight:850;
cursor:pointer;
transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.cr-bird-mode-tab:hover,
.cr-bird-mode-tab:focus-visible{
outline:none;
color:#174b36;
background:#e7efe8;
}
.cr-bird-mode-tab.is-active{
background:#176e4e;
color:#fff;
box-shadow:0 3px 10px rgba(23,110,78,.20);
}
.cr-bird-group-select-wrap[hidden],
.cr-bird-group-content[hidden],
.cr-bird-species-mode[hidden],
.cr-bird-species-results[hidden],
.cr-bird-species-selected[hidden]{
display:none !important;
}
.cr-bird-species-mode{
display:grid;
gap:12px;
}
.cr-bird-species-search-card{
display:grid;
grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);
gap:28px;
align-items:center;
padding:20px 22px;
border:1px solid #d0dfd3;
border-radius:14px;
background:
radial-gradient(circle at 8% 12%,rgba(66,143,100,.12),transparent 30%),
linear-gradient(135deg,#eef5ee 0%,#fbfcf9 78%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px rgba(27,60,45,.06);
}
.cr-bird-species-search-copy>span,
.cr-bird-species-selected-copy>span,
.cr-bird-species-selected-stats span{
display:block;
color:#327257;
font-size:8px;
font-weight:900;
letter-spacing:.16em;
}
.cr-bird-species-search-copy h3{
margin:5px 0 7px;
color:#17392c;
font-family:Georgia,serif;
font-size:29px;
line-height:1;
letter-spacing:-.015em;
}
.cr-bird-species-search-copy p{
max-width:560px;
margin:0;
color:#5f7167;
font-size:11px;
line-height:1.5;
}
.cr-bird-species-search-control{
position:relative;
z-index:5;
}
.cr-bird-species-search-control>label{
display:block;
margin:0 0 6px;
color:#53675c;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.cr-bird-species-input-wrap{
position:relative;
}
.cr-bird-species-input-wrap input{
width:100%;
height:48px;
padding:0 44px 0 15px;
border:1px solid #b9cdbf;
border-radius:10px;
background:#fff;
color:#17392c;
font:750 13px Inter,ui-sans-serif,system-ui,sans-serif;
box-shadow:0 4px 14px rgba(29,65,49,.06);
}
.cr-bird-species-input-wrap input::placeholder{
color:#8a9890;
font-weight:600;
}
.cr-bird-species-input-wrap input:focus{
outline:none;
border-color:#2f8060;
box-shadow:0 0 0 3px rgba(47,128,96,.12),0 5px 16px rgba(29,65,49,.08);
}
.cr-bird-species-search-icon{
position:absolute;
top:50%;
right:14px;
transform:translateY(-50%);
color:#2a7155;
font-size:22px;
line-height:1;
pointer-events:none;
}
.cr-bird-species-results{
position:absolute;
top:76px;
left:0;
right:0;
z-index:40;
max-height:300px;
overflow:auto;
padding:5px;
border:1px solid #c8d8cd;
border-radius:11px;
background:#fff;
box-shadow:0 18px 42px rgba(22,56,41,.18);
}
.cr-bird-species-option{
width:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
padding:9px 10px;
border:0;
border-radius:8px;
background:transparent;
color:#17392c;
text-align:left;
cursor:pointer;
}
.cr-bird-species-option:hover,
.cr-bird-species-option:focus-visible,
.cr-bird-species-option.is-active{
outline:none;
background:#edf5ee;
}
.cr-bird-species-option strong{
font-family:Georgia,serif;
font-size:13px;
line-height:1.2;
}
.cr-bird-species-option em{
color:#6e7f75;
font-size:10px;
}
.cr-bird-species-search-status{
display:block;
min-height:15px;
margin-top:6px;
color:#708078;
font-size:9.5px;
line-height:1.35;
}
.cr-bird-species-search-status[data-state="error"]{
color:#9a4337;
}
.cr-bird-species-search-status[data-state="selected"]{
color:#176e4e;
font-weight:750;
}
.cr-bird-species-selected{
display:grid;
grid-template-columns:minmax(240px,1fr) auto auto;
gap:18px;
align-items:center;
padding:13px 16px;
border:1px solid #cbdccf;
border-left:4px solid #176e4e;
border-radius:12px;
background:#f7faf6;
}
.cr-bird-species-selected-copy strong{
display:block;
margin-top:3px;
color:#17392c;
font-family:Georgia,serif;
font-size:22px;
line-height:1.05;
}
.cr-bird-species-selected-copy em{
display:block;
margin-top:3px;
color:#66776e;
font-size:10px;
}
.cr-bird-species-selected-stats{
display:grid;
grid-template-columns:repeat(2,minmax(135px,1fr));
gap:8px;
}
.cr-bird-species-selected-stats>div{
min-width:135px;
padding:7px 10px;
border:1px solid #dce6dd;
border-radius:9px;
background:#fff;
}
.cr-bird-species-selected-stats strong{
display:inline-block;
margin:2px 5px 0 0;
color:#176e4e;
font-family:Georgia,serif;
font-size:24px;
line-height:.9;
}
.cr-bird-species-selected-stats small{
color:#6d7b73;
font-size:8.5px;
}
.cr-bird-species-change{
min-height:34px;
padding:0 12px;
border:1px solid #aac4b3;
border-radius:8px;
background:#fff;
color:#176e4e;
font-size:10px;
font-weight:850;
cursor:pointer;
}
.cr-bird-species-change:hover,
.cr-bird-species-change:focus-visible{
outline:none;
background:#eaf3ec;
}
.cr-bird-group-explorer.is-loading .cr-bird-mode-tab,
.cr-bird-group-explorer.is-loading .cr-bird-species-input-wrap input{
opacity:.72;
}
@media(max-width:900px){
.cr-bird-species-search-card{
grid-template-columns:1fr;
gap:15px;
}
.cr-bird-species-selected{
grid-template-columns:1fr;
gap:10px;
}
.cr-bird-species-selected-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.cr-bird-species-change{
justify-self:start;
}
}
@media(max-width:700px){
.cr-bird-explore-heading{
gap:7px;
}
.cr-bird-mode-tabs{
width:100%;
}
.cr-bird-mode-tab{
flex:1 1 0;
padding:0 9px;
}
.cr-bird-species-search-card{
padding:14px;
}
.cr-bird-species-search-copy h3{
font-size:24px;
}
.cr-bird-species-input-wrap input{
height:44px;
}
.cr-bird-species-results{
top:72px;
max-height:250px;
}
.cr-bird-species-selected-stats{
grid-template-columns:1fr;
}
}
/* ============================================================
COSTA RICA PAGE — STEP 1
Hero flows directly into the Destination of the Month section.
Removes the empty page-background gap left after Quick Tools removal.
============================================================ */
.destination-feature{
margin-top:0;
}
/* ============================================================
COSTA RICA PAGE — STEP 2
Wildlife Explorer shell only. Existing map functionality is unchanged.
============================================================ */
.cr-wildlife-explorer-shell{
width:min(1460px,calc(100% - 40px));
margin:34px auto 0;
padding:30px 32px 26px;
display:grid;
grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);
gap:34px;
align-items:end;
border:1px solid rgba(31,74,54,.17);
border-radius:20px;
background:
radial-gradient(circle at 92% 8%,rgba(58,139,96,.12),transparent 28%),
linear-gradient(135deg,#f6f8f2 0%,#edf4ec 100%);
box-shadow:0 16px 42px rgba(25,58,44,.08);
}
.cr-wildlife-explorer-copy{
min-width:0;
}
.cr-wildlife-explorer-copy .eyebrow{
margin-bottom:9px;
color:#327257;
font-size:9px;
letter-spacing:.19em;
}
.cr-wildlife-explorer-copy h2{
margin:0;
color:#17392c;
font-family:Georgia,serif;
font-size:clamp(34px,3.4vw,50px);
line-height:.98;
letter-spacing:-.025em;
}
.cr-wildlife-explorer-tagline{
margin:9px 0 0;
color:#52675c;
font-family:Georgia,serif;
font-size:18px;
line-height:1.3;
}
.cr-wildlife-explorer-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.cr-wildlife-explorer-tab{
min-width:0;
min-height:92px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding:14px 16px;
border:1px solid #d2ded4;
border-radius:13px;
background:rgba(255,255,255,.82);
color:#17392c;
text-align:left;
text-decoration:none;
font:inherit;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.cr-wildlife-explorer-tab>span{
display:block;
margin-bottom:4px;
color:#6d7f75;
font-size:8px;
font-weight:900;
letter-spacing:.15em;
}
.cr-wildlife-explorer-tab>strong{
display:block;
font-family:Georgia,serif;
font-size:20px;
line-height:1.05;
}
.cr-wildlife-explorer-tab>small{
display:block;
margin-top:6px;
color:#687970;
font-size:9.5px;
line-height:1.3;
}
.cr-wildlife-explorer-tab:hover,
.cr-wildlife-explorer-tab:focus-visible{
outline:none;
transform:translateY(-2px);
border-color:#9db8a5;
box-shadow:0 9px 22px rgba(25,58,44,.10);
}
.cr-wildlife-explorer-tab.is-active{
border-color:#176e4e;
background:linear-gradient(135deg,#0f402f,#176247);
color:#fff;
box-shadow:0 10px 24px rgba(18,74,52,.20);
}
.cr-wildlife-explorer-tab.is-active>span{
color:#d9d28d;
}
.cr-wildlife-explorer-tab.is-active>small{
color:rgba(239,247,242,.78);
}
/* The existing Bird Intelligence map remains the next working layer. */
.cr-wildlife-explorer-shell + .cr-bird-map{
margin-top:16px;
}
@media(max-width:1000px){
.cr-wildlife-explorer-shell{
width:min(100% - 24px,1460px);
grid-template-columns:1fr;
gap:20px;
padding:26px 24px 22px;
}
}
@media(max-width:700px){
.cr-wildlife-explorer-shell{
width:calc(100% - 16px);
margin-top:22px;
padding:22px 16px 18px;
border-radius:16px;
}
.cr-wildlife-explorer-copy h2{
font-size:34px;
}
.cr-wildlife-explorer-tagline{
font-size:16px;
}
.cr-wildlife-explorer-tabs{
grid-template-columns:1fr;
}
.cr-wildlife-explorer-tab{
min-height:74px;
padding:12px 14px;
}
}
/* ============================================================
COSTA RICA PAGE — STEP 3
The complete working Bird Intelligence map now lives inside
the active Birds panel of the Costa Rica Wildlife Explorer.
Existing map IDs and behavior are preserved unchanged.
============================================================ */
.cr-wildlife-explorer-shell{
display:block;
padding:0;
overflow:hidden;
}
.cr-wildlife-explorer-head{
display:grid;
grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);
gap:34px;
align-items:end;
padding:30px 32px 26px;
}
.cr-wildlife-explorer-panel{
padding:0 14px 14px;
}
.cr-wildlife-explorer-panel>.cr-bird-map{
width:100%;
margin:0;
padding:32px 22px 42px;
border-radius:18px;
box-shadow:0 14px 36px rgba(24,55,43,.09);
}
.cr-wildlife-explorer-tab[aria-disabled="true"]{
cursor:default;
}
.cr-wildlife-explorer-tab[aria-disabled="true"]:hover,
.cr-wildlife-explorer-tab[aria-disabled="true"]:focus-visible{
transform:none;
border-color:#d2ded4;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
@media(max-width:1000px){
.cr-wildlife-explorer-head{
grid-template-columns:1fr;
gap:20px;
padding:26px 24px 22px;
}
.cr-wildlife-explorer-panel{
padding:0 10px 10px;
}
.cr-wildlife-explorer-panel>.cr-bird-map{
width:100%;
margin:0;
padding:30px 14px 40px;
}
}
@media(max-width:700px){
.cr-wildlife-explorer-head{
padding:22px 16px 18px;
}
.cr-wildlife-explorer-panel{
padding:0 6px 6px;
}
.cr-wildlife-explorer-panel>.cr-bird-map{
width:100%;
margin:0;
padding:26px 8px 36px;
border-radius:14px;
}
}
/* ============================================================
COSTA RICA PAGE — STEP 4A
Reset failed Places/Featured experiment.
Birds remains the only visible Explorer panel; map stays present.
============================================================ */
.cr-wildlife-explorer-tabs{
grid-template-columns:minmax(220px,320px);
justify-content:start;
}
@media(max-width:700px){
.cr-wildlife-explorer-tabs{
grid-template-columns:1fr;
}
}
/* ============================================================
COSTA RICA PAGE — STEP 4B
Birds overview only.
50/50 overview + permanent Costa Rica map. Focus-state 40/60
transition is intentionally deferred to Step 4C.
============================================================ */
.cr-bird-map.is-birds-overview{
padding-top:18px;
}
.cr-bird-map.is-birds-overview>.cr-map-heading,
.cr-bird-map.is-birds-overview>.cr-bird-group-explorer,
.cr-bird-map.is-birds-overview>.cr-map-transition{
display:none;
}
.cr-bird-map.is-birds-overview .cr-map-shell{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:start;
overflow:hidden;
border-radius:18px;
}
.cr-bird-map.is-birds-overview .cr-map-panel{
display:none;
}
.cr-birds-overview-panel{
min-width:0;
overflow:auto;
padding:22px 22px 20px;
border-right:1px solid #dfe5de;
background:#fffdfa;
scrollbar-gutter:stable;
}
.cr-birds-overview-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.cr-birds-overview-head .eyebrow{
margin:0 0 7px;
font-size:9px;
letter-spacing:.19em;
}
.cr-birds-overview-head h3{
margin:0;
color:#17392c;
font-family:Georgia,serif;
font-size:31px;
line-height:1.04;
}
.cr-birds-overview-head p:not(.eyebrow){
max-width:520px;
margin:8px 0 0;
color:#586b61;
font-size:13px;
line-height:1.48;
}
.cr-birds-overview-status{
flex:0 0 auto;
max-width:195px;
padding:8px 10px;
border-radius:999px;
background:#edf5ed;
color:#276a50;
font-size:9.5px;
font-weight:800;
line-height:1.3;
text-align:center;
}
.cr-birds-top,
.cr-birds-overview-groups,
.cr-birds-overview-search{
padding-top:16px;
border-top:1px solid #e1e7e0;
}
.cr-birds-overview-groups,
.cr-birds-overview-search{
margin-top:17px;
}
.cr-birds-top-head,
.cr-birds-overview-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom:11px;
}
.cr-birds-top-head>div:first-child>span,
.cr-birds-overview-section-head>span{
display:block;
margin-bottom:4px;
color:#327257;
font-size:8.5px;
font-weight:900;
letter-spacing:.16em;
}
.cr-birds-top-head>div:first-child>strong,
.cr-birds-overview-section-head>strong{
display:block;
color:#183328;
font-family:Georgia,serif;
font-size:19px;
line-height:1.1;
}
.cr-birds-top-controls{
display:flex;
align-items:center;
gap:7px;
}
.cr-birds-top-controls button{
width:29px;
height:29px;
padding:0;
border:1px solid #cbd9ce;
border-radius:50%;
background:#fff;
color:#176e4e;
font-size:15px;
cursor:pointer;
}
.cr-birds-top-controls button:hover,
.cr-birds-top-controls button:focus-visible{
outline:none;
border-color:#176e4e;
background:#edf5ed;
}
.cr-birds-top-controls span{
min-width:34px;
color:#718078;
font-size:8px;
font-weight:800;
text-align:center;
}
.cr-birds-top-page{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:7px;
}
.cr-birds-top-page[hidden]{
display:none !important;
}
.cr-birds-top-card{
position:relative;
min-width:0;
min-height:154px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:10px 8px 11px;
border:1px solid #dce5dd;
border-radius:12px;
background:linear-gradient(180deg,#fff,#f5f8f3);
color:#17392c;
text-align:center;
cursor:pointer;
transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
.cr-birds-top-card:hover,
.cr-birds-top-card:focus-visible,
.cr-birds-top-card.is-active{
outline:none;
transform:translateY(-2px);
border-color:#88ad98;
box-shadow:0 7px 16px rgba(27,67,49,.10);
}
.cr-birds-top-card.is-active{
background:#eef6ee;
}
.cr-birds-top-card.is-pending{
border-color:#4b8f70;
box-shadow:0 0 0 3px rgba(23,110,78,.12),0 7px 16px rgba(27,67,49,.10);
}
.cr-birds-top-photo{
width:66px;
height:66px;
display:block;
flex:0 0 66px;
margin:0 auto 9px;
overflow:hidden;
border:2px solid #fff;
border-radius:50%;
background:#174a35;
box-shadow:0 0 0 1px #c8d6cb,0 5px 12px rgba(27,67,49,.12);
}
.cr-birds-top-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-birds-top-number{
position:absolute;
left:8px;
top:8px;
min-width:25px;
height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 6px;
border-radius:999px;
background:rgba(237,245,237,.94);
color:#30664f;
font-size:7.5px;
font-weight:900;
box-shadow:0 2px 7px rgba(24,55,43,.10);
}
.cr-birds-top-card>strong{
display:block;
font-family:Georgia,serif;
font-size:13.5px;
line-height:1.12;
}
.cr-birds-top-card>small{
display:block;
margin-top:5px;
color:#64756b;
font-size:8.5px;
line-height:1.25;
}
.cr-birds-overview-group-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
}
.cr-birds-overview-group{
min-width:0;
padding:0;
border:0;
background:transparent;
color:#17392c;
text-align:center;
cursor:pointer;
}
.cr-birds-overview-group-photo{
width:64px;
height:64px;
display:block;
margin:0 auto 8px;
overflow:hidden;
border:2px solid #fff;
border-radius:50%;
background:#174a35;
box-shadow:0 0 0 1px #c8d6cb,0 5px 12px rgba(27,67,49,.12);
}
.cr-birds-overview-group-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-birds-overview-group strong{
display:block;
font-family:Georgia,serif;
font-size:12px;
line-height:1.18;
}
.cr-birds-overview-group:hover .cr-birds-overview-group-photo,
.cr-birds-overview-group:focus-visible .cr-birds-overview-group-photo,
.cr-birds-overview-group.is-active .cr-birds-overview-group-photo{
box-shadow:0 0 0 3px #176e4e,0 7px 15px rgba(27,67,49,.15);
}
.cr-birds-overview-group:focus-visible{
outline:none;
}
.cr-birds-overview-group.is-pending .cr-birds-overview-group-photo{
box-shadow:0 0 0 3px #176e4e,0 7px 15px rgba(27,67,49,.15);
}
.cr-birds-top-controls button:active,
.cr-birds-top-card:active,
.cr-birds-overview-group:active{
transform:translateY(0);
}
.cr-birds-overview-input-wrap{
height:43px;
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
overflow:hidden;
border:1px solid #cbd8ce;
border-radius:10px;
background:#fff;
}
.cr-birds-overview-input-wrap>span{
color:#47715d;
text-align:center;
font-size:17px;
}
.cr-birds-overview-input-wrap input{
width:100%;
height:100%;
padding:0 11px 0 0;
border:0;
outline:0;
background:transparent;
color:#17392c;
font:inherit;
font-size:13.5px;
}
.cr-birds-overview-search-control{
position:relative;
}
.cr-birds-overview-search-control>small{
display:block;
margin-top:7px;
color:#68776f;
font-size:9.5px;
line-height:1.35;
}
.cr-birds-overview-species-results{
position:absolute;
left:0;
right:0;
top:49px;
z-index:20;
max-height:220px;
overflow:auto;
border:1px solid #cbd8ce;
border-radius:10px;
background:#fff;
box-shadow:0 12px 28px rgba(24,55,43,.16);
}
.cr-birds-overview-species-results[hidden]{
display:none !important;
}
.cr-birds-overview-species-option{
width:100%;
display:block;
padding:10px 12px;
border:0;
border-bottom:1px solid #edf0ec;
background:#fff;
color:#17392c;
text-align:left;
cursor:pointer;
}
.cr-birds-overview-species-option:last-child{
border-bottom:0;
}
.cr-birds-overview-species-option:hover,
.cr-birds-overview-species-option:focus-visible{
outline:none;
background:#f0f6ef;
}
.cr-birds-overview-species-option strong,
.cr-birds-overview-species-option em{
display:block;
}
.cr-birds-overview-species-option strong{
font-family:Georgia,serif;
font-size:11px;
}
.cr-birds-overview-species-option em{
margin-top:2px;
color:#728078;
font-size:8px;
}
/* In overview the map is a visual discovery surface; detailed region clicks
remain part of the existing focus workflow and return in Step 4C. */
.cr-bird-map.is-birds-overview .cr-map-region-overlay{
pointer-events:none;
}
.cr-bird-map.is-birds-overview .cr-map-stage{
display:block !important;
}
.cr-bird-map.is-birds-overview .cr-google-map,
.cr-bird-map.is-birds-overview .cr-google-map-message,
.cr-bird-map.is-birds-overview .cr-map-context{
display:none !important;
}
.cr-bird-map.is-birds-overview .cr-map-art{
align-self:start;
}
@media(max-width:1100px){
.cr-birds-top-page{
grid-template-columns:repeat(5,minmax(88px,1fr));
overflow-x:auto;
padding-bottom:4px;
}
.cr-birds-overview-group-grid{
grid-template-columns:repeat(5,minmax(80px,1fr));
overflow-x:auto;
padding:3px 2px 6px;
}
}
@media(max-width:1000px){
.cr-bird-map.is-birds-overview .cr-map-shell{
grid-template-columns:1fr;
}
.cr-birds-overview-panel{
height:auto !important;
max-height:none;
border-right:0;
border-bottom:1px solid #dfe5de;
}
.cr-bird-map.is-birds-overview .cr-map-art{
width:100%;
}
}
@media(max-width:700px){
.cr-birds-overview-panel{
padding:17px 14px 16px;
}
.cr-birds-overview-head{
display:block;
}
.cr-birds-overview-status{
display:inline-block;
margin-top:10px;
}
.cr-birds-top-page{
grid-template-columns:repeat(5,minmax(116px,1fr));
}
.cr-birds-overview-group-grid{
grid-template-columns:repeat(5,minmax(92px,1fr));
}
}
/* ============================================================
COSTA RICA PAGE — STEP 4C
Bird selection transition.
Overview stays 50/50. A selected bird/group becomes a compact
focus header and the existing region panel + map becomes 40/60.
============================================================ */
.cr-birds-focus-head{
display:none;
}
.cr-birds-focus-head[hidden]{
display:none !important;
}
.cr-bird-map.is-birds-focus{
padding-top:18px;
}
.cr-bird-map.is-birds-focus>.cr-map-heading,
.cr-bird-map.is-birds-focus>.cr-bird-group-explorer,
.cr-bird-map.is-birds-focus>.cr-map-transition{
display:none;
}
.cr-bird-map.is-birds-focus .cr-birds-focus-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin:0 0 14px;
padding:13px 16px;
border:1px solid #d8e3da;
border-radius:14px;
background:linear-gradient(90deg,#f4f8f2 0%,#fffdfa 58%,#f4f8f2 100%);
box-shadow:0 7px 20px rgba(28,59,46,.06);
}
.cr-birds-focus-selection{
min-width:0;
display:flex;
align-items:center;
gap:12px;
}
.cr-birds-focus-photo{
width:54px;
height:54px;
flex:0 0 54px;
overflow:hidden;
border:2px solid #fff;
border-radius:50%;
background:#174a35;
box-shadow:0 0 0 1px #bfd1c3,0 5px 12px rgba(27,67,49,.12);
}
.cr-birds-focus-photo[hidden]{
display:none !important;
}
.cr-birds-focus-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-birds-focus-copy{
min-width:0;
}
.cr-birds-focus-copy>span{
display:block;
margin-bottom:3px;
color:#327257;
font-size:8.5px;
font-weight:900;
letter-spacing:.17em;
}
.cr-birds-focus-copy>strong{
display:block;
overflow:hidden;
color:#17392c;
font-family:Georgia,serif;
font-size:25px;
line-height:1.05;
text-overflow:ellipsis;
white-space:nowrap;
}
.cr-birds-focus-head>p{
max-width:610px;
margin:0;
color:#586b61;
font-size:12.5px;
line-height:1.45;
text-align:right;
}
.cr-bird-map.is-birds-focus .cr-map-shell{
grid-template-columns:minmax(330px,2fr) minmax(0,3fr);
align-items:start;
overflow:hidden;
border-radius:18px;
}
.cr-bird-map.is-birds-focus .cr-birds-overview-panel{
display:none;
}
.cr-bird-map.is-birds-focus .cr-map-panel{
display:flex;
}
.cr-bird-map.is-birds-focus .cr-map-region-overlay{
pointer-events:auto;
}
.cr-bird-map.is-birds-focus .cr-map-art{
align-self:start;
}
@media(max-width:1000px){
.cr-bird-map.is-birds-focus .cr-birds-focus-head{
align-items:flex-start;
flex-direction:column;
gap:9px;
}
.cr-bird-map.is-birds-focus .cr-birds-focus-head>p{
max-width:none;
text-align:left;
}
.cr-bird-map.is-birds-focus .cr-map-shell{
grid-template-columns:1fr;
}
.cr-bird-map.is-birds-focus .cr-map-panel{
height:auto !important;
max-height:none;
border-right:0;
border-bottom:1px solid #dfe5de;
}
}
@media(max-width:700px){
.cr-bird-map.is-birds-focus .cr-birds-focus-head{
margin-bottom:10px;
padding:11px 12px;
border-radius:11px;
}
.cr-birds-focus-photo{
width:46px;
height:46px;
flex-basis:46px;
}
.cr-birds-focus-copy>strong{
font-size:21px;
}
.cr-bird-map.is-birds-focus .cr-birds-focus-head>p{
font-size:11px;
}
}
/* ============================================================
COSTA RICA PAGE — STEP 4D
Region -> hotspot workflow connection.
Existing region, Google map, hotspot, Location Profile and
Trip Planner behavior stays intact. Adds a clear return path
from the 40/60 research state to the Birds overview.
============================================================ */
.cr-birds-focus-back{
flex:0 0 auto;
min-height:36px;
padding:0 12px;
border:1px solid #b8cdbd;
border-radius:999px;
background:#fff;
color:#176e4e;
font-size:10.5px;
font-weight:850;
cursor:pointer;
white-space:nowrap;
box-shadow:0 3px 10px rgba(28,59,46,.05);
}
.cr-birds-focus-back:hover,
.cr-birds-focus-back:focus-visible{
outline:none;
border-color:#176e4e;
background:#edf5ef;
}
@media(max-width:1000px){
.cr-birds-focus-back{
min-height:34px;
order:-1;
}
}
/* ============================================================
COSTA RICA EXPLORER — BIRDS FOUNDATION PHASE 1
Scope: Birds/Places top navigation and guided Birds entry state.
Existing approved map, focus map, hotspot and Google-map behavior
remain unchanged.
============================================================ */
.cr-wildlife-explorer-tabs{
grid-template-columns:repeat(2,minmax(0,1fr));
justify-content:stretch;
}
.cr-wildlife-explorer-tab[disabled]{
opacity:.72;
}
.cr-birds-section-chooser{
display:grid;
gap:11px;
margin-top:4px;
}
.cr-birds-section-choice{
width:100%;
min-width:0;
min-height:96px;
display:grid;
grid-template-columns:72px minmax(0,1fr) 26px;
gap:15px;
align-items:center;
padding:11px 14px;
border:1px solid #d8e2da;
border-radius:13px;
background:linear-gradient(135deg,#fffdfa 0%,#f2f7f0 100%);
color:#17392c;
text-align:left;
font:inherit;
cursor:pointer;
box-shadow:0 5px 14px rgba(27,67,49,.05);
transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.cr-birds-section-choice:hover,
.cr-birds-section-choice:focus-visible,
.cr-birds-section-choice.is-active{
outline:none;
transform:translateY(-1px);
border-color:#8eaf9a;
background:#eef6ee;
box-shadow:0 8px 18px rgba(27,67,49,.10);
}
.cr-birds-section-choice.is-active{
border-color:#176e4e;
}
.cr-birds-section-choice-photo{
width:68px;
height:68px;
display:block;
overflow:hidden;
border:2px solid #fff;
border-radius:50%;
background:#174a35;
box-shadow:0 0 0 1px #c7d5ca,0 5px 12px rgba(27,67,49,.12);
}
.cr-birds-section-choice-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-birds-section-choice-copy{
min-width:0;
}
.cr-birds-section-choice-copy strong{
display:block;
font-family:Georgia,serif;
font-size:20px;
line-height:1.08;
}
.cr-birds-section-choice-copy small{
display:block;
margin-top:5px;
color:#607168;
font-size:11px;
line-height:1.35;
}
.cr-birds-section-choice-arrow{
color:#176e4e;
font-family:Georgia,serif;
font-size:29px;
line-height:1;
text-align:center;
}
.cr-birds-meaning-note{
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
align-items:center;
margin-top:14px;
padding:11px 13px;
border:1px solid #d9e5da;
border-radius:11px;
background:#eef5ed;
}
.cr-birds-meaning-note>span{
width:27px;
height:27px;
display:grid;
place-items:center;
border:2px solid #2d7255;
border-radius:50%;
color:#2d7255;
font-family:Georgia,serif;
font-size:16px;
font-weight:700;
}
.cr-birds-meaning-note p{
margin:0;
color:#52675c;
font-size:10.5px;
line-height:1.55;
}
.cr-birds-meaning-note strong{
color:#17392c;
}
.cr-birds-top[hidden],
.cr-birds-overview-groups[hidden],
.cr-birds-overview-search[hidden]{
display:none !important;
}
/* Once a Birds route is chosen, the three large entry cards become
compact navigation tabs and the selected content gets the space. */
.cr-birds-overview-panel.is-section-open .cr-birds-section-chooser{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
margin:0 0 16px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice{
min-height:52px;
grid-template-columns:28px minmax(0,1fr);
gap:8px;
padding:8px 10px;
border-radius:10px;
box-shadow:none;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-photo{
width:28px;
height:28px;
border-width:1px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-copy strong{
font-family:inherit;
font-size:11px;
font-weight:850;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-copy small,
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-arrow{
display:none;
}
.cr-birds-overview-panel.is-section-open .cr-birds-meaning-note{
display:none;
}
.cr-birds-overview-panel.is-section-open .cr-birds-top,
.cr-birds-overview-panel.is-section-open .cr-birds-overview-groups,
.cr-birds-overview-panel.is-section-open .cr-birds-overview-search{
margin-top:0;
padding-top:15px;
}
@media(max-width:1000px){
.cr-wildlife-explorer-tabs{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:700px){
.cr-wildlife-explorer-tabs{
grid-template-columns:1fr 1fr;
}
.cr-wildlife-explorer-tab{
min-height:82px;
}
.cr-wildlife-explorer-tab>small{
font-size:8.5px;
}
.cr-birds-section-choice{
min-height:86px;
grid-template-columns:58px minmax(0,1fr) 22px;
gap:11px;
padding:10px 11px;
}
.cr-birds-section-choice-photo{
width:54px;
height:54px;
}
.cr-birds-section-choice-copy strong{
font-size:18px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-chooser{
grid-template-columns:1fr;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice{
min-height:46px;
}
}
/* ============================================================
COSTA RICA EXPLORER — BIRDS FOUNDATION PHASE 1 VISUAL COMPLETE
Finishes the approved Birds experience before Places work starts.
The approved Costa Rica map artwork and map interaction layers are
intentionally untouched.
============================================================ */
.cr-wildlife-explorer-shell{
margin-top:36px;
border-radius:24px;
background:#f8f7f0;
border-color:rgba(27,67,49,.16);
box-shadow:0 18px 48px rgba(24,55,43,.10);
}
.cr-wildlife-explorer-head{
display:block;
padding:30px 32px 20px;
background:
radial-gradient(circle at 86% 4%,rgba(69,132,89,.13),transparent 31%),
linear-gradient(135deg,#faf9f3 0%,#f1f5ee 100%);
border-bottom:1px solid #dde6dd;
}
.cr-wildlife-explorer-copy{
max-width:880px;
}
.cr-wildlife-explorer-copy .eyebrow{
margin-bottom:8px;
font-size:10px;
letter-spacing:.22em;
}
.cr-wildlife-explorer-copy h2{
font-size:clamp(42px,4.2vw,62px);
line-height:.94;
letter-spacing:-.035em;
}
.cr-wildlife-explorer-tagline{
margin-top:10px;
font-size:20px;
color:#4e6459;
}
.cr-wildlife-explorer-tabs{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:22px;
}
.cr-wildlife-explorer-tab{
min-height:96px;
padding:15px 18px;
border-radius:15px;
border-color:#d4dfd6;
background:rgba(255,255,255,.88);
box-shadow:0 5px 15px rgba(24,55,43,.04),inset 0 1px 0 rgba(255,255,255,.95);
}
.cr-wildlife-explorer-tab>span{
margin-bottom:4px;
font-size:8.5px;
}
.cr-wildlife-explorer-tab>strong{
font-size:24px;
}
.cr-wildlife-explorer-tab>small{
max-width:360px;
margin-top:6px;
font-size:10.5px;
}
.cr-wildlife-explorer-tab.is-active{
background:linear-gradient(135deg,#123f2f 0%,#176247 100%);
box-shadow:0 12px 26px rgba(18,74,52,.20);
}
.cr-wildlife-explorer-tab[disabled]{
opacity:.84;
}
.cr-wildlife-explorer-panel{
padding:14px;
}
.cr-wildlife-explorer-panel>.cr-bird-map{
padding:12px 10px 18px;
border-radius:18px;
background:#f8f8f3;
box-shadow:none;
}
.cr-bird-map.is-birds-overview .cr-map-shell{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
border-radius:17px;
border-color:#d7e1d8;
box-shadow:0 12px 30px rgba(24,55,43,.08);
}
.cr-birds-overview-panel{
padding:28px 28px 24px;
background:#fffdf8;
}
.cr-birds-overview-head{
margin-bottom:22px;
}
.cr-birds-overview-head .eyebrow{
margin-bottom:8px;
font-size:9px;
letter-spacing:.22em;
}
.cr-birds-overview-head h3{
font-size:38px;
line-height:1;
letter-spacing:-.018em;
}
.cr-birds-overview-head p:not(.eyebrow){
max-width:560px;
margin-top:10px;
font-size:14px;
line-height:1.52;
}
.cr-birds-overview-status{
max-width:210px;
padding:9px 12px;
background:#eef5ea;
border:1px solid #dbe7d9;
font-size:9.5px;
}
.cr-birds-section-chooser{
gap:12px;
}
.cr-birds-section-choice{
min-height:108px;
grid-template-columns:80px minmax(0,1fr) 34px;
gap:18px;
padding:14px 17px;
border-radius:15px;
border-color:#d5e0d7;
background:linear-gradient(135deg,#fffefa 0%,#f2f6ee 100%);
box-shadow:0 7px 18px rgba(27,67,49,.055);
}
.cr-birds-section-choice:hover,
.cr-birds-section-choice:focus-visible{
transform:translateY(-2px);
background:#f0f6ed;
border-color:#9db8a6;
box-shadow:0 11px 24px rgba(27,67,49,.10);
}
.cr-birds-section-choice-photo{
width:76px;
height:76px;
border-width:3px;
box-shadow:0 0 0 1px #bdcec1,0 7px 16px rgba(27,67,49,.15);
}
.cr-birds-section-choice-copy strong{
font-size:25px;
line-height:1.02;
}
.cr-birds-section-choice-copy small{
margin-top:7px;
max-width:340px;
font-size:12.5px;
line-height:1.4;
}
.cr-birds-section-choice-arrow{
font-size:34px;
}
.cr-birds-meaning-note{
margin-top:16px;
padding:13px 15px;
grid-template-columns:38px minmax(0,1fr);
gap:12px;
border-radius:12px;
}
.cr-birds-meaning-note>span{
width:31px;
height:31px;
}
.cr-birds-meaning-note p{
font-size:11.5px;
line-height:1.58;
}
/* Selected Birds route: keep the three route choices visible as a compact
tab strip, but give the chosen screen its own strong heading. */
.cr-birds-overview-panel.is-section-open .cr-birds-section-chooser{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 16px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice{
min-height:58px;
grid-template-columns:34px minmax(0,1fr);
gap:9px;
padding:9px 11px;
border-radius:11px;
background:#f7f8f3;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice.is-active{
background:#174e39;
border-color:#174e39;
color:#fff;
box-shadow:0 7px 17px rgba(18,74,52,.17);
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-photo{
width:34px;
height:34px;
border-width:1px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-copy strong{
font-family:Georgia,serif;
font-size:12.5px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice.is-active .cr-birds-section-choice-copy strong{
color:#fff;
}
.cr-birds-section-view-head{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:15px;
align-items:start;
margin:0 0 16px;
padding:14px 0 16px;
border-bottom:1px solid #dfe6df;
}
.cr-birds-section-view-head[hidden]{
display:none !important;
}
.cr-birds-section-back{
min-height:35px;
padding:0 12px;
border:1px solid #b9cdbd;
border-radius:999px;
background:#fff;
color:#176e4e;
font-size:10px;
font-weight:850;
cursor:pointer;
}
.cr-birds-section-back:hover,
.cr-birds-section-back:focus-visible{
outline:none;
border-color:#176e4e;
background:#edf5ef;
}
.cr-birds-section-view-head>div>span{
display:block;
margin-bottom:4px;
color:#327257;
font-size:8.5px;
font-weight:900;
letter-spacing:.18em;
}
.cr-birds-section-view-head h4{
margin:0;
color:#17392c;
font-family:Georgia,serif;
font-size:27px;
line-height:1.02;
}
.cr-birds-section-view-head p{
max-width:500px;
margin:6px 0 0;
color:#5b6e64;
font-size:11.5px;
line-height:1.45;
}
/* Iconic Birds: larger photographic cards, two columns instead of five
tiny circular cards. Pagination remains 5 birds per page. */
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top{
padding-top:0;
border-top:0;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-head{
margin-bottom:12px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-head>div:first-child>strong{
font-size:20px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
overflow:visible;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card{
min-height:190px;
display:block;
padding:0 0 13px;
overflow:hidden;
border-radius:14px;
background:#fff;
text-align:left;
box-shadow:0 5px 14px rgba(27,67,49,.05);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5){
grid-column:1/-1;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo{
width:100%;
height:118px;
margin:0 0 10px;
border:0;
border-radius:0;
box-shadow:none;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
height:135px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo img{
object-position:center;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-number{
left:10px;
top:10px;
min-width:28px;
height:28px;
background:rgba(255,255,255,.94);
color:#174e39;
font-size:8px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>strong{
padding:0 12px;
font-size:16px;
line-height:1.12;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>small{
padding:0 12px;
margin-top:5px;
font-size:9.5px;
}
/* Bird Groups: visual cards with meaningful descriptions. */
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-groups{
padding-top:0;
border-top:0;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:11px;
overflow:visible;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group{
position:relative;
min-height:105px;
display:grid;
grid-template-columns:82px minmax(0,1fr) 18px;
gap:12px;
align-items:center;
padding:10px 12px 10px 10px;
border:1px solid #d9e2da;
border-radius:13px;
background:linear-gradient(135deg,#fff 0%,#f4f7f1 100%);
text-align:left;
box-shadow:0 5px 14px rgba(27,67,49,.045);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:nth-child(5){
grid-column:1/-1;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group::after{
content:"›";
color:#176e4e;
font-family:Georgia,serif;
font-size:25px;
line-height:1;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:hover,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:focus-visible{
border-color:#8eaf9a;
background:#eef5ec;
box-shadow:0 8px 18px rgba(27,67,49,.09);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group.is-active{
border-color:#176e4e;
background:#edf5eb;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-photo{
width:80px;
height:80px;
margin:0;
border-radius:11px;
box-shadow:0 0 0 1px #c8d6cb,0 5px 12px rgba(27,67,49,.10);
}
.cr-birds-overview-group-copy{
min-width:0;
}
.cr-birds-overview-group-copy strong{
display:block;
font-family:Georgia,serif;
font-size:17px;
line-height:1.08;
}
.cr-birds-overview-group-copy small{
display:block;
margin-top:5px;
color:#63736a;
font-size:9.5px;
line-height:1.33;
}
/* Search screen: separate individual-species and bird-group routes. */
.cr-birds-overview-panel.is-section-open[data-birds-section="search"] .cr-birds-overview-search{
padding-top:0;
border-top:0;
}
.cr-birds-search-grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.cr-birds-search-card{
padding:16px;
border:1px solid #d9e2da;
border-radius:13px;
background:linear-gradient(135deg,#fff 0%,#f5f8f3 100%);
}
.cr-birds-search-card-label{
display:block;
margin-bottom:5px;
color:#327257;
font-size:8.5px;
font-weight:900;
letter-spacing:.17em;
}
.cr-birds-search-card>strong{
display:block;
color:#17392c;
font-family:Georgia,serif;
font-size:20px;
line-height:1.1;
}
.cr-birds-search-card>p{
margin:7px 0 12px;
color:#5d6f65;
font-size:11px;
line-height:1.45;
}
.cr-birds-overview-input-wrap{
height:51px;
border-radius:11px;
}
.cr-birds-overview-input-wrap input{
font-size:14px;
}
.cr-birds-overview-search-control>small{
margin-top:8px;
font-size:10px;
}
.cr-birds-overview-species-results{
top:57px;
max-height:260px;
}
.cr-birds-group-search-control{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:9px;
align-items:end;
}
.cr-birds-group-search-control label{
grid-column:1/-1;
margin-bottom:-4px;
color:#52675c;
font-size:9px;
font-weight:850;
}
.cr-birds-group-search-control select{
width:100%;
height:51px;
padding:0 12px;
border:1px solid #cbd8ce;
border-radius:11px;
background:#fff;
color:#17392c;
font:inherit;
font-size:13px;
}
.cr-birds-group-search-control button{
min-height:51px;
padding:0 16px;
border:1px solid #176e4e;
border-radius:11px;
background:#176e4e;
color:#fff;
font-size:11px;
font-weight:850;
cursor:pointer;
}
.cr-birds-group-search-control button:hover,
.cr-birds-group-search-control button:focus-visible{
outline:none;
background:#0f553b;
}
.cr-birds-group-search-control button:disabled{
opacity:.7;
cursor:wait;
}
.cr-birds-search-note{
display:grid;
gap:3px;
margin-top:12px;
padding:11px 13px;
border-radius:11px;
background:#edf5eb;
color:#52675c;
font-size:10px;
line-height:1.4;
}
.cr-birds-search-note strong{
color:#17392c;
}
/* The approved map stays visually dominant but unchanged. */
.cr-bird-map.is-birds-overview .cr-map-art{
background:#9fcfd6;
}
@media(max-width:1100px){
.cr-wildlife-explorer-copy h2{
font-size:48px;
}
.cr-birds-section-choice{
grid-template-columns:74px minmax(0,1fr) 28px;
}
.cr-birds-section-choice-photo{
width:70px;
height:70px;
}
.cr-birds-section-choice-copy strong{
font-size:22px;
}
}
@media(max-width:1000px){
.cr-wildlife-explorer-head{
padding:26px 24px 18px;
}
.cr-wildlife-explorer-tabs{
margin-top:18px;
}
.cr-birds-overview-panel{
padding:24px 22px 20px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:700px){
.cr-wildlife-explorer-head{
padding:22px 16px 16px;
}
.cr-wildlife-explorer-copy h2{
font-size:37px;
}
.cr-wildlife-explorer-tagline{
font-size:17px;
}
.cr-wildlife-explorer-tabs{
grid-template-columns:1fr 1fr;
gap:8px;
}
.cr-wildlife-explorer-tab{
min-height:86px;
padding:12px 13px;
}
.cr-wildlife-explorer-tab>strong{
font-size:20px;
}
.cr-wildlife-explorer-tab>small{
font-size:8.5px;
}
.cr-birds-overview-panel{
padding:18px 14px 16px;
}
.cr-birds-overview-head h3{
font-size:31px;
}
.cr-birds-section-choice{
min-height:94px;
grid-template-columns:62px minmax(0,1fr) 20px;
gap:11px;
padding:11px 12px;
}
.cr-birds-section-choice-photo{
width:58px;
height:58px;
}
.cr-birds-section-choice-copy strong{
font-size:20px;
}
.cr-birds-section-choice-copy small{
font-size:10.5px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-chooser{
grid-template-columns:1fr 1fr 1fr;
gap:6px;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice{
min-height:48px;
grid-template-columns:1fr;
padding:8px 6px;
text-align:center;
}
.cr-birds-overview-panel.is-section-open .cr-birds-section-choice-photo{
display:none;
}
.cr-birds-section-view-head{
grid-template-columns:1fr;
gap:10px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-grid{
grid-template-columns:1fr;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5){
grid-column:auto;
}
.cr-birds-group-search-control{
grid-template-columns:1fr;
}
.cr-birds-group-search-control label{
grid-column:auto;
}
}
/* ============================================================
COSTA RICA EXPLORER — PHASE 1 ROUND FRAME CORRECTION
Approved visual correction: larger round bird photography.
Scope is the Birds Explorer only. Map artwork and map layers are unchanged.
============================================================ */
/* Give the three Birds routes more photographic weight on the landing view. */
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice{
min-height:122px;
grid-template-columns:94px minmax(0,1fr) 34px;
gap:18px;
padding:14px 18px;
}
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice-photo{
width:90px;
height:90px;
border:4px solid #fff;
border-radius:50%;
box-shadow:0 0 0 1px #afc5b5,0 9px 20px rgba(25,67,48,.17);
}
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice-photo img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}
/* Iconic Birds. Five birds remain on each existing page, but the photos are
large circles rather than rectangular card banners. */
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
align-items:start;
overflow:visible;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5){
grid-column:auto;
min-width:0;
min-height:190px;
display:flex;
flex-direction:column;
align-items:center;
padding:10px 5px 12px;
overflow:visible;
border:1px solid transparent;
border-radius:15px;
background:transparent;
text-align:center;
box-shadow:none;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:hover,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:focus-visible{
outline:none;
border-color:#d4e1d7;
background:#f4f8f2;
box-shadow:0 8px 20px rgba(27,67,49,.08);
transform:translateY(-2px);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:108px;
height:108px;
flex:0 0 108px;
margin:0 auto 12px;
overflow:hidden;
border:4px solid #fff;
border-radius:50%;
background:#d9e5db;
box-shadow:0 0 0 1px #a9c0af,0 10px 22px rgba(27,67,49,.18);
transition:transform .16s ease,box-shadow .16s ease;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:hover .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:focus-visible .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card.is-active .cr-birds-top-photo{
transform:scale(1.035);
box-shadow:0 0 0 2px #2d7b59,0 11px 24px rgba(27,67,49,.20);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
border-radius:50%;
transform:scale(1.025);
}
/* Portrait-aware crops for the first page, without changing the images or map. */
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(1) .cr-birds-top-photo img{object-position:50% 45%;}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(2) .cr-birds-top-photo img{object-position:50% 43%;}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(3) .cr-birds-top-photo img{object-position:50% 48%;}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(4) .cr-birds-top-photo img{object-position:50% 42%;}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo img{object-position:50% 45%;}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-number{
position:absolute;
top:5px;
left:6px;
z-index:2;
min-width:27px;
height:27px;
display:grid;
place-items:center;
padding:0 6px;
border:1px solid #d5e1d7;
border-radius:999px;
background:#fff;
color:#174e39;
font-size:8px;
font-weight:900;
box-shadow:0 3px 9px rgba(27,67,49,.08);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>strong{
width:100%;
padding:0 2px;
color:#17392c;
font-family:Georgia,serif;
font-size:14.5px;
line-height:1.12;
text-align:center;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>small{
width:100%;
padding:0 2px;
margin-top:5px;
color:#65766c;
font-size:9px;
line-height:1.28;
text-align:center;
}
/* Bird Groups. Larger circular photography is the primary visual element.
With the five currently supported backend groups, use a balanced 3 + 2 layout. */
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:flex-start;
gap:18px 14px;
overflow:visible;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:nth-child(5){
flex:0 1 calc(33.333% - 12px);
min-width:135px;
min-height:190px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:0;
padding:10px 7px 12px;
border:1px solid transparent;
border-radius:15px;
background:transparent;
text-align:center;
box-shadow:none;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group::after{
content:none;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:hover,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:focus-visible{
outline:none;
border-color:#d3e0d5;
background:#f4f8f2;
box-shadow:0 8px 20px rgba(27,67,49,.08);
transform:translateY(-2px);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group.is-active{
border-color:#b8cfbd;
background:#eff6ed;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-photo{
width:120px;
height:120px;
flex:0 0 120px;
margin:0 auto 12px;
overflow:hidden;
border:4px solid #fff;
border-radius:50%;
background:#d9e5db;
box-shadow:0 0 0 1px #a9c0af,0 10px 22px rgba(27,67,49,.18);
transition:transform .16s ease,box-shadow .16s ease;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:hover .cr-birds-overview-group-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group:focus-visible .cr-birds-overview-group-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group.is-active .cr-birds-overview-group-photo{
transform:scale(1.035);
box-shadow:0 0 0 2px #2d7b59,0 11px 24px rgba(27,67,49,.20);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
border-radius:50%;
transform:scale(1.025);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-copy{
width:100%;
text-align:center;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-copy strong{
font-size:16px;
line-height:1.08;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-copy small{
max-width:155px;
margin:6px auto 0;
font-size:9.5px;
line-height:1.32;
}
@media(max-width:1100px){
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice{
grid-template-columns:82px minmax(0,1fr) 28px;
}
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice-photo{
width:78px;
height:78px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:100px;
height:100px;
flex-basis:100px;
}
}
@media(max-width:1000px){
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group{
flex-basis:calc(50% - 8px);
}
}
@media(max-width:700px){
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice{
min-height:106px;
grid-template-columns:74px minmax(0,1fr) 20px;
gap:12px;
}
.cr-birds-overview-panel:not(.is-section-open) .cr-birds-section-choice-photo{
width:70px;
height:70px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card{
min-height:176px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:102px;
height:102px;
flex-basis:102px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group{
flex-basis:calc(50% - 7px);
min-width:0;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="groups"] .cr-birds-overview-group-photo{
width:104px;
height:104px;
flex-basis:104px;
}
}
/* ============================================================
COSTA RICA EXPLORER — PHASE 2 ICONIC BIRDS
Scope: Iconic Birds presentation only.
Keeps all 15 existing birds and existing selection/map behavior.
Four birds per page allows larger round photography without
changing the approved Costa Rica map or other Explorer routes.
============================================================ */
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-head{
align-items:center;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid #e2e9e2;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-head>div:first-child>span{
letter-spacing:.16em;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-controls{
gap:7px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-controls button{
width:34px;
height:34px;
border-color:#b9ccbd;
background:#fff;
color:#176e4e;
box-shadow:0 4px 10px rgba(27,67,49,.07);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-controls button:hover,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-controls button:focus-visible{
outline:none;
border-color:#176e4e;
background:#edf5ef;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px 8px;
align-items:start;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5){
min-height:218px;
padding:10px 4px 13px;
border-radius:16px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:136px;
height:136px;
flex:0 0 136px;
margin-bottom:13px;
border-width:5px;
box-shadow:0 0 0 1px #9eb7a5,0 12px 25px rgba(27,67,49,.19);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:hover .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:focus-visible .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card.is-active .cr-birds-top-photo{
box-shadow:0 0 0 2px #237253,0 14px 28px rgba(27,67,49,.23);
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-number{
top:7px;
left:7px;
min-width:30px;
height:30px;
font-size:8.5px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>strong{
max-width:145px;
font-size:16px;
line-height:1.12;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card>small{
max-width:145px;
margin-top:6px;
font-size:9.5px;
line-height:1.3;
}
@media(max-width:1250px){
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:122px;
height:122px;
flex-basis:122px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card{
min-height:204px;
}
}
@media(max-width:1000px){
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px 10px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:140px;
height:140px;
flex-basis:140px;
}
}
@media(max-width:760px){
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-page{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card{
min-height:202px;
}
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-photo,
.cr-birds-overview-panel.is-section-open[data-birds-section="iconic"] .cr-birds-top-card:nth-child(5) .cr-birds-top-photo{
width:124px;
height:124px;
flex-basis:124px;
}
}
/* ============================================================
COSTA RICA EXPLORER — PLACES ENTRY SCREEN
Scope: Places tab and three category choices only.
Approved Costa Rica map artwork remains unchanged.
============================================================ */
.cr-places-overview{
padding:12px 10px 18px;
border-radius:18px;
background:#f8f8f3;
}
.cr-places-shell{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:stretch;
overflow:hidden;
border:1px solid #d7e1d8;
border-radius:17px;
background:#fff;
box-shadow:0 12px 30px rgba(24,55,43,.08);
}
.cr-places-panel{
padding:28px;
background:#fffdf8;
border-right:1px solid #dfe5de;
}
.cr-places-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}
.cr-places-head>div:first-child{
min-width:0;
}
.cr-places-head .eyebrow{
margin:0 0 8px;
font-size:9px;
letter-spacing:.22em;
}
.cr-places-head h3{
margin:0;
color:#17392c;
font-family:Georgia,serif;
font-size:38px;
line-height:1;
letter-spacing:-.018em;
}
.cr-places-head p:not(.eyebrow){
max-width:580px;
margin:10px 0 0;
color:#5d7066;
font-size:14px;
line-height:1.52;
}
.cr-places-status{
flex:0 0 auto;
max-width:205px;
padding:9px 12px;
border:1px solid #dbe7d9;
border-radius:999px;
background:#eef5ea;
color:#23644b;
font-size:9.5px;
font-weight:800;
white-space:nowrap;
}
.cr-places-choices{
display:grid;
gap:12px;
}
.cr-places-choice{
position:relative;
width:100%;
min-height:126px;
display:grid;
grid-template-columns:72px minmax(0,1fr) 38px;
gap:17px;
align-items:center;
overflow:hidden;
padding:16px 17px;
border:1px solid rgba(26,76,53,.22);
border-radius:17px;
color:#fff;
text-align:left;
cursor:pointer;
box-shadow:0 8px 20px rgba(26,61,45,.10);
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.cr-places-choice::before,
.cr-places-choice::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
}
.cr-places-choice::before{
background:
radial-gradient(circle at 88% 35%,rgba(255,255,255,.14),transparent 24%),
linear-gradient(90deg,rgba(4,35,24,.94) 0%,rgba(8,56,38,.86) 48%,rgba(13,79,52,.58) 100%);
}
.cr-places-choice::after{
left:auto;
width:42%;
background:
radial-gradient(ellipse at 70% 84%,rgba(245,210,107,.20),transparent 38%),
radial-gradient(ellipse at 35% 96%,rgba(23,136,83,.54),transparent 49%);
opacity:.9;
}
.cr-places-choice-iconic{
background:linear-gradient(135deg,#173f2d,#4e7047);
}
.cr-places-choice-stays{
background:linear-gradient(135deg,#183b2c,#805836);
}
.cr-places-choice-feeders{
background:linear-gradient(135deg,#173e2c,#367a43);
}
.cr-places-choice:hover,
.cr-places-choice:focus-visible,
.cr-places-choice.is-active{
outline:none;
transform:translateY(-2px);
border-color:#72aa82;
box-shadow:0 12px 25px rgba(18,72,50,.17);
}
.cr-places-choice.is-active{
box-shadow:0 0 0 2px #d6ead9,0 12px 25px rgba(18,72,50,.18);
}
.cr-places-choice-icon,
.cr-places-choice-copy,
.cr-places-choice-arrow{
position:relative;
z-index:2;
}
.cr-places-choice-icon{
width:64px;
height:64px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.55);
border-radius:50%;
background:linear-gradient(145deg,#247a54,#3da06a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.20);
}
.cr-places-choice-icon svg{
width:36px;
height:36px;
fill:#fff;
stroke:#fff;
stroke-width:3.5;
stroke-linecap:round;
stroke-linejoin:round;
}
.cr-places-choice-icon .cr-place-icon-detail{
fill:none;
}
.cr-places-choice-copy{
min-width:0;
}
.cr-places-choice-copy strong,
.cr-places-choice-copy small,
.cr-places-choice-copy b{
display:block;
}
.cr-places-choice-copy strong{
font-family:Georgia,serif;
font-size:24px;
line-height:1.05;
}
.cr-places-choice-copy small{
max-width:430px;
margin-top:7px;
color:rgba(255,255,255,.90);
font-size:12px;
line-height:1.42;
}
.cr-places-choice-copy b{
width:max-content;
max-width:100%;
margin-top:9px;
padding:5px 9px;
border:1px solid rgba(255,255,255,.52);
border-radius:999px;
color:#fff;
font-size:9px;
line-height:1.2;
font-weight:800;
}
.cr-places-choice-arrow{
width:38px;
height:38px;
display:grid;
place-items:center;
justify-self:end;
border-radius:50%;
background:#fff;
color:#1c6549;
font-family:Georgia,serif;
font-size:31px;
line-height:1;
box-shadow:0 5px 14px rgba(0,0,0,.16);
}
.cr-places-note{
display:grid;
grid-template-columns:38px minmax(0,1fr);
gap:12px;
align-items:center;
margin-top:16px;
padding:13px 15px;
border:1px solid #dae6d9;
border-radius:12px;
background:#f0f6ec;
}
.cr-places-note>span{
width:31px;
height:31px;
display:grid;
place-items:center;
border-radius:50%;
background:#dcebdd;
color:#1e6d4d;
font-family:Georgia,serif;
font-weight:900;
}
.cr-places-note p{
margin:0;
color:#53685c;
font-size:11.5px;
line-height:1.55;
}
.cr-places-map{
position:relative;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#9fcfd6;
}
.cr-places-map>img{
width:100%;
height:auto;
min-height:0;
display:block;
object-fit:contain;
object-position:center center;
user-select:none;
-webkit-user-drag:none;
}
.cr-places-map-badge{
position:absolute;
top:15px;
right:15px;
z-index:2;
display:grid;
grid-template-columns:30px auto;
column-gap:8px;
align-items:center;
max-width:250px;
padding:9px 12px;
border:1px solid rgba(255,255,255,.72);
border-radius:12px;
background:rgba(248,252,247,.92);
color:#194b38;
box-shadow:0 6px 18px rgba(0,0,0,.13);
backdrop-filter:blur(5px);
}
.cr-places-map-badge>span{
grid-row:1/3;
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
background:#dcebdd;
font-size:17px;
}
.cr-places-map-badge strong{
font-size:10px;
}
.cr-places-map-badge small{
margin-top:2px;
color:#62746a;
font-size:8.5px;
line-height:1.25;
}
@media(max-width:1000px){
.cr-places-shell{
grid-template-columns:1fr;
}
.cr-places-panel{
border-right:0;
border-bottom:1px solid #dfe5de;
}
.cr-places-map{
aspect-ratio:3 / 2;
}
}
@media(max-width:700px){
.cr-places-overview{
padding:8px 4px 12px;
}
.cr-places-panel{
padding:20px 15px;
}
.cr-places-head{
display:block;
}
.cr-places-head h3{
font-size:33px;
}
.cr-places-status{
display:inline-block;
margin-top:12px;
}
.cr-places-choice{
min-height:112px;
grid-template-columns:58px minmax(0,1fr) 32px;
gap:11px;
padding:13px 12px;
}
.cr-places-choice-icon{
width:54px;
height:54px;
}
.cr-places-choice-icon svg{
width:30px;
height:30px;
}
.cr-places-choice-copy strong{
font-size:20px;
}
.cr-places-choice-copy small{
font-size:10.5px;
}
.cr-places-choice-copy b{
font-size:8px;
}
.cr-places-choice-arrow{
width:32px;
height:32px;
font-size:26px;
}
}
/* ============================================================
COSTA RICA EXPLORER — ICONIC PLACES V1
Scope: Iconic Places sub-view only. Approved 3:2 WKH map unchanged.
============================================================ */
.cr-iconic-places-view[hidden],.cr-iconic-google-map[hidden],.cr-iconic-map-message[hidden],.cr-iconic-map-return[hidden]{display:none!important}
.cr-iconic-places-view{padding:14px 10px 20px;color:#17392c;background:#f8f8f3}
.cr-iconic-topbar{display:flex;align-items:flex-start;gap:22px;margin-bottom:14px;padding:18px 20px;border:1px solid #d8e2da;border-radius:15px;background:#fffdf8}
.cr-iconic-topbar>div{min-width:0}.cr-iconic-topbar .eyebrow{margin:0 0 4px;font-size:9px}.cr-iconic-topbar h3{margin:0;font-family:Georgia,serif;font-size:30px;line-height:1.04}.cr-iconic-topbar p:last-child{margin:6px 0 0;color:#64746b;font-size:11px}
.cr-iconic-back{flex:0 0 auto;margin-top:4px;padding:0;border:0;background:transparent;color:#176e4e;font-size:10px;font-weight:850;cursor:pointer}.cr-iconic-back:hover,.cr-iconic-back:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}
.cr-iconic-layout{display:grid;grid-template-columns:minmax(255px,.82fr) minmax(310px,1fr) minmax(0,1.55fr);min-height:610px;overflow:hidden;border:1px solid #d6e0d7;border-radius:17px;background:#fff;box-shadow:0 14px 34px rgba(24,55,43,.09)}
.cr-iconic-list-panel{min-width:0;display:flex;flex-direction:column;border-right:1px solid #e0e6df;background:#fffdf9}.cr-iconic-list-head{padding:18px 17px 10px}.cr-iconic-list-head strong,.cr-iconic-list-head small{display:block}.cr-iconic-list-head strong{font-family:Georgia,serif;font-size:22px}.cr-iconic-list-head small{margin-top:3px;color:#6a7a71;font-size:9px}
.cr-iconic-filters{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 12px;border-bottom:1px solid #e5e9e4}.cr-iconic-filters button{min-height:28px;padding:0 9px;border:1px solid #d2ddd4;border-radius:999px;background:#f8faf7;color:#557064;font-size:8px;font-weight:850;cursor:pointer}.cr-iconic-filters button.is-active{border-color:#17392c;background:#17392c;color:#fff}
.cr-iconic-list{flex:1 1 auto;min-height:0;max-height:520px;overflow-y:auto;scrollbar-gutter:stable}.cr-iconic-list-item{width:100%;display:grid;grid-template-columns:56px 30px minmax(0,1fr) 15px;gap:8px;align-items:center;padding:9px 10px;border:0;border-bottom:1px solid #edf0ec;background:transparent;color:#17392c;text-align:left;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.cr-iconic-list-item:hover,.cr-iconic-list-item:focus-visible{outline:none;background:#eef5ef}.cr-iconic-list-item.is-selected{background:#e4f0e7;box-shadow:inset 4px 0 0 #176e4e}
.cr-iconic-list-thumb{width:56px;height:42px;overflow:hidden;border-radius:7px;background:#dde8df}.cr-iconic-list-thumb img{width:100%;height:100%;display:block;object-fit:cover}.cr-iconic-list-number{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#244d3b;color:#fff;font-family:Georgia,serif;font-size:12px;font-weight:700}.cr-iconic-list-copy{min-width:0}.cr-iconic-list-copy strong,.cr-iconic-list-copy small{display:block}.cr-iconic-list-copy strong{overflow:hidden;color:#1b392d;font-family:Georgia,serif;font-size:12.5px;line-height:1.12;text-overflow:ellipsis}.cr-iconic-list-copy small{margin-top:3px;color:#6c7b73;font-size:8px;line-height:1.2}.cr-iconic-list-arrow{color:#6f8177;font-size:20px}
.cr-iconic-detail-panel{min-width:0;border-right:1px solid #e0e6df;background:#fff}.cr-iconic-photo{position:relative;height:220px;overflow:hidden;background:#dbe7de}.cr-iconic-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.cr-iconic-photo-number{position:absolute;right:10px;bottom:10px;padding:5px 8px;border-radius:999px;background:rgba(8,36,27,.78);color:#fff;font-size:8px;font-weight:850}.cr-iconic-detail-copy{padding:18px 20px 20px}.cr-iconic-region{display:block;margin-bottom:5px;color:#327257;font-size:8px;font-weight:900;letter-spacing:.10em;text-transform:uppercase}.cr-iconic-detail-copy h4{margin:0;color:#17392c;font-family:Georgia,serif;font-size:27px;line-height:1.03}.cr-iconic-detail-copy>p{margin:10px 0 0;color:#53675c;font-size:11px;line-height:1.55}
.cr-iconic-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}.cr-iconic-tags span{padding:5px 7px;border-radius:999px;background:#eef3ec;color:#496255;font-size:8px;font-weight:800}.cr-iconic-qualities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:15px}.cr-iconic-quality{min-width:0;padding:10px 6px;border:1px solid #e1e7e0;border-radius:9px;background:#f9fbf7;text-align:center}.cr-iconic-quality b{display:block;margin-bottom:4px;color:#176e4e;font-size:16px;line-height:1}.cr-iconic-quality strong{display:block;color:#355044;font-size:8px;line-height:1.25}.cr-iconic-birds{margin-top:14px;padding-top:12px;border-top:1px solid #e8ece7}.cr-iconic-birds span{display:block;color:#327257;font-size:8px;font-weight:900;letter-spacing:.12em}.cr-iconic-birds p{margin:5px 0 0;color:#314f40;font-size:9.5px;line-height:1.45}
.cr-iconic-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.cr-iconic-actions button,.cr-iconic-actions a{min-height:38px;border-radius:8px;font-size:9px;font-weight:850;cursor:pointer}.cr-iconic-actions a{display:flex;align-items:center;justify-content:center;text-decoration:none;padding:0 12px}.cr-iconic-primary{border:1px solid #176e4e;background:#176e4e;color:#fff}.cr-iconic-primary:hover,.cr-iconic-primary:focus-visible{outline:none;background:#12583f;border-color:#12583f}.cr-iconic-secondary{border:1px solid #b9cdbd;background:#f7faf6;color:#176e4e}.cr-iconic-secondary:hover,.cr-iconic-secondary:focus-visible{outline:none;background:#e9f2e9}
.cr-iconic-map-panel{position:relative;min-width:0;align-self:start;aspect-ratio:3/2;overflow:hidden;background:#9fcfd6}.cr-iconic-map-stage,.cr-iconic-map-stage>img,.cr-iconic-marker-overlay,.cr-iconic-google-map{position:absolute;inset:0;width:100%;height:100%}.cr-iconic-map-stage>img{display:block;object-fit:contain;object-position:center center;user-select:none;-webkit-user-drag:none}.cr-iconic-marker-overlay{z-index:3}.cr-iconic-place-marker{position:absolute;width:34px;height:34px;display:grid;place-items:center;padding:0;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.95);border-radius:50%;background:#244d3b;color:#fff;font-family:Georgia,serif;font-size:13px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.30);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.cr-iconic-place-marker:hover,.cr-iconic-place-marker:focus-visible{outline:none;transform:translate(-50%,-50%) scale(1.12);background:#123d2d}.cr-iconic-place-marker.is-selected{transform:translate(-50%,-50%) scale(1.16);background:#0d5d3f;box-shadow:0 0 0 4px rgba(255,255,255,.88),0 0 0 7px rgba(23,110,78,.60),0 5px 16px rgba(0,0,0,.34);z-index:5}.cr-iconic-google-map{z-index:4;background:#e6ebe7}.cr-iconic-map-message{position:absolute;left:50%;top:50%;z-index:8;width:min(360px,calc(100% - 36px));transform:translate(-50%,-50%);padding:12px 14px;border:1px solid #c8d6ca;border-radius:10px;background:rgba(242,247,241,.97);color:#405a4d;font-size:10px;line-height:1.45;text-align:center;box-shadow:0 8px 24px rgba(20,49,37,.18)}.cr-iconic-map-return{position:absolute;left:12px;top:12px;z-index:7;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.88);border-radius:8px;background:rgba(15,66,47,.92);color:#fff;font-size:9px;font-weight:850;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.20)}.cr-iconic-map-caption{position:absolute;right:12px;bottom:12px;z-index:6;max-width:260px;padding:6px 9px;border:1px solid rgba(255,255,255,.68);border-radius:7px;background:rgba(242,247,241,.94);color:#476055;font-size:8px;box-shadow:0 3px 10px rgba(0,0,0,.14)}
@media(max-width:1180px){.cr-iconic-layout{grid-template-columns:minmax(245px,.75fr) minmax(300px,1fr)}.cr-iconic-map-panel{grid-column:1/-1;width:100%}.cr-iconic-detail-panel{border-right:0}}
@media(max-width:760px){.cr-iconic-places-view{padding:8px 4px 12px}.cr-iconic-topbar{display:block;padding:15px}.cr-iconic-back{margin-bottom:12px}.cr-iconic-topbar h3{font-size:27px}.cr-iconic-layout{display:block}.cr-iconic-list-panel,.cr-iconic-detail-panel{border-right:0;border-bottom:1px solid #e0e6df}.cr-iconic-list{max-height:365px}.cr-iconic-photo{height:235px}.cr-iconic-map-panel{aspect-ratio:3/2}}
/* ============================================================
COSTA RICA EXPLORER — ICONIC PLACES FOCUS STATE
Browse remains: list | preview | map.
Selecting a place from the list becomes: detail 40% | map 60%.
============================================================ */
.cr-iconic-focus-back[hidden]{
display:none !important;
}
.cr-iconic-focus-back{
width:100%;
min-height:42px;
display:flex;
align-items:center;
padding:0 18px;
border:0;
border-bottom:1px solid #dfe6df;
background:#f5f8f3;
color:#176e4e;
font-size:10px;
font-weight:900;
cursor:pointer;
text-align:left;
}
.cr-iconic-focus-back:hover,
.cr-iconic-focus-back:focus-visible{
outline:none;
background:#eaf2e9;
}
/* Focused place: hide the 15-place list and give the approved map
the larger 60% share requested. */
.cr-iconic-layout.is-place-focus{
grid-template-columns:minmax(360px,2fr) minmax(0,3fr);
min-height:0;
}
.cr-iconic-layout.is-place-focus .cr-iconic-list-panel{
display:none;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-panel{
border-right:1px solid #e0e6df;
}
.cr-iconic-layout.is-place-focus .cr-iconic-photo{
height:330px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-copy{
padding:24px 26px 28px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-region{
font-size:9px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-copy h4{
font-size:34px;
line-height:1.02;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-copy>p{
margin-top:12px;
font-size:12.5px;
line-height:1.62;
}
.cr-iconic-layout.is-place-focus .cr-iconic-tags{
gap:7px;
margin-top:16px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-tags span{
padding:6px 9px;
font-size:9px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-qualities{
gap:9px;
margin-top:18px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-quality{
padding:13px 8px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-quality b{
font-size:19px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-quality strong{
font-size:9px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-birds{
margin-top:18px;
padding-top:15px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-birds span{
font-size:9px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-birds p{
margin-top:7px;
font-size:11px;
line-height:1.55;
}
.cr-iconic-layout.is-place-focus .cr-iconic-actions{
margin-top:18px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-actions button,
.cr-iconic-layout.is-place-focus .cr-iconic-actions a{
min-height:43px;
font-size:10px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-map-panel{
width:100%;
align-self:start;
aspect-ratio:3 / 2;
}
/* Keep the original browse layout behavior on medium screens,
while focused mode stays as two columns as long as space allows. */
@media(max-width:1180px) and (min-width:841px){
.cr-iconic-layout.is-place-focus{
grid-template-columns:minmax(330px,2fr) minmax(0,3fr);
}
.cr-iconic-layout.is-place-focus .cr-iconic-map-panel{
grid-column:auto;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-panel{
border-right:1px solid #e0e6df;
}
.cr-iconic-layout.is-place-focus .cr-iconic-photo{
height:285px;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-copy h4{
font-size:30px;
}
}
@media(max-width:840px){
.cr-iconic-layout.is-place-focus{
display:block;
}
.cr-iconic-layout.is-place-focus .cr-iconic-detail-panel{
border-right:0;
border-bottom:1px solid #e0e6df;
}
.cr-iconic-layout.is-place-focus .cr-iconic-map-panel{
width:100%;
aspect-ratio:3 / 2;
}
}
/* ============================================================
COSTA RICA EXPLORER — ICONIC PLACE PREVIOUS / NEXT
Visible only in the focused single-place view.
============================================================ */
.cr-iconic-sequence-nav[hidden]{
display:none !important;
}
.cr-iconic-sequence-nav{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
margin-top:16px;
padding-top:15px;
border-top:1px solid #e3e9e2;
}
.cr-iconic-sequence-nav button{
min-height:38px;
padding:0 12px;
border:1px solid #bfd0c2;
border-radius:8px;
background:#f7faf6;
color:#176e4e;
font-size:9px;
font-weight:850;
cursor:pointer;
}
.cr-iconic-sequence-nav button:first-child{
justify-self:start;
}
.cr-iconic-sequence-nav button:last-child{
justify-self:end;
}
.cr-iconic-sequence-nav button:hover:not(:disabled),
.cr-iconic-sequence-nav button:focus-visible:not(:disabled){
outline:none;
background:#e9f2e9;
border-color:#8eb39a;
}
.cr-iconic-sequence-nav button:disabled{
cursor:default;
opacity:.38;
}
.cr-iconic-sequence-nav span{
min-width:68px;
color:#53675c;
font-size:9px;
font-weight:900;
text-align:center;
letter-spacing:.03em;
}
.cr-iconic-layout.is-place-focus .cr-iconic-sequence-nav{
display:grid;
}
@media(max-width:840px){
.cr-iconic-sequence-nav{
gap:7px;
}
.cr-iconic-sequence-nav button{
min-height:40px;
padding:0 10px;
}
}
/* ============================================================
COSTA RICA EXPLORER — WILDLIFE STAYS + PRIVATE GARDENS V1
Scope: new Places catalog only. Iconic Places styles are unchanged.
============================================================ */
.cr-place-catalog-view[hidden]{display:none!important}
.cr-place-catalog-view{padding:14px 10px 20px;color:#17392c;background:#f8f8f3}
.cr-place-catalog-topbar{display:flex;align-items:flex-start;gap:22px;margin-bottom:14px;padding:18px 20px;border:1px solid #d8e2da;border-radius:15px;background:#fffdf8}
.cr-place-catalog-topbar>div{min-width:0}.cr-place-catalog-topbar .eyebrow{margin:0 0 4px;font-size:9px}.cr-place-catalog-topbar h3{margin:0;font-family:Georgia,serif;font-size:30px;line-height:1.04}.cr-place-catalog-topbar p:last-child{margin:6px 0 0;color:#64746b;font-size:11px;line-height:1.5}
.cr-place-catalog-back{flex:0 0 auto;margin-top:4px;padding:0;border:0;background:transparent;color:#176e4e;font-size:10px;font-weight:850;cursor:pointer}.cr-place-catalog-back:hover,.cr-place-catalog-back:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}
.cr-place-catalog-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.55fr);min-height:610px;overflow:hidden;border:1px solid #d6e0d7;border-radius:17px;background:#fff;box-shadow:0 14px 34px rgba(24,55,43,.09)}
.cr-place-catalog-list-panel{min-width:0;display:flex;flex-direction:column;border-right:1px solid #e0e6df;background:#fffdf9}.cr-place-catalog-list-head{padding:18px 17px 12px;border-bottom:1px solid #e5e9e4}.cr-place-catalog-list-head strong,.cr-place-catalog-list-head small{display:block}.cr-place-catalog-list-head strong{font-family:Georgia,serif;font-size:21px}.cr-place-catalog-list-head small{margin-top:3px;color:#6a7a71;font-size:9px}
.cr-place-catalog-list{flex:1 1 auto;min-height:0;max-height:620px;overflow-y:auto;scrollbar-gutter:stable}.cr-place-catalog-list-item{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;gap:9px;align-items:center;padding:11px 12px;border:0;border-bottom:1px solid #edf0ec;background:transparent;color:#17392c;text-align:left;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.cr-place-catalog-list-item:hover,.cr-place-catalog-list-item:focus-visible{outline:none;background:#eef5ef}.cr-place-catalog-list-item.is-selected{background:#e4f0e7;box-shadow:inset 4px 0 0 #176e4e}.cr-place-catalog-list-number{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#244d3b;color:#fff;font-family:Georgia,serif;font-size:12px;font-weight:700}.cr-place-catalog-list-copy{min-width:0}.cr-place-catalog-list-copy strong,.cr-place-catalog-list-copy small{display:block}.cr-place-catalog-list-copy strong{color:#1b392d;font-family:Georgia,serif;font-size:13px;line-height:1.15}.cr-place-catalog-list-copy small{margin-top:4px;color:#6c7b73;font-size:8px;line-height:1.25}.cr-place-catalog-list-arrow{color:#6f8177;font-size:20px}
.cr-place-catalog-detail-panel{min-width:0;background:#fff}.cr-place-catalog-visual{position:relative;min-height:176px;display:flex;align-items:center;gap:18px;padding:28px 28px 25px;overflow:hidden;background:linear-gradient(135deg,#173f2d,#6f6845);color:#fff}.cr-place-catalog-view.is-gardens .cr-place-catalog-visual{background:linear-gradient(135deg,#17412f,#3e834d)}.cr-place-catalog-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 28%,rgba(255,255,255,.15),transparent 23%),radial-gradient(circle at 76% 104%,rgba(236,207,114,.20),transparent 36%);pointer-events:none}.cr-place-catalog-visual-icon,.cr-place-catalog-visual>div,.cr-place-catalog-number{position:relative;z-index:1}.cr-place-catalog-visual-icon{width:72px;height:72px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.12);font-size:34px}.cr-place-catalog-visual small,.cr-place-catalog-visual strong{display:block}.cr-place-catalog-visual small{font-size:8px;font-weight:900;letter-spacing:.13em}.cr-place-catalog-visual strong{max-width:520px;margin-top:6px;font-family:Georgia,serif;font-size:20px;line-height:1.2}.cr-place-catalog-number{position:absolute;right:15px;bottom:13px;padding:5px 8px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(8,36,27,.42);font-size:8px;font-weight:850}
.cr-place-catalog-detail-copy{padding:22px 24px 24px}.cr-place-catalog-region{display:block;margin-bottom:5px;color:#327257;font-size:8px;font-weight:900;letter-spacing:.10em;text-transform:uppercase}.cr-place-catalog-detail-copy h4{margin:0;color:#17392c;font-family:Georgia,serif;font-size:29px;line-height:1.04}.cr-place-catalog-detail-copy>p{margin:10px 0 0;color:#53675c;font-size:11px;line-height:1.58}
.cr-place-catalog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.cr-place-catalog-tags span{padding:5px 8px;border-radius:999px;background:#eef3ec;color:#496255;font-size:8px;font-weight:800}.cr-place-catalog-qualities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.cr-place-catalog-quality{min-width:0;padding:11px 7px;border:1px solid #e1e7e0;border-radius:10px;background:#f9fbf7;text-align:center}.cr-place-catalog-quality b{display:block;margin-bottom:4px;color:#176e4e;font-size:17px;line-height:1}.cr-place-catalog-quality strong{display:block;color:#355044;font-size:8.5px;line-height:1.25}
.cr-place-catalog-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.cr-place-catalog-info-grid>div{padding:12px 13px;border:1px solid #e3e9e2;border-radius:10px;background:#fbfcf9}.cr-place-catalog-info-grid .cr-place-catalog-access{grid-column:1/-1}.cr-place-catalog-info-grid span{display:block;color:#327257;font-size:8px;font-weight:900;letter-spacing:.10em}.cr-place-catalog-info-grid p{margin:5px 0 0;color:#354f42;font-size:10px;line-height:1.48}
.cr-place-catalog-research-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:11px 13px;border:1px solid #d9e5d8;border-radius:10px;background:#f1f6ee;color:#4b6155;font-size:9px;line-height:1.45}.cr-place-catalog-research-note strong{flex:0 0 auto;color:#24563f}.cr-place-catalog-actions{margin-top:15px}.cr-place-catalog-map-link{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid #176e4e;border-radius:8px;background:#176e4e;color:#fff;font-size:9px;font-weight:850;text-decoration:none}.cr-place-catalog-map-link:hover,.cr-place-catalog-map-link:focus-visible{outline:none;background:#12583f;border-color:#12583f}
.cr-place-catalog-sequence{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;margin-top:17px;padding-top:14px;border-top:1px solid #e7ece6}.cr-place-catalog-sequence button{min-height:34px;border:1px solid #c7d6c9;border-radius:8px;background:#f8faf7;color:#176e4e;font-size:9px;font-weight:850;cursor:pointer}.cr-place-catalog-sequence button:last-child{justify-self:stretch}.cr-place-catalog-sequence button:hover:not(:disabled),.cr-place-catalog-sequence button:focus-visible:not(:disabled){outline:none;background:#e9f2e9}.cr-place-catalog-sequence button:disabled{opacity:.38;cursor:default}.cr-place-catalog-sequence span{min-width:64px;text-align:center;color:#65776d;font-size:8px;font-weight:850}
@media(max-width:900px){.cr-place-catalog-layout{grid-template-columns:minmax(245px,.8fr) minmax(0,1.3fr)}.cr-place-catalog-visual{min-height:160px;padding:22px}.cr-place-catalog-detail-copy{padding:18px}.cr-place-catalog-info-grid{grid-template-columns:1fr}.cr-place-catalog-info-grid .cr-place-catalog-access{grid-column:auto}}
@media(max-width:700px){.cr-place-catalog-view{padding:8px 4px 12px}.cr-place-catalog-topbar{display:block;padding:15px}.cr-place-catalog-back{margin-bottom:12px}.cr-place-catalog-topbar h3{font-size:27px}.cr-place-catalog-layout{display:block}.cr-place-catalog-list-panel{border-right:0;border-bottom:1px solid #e0e6df}.cr-place-catalog-list{max-height:390px}.cr-place-catalog-visual{min-height:145px}.cr-place-catalog-visual-icon{width:60px;height:60px;font-size:28px}.cr-place-catalog-visual strong{font-size:17px}.cr-place-catalog-qualities{grid-template-columns:1fr}.cr-place-catalog-research-note{display:block}.cr-place-catalog-research-note strong{display:block;margin-bottom:4px}}
/* ============================================================
COSTA RICA PLACES — PRODUCTION CATALOG MAP PASS
Wildlife Accommodations + Private Birding/Photography Gardens
Mirrors the established Iconic Places browse pattern.
============================================================ */
.cr-place-catalog-layout{
display:grid;
grid-template-columns:minmax(255px,.82fr) minmax(310px,1fr) minmax(0,1.55fr) !important;
min-height:610px;
overflow:hidden;
border:1px solid rgba(38,73,57,.18);
border-radius:18px;
background:#fff;
box-shadow:0 16px 42px rgba(28,59,46,.10);
}
.cr-place-catalog-list-panel{
min-width:0;
border-right:1px solid #e0e6df;
background:#fffdfa;
}
.cr-place-catalog-list{
max-height:650px;
overflow:auto;
}
.cr-place-catalog-list-item{
grid-template-columns:48px 28px minmax(0,1fr) 16px !important;
min-height:64px;
}
.cr-place-catalog-list-thumb{
width:42px;
height:42px;
display:block;
overflow:hidden;
border-radius:7px;
background:#dfe9e1;
}
.cr-place-catalog-list-thumb img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-place-catalog-detail-panel{
min-width:0;
border-right:1px solid #e0e6df;
background:#fff;
}
.cr-place-catalog-photo{
position:relative;
height:235px;
overflow:hidden;
background:#173f2e;
}
.cr-place-catalog-photo::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 48%,rgba(4,27,19,.64) 100%);
pointer-events:none;
}
.cr-place-catalog-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.cr-place-catalog-photo-label{
position:absolute;
left:15px;
bottom:13px;
z-index:2;
display:inline-flex;
align-items:center;
min-height:24px;
padding:0 9px;
border-radius:999px;
background:rgba(6,37,26,.78);
color:#fff;
font-size:8px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
backdrop-filter:blur(4px);
}
.cr-place-catalog-number{
position:absolute;
top:12px;
right:12px;
z-index:2;
padding:5px 8px;
border-radius:999px;
background:rgba(5,35,24,.78);
color:#fff;
font-size:8px;
font-weight:900;
}
.cr-place-catalog-map-panel{
position:relative;
min-width:0;
align-self:start;
aspect-ratio:3 / 2;
overflow:hidden;
background:#9fcfd6;
}
.cr-place-catalog-map-stage,
.cr-place-catalog-map-stage>img,
.cr-place-catalog-marker-overlay{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.cr-place-catalog-map-stage>img{
display:block;
object-fit:cover;
}
.cr-place-catalog-marker-overlay{
pointer-events:none;
}
.cr-place-catalog-marker{
position:absolute;
z-index:3;
width:30px;
height:30px;
padding:0;
border:2px solid #fff;
border-radius:50%;
transform:translate(-50%,-50%);
display:grid;
place-items:center;
background:#126948;
color:#fff;
font-size:10px;
font-weight:900;
box-shadow:0 4px 12px rgba(4,35,24,.38);
cursor:pointer;
pointer-events:auto;
}
.cr-place-catalog-view.is-gardens .cr-place-catalog-marker{
background:#168c66;
}
.cr-place-catalog-marker:hover,
.cr-place-catalog-marker:focus-visible,
.cr-place-catalog-marker.is-selected{
outline:none;
width:36px;
height:36px;
z-index:6;
background:#f0c94f;
color:#17392c;
border-color:#fff;
}
.cr-place-catalog-map-caption{
position:absolute;
left:12px;
right:12px;
bottom:12px;
z-index:5;
padding:8px 10px;
border-radius:8px;
background:rgba(255,255,255,.90);
color:#28503e;
font-size:9px;
font-weight:800;
text-align:center;
box-shadow:0 4px 14px rgba(22,60,43,.14);
}
.cr-place-catalog-map-link{
text-decoration:none;
}
@media(max-width:1180px){
.cr-place-catalog-layout{
grid-template-columns:minmax(245px,.75fr) minmax(300px,1fr) !important;
}
.cr-place-catalog-map-panel{
grid-column:1/-1;
width:100%;
aspect-ratio:3 / 2;
}
}
@media(max-width:760px){
.cr-place-catalog-layout{
display:block !important;
}
.cr-place-catalog-list-panel,
.cr-place-catalog-detail-panel{
border-right:0;
border-bottom:1px solid #e0e6df;
}
.cr-place-catalog-list{
max-height:420px;
}
.cr-place-catalog-photo{
height:260px;
}
.cr-place-catalog-map-panel{
width:100%;
aspect-ratio:3 / 2;
}
}
/* ============================================================
WILDLIFE ACCOMMODATIONS — IMAGE-FREE HEADER
Scope: Wildlife Accommodations only. Iconic Places unchanged.
============================================================ */
.cr-stays-places-view .cr-iconic-list-item{
grid-template-columns:30px minmax(0,1fr) 15px;
padding-left:14px;
}
.cr-stays-heading-banner{
position:relative;
min-height:165px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:28px 24px 24px;
overflow:hidden;
background:
radial-gradient(circle at 88% 18%,rgba(82,190,137,.28),transparent 28%),
linear-gradient(135deg,#0b3a2a 0%,#0f5138 58%,#176e4e 100%);
color:#fff;
}
.cr-stays-heading-banner::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
}
.cr-stays-heading-kicker,
.cr-stays-heading-region,
.cr-stays-heading-banner h4,
.cr-stays-heading-number{
position:relative;
z-index:1;
}
.cr-stays-heading-kicker{
margin-bottom:10px;
color:#d7eadf;
font-size:8px;
font-weight:900;
letter-spacing:.18em;
}
.cr-stays-heading-region{
display:block;
margin-bottom:6px;
color:#bfe1cf;
font-size:8px;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
}
.cr-stays-heading-banner h4{
max-width:90%;
margin:0;
color:#fff;
font-family:Georgia,serif;
font-size:29px;
line-height:1.02;
text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.cr-stays-heading-number{
position:absolute;
right:12px;
top:12px;
padding:5px 8px;
border:1px solid rgba(255,255,255,.45);
border-radius:999px;
background:rgba(5,35,25,.45);
color:#fff;
font-size:8px;
font-weight:850;
}
.cr-stays-places-view .cr-iconic-detail-copy>p:first-child{
margin-top:0;
}
.cr-iconic-layout.is-place-focus .cr-stays-heading-banner{
min-height:205px;
padding:34px 28px 28px;
}
.cr-iconic-layout.is-place-focus .cr-stays-heading-banner h4{
font-size:38px;
}
@media(max-width:840px){
.cr-stays-heading-banner{
min-height:150px;
padding:24px 20px 22px;
}
.cr-iconic-layout.is-place-focus .cr-stays-heading-banner{
min-height:175px;
padding:28px 22px 24px;
}
.cr-iconic-layout.is-place-focus .cr-stays-heading-banner h4{
font-size:32px;
}
}
/* ============================================================
WILDLIFE ACCOMMODATIONS — BACK TO PLACES VISIBILITY FIX
Scope: Wildlife Accommodations only. Iconic Places unchanged.
============================================================ */
.cr-stays-places-view .cr-iconic-topbar .cr-iconic-back{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
margin-top:0;
padding:0 13px;
border:1px solid #9fbfac;
border-radius:8px;
background:#edf5ee;
color:#0f5038;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none;
box-shadow:0 2px 7px rgba(23,57,44,.08);
}
.cr-stays-places-view .cr-iconic-topbar .cr-iconic-back:hover,
.cr-stays-places-view .cr-iconic-topbar .cr-iconic-back:focus-visible{
outline:none;
border-color:#176e4e;
background:#dfeee2;
color:#0b402d;
text-decoration:none;
}
@media(max-width:760px){
.cr-stays-places-view .cr-iconic-topbar .cr-iconic-back{
min-height:40px;
margin-bottom:13px;
font-size:13px;
}
}
/* ============================================================
PRIVATE BIRDING & PHOTOGRAPHY GARDENS — IMAGE-FREE MAP PASS
Scope: Private Gardens only. Iconic Places and Wildlife
Accommodations are intentionally unchanged.
============================================================ */
.cr-place-catalog-view.is-gardens .cr-place-catalog-list-item{
grid-template-columns:30px minmax(0,1fr) 15px !important;
padding-left:14px;
}
.cr-place-catalog-view.is-gardens .cr-place-catalog-list-thumb{
display:none !important;
}
.cr-place-catalog-heading-banner{
position:relative;
min-height:165px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:28px 24px 24px;
overflow:hidden;
background:
radial-gradient(circle at 88% 18%,rgba(82,190,137,.28),transparent 28%),
linear-gradient(135deg,#0b3a2a 0%,#0f5138 58%,#176e4e 100%);
color:#fff;
}
.cr-place-catalog-heading-banner::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
}
.cr-place-catalog-heading-kicker,
.cr-place-catalog-heading-banner .cr-place-catalog-region,
.cr-place-catalog-heading-banner h4,
.cr-place-catalog-heading-banner .cr-place-catalog-number{
position:relative;
z-index:1;
}
.cr-place-catalog-heading-kicker{
margin-bottom:10px;
color:#d7eadf;
font-size:8px;
font-weight:900;
letter-spacing:.18em;
}
.cr-place-catalog-heading-banner .cr-place-catalog-region{
display:block;
margin-bottom:6px;
color:#bfe1cf;
font-size:8px;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
}
.cr-place-catalog-heading-banner h4{
max-width:90%;
margin:0;
color:#fff;
font-family:Georgia,serif;
font-size:29px;
line-height:1.02;
text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.cr-place-catalog-heading-banner .cr-place-catalog-number{
position:absolute;
right:12px;
top:12px;
padding:5px 8px;
border:1px solid rgba(255,255,255,.45);
border-radius:999px;
background:rgba(5,35,25,.45);
color:#fff;
font-size:8px;
font-weight:850;
}
.cr-place-catalog-view.is-gardens .cr-place-catalog-detail-copy>p:first-child{
margin-top:0;
}
.cr-place-catalog-map-link{
border:1px solid #176e4e;
cursor:pointer;
}
.cr-place-catalog-google-map,
.cr-place-catalog-map-message{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.cr-place-catalog-google-map{
z-index:3;
background:#dce7df;
}
.cr-place-catalog-google-map[hidden],
.cr-place-catalog-map-message[hidden],
.cr-place-catalog-map-return[hidden]{
display:none !important;
}
.cr-place-catalog-map-message{
z-index:4;
display:grid;
place-items:center;
padding:32px;
background:rgba(247,249,245,.94);
color:#365547;
font-size:11px;
font-weight:800;
text-align:center;
}
.cr-place-catalog-map-return{
position:absolute;
left:12px;
top:12px;
z-index:8;
min-height:36px;
padding:0 12px;
border:1px solid rgba(255,255,255,.75);
border-radius:8px;
background:#173f2e;
color:#fff;
font-size:9px;
font-weight:850;
cursor:pointer;
box-shadow:0 5px 16px rgba(4,35,24,.22);
}
.cr-place-catalog-map-return:hover,
.cr-place-catalog-map-return:focus-visible{
outline:none;
background:#0f3023;
}
.cr-place-catalog-view.is-gardens .cr-place-catalog-map-caption{
z-index:7;
}
@media(max-width:760px){
.cr-place-catalog-heading-banner{
min-height:150px;
padding:24px 20px 22px;
}
.cr-place-catalog-heading-banner h4{
font-size:27px;
}
}
/* ============================================================
COSTA RICA EXPLORER — SEE BIRDS BACK LABEL CLIPPING FIX
Presentation only. Keeps the existing focus layout and behavior.
Ensures the inner Back label has a complete line box and is not
visually clipped against the content below.
============================================================ */
.cr-bird-map.is-birds-focus .cr-map-back{
display:inline-flex;
align-items:center;
min-height:28px;
margin:0 0 8px;
padding:3px 0;
line-height:1.35;
overflow:visible;
}