@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(--nest-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;
}
/* Pin the lg logo to a fixed width on every page so the Circloud Nest hero
   logo and the Circloud Portal main logo render at exactly the same size.
   !important wins over the inline width brand.js writes (which only measured
   the brand-box and could differ by a few pixels between pages).
   180px ≈ the natural width of "Circloud" at 3rem 600-weight Segoe UI. */
.cr-brand[data-size="lg"] .cr-brand-logo {
  width: 180px !important;
  height: auto !important;
}