/* Click Admissions: WordPress layer.
   1. Colours and fonts come from Appearance > Editor > Styles, so changing the
      palette there changes the whole site.
   2. Core blocks (buttons, lists, groups, navigation, query loops) wear the
      site's own look.
   3. Blog templates, header, footer and the booking calendar. */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --navy:var(--wp--preset--color--navy,#042045);
  --ink:var(--wp--preset--color--navy,#042045);
  --blue:var(--wp--preset--color--blue,#0169FE);
  --accent:var(--wp--preset--color--blue,#0169FE);
  --blue-300:var(--accent);--blue-400:var(--accent);
  --blue-700:var(--wp--preset--color--blue-dark,#0151C9);
  --blue-100:var(--wp--preset--color--blue-light,#D8E7FF);
  --blue-50:var(--wp--preset--color--blue-pale,#EDF4FF);
  --paper:var(--wp--preset--color--paper,#F6F8FB);
  --ink-2:var(--wp--preset--color--ink,#46566F);
  --ink-3:var(--wp--preset--color--ink-soft,#6B7B93);
  --line:var(--wp--preset--color--line,#DCE3ED);
  --good:var(--wp--preset--color--green,#12855A);
  --display:var(--wp--preset--font-family--display,'Poppins',system-ui,sans-serif);
  --body:var(--wp--preset--font-family--body,'Archivo',system-ui,sans-serif);
  --nav-h:72px;
}

/* ---------------------------------------------------------------- 2. page frame */
html,body{overflow-x:clip}
/* WordPress gives every page's <body> the class "page", which the site's own
   page-entry animation also uses; that left a transform on <body> and pinned
   the chat button, back-to-top and phone action bar to the wrong place. */
body.page{animation:none!important;transform:none!important;opacity:1!important}
.wp-site-blocks{padding:0}
.wp-site-blocks > *,.ca-canvas > *,.ca-main > *{margin-block-start:0}
.ca-main{display:block}
.ca-canvas{overflow-x:clip}
/* spacing for anything added by hand inside a section */
:where(.ca-sec > .wrap, .ca-pagecontent, .ctaform__copy, .hero__copy, .ca-phero-inner) > * + *{margin-top:1.1em}
:where(.ca-sec > .wrap) > :where(.sec-head) + *{margin-top:0}
.ca-narrow{max-width:800px}
.ca-center{text-align:center;margin-inline:auto}
.ca-center.h2{max-width:20ch}
.ca-small{font-size:.86rem;color:var(--ink-3)}
.ca-paper{background:var(--paper)}
.ca-glow{background:radial-gradient(60% 80% at 85% 30%,rgba(1,105,254,.45) 0%,rgba(1,105,254,0) 65%),linear-gradient(120deg,#031936 0%,#042045 45%,#073a82 100%);color:#fff}
.ca-glow .h2,.ca-glow h2,.ca-glow h3{color:#fff}
.ca-glow .lede,.ca-glow p{color:#C9D6EA}
.next .h2,.next h2{color:#fff}
.next .lede{color:#B9C8DD}
.next .ca-small,.band .ca-small{color:#8FA4C2;margin-top:18px}
.band{color:#D7E3F4}
.ca-ctaband .lede{margin-inline:auto}
.ca-mb{margin-bottom:44px}
.grid.ca-top{align-items:start}
.ca-ladder-narrow{max-width:720px}
.ca-prose .wrap h3{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:28px 0 10px;text-transform:none}
.ca-prose .wrap p:not(.lede){color:var(--ink-2);font-size:1.02rem;line-height:1.72}
.ca-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:860px){.ca-split{grid-template-columns:1fr}}
.ca-adminnote{background:#FFF7E6;border:1px dashed #D99A00;color:#5c4300;padding:12px 16px;border-radius:10px;font-size:.9rem}
.ca-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* the app markup keeps working inside blocks */
.hero .h1 em{font-style:normal;color:var(--blue-300)}
.ticks strong{color:var(--navy);font-family:var(--display);font-weight:600}
.band .ticks strong,.hero .ticks strong,.ctaform .ticks strong{color:#fff}
ul.wp-block-list.ticks{padding-left:0}
.ticks.light li{color:#D7E3F4}
.ticks.light svg{color:var(--blue-300)}
.flow .node p,.node h3{margin:0}
.route__stops > .stop{font:inherit;text-align:center}
@media (min-width:901px){.route__stops{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.pgrid{grid-auto-rows:clamp(180px,18vw,260px)}
.ca-dex .dfilter,.ca-dgrid .dfilter{margin-bottom:18px}
.ca-hero--plain .hero__in{grid-template-columns:1fr}
.ca-hero__pic{position:absolute;inset:0 0 0 46%;z-index:1;pointer-events:none}
.ca-hero__pic img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
@media (max-width:900px){.ca-hero__pic{position:relative;inset:auto;height:260px}}
.ca-phero--pic .phero__grad{background:linear-gradient(90deg,rgba(3,25,54,.94) 0%,rgba(4,32,69,.82) 45%,rgba(4,32,69,.45) 100%),var(--ca-hero-img) center/cover no-repeat}
.phero .lede{color:#C9D6EA}
.ca-faqsearch{max-width:420px;margin-bottom:24px}
.ca-contact{margin:0;line-height:1.9}
.ca-contact a{color:inherit}
.asidecard .ca-contact{font-size:.9rem;color:var(--ink-2)}
.ca-reviews__src{font-size:.8rem;color:var(--ink-3);margin-top:14px}
.revav--img{object-fit:cover;padding:0}
.ca-reviews__links{display:flex;flex-wrap:wrap;gap:12px}
.cal__load{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--ink-3);font-size:.9rem}
.cal__err{color:#B3261E;font-weight:600}
.cal__form textarea{min-height:76px}

/* buttons: core Button blocks get the .btn classes from PHP */
.wp-block-buttons.cta-row{gap:12px}
.wp-block-button__link.btn{display:inline-flex;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;line-height:1;padding:17px 30px;border-radius:999px}
.wp-block-button__link.btn.btn--sm{padding:12px 20px;font-size:.82rem}
.wp-block-button__link.btn.btn--lg{padding:20px 38px;font-size:1rem}
.wp-block-button.btn--block,.wp-block-button.btn--block .wp-block-button__link{width:100%}
.wp-block-button__link.btn--ghost{background:transparent;color:var(--navy)}
.wp-block-button__link.btn--rev{background:#fff;color:var(--navy)}
.wp-block-button__link.btn--rev-ghost{background:transparent;color:#fff}
.wp-block-image.is-style-rounded img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;height:auto}

/* ---------------------------------------------------------------- header */
.ca-header-part{position:relative;z-index:60}
.ca-header{background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.ca-header.is-stuck{box-shadow:0 10px 30px -18px rgba(4,32,69,.35)}
.ca-header__in{min-height:var(--nav-h);gap:20px;align-items:center}
.ca-logo{margin:0;flex:none}
.ca-logo img{height:auto;max-height:52px;width:auto}
.ca-header__right{gap:26px;align-items:center}
.ca-nav{font-family:var(--display);font-size:.9rem;font-weight:500;color:var(--navy);gap:26px}
.ca-nav .wp-block-navigation__container{gap:26px}
.ca-nav a{text-decoration:none}
.ca-nav .wp-block-navigation-item__content:hover,.ca-nav .current-menu-item > a{color:var(--blue)}
.ca-nav .wp-block-navigation__submenu-container{border:1px solid var(--line)!important;border-radius:14px;padding:8px!important;box-shadow:0 26px 60px -24px rgba(4,32,69,.35);min-width:230px!important;background:#fff}
.ca-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:9px 12px!important;border-radius:8px;font-size:.86rem}
.ca-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{background:var(--blue-50)}
.ca-nav .ca-nav__all .wp-block-navigation-item__content{color:var(--blue);font-weight:600}
.ca-nav .ca-nav__book{display:none}
.ca-header__cta{margin:0}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open{background:#fff;padding:22px}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:6px;font-size:1.05rem}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .ca-nav__book{display:block;margin-top:14px}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .ca-nav__book a{background:var(--blue);color:#fff;border-radius:999px;padding:14px 22px!important}
@media (max-width:599px){
  .ca-header__cta{display:none!important}
  .ca-logo img{max-height:40px}
  .ca-header__in{min-height:64px}
}
/* mobile menu: a plain left-aligned list */
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:flex-start;padding-top:56px}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{align-items:flex-start;text-align:left}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{border:0!important;box-shadow:none!important;padding:4px 0 8px 14px!important;min-width:0!important;background:transparent}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-size:.95rem;color:var(--ink-2);padding:6px 0!important}
.ca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-weight:600}

/* ---------------------------------------------------------------- footer */
.foot figure{margin:0}
.foot .footlogo{display:block;margin-bottom:16px}
.foot .footlogo img{height:auto;width:190px;max-width:100%}
.foot .wp-block-list{list-style:none;padding:0;margin:0}
.foot__contact{color:#B9CBE6;margin-top:14px}
.foot__contact a{color:#fff;text-decoration:none}
.foot__legal a{text-decoration:none}

/* ---------------------------------------------------------------- blog */
.ahero{background:radial-gradient(55% 90% at 88% 20%,rgba(1,105,254,.45) 0%,rgba(1,105,254,0) 65%),linear-gradient(120deg,#031936 0%,#042045 45%,#073a82 100%);color:#fff;padding:44px 0 58px}
.ahero .crumb{font-size:.84rem;color:#B9CBE6;display:flex;gap:8px;flex-wrap:wrap}
.ahero .crumb a{color:#fff;text-decoration:none;opacity:.85}
.ahero .crumb a:hover{opacity:1;text-decoration:underline}
.ahero .eyebrow,.ahero .ca-terms{margin:22px 0 0;font-family:var(--display);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);background:#fff;display:inline-block;padding:5px 12px;border-radius:999px}
.ahero .ca-terms a{color:inherit;text-decoration:none}
.ahero h1{color:#fff;font-size:clamp(1.65rem,3.8vw,2.7rem);line-height:1.18;margin:14px 0 0;max-width:26ch;font-weight:800;text-transform:uppercase}
.ahero .lede{font-size:clamp(1rem,1.4vw,1.12rem);color:#D3DEEE;max-width:62ch;margin:16px 0 0}
.ahero .lede p{margin:0}
.ameta{font-size:.86rem;color:#B9CBE6;margin:18px 0 0}
.afig{margin:-30px auto 0;position:relative;z-index:1}
.afig img{display:block;width:100%;aspect-ratio:16/9;max-height:480px;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow)}
.alayout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(24px,4vw,56px);align-items:start;margin-top:34px;padding-bottom:40px}
.alayout > *{margin:0}
.atoc{position:sticky;top:20px;order:2;border-left:3px solid var(--blue);padding:4px 0 4px 18px}
.atoc__h{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.atoc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.atoc a{font-size:.86rem;line-height:1.4;color:var(--ink-2);text-decoration:none}
.atoc a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.ca-blog .prose{font-size:1.04rem;line-height:1.74;color:var(--ink-2)}
.ca-blog .prose > * + *{margin-top:16px}
.ca-blog .prose h2{font-weight:800;font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.3;margin:44px 0 14px;text-transform:uppercase;scroll-margin-top:20px}
.ca-blog .prose h3{text-transform:none}
.ca-blog .prose ul,.ca-blog .prose ol{padding-left:22px}
.ca-blog .prose li{margin-bottom:8px}
.ca-blog .prose strong{color:var(--navy)}
.ca-blog .prose img{border-radius:var(--r-lg)}
.bintro p:first-child{font-size:1.14rem;color:var(--ink)}
.btip{margin:22px 0;padding:18px 20px;border-radius:var(--r-lg);background:var(--blue-50);border:1px solid var(--blue-100)}
.btip b{display:block;font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.btip p{margin:0;color:var(--ink)}
.btable{margin:18px 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.btable table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem;line-height:1.5}
.btable th,.btable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.btable thead th{background:var(--navy);color:#fff;font-family:var(--display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.btable tbody th{color:var(--navy);background:var(--paper)}
.bsec{scroll-margin-top:24px}
.bsrc{padding-left:22px;font-size:.92rem}
.bnote{font-size:.92rem}
.bcta{margin-top:40px;padding:28px;border-radius:var(--r-xl);background:var(--navy);color:#C9D6EA}
.bcta h2{color:#fff;margin-top:0!important}
.arel{background:var(--paper);padding:56px 0}
.arel h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 22px;text-transform:uppercase}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
ul.bgrid,.wp-block-post-template.bgrid{list-style:none;padding:0;margin:0}
.bgrid > li{margin:0}
.bcard{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .25s}
.bcard:hover{transform:translateY(-3px)}
.bcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0}
.bcard .wp-block-post-featured-image{margin:0}
.bcard__ph{display:block;aspect-ratio:16/9;background:linear-gradient(120deg,#042045,#0169FE)}
.bcard__in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard__in > *{margin:0!important}
.bcard__tag{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.bcard__tag a{color:inherit;text-decoration:none;position:relative;z-index:2}
.bcard h3,.bcard__title{font-size:1rem;line-height:1.38;margin:0;text-transform:uppercase;font-weight:700}
.bcard__title a{color:var(--navy);text-decoration:none}
.bcard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.bcard p,.bcard__ex{font-size:.9rem;color:var(--ink-2);margin:0}
.bcard__more{margin-top:auto!important;padding-top:8px;font-size:.84rem;color:var(--blue-700);font-weight:600}
.bcard__more::after{content:" \00b7  Read the guide \2192"}
a.bcard .bcard__more::after{content:none}
.ca-pagination{margin-top:30px;gap:8px;font-family:var(--display);font-weight:600}
.ca-pagination a,.ca-pagination .page-numbers{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--navy)}
.ca-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.ca-search{max-width:520px;margin-bottom:26px}
.ca-search .wp-block-search__input{border:1px solid var(--line);border-radius:999px;padding:12px 18px;font:inherit}
.ca-search .wp-block-search__button{border-radius:999px;background:var(--blue);color:#fff;border:0;padding:12px 22px;font-family:var(--display);font-weight:600}
@media (max-width:980px){.alayout{grid-template-columns:minmax(0,1fr)}.atoc{position:static;order:0}.bgrid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.bgrid{grid-template-columns:1fr}.afig{margin-top:-20px}}
@media (prefers-reduced-motion:reduce){.bcard{transition:none}}

/* ---------------------------------------------------------------- phones */
/* side panels in the booking and partner pages no longer stick under a header */
.aside{top:20px}

/* the globe card opens as a sheet from the bottom of the screen, fully on view,
   with a large close button and a tap-anywhere-else-to-close backdrop */
.ca-sheet-bg{position:fixed;inset:0;z-index:94;background:rgba(3,18,40,.55);opacity:0;pointer-events:none;transition:opacity .3s}
body.ca-sheet-open .ca-sheet-bg{opacity:1;pointer-events:auto}
@media (max-width:760px){
  body > .gcard{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:min(78vh,620px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:95;transform:translateY(40px)!important;
    transition:opacity .25s ease,transform .35s cubic-bezier(.19,1,.22,1)!important;border-radius:20px}
  body > .gcard.on{transform:none!important}
  body > .gcard .gcard__in{background:#071c3a}
  body > .gcard .gcard__x{width:44px;height:44px;top:8px;right:8px;font-size:1.5rem;background:rgba(255,255,255,.12)}
  body > .gcard .gcard__hdbar{padding-right:62px}
  body > .gcard .gstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.ca-sheet-open .chat-fab,body.ca-sheet-open .mobar,body.ca-sheet-open .totop{opacity:0;pointer-events:none}
}

/* passport: once open, the spread is centred so the cover stays on screen */
@media (max-width:920px){
  .book{min-height:300px;overflow:visible}
  .book__inner{width:min(190px,46vw)}
  .book.open .book__inner{transform:rotateX(6deg) rotateY(-10deg) translateX(48%)}
  .book.open .book__cover{transform:rotateY(-150deg)}
}

/* visa timeline: each stage ticks as it reaches the middle of the screen, so
   the last one ("Visa approved") plays when the visitor actually gets there */
.ladder.ca-steps .vstep__b{opacity:.45;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.ladder.ca-steps .vstep.hit .vstep__b{opacity:1;transform:none}
.ladder.ca-steps .vstep.hit::before{transform:scaleY(1);transition-delay:.25s}
.ladder.ca-steps .vstep.hit .vstep__m{background:var(--blue);border-color:var(--blue);color:#fff;animation:caPop .55s var(--bounce) both}
.ladder.ca-steps .vstep.hit .vstep__m svg{opacity:1}
.ladder.ca-steps .vstep.hit .vstep__m b{opacity:0}
.ladder.ca-steps .vstep.hit:last-child .vstep__m{background:var(--good);border-color:var(--good)}
.ladder.ca-steps .vstep.hit:last-child h4{color:var(--good)}
@keyframes caPop{0%{transform:scale(.7)}60%{transform:scale(1.22)}100%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.ladder.ca-steps .vstep__b{opacity:1;transform:none}.ladder.ca-steps .vstep.hit .vstep__m{animation:none}}

@media (max-width:520px){
  /* buttons in a row stack and fill the width instead of wrapping their words */
  .wp-block-buttons.cta-row{flex-direction:column;align-items:stretch}
  .wp-block-buttons.cta-row > .wp-block-button{width:100%}
  .wp-block-buttons.cta-row .wp-block-button__link{width:100%;justify-content:center;white-space:nowrap}
  .wp-block-button__link.btn.btn--lg{padding:18px 22px;font-size:.95rem}
  .cal__form input,.cal__form textarea,.fld input,.fld textarea,.fld select{font-size:16px}
}
/* phones already have the bottom action bar; back-to-top would crowd the chat button */
@media (max-width:820px){.totop{display:none!important}}

/* Google's own booking page, when chosen under Click Admissions > Google and email */
.ca-gbook{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.ca-gbook iframe{display:block;width:100%;height:780px;border:0;background:#fff}
.ca-gbook__alt{margin:0;padding:12px 18px;border-top:1px solid var(--line);font-size:.86rem;text-align:center}
.ca-gbook--link{padding:clamp(24px,4vw,44px);text-align:center;display:grid;gap:18px;justify-items:center}
@media (max-width:640px){.ca-gbook iframe{height:1100px}}

/* the globe card's close button sits above its title bar on every screen size
   (the card's 3D tilt let the title bar swallow the tap) */
.gcard{transform-style:flat}
.gcard.on{transform:translate(-50%,-50%)}
.gcard__hdbar{position:relative;z-index:1}
.gcard__x{z-index:5}
@media (max-width:380px){
  .wp-block-buttons.cta-row .wp-block-button__link{white-space:normal;text-align:center;padding-left:16px;padding-right:16px}
  body > .gcard .gstat b{font-size:.9rem}
  body > .gcard .gstat span{font-size:.5rem;letter-spacing:.06em}
}
