/* === Account dropdown (revised) ================================= */

/* 0. Config – change this one value to move the menu farther/closer */
:root { --account-gap: 25px; }      /* distance between icon and dropdown */

/* 1. Show / hide helpers (unchanged) ----------------------------- */
body.logged-in  .hide-logged-in  {display:none!important;}
body:not(.logged-in) .hide-logged-out {display:none!important;}

/* 2. Make wrapper the positioning context ----------------------- */
.ast-header-account-wrap{
  position: relative;
}

/* 2a. Invisible “hover buffer” fills the gap so hover doesn’t break */
.ast-header-account-wrap::after{
  content:'';
  position:absolute;
  left:-20px; right:-20px;           /* widen the hit‑area (optional) */
  top:100%;                          /* start just below the icon */
  height: var(--account-gap);        /* = value used below in top: */
  background:transparent;
  z-index:1;                         /* sits under the real menu */
}

/* 3. Dropdown itself -------------------------------------------- */
.ast-header-account-wrap #ast-hf-account-menu{
  display:none;                      /* hidden until hover */
  position:absolute;
  top: var(--account-gap);           /* push it down from the icon */
  left:50%; transform:translateX(-50%);
  min-width:240px; max-width:280px;
  margin:0; padding:0;
  z-index:9999;
}

/* 4. Keep the menu visible while hovering icon, buffer *or* menu */
.ast-header-account-wrap:hover #ast-hf-account-menu,
.ast-header-account-wrap:focus-within #ast-hf-account-menu,
#ast-hf-account-menu:hover{
  display:block;
}

/* 5. Card inside the dropdown ----------------------------------- */
.account-card{
  padding:16px 22px;
  text-align:center;
  color:#0f172a;
  max-width:280px;
}
.account-card a{color:inherit!important;}
.account-card .bal{font-weight:600; color:#0e7490;}

/* === CTA menu items: pill + theme-accent hover ================== */

/* Set these once */
:root{
  --mc-cta-bg: #000;
  --mc-cta-fg: #fff;

  /* Astra global colors (one of these is usually your accent) */
  --mc-cta-hover-bg: var(--ast-global-color-1);
  --mc-cta-hover-fg: #000;
}

li.mc-cta-get-started > a,
li.mc-cta-dashboard > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;

  height:auto !important;
  width:auto !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;

  background: var(--mc-cta-bg) !important;
  color: var(--mc-cta-fg) !important;
  border: 2px solid var(--mc-cta-bg) !important;

  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* Visibility rules stay the same */
body.logged-in  li.mc-cta-get-started { display:none !important; }
body:not(.logged-in) li.mc-cta-dashboard { display:none !important; }

/* Hover / focus = switch to accent (yellow) */
li.mc-cta-get-started > a:hover,
li.mc-cta-dashboard > a:hover,
li.mc-cta-get-started > a:focus-visible,
li.mc-cta-dashboard > a:focus-visible{
  background: var(--mc-cta-hover-bg) !important;
  border-color: var(--mc-cta-hover-bg) !important;
  color: var(--mc-cta-hover-fg) !important;
  opacity: 1 !important;          /* kill the fade */
  transform: translateY(-1px);
}

/* === Global page-content spacing fix (headings + text) ============ */

/* 1) Headings: stop overlap + add separation */
.entry-content :is(h1,h2,h3,h4,h5,h6),
.wp-block-post-content :is(h1,h2,h3,h4,h5,h6),
.elementor :is(h1,h2,h3,h4,h5,h6),
.wp-block-heading{
  line-height: 1.25 !important;          /* prevents “stacking/overlap” */
  margin: 1.1em 0 0.45em !important;     /* breathing room */
  padding: 0 !important;
  clear: both;                            /* fixes float-related collisions */
}

/* Don’t add big top margin if the heading is the first thing */
.entry-content > :is(h1,h2,h3,h4,h5,h6):first-child,
.wp-block-post-content > :is(h1,h2,h3,h4,h5,h6):first-child{
  margin-top: 0 !important;
}

/* 2) Paragraphs/lists: restore readable spacing */
.entry-content p,
.wp-block-post-content p,
.elementor p{
  margin: 0 0 1em !important;
  line-height: 1.65 !important;
}

.entry-content :is(ul,ol),
.wp-block-post-content :is(ul,ol),
.elementor :is(ul,ol){
  margin: 0 0 1em 1.25em !important;
  line-height: 1.6 !important;
}

/* 3) Elementor headings (some themes target these separately) */
.elementor-widget-heading .elementor-heading-title{
  line-height: 1.25 !important;
  margin: 0 0 .45em !important;
}

/* 4) Reduce “crammed” look between common blocks/sections */
.entry-content > * + *,
.wp-block-post-content > * + *{
  margin-top: 1rem;
}


/* ============================================================
   ModelHub: Tool Studio toolbar label + ChemCanvas icon + sizing
   (Overrides theme CSS; loaded late via molcomp-ui-tweaks plugin)
============================================================ */

/* Use CSS variable populated by bridge.js when present */
:root{
  --mc-chemcanvas-thumb: var(--mc-chemcanvas-thumb, url("/wp-content/plugins/chemcanvas/assets/img/chemcanvas-thumb.png"));
}

/* Toolbar label: blend into toolbar, no pill outline */
.ghm .ghm-toolbar-label{
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;

  color: transparent !important;
  background-image: linear-gradient(90deg, #22d3ee, #a78bfa, #22d3ee) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: mcToolLabelGlow 6.5s linear infinite;
}
@keyframes mcToolLabelGlow{
  from{ background-position: 0% 0%; }
  to{ background-position: 220% 0%; }
}
.ghm .ghm-toolbar-label::before,
.ghm .ghm-toolbar-label::after{
  display:none !important;
}

/* ChemCanvas toolbar button: use thumbnail */
.ghm .ghm-tool-btn[data-tool="chemcanvas"],
.ghm .ghm-tool-btn[data-tool="structure-studio"]{
  background-image: var(--mc-chemcanvas-thumb) !important;
  background-size: cover !important;
  background-position: center !important;
  border-color: rgba(6,182,212,.35) !important;
  box-shadow:
    0 6px 14px rgba(2,6,23,.10),
    inset 0 0 0 1px rgba(255,255,255,.45) !important;
}
.ghm .ghm-tool-btn[data-tool="chemcanvas"] svg,
.ghm .ghm-tool-btn[data-tool="structure-studio"] svg{
  opacity: 0 !important;
}

/* ChemCanvas window sizing clamps (min/max, better default) */
.ghm .ghm-tool-window[data-tool="chemcanvas"]{
  width: min(1100px, calc(100vw - 32px)) !important;
  max-width: min(1240px, calc(100vw - 32px)) !important;

  min-width: 720px !important;
  min-height: 520px !important;

  height: min(78dvh, calc(100dvh - var(--north-h,140px) - var(--toolbar-h,48px) - 24px)) !important;
  max-height: calc(100dvh - var(--north-h,140px) - var(--toolbar-h,48px) - 24px) !important;
}
@media (max-width: 820px){
  .ghm .ghm-tool-window[data-tool="chemcanvas"]{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: unset !important;
    resize: none !important;
  }
}


/* =========================================================
   ModelHub toolbar: increase vertical space so icons are square & fully visible
   (This is the only requested change that should affect ModelHub.)
   ========================================================= */

/* Try multiple likely wrappers safely */
body .modelhub-toolbar,
body #modelhub-toolbar,
body .mc-modelhub-toolbar,
body .molcomp-modelhub-toolbar {
  min-height: 64px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: flex;
  align-items: center;
}

/* Icon buttons (square) */
body .modelhub-toolbar a,
body .modelhub-toolbar button,
body #modelhub-toolbar a,
body #modelhub-toolbar button,
body .mc-modelhub-toolbar a,
body .mc-modelhub-toolbar button,
body .molcomp-modelhub-toolbar a,
body .molcomp-modelhub-toolbar button {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make img/svg fill square without cropping */
body .modelhub-toolbar img,
body .modelhub-toolbar svg,
body #modelhub-toolbar img,
body #modelhub-toolbar svg,
body .mc-modelhub-toolbar img,
body .mc-modelhub-toolbar svg,
body .molcomp-modelhub-toolbar img,
body .molcomp-modelhub-toolbar svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* If toolbar uses icon spans, keep them square too */
body .modelhub-toolbar .icon,
body #modelhub-toolbar .icon,
body .mc-modelhub-toolbar .icon,
body .molcomp-modelhub-toolbar .icon {
  width: 100%;
  height: 100%;
}

/* --- ChemCanvas thumb + resizable ModelHub window (hardening) --- */
:root{
  --mc-chemcanvas-thumb: url("/wp-content/plugins/chemcanvas/assets/img/chemcanvas-thumb.png");
}

.ghm .ghm-tool-window[data-tool="chemcanvas"],
.ghm .ghm-tool-window[data-tool="structure-studio"]{
  resize: both !important;
  overflow: auto !important;
}

/* ============================================================
   ModelHub Tool Studio (toolbar + window) — sizing + hover + close visibility
============================================================ */

/* Make toolbar taller so square thumbs fit without horizontal “dead space” */
.ghm .ghm-toolbar,
.ghm .ghm-toolbelt,
.ghm .ghm-tools,
.ghm [class*="toolbar"]{
  min-height: 80px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Force tool buttons to be truly square */
.ghm .ghm-tool-btn{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

/* Hover effect (subtle lift + glow) */
.ghm .ghm-tool-btn:hover{
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.16) !important;
  filter: saturate(1.05) contrast(1.02) !important;
}
.ghm .ghm-tool-btn:active{
  transform: translateY(0) scale(.99) !important;
}

/* Ensure any svg/img inside buttons fills the square */
.ghm .ghm-tool-btn img,
.ghm .ghm-tool-btn svg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Make the ChemCanvas tool window BIGGER and always on-screen so the X is visible */
.ghm .ghm-tool-window[data-tool="chemcanvas"],
.ghm .ghm-tool-window[data-tool="structure-studio"]{
  top: 96px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;

  width: min(1440px, calc(100vw - 32px)) !important;
  height: min(86dvh, calc(100dvh - 160px)) !important;

  min-width: 980px !important;
  min-height: 640px !important;

  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 160px) !important;

  resize: both !important;
  overflow: hidden !important;
  z-index: 10090 !important;
}

/* Small screens: full-width, no resize */
@media (max-width: 1020px){
  .ghm .ghm-tool-window[data-tool="chemcanvas"],
  .ghm .ghm-tool-window[data-tool="structure-studio"]{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: unset !important;
    resize: none !important;
  }
}

/* Try to keep the header/close controls visible */
.ghm .ghm-tool-window[data-tool="chemcanvas"] [class*="header"],
.ghm .ghm-tool-window[data-tool="structure-studio"] [class*="header"],
.ghm .ghm-tool-window[data-tool="chemcanvas"] [class*="titlebar"],
.ghm .ghm-tool-window[data-tool="structure-studio"] [class*="titlebar"]{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* Make close button bigger + always visible */
.ghm .ghm-tool-window[data-tool="chemcanvas"] .ghm-tool-close,
.ghm .ghm-tool-window[data-tool="structure-studio"] .ghm-tool-close,
.ghm .ghm-tool-window[data-tool="chemcanvas"] [class*="close"],
.ghm .ghm-tool-window[data-tool="structure-studio"] [class*="close"]{
  opacity: 1 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}