@import url('./brand-colors.css');

/* Circloud NEST brand block — single source of truth.
   Used in header, nest hero, login pages, portal, description.js.

   Structure:
     <div class="cr-brand" data-size="sm|md|lg">
       <img class="cr-brand-logo" src="...">
       <div class="cr-brand-box">
         <span class="cr-brand-reg">&reg;</span>
         <div class="cr-brand-name">Circloud</div>
         <div class="cr-brand-sub"><span>N</span><span>E</span><span>S</span><span>T</span></div>
       </div>
       <div class="cr-brand-slogan">Local Cloud Platform</div>  (optional)
     </div>

   Sizes: sm (header), md (login), lg (nest hero)
*/

.cr-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cr-brand-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: max-content;
}

.cr-brand-name,
.cr-brand-sub {
  font-weight: 600;
}

.cr-brand-name {
  color: var(--text, #fff);
}

.cr-brand-sub {
  display: flex;
  justify-content: space-between;
  /* Reads from assets/brand-colors.css — change there to retint everywhere */
  background: var(--spidermind-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.cr-brand-sub span {
  display: inline-block;
}

.cr-brand-reg {
  position: absolute;
  top: -0.15em;
  right: -0.7em;
  font-size: 0.35em;
  font-weight: 400;
  opacity: 0.5;
  color: var(--text, #fff);
  -webkit-text-fill-color: var(--text, #fff);
}

.cr-brand-logo {
  height: auto;
  display: block;
  margin-bottom: 0.3em;
  /* width set by JS to match cr-brand-name width */
}

.cr-brand-slogan {
  color: #6d7696;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 0.5em;
}

/* ── Size variants ── */

/* sm: header */
.cr-brand[data-size="sm"] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.cr-brand[data-size="sm"] .cr-brand-logo {
  width: auto;
  height: 42px;
  margin-bottom: 0;
}
.cr-brand[data-size="sm"] .cr-brand-name { font-size: 1.05rem; }
.cr-brand[data-size="sm"] .cr-brand-sub  { font-size: 0.7rem; }
.cr-brand[data-size="sm"] .cr-brand-slogan {
  display: none;
}

/* md: login pages */
.cr-brand[data-size="md"] .cr-brand-name { font-size: 2rem; }
.cr-brand[data-size="md"] .cr-brand-sub  { font-size: 1.3rem; }
.cr-brand[data-size="md"] .cr-brand-slogan {
  font-size: 13px;
}

/* lg: nest hero */
.cr-brand[data-size="lg"] .cr-brand-name { font-size: 3rem; }
.cr-brand[data-size="lg"] .cr-brand-sub  { font-size: 2rem; }
.cr-brand[data-size="lg"] .cr-brand-slogan {
  font-size: 15px;
}