/* MAK Store v3.11 incremental styles.
   Loaded before custom.css so merchant overrides always remain last. */

:root{
  --mak-v311-header-top:#D6F1FF;
  --mak-v311-header-nav:#A1DAF7;
  --mak-v311-header-ink:#30386F;
}

/* ===== Redesigned header ===== */
.site-header .topbar{
  background:var(--mak-v311-header-top);
  color:var(--mak-v311-header-ink);
}
.site-header .topbar__link{
  color:var(--mak-v311-header-ink);
  transition:opacity .2s ease,color .2s ease;
}
.site-header .topbar__link:hover,
.site-header .topbar__link:focus{
  color:var(--mak-v311-header-ink);
  opacity:.72;
}
.site-header .mak-topbar-icon{
  filter:brightness(0) saturate(100%) invert(24%) sepia(20%) saturate(1338%) hue-rotate(195deg) brightness(91%) contrast(89%);
}
.site-header .nav-shell{
  position:relative;
  overflow:hidden;
  background:var(--mak-v311-header-nav);
}
.site-header .nav-shell:before{
  content:"";
  position:absolute;
  inset:-20px;
  background:url('../image/fish-pattern.png') repeat;
  background-size:285px auto;
  filter:brightness(0) invert(1);
  opacity:.28;
  pointer-events:none;
}
.site-header .main-nav{
  position:relative;
  z-index:1;
}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:17px;
  color:var(--mak-v311-header-ink);
}
.site-header .brand:hover,
.site-header .brand:focus{
  color:var(--mak-v311-header-ink);
}
.site-header .brand img{
  flex:0 0 auto;
}
.mak-brand-slogan{
  position:relative;
  display:block;
  padding-left:18px;
  color:var(--mak-v311-header-ink);
  font-size:18px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.mak-brand-slogan:before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:rgba(48,56,111,.75);
}
.site-header .desktop-nav a{
  color:var(--mak-v311-header-ink);
}
.site-header .desktop-nav a:after{
  background:var(--mak-v311-header-ink);
}
.site-header .icon-button,
.site-header .burger{
  color:var(--mak-v311-header-ink);
}
.site-header .burger span{
  background:var(--mak-v311-header-ink);
}

/* ===== Gallery: dense, predictable mosaic for mixed photo ratios ===== */
.gallery-masonry{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:14px;
  align-items:stretch;
}
.gallery-masonry button,
.gallery-masonry button:nth-child(1),
.gallery-masonry button:nth-child(8){
  grid-column:auto;
  width:100%;
  height:auto !important;
  aspect-ratio:1.18/1;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:#fff;
}
.gallery-masonry button:nth-child(1),
.gallery-masonry button:nth-child(8){
  grid-column:1/-1;
  aspect-ratio:2.05/1;
}
.gallery-masonry button:nth-child(2),
.gallery-masonry button:nth-child(5){
  aspect-ratio:1/1.08;
}
.gallery-masonry button:nth-child(3),
.gallery-masonry button:nth-child(4),
.gallery-masonry button:nth-child(6),
.gallery-masonry button:nth-child(7){
  aspect-ratio:1.22/1;
}
.gallery-masonry img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .28s ease,filter .28s ease;
}
.gallery-masonry button:hover img{
  transform:scale(1.025);
  filter:saturate(1.03);
}


/* Real blog cards selected in article admin. Keep 1/3-card states balanced too. */
.school .blog-card:only-child,
.school .blog-card:first-child:nth-last-child(3){
  grid-column:1/-1;
}

/* ===== Lightbox: never flash the previously opened image ===== */
.mak-lightbox img{
  opacity:1;
  transition:opacity .16s ease;
}
.mak-lightbox.is-loading img{
  opacity:0;
}
.mak-lightbox__loader{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#fff;
  font-size:14px;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.mak-lightbox.is-loading .mak-lightbox__loader{
  opacity:1;
}
.mak-lightbox__spinner{
  width:38px;
  height:38px;
  border:3px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:makV311Spin .75s linear infinite;
}
.mak-lightbox__close{
  z-index:3;
}
@keyframes makV311Spin{to{transform:rotate(360deg)}}

@media (min-width:901px){
  .site-header .nav-shell,
  .site-header .main-nav{
    height:104px;
  }
  .site-header .brand img{
    width:76px;
    height:76px;
  }
  .site-header .desktop-nav{
    gap:34px;
  }
  .site-header .desktop-nav a{
    font-size:16px;
    font-weight:500;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .mak-brand-slogan{
    padding-left:13px;
    font-size:14px;
  }
  .site-header .brand{
    gap:12px;
  }
  .site-header .desktop-nav{
    gap:22px;
  }
}

@media (max-width:900px){
  .site-header .nav-shell{
    background:var(--mak-v311-header-nav);
  }
  .site-header .nav-shell:before{
    background-size:220px auto;
    opacity:.22;
  }
  .mak-brand-slogan{
    display:none;
  }
}

@media (max-width:600px){
  .gallery-masonry{
    grid-template-columns:1fr;
    gap:10px;
  }
  .gallery-masonry button,
  .gallery-masonry button:nth-child(n){
    grid-column:auto;
    aspect-ratio:1.28/1;
  }
}