/*
 * GuideRank public theme
 * Warme, speelse visuele laag voor alle openbare pagina's.
 */
:root{
  --gr-ink:#132b3a;
  --gr-canal:#1f6f78;
  --gr-coral:#e76f51;
  --gr-sun:#f3b862;
  --gr-cream:#faf7f0;
  --gr-mint:#dcefe4;
  --gr-peach:#fff0e9;
  --gr-white:#fff;
  --gr-muted:#657984;
  --gr-line:rgba(19,43,58,.11);
  --gr-shadow:0 20px 55px -32px rgba(19,43,58,.44);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 6% 10%,rgba(243,184,98,.15),transparent 25rem),
    radial-gradient(circle at 94% 28%,rgba(31,111,120,.10),transparent 28rem),
    var(--gr-cream)!important;
  color:var(--gr-ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.018em}
a{transition:color .18s,background-color .18s,transform .18s,box-shadow .18s}
.topnav,.nav,body>nav{
  background:rgba(250,247,240,.88)!important;
  backdrop-filter:blur(14px);
  border-bottom-color:var(--gr-line)!important;
}
.brand{font-family:'Fraunces',Georgia,serif!important;font-size:22px!important}
.brand img,.brand .dot{filter:drop-shadow(0 4px 7px rgba(231,111,81,.22));transform:rotate(-6deg)}
.hero{position:relative}
.hero:before{
  content:"";
  position:absolute;
  width:84px;height:12px;
  border-top:3px solid var(--gr-sun);
  border-radius:50%;
  left:0;top:35px;
  transform:rotate(-4deg);
  opacity:.75;
}
.hero .eyebrow,.eyebrow,.badge{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  padding:7px 11px!important;
  border:1px solid rgba(231,111,81,.18)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.76)!important;
  color:var(--gr-canal)!important;
}
.hero .eyebrow:before,.eyebrow:before{content:"♥";color:var(--gr-coral);font-size:13px}
.card,.gcard,.tour-card,.panel,.modal,.info,.notice,section.card{
  border-color:var(--gr-line)!important;
  border-radius:22px!important;
  box-shadow:0 10px 35px -30px rgba(19,43,58,.55);
}
.card,.gcard,.tour-card,section.card{background:rgba(255,255,255,.92)!important}
.card,.gcard,.tour-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover,.gcard:hover,.tour-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--gr-shadow)!important;
  border-color:rgba(231,111,81,.22)!important;
}
.gcard .photo,.tour-photo{border-radius:18px!important}
.tag,.meta-row span{
  background:var(--gr-peach)!important;
  color:var(--gr-ink)!important;
  border:1px solid rgba(231,111,81,.10);
}
.score-note,.notice{
  background:linear-gradient(135deg,var(--gr-mint),rgba(255,255,255,.88))!important;
  border-left:4px solid var(--gr-canal)!important;
}
.btn,.button,button[type="submit"],input[type="submit"]{
  border-radius:999px!important;
  min-height:44px;
  font-weight:700!important;
}
.btn-gold,.btn:not(.secondary):not(.btn-ghost),.button:not(.secondary),button[type="submit"],input[type="submit"]{
  background:var(--gr-coral)!important;
  color:#fff!important;
  box-shadow:0 10px 22px -15px rgba(231,111,81,.9);
}
.btn:hover,.button:hover,button[type="submit"]:hover,input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -16px rgba(19,43,58,.55)!important;
}
.btn.secondary,.button.secondary{background:var(--gr-canal)!important;color:#fff!important}
.btn-ghost{background:transparent!important}
input,select,textarea{
  border-radius:12px!important;
  border-color:var(--gr-line)!important;
  background:rgba(255,255,255,.94)!important;
  transition:border-color .16s,box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gr-coral)!important;
  box-shadow:0 0 0 4px rgba(231,111,81,.12);
}
label{color:var(--gr-ink)}
footer{
  border-top-color:var(--gr-line)!important;
  background:rgba(255,255,255,.25);
}
body>header{
  max-width:none!important;
  padding:54px max(24px,calc((100vw - 932px)/2)) 36px!important;
  background:linear-gradient(135deg,rgba(255,240,233,.88),rgba(220,239,228,.62));
  border-bottom:1px solid var(--gr-line);
}
body>header>a:first-child{
  display:inline-flex;
  background:#fff;
  border:1px solid var(--gr-line);
  border-radius:999px;
  padding:8px 13px;
  text-decoration:none;
  font-weight:700;
}
body>header h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(34px,5vw,52px)!important;max-width:760px;margin-bottom:8px}
body>main:not(.wrap){
  width:min(980px,calc(100% - 36px));
  margin:28px auto!important;
}
body>main:not(.wrap)>h2:before{content:"♥";color:var(--gr-coral);font-size:.6em;margin-right:8px;vertical-align:middle}
body>main:not(.wrap) .notice{border-radius:18px;padding:16px 18px}
body>main:not(.wrap)>section.card{padding:28px}
.hero .emoji{
  display:grid;
  place-items:center;
  width:88px;height:88px;
  margin-bottom:20px!important;
  border-radius:30px;
  background:linear-gradient(145deg,var(--gr-sun),var(--gr-coral));
  box-shadow:0 20px 38px -24px rgba(231,111,81,.8);
  transform:rotate(-5deg);
}
.grid>.card:nth-child(3n+1),.perks>.card:nth-child(3n+1){border-top:3px solid var(--gr-coral)!important}
.grid>.card:nth-child(3n+2),.perks>.card:nth-child(3n+2){border-top:3px solid var(--gr-canal)!important}
.grid>.card:nth-child(3n),.perks>.card:nth-child(3n){border-top:3px solid var(--gr-sun)!important}
.live{box-shadow:0 7px 18px -13px #21824b}
.modal-bg{backdrop-filter:blur(5px)}
.modal{box-shadow:0 28px 80px rgba(19,43,58,.28)!important}
@media(max-width:700px){
  .hero:before{top:22px;width:58px}
  body>header{padding:38px 20px 28px!important}
  body>main:not(.wrap){width:min(100% - 28px,980px)}
  .card:hover,.gcard:hover,.tour-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}
