/*
Theme Name: Solace Child (GermTrips)
Theme URI: https://germtrips.com
Description: Child theme for germtrips.com. Adds live Elementor widgets for guide and region listings, card-grid archive templates, and styling for the destination hub pages.
Author: GermTrips
Template: solace
Version: 1.0.0
Text Domain: solace-child
*/

/* ---------------------------------------------------------------
   GermTrips design tokens. Kept in sync with the Elementor pages.
   --------------------------------------------------------------- */
:root{
  --gt-navy:#0B3C8C;
  --gt-blue:#1257C4;
  --gt-ink:#0E2748;
  --gt-muted:#40598A;
  --gt-grey:#5C7395;
  --gt-light:#8A9BB4;
  --gt-border:#E6ECF5;
  --gt-card-border:#E3EAF4;
  --gt-hairline:#EEF2F8;
  --gt-bg:#F5F9FD;
  --gt-max:1240px;
}

/* ---------------------------------------------------------------
   Shared card grid. Used by the Elementor widgets, the archive
   templates and the destination hubs so all three match.
   --------------------------------------------------------------- */
.gt-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
.gt-grid--3{grid-template-columns:repeat(3,1fr);}

.gt-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--gt-border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(14,39,72,.05);
  transition:box-shadow .18s ease, transform .18s ease;
}
.gt-card:hover{box-shadow:0 14px 30px rgba(11,60,140,.14);transform:translateY(-2px);}

.gt-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#EAF0F9;}
.gt-card__media img{width:100%;height:100%;object-fit:cover;display:block;}

.gt-card__body{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  flex:1;
  padding:16px 15px 14px;
}
.gt-card__top{display:flex;flex-direction:column;gap:7px;}
.gt-card__badge{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--gt-blue);
}
.gt-card__title{
  margin:0;
  font-size:15.5px;
  line-height:1.35;
  letter-spacing:-.2px;
  font-weight:700;
}
.gt-card__title a{color:var(--gt-ink);text-decoration:none;}
.gt-card__title a:hover{color:var(--gt-blue);}

.gt-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--gt-hairline);
  padding-top:11px;
}
.gt-card__meta{font-size:11.5px;color:var(--gt-light);}
.gt-card__cta{
  flex:none;
  background:var(--gt-blue);
  color:#fff;
  border-radius:7px;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.gt-card__cta:hover{background:var(--gt-navy);color:#fff;}

/* ---------------------------------------------------------------
   Region index
   --------------------------------------------------------------- */
.gt-regions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;}
.gt-regions__group{margin:0 0 8px;}
.gt-regions__list{list-style:none;margin:0;padding:0;}
.gt-regions__list li{margin:0 0 9px;font-size:13.5px;line-height:1.4;}
.gt-regions__list a{color:var(--gt-ink);text-decoration:none;}
.gt-regions__list a:hover{color:var(--gt-blue);}
.gt-regions__count{color:var(--gt-light);}

/* ---------------------------------------------------------------
   Archive header + pagination
   --------------------------------------------------------------- */
.gt-archive{max-width:var(--gt-max);margin:0 auto;padding:0 24px 64px;}
.gt-archive__head{
  background:linear-gradient(105deg,#0B3C8C 0%,#0B3C8C 42%,#114CA8 100%);
  padding:60px 0 64px;
  margin-bottom:40px;
}
.gt-archive__head-inner{max-width:var(--gt-max);margin:0 auto;padding:0 24px;text-align:center;}
.gt-archive__title{
  margin:0;
  color:#fff;
  font-size:44px;
  font-weight:800;
  letter-spacing:-1.2px;
  line-height:1.1;
}
.gt-archive__lead{
  margin:14px auto 0;
  max-width:620px;
  color:rgba(255,255,255,.86);
  font-size:16px;
  line-height:1.6;
}
.gt-pagination{margin:40px 0 0;text-align:center;}
.gt-pagination .page-numbers{
  display:inline-block;
  min-width:40px;
  padding:9px 12px;
  margin:0 3px 6px;
  border:1px solid var(--gt-card-border);
  border-radius:8px;
  background:#fff;
  color:var(--gt-ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.gt-pagination .page-numbers:hover{border-color:var(--gt-blue);color:var(--gt-blue);}
.gt-pagination .page-numbers.current{background:var(--gt-navy);border-color:var(--gt-navy);color:#fff;}
.gt-pagination .dots{border:0;background:none;}

/* ---------------------------------------------------------------
   Destination hub pages rendered by the hubs plugin
   --------------------------------------------------------------- */
.gt-hub-wrap{max-width:var(--gt-max) !important;padding:0 24px 64px !important;}
.gt-hub-wrap h1{
  font-size:40px !important;
  font-weight:800;
  letter-spacing:-1.1px;
  color:var(--gt-navy);
  margin:40px 0 12px !important;
}
.gt-hub-lead{font-size:16px !important;color:var(--gt-muted);opacity:1 !important;max-width:640px;}
.gt-hub-back a{color:var(--gt-blue);text-decoration:none;font-weight:600;}
.gt-hub-wrap h2{
  font-size:20px !important;
  font-weight:800;
  color:var(--gt-navy);
  border-bottom:1px solid var(--gt-card-border) !important;
  padding-bottom:8px !important;
  margin:34px 0 14px !important;
}
.gt-hub-list li{margin:0 0 9px !important;font-size:13.5px !important;line-height:1.45;}
.gt-hub-list a{color:var(--gt-ink);text-decoration:none;}
.gt-hub-list a:hover{color:var(--gt-blue);}
.gt-hub-regions a{
  border:1px solid var(--gt-card-border) !important;
  border-radius:10px !important;
  padding:12px 14px !important;
  color:var(--gt-ink);
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.gt-hub-regions a:hover{border-color:var(--gt-blue) !important;box-shadow:0 6px 16px rgba(11,60,140,.10);}
.gt-hub-regions span{color:var(--gt-light);font-weight:400;opacity:1 !important;}

/* ---------------------------------------------------------------
   Responsive. Matches the Elementor breakpoints: 1024 and 767.
   --------------------------------------------------------------- */
@media (max-width:1024px){
  .gt-grid,.gt-grid--3{grid-template-columns:repeat(2,1fr);}
  .gt-regions{grid-template-columns:repeat(2,1fr);}
  .gt-archive__title{font-size:36px;}
  .gt-archive__head{padding:48px 0 52px;}
  .gt-hub-wrap h1{font-size:32px !important;}
}
@media (max-width:767px){
  .gt-grid,.gt-grid--3{grid-template-columns:1fr;gap:18px;}
  .gt-regions{grid-template-columns:1fr;}
  .gt-archive{padding:0 16px 44px;}
  .gt-archive__head{padding:36px 0 40px;margin-bottom:28px;}
  .gt-archive__head-inner{padding:0 16px;}
  .gt-archive__title{font-size:28px;letter-spacing:-.8px;}
  .gt-archive__lead{font-size:15px;}
  .gt-hub-wrap{padding:0 16px 44px !important;}
  .gt-hub-wrap h1{font-size:26px !important;margin-top:28px !important;}
}

/* ===============================================================
   Category template. Mirrors the Elementor page design so the
   archives and the built pages read as one system.
   =============================================================== */
.gt-cat-hero{
  background:linear-gradient(105deg,#0B3C8C 0%,#0B3C8C 42%,#114CA8 100%);
  padding:64px 0 150px;
}
.gt-cat-hero__inner{max-width:var(--gt-max);margin:0 auto;padding:0 24px;text-align:center;}
.gt-cat-hero__title{
  margin:0;color:#fff;font-size:48px;font-weight:800;
  letter-spacing:-1.3px;line-height:1.1;
}
.gt-cat-hero__lead{
  margin:16px auto 0;max-width:640px;
  color:rgba(255,255,255,.86);font-size:17px;line-height:1.6;
}
.gt-herostats{
  list-style:none;margin:30px 0 0;padding:0;
  display:flex;justify-content:center;flex-wrap:wrap;gap:16px 34px;
}
.gt-herostats li{display:flex;align-items:center;gap:12px;text-align:left;}
.gt-herostats i{color:#fff;font-size:18px;width:20px;text-align:center;}
.gt-herostats span{display:flex;flex-direction:column;gap:3px;}
.gt-herostats strong{color:#fff;font-size:14px;font-weight:600;}
.gt-herostats span{color:rgba(255,255,255,.86);font-size:12.5px;line-height:1.45;}

/* Overlapping browse card */
.gt-browse-wrap{background:#F1F6FC;padding:0 0 56px;}
.gt-browse{
  max-width:var(--gt-max);margin:-108px auto 0;
  background:#fff;border-radius:16px;
  box-shadow:0 18px 44px rgba(11,60,140,.14);
  padding:18px;position:relative;z-index:5;
}
.gt-browse__label{
  display:block;margin:0 0 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--gt-grey);
}
.gt-browse__row{display:flex;align-items:center;flex-wrap:nowrap;}
.gt-browse__cell{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-right:1px solid var(--gt-card-border);
  text-decoration:none;
}
.gt-browse__cell:last-of-type{border-right:0;}
.gt-browse__cell i{color:var(--gt-blue);font-size:18px;width:20px;text-align:center;flex:none;}
.gt-browse__cell span{display:flex;flex-direction:column;gap:3px;min-width:0;}
.gt-browse__cell strong{color:var(--gt-ink);font-size:14.5px;font-weight:600;}
.gt-browse__cell span{color:var(--gt-light);font-size:12.5px;}
.gt-browse__cell:hover strong{color:var(--gt-blue);}
.gt-browse__cta{flex:none;padding:0 8px 0 16px;}

.gt-btn{
  display:inline-block;border-radius:8px;padding:13px 22px;
  font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;
}
.gt-btn--navy{background:var(--gt-navy);color:#fff;}
.gt-btn--navy:hover{background:#092E6D;color:#fff;}
.gt-btn--white{background:#fff;color:var(--gt-navy);}
.gt-btn--white:hover{background:#E9F0FB;color:var(--gt-navy);}

/* Shared section headings */
.gt-h2{
  margin:0;text-align:center;color:var(--gt-navy);
  font-size:27px;font-weight:800;letter-spacing:-.6px;
}
.gt-h2--left{text-align:left;font-size:24px;margin:0 0 20px;}
.gt-sub{margin:10px 0 0;text-align:center;color:var(--gt-muted);font-size:14.5px;}

/* Top regions band */
.gt-statband-wrap{background:#F5F9FD;padding:8px 0 56px;}
.gt-statband-inner{max-width:var(--gt-max);margin:0 auto;padding:0 24px;}
.gt-statband{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:22px 0 0;background:#fff;
  border:1px solid var(--gt-card-border);border-radius:12px;overflow:hidden;
}
.gt-statband__cell{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:24px 14px;border-right:1px solid #EDF2F8;text-decoration:none;
}
.gt-statband__cell:last-child{border-right:0;}
.gt-statband__cell:hover{background:#F7FAFD;}
.gt-statband__n{color:var(--gt-blue);font-size:26px;font-weight:800;letter-spacing:-.6px;}
.gt-statband__l{color:var(--gt-grey);font-size:13px;font-weight:500;text-align:center;}

/* Closing CTA */
.gt-cta-wrap{background:#fff;padding:10px 0 56px;}
.gt-cta{
  max-width:var(--gt-max);margin:0 auto;
  display:flex;align-items:center;gap:24px;
  background:var(--gt-navy);border-radius:12px;padding:30px 36px;
}
.gt-cta__text{flex:1 1 auto;}
.gt-cta__text h3{margin:0 0 7px;color:#fff;font-size:19px;font-weight:700;letter-spacing:-.3px;}
.gt-cta__text p{margin:0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.55;}
.gt-cta__act{flex:none;}

@media (max-width:1024px){
  .gt-cat-hero{padding:52px 0 130px;}
  .gt-cat-hero__title{font-size:38px;}
  .gt-browse__row{flex-wrap:wrap;}
  .gt-browse__cell{flex:1 1 45%;border-right:0;border-bottom:1px solid var(--gt-card-border);}
  .gt-browse__cta{width:100%;padding:14px 8px 4px;text-align:center;}
  .gt-statband{grid-template-columns:repeat(2,1fr);}
  .gt-statband__cell:nth-child(2){border-right:0;}
}
@media (max-width:767px){
  .gt-cat-hero{padding:38px 0 112px;}
  .gt-cat-hero__inner{padding:0 16px;}
  .gt-cat-hero__title{font-size:30px;letter-spacing:-.9px;}
  .gt-cat-hero__lead{font-size:15px;}
  .gt-herostats{flex-direction:column;align-items:flex-start;text-align:left;gap:14px;}
  .gt-browse{margin-top:-88px;border-radius:14px;}
  .gt-browse-wrap{padding:0 16px 44px;}
  .gt-browse__cell{flex:1 1 100%;}
  .gt-statband-inner{padding:0 16px;}
  .gt-statband{grid-template-columns:1fr;}
  .gt-statband__cell{border-right:0;border-bottom:1px solid #EDF2F8;}
  .gt-statband__cell:last-child{border-bottom:0;}
  .gt-h2{font-size:22px;}
  .gt-h2--left{font-size:20px;}
  .gt-cta{flex-direction:column;align-items:flex-start;padding:26px 22px;margin:0 16px;}
  .gt-cta-wrap{padding:6px 0 44px;}
}

.gt-ico{flex:none;display:block;}
.gt-herostats .gt-ico{color:#fff;}
.gt-browse__cell .gt-ico{color:var(--gt-blue);}

/* gt icon colours v2 */
.gt-ico{flex:none;display:block;}
.gt-herostats li .gt-ico{color:#fff;}
.gt-browse__row .gt-browse__cell .gt-ico{color:#1257C4;}
.gt-browse__row .gt-browse__cell:hover .gt-ico{color:#0B3C8C;}

/* ===============================================================
   MOTION BLOCK START

   The hidden state is scoped to html.gt-anim AND :not(.gt-in), so the
   moment an element is revealed every hidden declaration stops
   matching. Nothing needs to out-specify anything to become visible.
   =============================================================== */

html.gt-anim [data-gt-r]{
  opacity:0;
  transform:translate3d(0,14px,0);
  will-change:opacity,transform;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}
html.gt-anim .gt-cat-hero__title[data-gt-r],
html.gt-anim .gt-archive__title[data-gt-r]{transform:translate3d(0,20px,0);transition-duration:.65s;}
html.gt-anim .gt-browse[data-gt-r]{transform:translate3d(0,22px,0);}
html.gt-anim .gt-regions__list[data-gt-r]{transform:none;}

/* The revealed state is declared last and marked important so it beats
   every per-element starting-position override above, whatever order
   they land in. Without this a later override at equal specificity
   pins the element in its hidden position permanently. */
html.gt-anim [data-gt-r].gt-in{
  opacity:1 !important;
  transform:none !important;
}

/* --------------------------- hover polish --------------------------- */
.gt-card{transition:box-shadow .22s ease, transform .22s ease;}
.gt-card:hover{box-shadow:0 14px 30px rgba(11,60,140,.14);transform:translateY(-3px);}
.gt-card__media img{transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.gt-card:hover .gt-card__media img{transform:scale(1.04);}
.gt-card__cta{transition:background-color .18s ease;}
.gt-card:hover .gt-card__cta{background:#0B3C8C;}

.gt-btn{transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.gt-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(11,60,140,.18);}
.gt-btn:active{transform:translateY(0);box-shadow:none;}

.gt-browse__cell{transition:background-color .18s ease;border-radius:10px;}
.gt-browse__cell:hover{background:#F4F8FD;}
.gt-browse__cell .gt-ico,.gt-browse__cell strong{transition:color .18s ease;}

.gt-statband__cell{transition:background-color .18s ease, transform .18s ease;}
.gt-statband__cell:hover{transform:translateY(-2px);}
.gt-statband__n{transition:color .18s ease;}
.gt-statband__cell:hover .gt-statband__n{color:#0B3C8C;}

.gt-regions__list a{transition:color .15s ease;}
.gt-pagination .page-numbers{transition:border-color .18s ease,color .18s ease,background-color .18s ease;}
.gt-hub-regions a{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.gt-hub-regions a:hover{transform:translateY(-2px);}

/* Visible keyboard focus: several cells are whole-block links now. */
.gt-card__title a:focus-visible,.gt-card__cta:focus-visible,.gt-btn:focus-visible,
.gt-browse__cell:focus-visible,.gt-statband__cell:focus-visible,
.gt-regions__list a:focus-visible{
  outline:2px solid #1257C4;outline-offset:3px;border-radius:6px;
}

/* --------------------------- sticky header -------------------------- */
.solace-custom-header-content{transition:box-shadow .22s ease;}
.solace-custom-header-content.gt-scrolled{box-shadow:0 4px 18px rgba(14,39,72,.08);}

/* --------------------------- anchor offset -------------------------- */
/* The header is sticky, so unoffset anchors land with the heading
   hidden underneath it. */
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:88px;}
@media (max-width:767px){[id]{scroll-margin-top:72px;}}

/* --------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.gt-anim [data-gt-r],
  html.gt-anim [data-gt-r]:not(.gt-in){
    opacity:1 !important;transform:none !important;
    transition:none !important;will-change:auto !important;
  }
  .gt-card,.gt-card:hover,.gt-card__media img,.gt-card:hover .gt-card__media img,
  .gt-btn,.gt-btn:hover,.gt-statband__cell,.gt-statband__cell:hover,
  .gt-hub-regions a,.gt-hub-regions a:hover{
    transition:none !important;transform:none !important;
  }
}
/* =========================== MOTION BLOCK END ======================== */
