/* =====================================================================================
   TMATS update 2026-10-24
   1) More glossy look  2) Own colours for Top Bar / Recent News  3) Language list centred on phones
   4) Phone menu like tmcrch  5) Home page content block  6) Popup photos never cut  7) Footer hours / visitors / location
   ===================================================================================== */

/* Nothing may make the page wider than the phone screen (a wider page made the language list look shifted to the left).
   "clip" (not "hidden") so the sticky menu bar keeps working. */
html,body{overflow-x:clip;}
body{max-width:100%;}

/* ------------------------------------------------------------------ 1) Glossy */
:root{--gloss-hi:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 48%,rgba(255,255,255,0) 52%,rgba(0,0,0,.06) 100%);}

/* glass shine on the coloured bars */
.topbar{background-image:var(--gloss-hi),var(--brand-grad);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);}
.site-header.on-banner,.glass-on .site-header.on-banner,.glass-on .site-header.on-banner.is-scrolled{
  background-image:var(--gloss-hi),var(--brand-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 24px -12px rgba(var(--d-rgb),.65);
}
.ticker{background-image:var(--gloss-hi),linear-gradient(90deg,color-mix(in srgb,var(--grad-from) 85%,#fff),var(--grad-to));}
.counter-band{background-image:var(--gloss-hi),var(--brand-grad);}

/* menu items: soft glass pill on hover (computers) */
@media (min-width:993px) and (hover:hover){
  .on-banner .main-menu > li > a:hover,.on-banner .main-menu > li.open > a,.on-banner .main-menu > li:hover > a{
    background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  }
  .on-banner .main-menu > li.active > a{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(255,255,255,.7);}
}

/* cards: frosted glass with a light top edge and a shine that sweeps across on hover */
.glass-on :is(.msg-card,.notice-card,.testi-card,.legal-card,.doc-card,.career-row).glossy{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(var(--d-rgb),.06),0 18px 40px -22px rgba(var(--d-rgb),.4);
  overflow:hidden;
}
.glass-on :is(.msg-card,.notice-card,.testi-card,.legal-card,.doc-card,.career-row,.about-img).glossy::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);opacity:0;}
.glass-on :is(.msg-card,.notice-card,.testi-card,.legal-card,.doc-card,.career-row,.about-img).glossy:hover::before{animation:v2-shine .9s ease;}
@keyframes v2-shine{0%{left:-75%;opacity:0;}20%{opacity:1;}100%{left:130%;opacity:0;}}

/* buttons: glassy highlight */
.btn-primary,.btn-gloss{background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--green-600),var(--green-800));
  border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -10px rgba(var(--p-rgb),.75);}
.btn-light.btn-gloss{background-image:linear-gradient(180deg,#fff,#eef7f1);color:var(--green-800);}

/* fee table and footer */
.fee-wrap.glossy{box-shadow:inset 0 1px 0 #fff,0 22px 46px -26px rgba(var(--d-rgb),.45);}
.fee-table thead th{background-image:var(--gloss-hi),var(--brand-grad);}
.site-footer .f-embed,.site-footer .f-links,.site-footer .f-about{position:relative;}
.footer-bottom{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}

/* ------------------------------------------------------------------ 2) Own colours (Admin → Site Settings → Bar Colours) */
body.tb-own .topbar{background-image:var(--gloss-hi),linear-gradient(90deg,var(--tb-bg-from),var(--tb-bg-to));color:var(--tb-text);border-bottom:1px solid var(--tb-border);}
body.tb-own .topbar a,body.tb-own .topbar .tb-phone,body.tb-own .topbar .tb-phone i,body.tb-own .topbar .tb-phone a:hover{color:var(--tb-text);}
body.tb-own .topbar .tb-social a{color:var(--tb-text);border:1px solid var(--tb-border);background:transparent;}
body.tb-own .topbar .tb-social a:hover{background:var(--tb-text);color:var(--tb-bg-to);}
body.tb-own .tb-clock{color:var(--tb-text);border-color:var(--tb-border);background:rgba(255,255,255,.06);}
body.tb-own .tb-clock-time{border-color:var(--tb-border);}
body.tb-own .tb-lang-btn,body.tb-own .tb-login{background:var(--tb-btn-bg);color:var(--tb-btn-text);border:1px solid var(--tb-border);}
body.tb-own .tb-lang-btn:hover,body.tb-own .tb-lang-btn[aria-expanded=true],body.tb-own .tb-login:hover{background:var(--tb-btn-text);color:var(--tb-btn-bg);border-color:var(--tb-btn-text);}

body.tk-own .ticker{background-image:var(--gloss-hi),linear-gradient(90deg,var(--tk-bg-from),var(--tk-bg-to));color:var(--tk-text);
  border-top:1px solid var(--tk-border);border-bottom:1px solid var(--tk-border);}
body.tk-own .ticker-label{background:var(--tk-label-bg);color:var(--tk-label-text);border-right:1px solid var(--tk-border);padding-left:16px;}
body.tk-own .ticker-label i{color:var(--tk-label-text);}
body.tk-own .ticker-track a{color:var(--tk-text);}
body.tk-own .ticker-track a::before{background:var(--tk-dot);box-shadow:0 0 8px var(--tk-dot);}

/* ------------------------------------------------------------------ 3) Language list: centred on phones */
@media (max-width:860px){
  .topbar .tb-lang-panel{left:50%;right:auto;width:min(320px,calc(100vw - 24px));margin:0;transform:translateX(-50%);animation:v2-pop .18s ease both;}
}
@keyframes v2-pop{from{opacity:0;transform:translate(-50%,-6px);}to{opacity:1;transform:translate(-50%,0);}}

/* ------------------------------------------------------------------ 4) Phone / tablet menu (like tmcrch)
   The menu opens as a full-width white panel right under the green menu bar; it is only as tall as its items
   (no empty space under "Contact") and scrolls inside itself when it is longer than the screen. */
@media (max-width:992px), (hover:none), (pointer:coarse){
  .site-header.on-banner .navbar{position:static;}
  .site-header .main-menu,.site-header.on-banner .main-menu{
    position:absolute;top:100%;left:0;right:0;bottom:auto;width:auto;max-width:none;height:auto;
    max-height:var(--menu-max,calc(100vh - 140px));max-height:var(--menu-max,calc(100dvh - 140px));overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 14px 16px;margin:0;
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
    border:0;border-top:1px solid rgba(var(--p-rgb),.18);border-radius:0 0 18px 18px;
    box-shadow:0 26px 40px -20px rgba(var(--d-rgb),.55);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
    transition:opacity .25s ease,transform .3s ease,visibility .3s;z-index:20;
  }
  .site-header .main-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .main-menu > li.drawer-head{display:none !important;}
  .site-header .main-menu > li{width:100%;border-bottom:1px solid rgba(var(--p-rgb),.08);}
  .site-header .main-menu > li:last-child{border-bottom:0;}
  .site-header .main-menu > li > a,.on-banner .main-menu > li > a{
    display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:12px;
    color:var(--green-900);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    opacity:1;transform:none;transition:background .2s,color .2s;background:transparent;box-shadow:none;
  }
  .site-header .main-menu > li > a i,.on-banner .main-menu > li > a i{color:var(--green-700);}
  .site-header .main-menu > li > a:hover,.site-header .main-menu > li.open > a,.on-banner .main-menu > li > a:hover,.on-banner .main-menu > li.open > a{background:rgba(var(--p-rgb),.08);color:var(--green-700);box-shadow:none;}
  .site-header .main-menu > li.active > a,.on-banner .main-menu > li.active > a{background:linear-gradient(90deg,rgba(var(--p-rgb),.16),rgba(var(--p-rgb),.05));color:var(--green-800);box-shadow:inset 3px 0 0 var(--green-700);}
  .main-menu li.dropdown > a{padding-right:56px;}
  .main-menu .sub-toggle{top:4px;right:4px;width:38px;height:38px;border-radius:10px;}
  .site-header .submenu{margin:0 0 0 14px;padding:0 0 0 8px;border-left:3px solid rgba(var(--p-rgb),.22);border-radius:0;background:transparent;}
  .main-menu li.open > .submenu{padding-top:4px;padding-bottom:6px;}
  .site-header .submenu li > a{padding:10px 12px;font-size:.88rem;font-weight:600;color:var(--ink-700,#2c3e36);text-transform:none;letter-spacing:0;}
  .nav-backdrop{z-index:900;background:rgba(5,16,10,.35);}
  body.menu-open{overflow:hidden;}
}

/* ------------------------------------------------------------------ 5) Home page content block (Admin → Pages → Home) */
.home-prose{max-width:none;}
.home-prose img{max-width:100%;height:auto;border-radius:12px;}
.home-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -22px rgba(var(--d-rgb),.5);}
.home-prose table th,.home-prose table td{border:1px solid rgba(var(--p-rgb),.16);padding:10px 12px;text-align:left;vertical-align:top;}
.home-prose table th,.home-prose table thead td{background-image:var(--gloss-hi),var(--brand-grad);color:#fff;}
.home-prose iframe{max-width:100%;}
@media (max-width:700px){.home-prose table{display:block;overflow-x:auto;}}

/* ------------------------------------------------------------------ 6) Popup: the whole photo always shows (wide or tall) */
.site-popup.pos-center .sp-card{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;}
.sp-media{display:flex;align-items:center;justify-content:center;background:rgba(var(--d-rgb),.05);}
.sp-media::after{display:none;}
.sp-media img,.pos-top .sp-media img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);object-fit:contain;margin:0 auto;}
/* with a title / text / button under the photo, leave room for it */
.sp-card:has(.sp-body > *) .sp-media img{max-height:68vh;max-height:68dvh;}
.pos-bottom-right .sp-media img,.pos-bottom-left .sp-media img{max-height:55vh;max-height:55dvh;}
.sp-body:not(:has(*)){display:none;}
.pos-top .sp-media img{max-height:120px;}

/* ------------------------------------------------------------------ 7) Footer: visitors counter, opening hour above the map */
.f-visitors{display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;clear:both;margin-top:18px;padding:9px 16px 9px 9px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -16px rgba(0,0,0,.6);}
.fv-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(135deg,#f6c453,#e0901f);box-shadow:0 6px 14px -6px rgba(224,144,31,.8);}
.fv-label{font-weight:700;color:#ccffff;}
.fv-num{font-size:1.25rem;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25);}
.f-map .f-hours{margin:0 0 20px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.f-map .f-hours span{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:6px;}
.f-hours em{font-style:normal;}
.f-hours em.closed{color:#ffb0b0;font-weight:700;}
.f-frame.map{border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 30px -18px rgba(0,0,0,.7);}
.f-frame.map iframe{height:230px;}