/* HappyCherryChan official site – logo + theme switch polish
   Loaded after style.css and mobile-update.css. */

/* Warm, readable brand colors for the light theme. */
html[data-theme="light"] .brand-copy strong{
  color:#a86f61;
  text-shadow:0 1px 0 rgba(255,249,252,.55);
}
html[data-theme="light"] .brand-copy strong span{
  color:#e98eaf;
}
html[data-theme="light"] .brand:hover .brand-copy strong{
  color:#a86f61;
  text-shadow:0 2px 12px rgba(177,104,146,.18);
}

/* Keep the action group anchored to the right edge on desktop/tablet. */
.top-actions{
  justify-self:end;
  margin-left:auto;
}

/* Full pill-style theme switch.
   Light page -> dark switch.
   Dark page -> light switch. */
.theme-toggle{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:136px;
  height:42px;
  min-height:42px;
  padding:0 17px !important;
  flex:0 0 auto !important;
  border-radius:15px !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.015em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.theme-toggle::before{
  content:none !important;
}

.theme-toggle:hover{
  transform:translateY(-1px);
}

.theme-toggle:active{
  transform:translateY(0) scale(.985);
}

/* Current page is LIGHT: button advertises DARK mode. */
html[data-theme="light"] .theme-toggle{
  color:#ffc0dc !important;
  background:
    radial-gradient(circle at 22% 18%,rgba(239,79,138,.20),transparent 38%),
    linear-gradient(135deg,#1b0d18,#0d0910 72%);
  border:1px solid rgba(239,79,138,.54) !important;
  text-shadow:
    0 0 5px rgba(255,111,177,.92),
    0 0 13px rgba(239,79,138,.65);
  box-shadow:
    inset 0 0 18px rgba(239,79,138,.08),
    0 0 10px rgba(239,79,138,.18),
    0 7px 22px rgba(37,8,24,.18);
}

/* Current page is DARK: button advertises LIGHT mode. */
html[data-theme="dark"] .theme-toggle{
  color:#7c2851 !important;
  background:
    radial-gradient(circle at 25% 15%,#fff 0,rgba(255,255,255,.88) 32%,transparent 66%),
    linear-gradient(135deg,#fffafd,#ffeaf3);
  border:1px solid rgba(255,179,211,.78) !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.98),
    0 0 12px rgba(255,140,190,.58);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.72),
    0 0 12px rgba(255,227,240,.46),
    0 7px 22px rgba(0,0,0,.16);
}

/* Real HappyCherryChan hero logo. */
.hero h1.hero-logo-slot{
  display:block;
  width:max-content;
  max-width:100%;
  margin:15px 0 12px;
  padding:0;
  font-size:0;
  line-height:1;
  letter-spacing:0;
}

.hero-main-logo{
  display:block;
  width:auto;
  height:clamp(220px,23vw,310px);
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 12px 24px rgba(106,37,72,.12));
}

html[data-theme="dark"] .hero-main-logo{
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,.32))
    drop-shadow(0 0 10px rgba(239,79,138,.10));
}

/* Phone header: keep full text while fitting brand + menu + theme control. */
@media (max-width:760px){
  .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:7px !important;
    padding-left:11px !important;
    padding-right:8px !important;
  }

  .brand{
    min-width:0;
    gap:7px;
  }

  .brand-icon-wrap{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px;
  }

  .brand-icon-wrap img{
    width:100% !important;
    height:100% !important;
  }

  .brand-copy{
    min-width:0;
  }

  .brand-copy strong{
    font-size:clamp(19px,5.6vw,26px) !important;
    white-space:nowrap;
  }

  .top-actions{
    justify-self:end;
    margin-left:auto;
    gap:5px !important;
    min-width:max-content;
  }

  .menu-toggle{
    order:1;
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    flex:0 0 36px;
  }

  .theme-toggle{
    order:2;
    width:auto !important;
    min-width:101px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 9px !important;
    flex:0 0 auto !important;
    border-radius:13px !important;
    font-size:10px !important;
    letter-spacing:0;
  }

  .theme-toggle::before{
    content:none !important;
  }

  .hero h1.hero-logo-slot{
    margin:12px 0 8px;
  }

  .hero-main-logo{
    height:clamp(175px,49vw,220px);
    max-width:min(100%,280px);
  }
}

@media (max-width:390px){
  .topbar{
    padding-left:8px !important;
    padding-right:6px !important;
    gap:5px !important;
  }

  .brand{
    gap:5px;
  }

  .brand-icon-wrap{
    width:33px !important;
    height:33px !important;
    flex-basis:33px;
  }

  .brand-icon-wrap img{
    width:100% !important;
    height:100% !important;
  }

  .brand-copy strong{
    font-size:clamp(17px,5.4vw,21px) !important;
  }

  .menu-toggle{
    width:34px !important;
    height:34px !important;
    min-height:34px !important;
    flex-basis:34px;
  }

  .theme-toggle{
    min-width:94px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 7px !important;
    font-size:9.5px !important;
  }
}