/* ============================================================
   CGS-UI-HDR-001
   Cogiens Universal Product Header v1.1
   One plugin / All products
   ============================================================ */

:root{
  --cg-orange:#EB6100;
  --cg-blue:#0085D0;
  --cg-navy:#0D2C54;

  --cgh-bg:#ffffff;
  --cgh-text:#152238;
  --cgh-muted:#738096;
  --cgh-line:#dfe5ec;
  --cgh-soft:#f5f7fa;
  --cgh-hover:#eef5fa;

  --cgh-height:76px;
  --cgh-radius:12px;
}

html[data-cg-theme="dark"]{
  --cgh-bg:#081524;
  --cgh-text:#f5f7fb;
  --cgh-muted:#98a6ba;
  --cgh-line:rgba(255,255,255,.11);
  --cgh-soft:rgba(255,255,255,.055);
  --cgh-hover:rgba(0,133,208,.10);

  color-scheme:dark;
}

html[data-cg-theme="light"]{
  color-scheme:light;
}

.cgh-root,
.cgh-root *{
  box-sizing:border-box;
}

.cgh-root{
  position:relative;
  z-index:1000;
  width:100%;

  background:var(--cgh-bg);
  color:var(--cgh-text);

  border-bottom:1px solid var(--cgh-line);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
}

.cgh-inner{
  width:min(100%,1600px);
  min-height:var(--cgh-height);
  margin:0 auto;

  padding:0 clamp(20px,3.4vw,54px);

  display:flex;
  align-items:center;
  gap:22px;
}

/* ============================================================
   BRAND LOCKUP
   ============================================================ */

.cgh-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;

  text-decoration:none;
  color:inherit;
}

.cgh-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  border-radius:12px;
  overflow:hidden;

  flex:0 0 auto;
}

.cgh-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.cgh-logo-dark{
  display:none;
}

html[data-cg-theme="dark"] .cgh-logo-light{
  display:none;
}

html[data-cg-theme="dark"] .cgh-logo-dark{
  display:block;
}

.cgh-brand-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.cgh-company{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.015em;
  white-space:nowrap;
}

.cgh-divider{
  width:1px;
  height:22px;
  background:var(--cgh-line);
}

.cgh-product{
  max-width:320px;

  font-size:15px;
  font-weight:650;
  color:var(--cgh-muted);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============================================================
   RIGHT SIDE
   ============================================================ */

.cgh-right{
  margin-left:auto;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;

  min-width:0;
}

/* ============================================================
   SYSTEM CONTROL GROUP
   ============================================================ */

.cgh-system{
  display:inline-flex;
  align-items:center;

  padding:4px;

  border:1px solid var(--cgh-line);
  border-radius:14px;

  background:var(--cgh-soft);
}

.cgh-key{
  position:relative;

  min-width:40px;
  height:38px;
  padding:0 10px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:10px;

  background:transparent;
  color:var(--cgh-text);

  font:inherit;
  cursor:pointer;

  transition:
    background .14s ease,
    color .14s ease,
    transform .1s ease;
}

.cgh-key + .cgh-key::before{
  content:"";

  position:absolute;
  left:0;
  top:9px;

  width:1px;
  height:20px;

  background:var(--cgh-line);
}

.cgh-key:hover{
  background:var(--cgh-hover);
  color:var(--cg-blue);
}

.cgh-key:active{
  transform:scale(.96);
}

.cgh-theme{
  font-size:18px;
}

.cgh-lang{
  min-width:48px;
  font-size:12px;
  font-weight:800;
}

.cgh-mic{
  font-size:16px;
}

.cgh-mic[aria-pressed="true"]{
  color:var(--cg-orange);
  background:rgba(235,97,0,.08);
}

/* ============================================================
   ACCOUNT ACTIONS
   ============================================================ */

.cgh-account{
  display:flex;
  align-items:center;
  gap:9px;
}

.cgh-action{
  min-height:42px;
  padding:0 17px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  font-size:14px;
  font-weight:750;

  text-decoration:none;
  white-space:nowrap;

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

.cgh-action:active{
  transform:scale(.98);
}

.cgh-register{
  border:1px solid var(--cg-orange);
  background:var(--cg-orange);
  color:#fff;
}

.cgh-register:hover{
  filter:brightness(1.04);
}

.cgh-login{
  border:1px solid var(--cgh-line);
  background:transparent;
  color:var(--cgh-text);
}

.cgh-login:hover{
  border-color:var(--cg-blue);
  color:var(--cg-blue);
}

/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1199px){

  .cgh-inner{
    padding-left:18px;
    padding-right:18px;
    gap:14px;
  }

  .cgh-logo-wrap{
    width:44px;
    height:44px;
  }

  .cgh-company{
    font-size:16px;
  }

  .cgh-product{
    max-width:210px;
    font-size:14px;
  }

  .cgh-right{
    gap:10px;
  }

  .cgh-action{
    padding-left:13px;
    padding-right:13px;
  }
}

/* ============================================================
   PHONE
   ============================================================ */

@media(max-width:767px){

  .cgh-inner{
    min-height:auto;

    padding:9px 12px;

    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .cgh-brand{
    width:100%;
  }

  .cgh-logo-wrap{
    width:44px;
    height:44px;
  }

  .cgh-brand-copy{
    flex:1;
    min-width:0;
  }

  .cgh-company{
    font-size:15px;
  }

  .cgh-divider{
    height:18px;
  }

  .cgh-product{
    max-width:48vw;
    font-size:13px;
  }

  .cgh-right{
    width:100%;
    margin-left:0;

    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px;
  }

  .cgh-system{
    width:max-content;
  }

  .cgh-key{
    min-width:40px;
    height:40px;
  }

  .cgh-account{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .cgh-action{
    width:100%;
    min-height:42px;
    padding-left:8px;
    padding-right:8px;
  }
}

/* ============================================================
   SMALL PHONE
   ============================================================ */

@media(max-width:430px){

  .cgh-inner{
    padding-left:10px;
    padding-right:10px;
  }

  .cgh-brand-copy{
    gap:9px;
  }

  .cgh-company{
    font-size:14px;
  }

  .cgh-product{
    max-width:42vw;
    font-size:12px;
  }

  .cgh-right{
    grid-template-columns:1fr;
  }

  .cgh-system{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .cgh-key{
    width:100%;
  }

  .cgh-action{
    min-height:42px;
    font-size:13px;
  }
}

/* ============================================================
   RTL
   ============================================================ */

html[dir="rtl"] .cgh-inner{
  direction:rtl;
}

html[dir="rtl"] .cgh-right{
  margin-left:0;
  margin-right:auto;
}

html[dir="rtl"] .cgh-key + .cgh-key::before{
  left:auto;
  right:0;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){
  .cgh-root *,
  .cgh-root *::before,
  .cgh-root *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* ============================================================
   CGS-BRAND-LOCKUP-001
   Production horizontal brand lockup
   ============================================================ */

.cgh-logo-wrap{
  width:54px;
  height:54px;
  border-radius:0;
  overflow:visible;
  background:transparent;
}

.cgh-logo{
  width:54px;
  height:54px;
  object-fit:contain;
}

.cgh-brand-copy{
  display:flex;
  align-items:center;
  gap:16px;
}

.cgh-corporate-lockup{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  line-height:1;
}

.cgh-company{
  display:block;
  margin:0;

  font-size:25px;
  font-weight:780;
  letter-spacing:-.035em;

  color:var(--cgh-text);
}

.cgh-tagline{
  display:block;
  margin-top:7px;

  font-size:8px;
  line-height:1;
  font-weight:750;

  letter-spacing:.30em;
  white-space:nowrap;

  color:var(--cgh-muted);
}

.cgh-divider{
  width:1px;
  height:36px;
  flex:0 0 1px;
}

.cgh-product{
  max-width:280px;

  font-size:17px;
  font-weight:650;

  color:var(--cgh-muted);
}

/* system control refinement */
.cgh-system{
  min-height:48px;
  padding:4px 5px;

  border-radius:15px;

  background:
    color-mix(
      in srgb,
      var(--cgh-soft) 92%,
      transparent
    );
}

.cgh-key{
  height:38px;
  min-width:43px;
}

.cgh-lang{
  min-width:52px;
}

/* account area */
.cgh-account{
  gap:10px;
}

.cgh-action{
  min-height:46px;
  padding-left:20px;
  padding-right:20px;
}

.cgh-register{
  min-width:80px;
}

.cgh-login{
  min-width:76px;
}

/* tablet */
@media(max-width:1199px){

  .cgh-logo-wrap,
  .cgh-logo{
    width:48px;
    height:48px;
  }

  .cgh-company{
    font-size:21px;
  }

  .cgh-tagline{
    margin-top:6px;
    font-size:7px;
  }

  .cgh-divider{
    height:31px;
  }

  .cgh-product{
    max-width:190px;
    font-size:15px;
  }
}

/* phone */
@media(max-width:767px){

  .cgh-logo-wrap,
  .cgh-logo{
    width:45px;
    height:45px;
  }

  .cgh-brand-copy{
    gap:11px;
  }

  .cgh-company{
    font-size:19px;
  }

  .cgh-tagline{
    margin-top:5px;
    font-size:6px;
    letter-spacing:.24em;
  }

  .cgh-divider{
    height:27px;
  }

  .cgh-product{
    max-width:34vw;
    font-size:13px;
  }
}

/* very small phone */
@media(max-width:430px){

  .cgh-logo-wrap,
  .cgh-logo{
    width:42px;
    height:42px;
  }

  .cgh-company{
    font-size:17px;
  }

  .cgh-tagline{
    font-size:5.5px;
  }

  .cgh-divider{
    height:25px;
  }

  .cgh-product{
    max-width:29vw;
    font-size:12px;
  }
}