/* ===========================================================================
   brand.css — DCT Solar's colours, in one place.

   Every page pulls from this, so a change here changes everything. The two
   colours were read out of the logo itself, not guessed:

     orange  #F19D3A   the swoosh, the sun, the "S" in Solar
     navy    #1C2D47   the wordmark and the panel

   Link it before a page's own styles:
     <link rel="stylesheet" href="/brand.css">
   =========================================================================== */

:root{
  /* the two that matter */
  --brand:        #F19D3A;
  --brand-dark:   #D8842A;   /* pressed and hover */
  --brand-soft:   #FDF1E1;   /* a wash behind a highlight */
  --navy:         #1C2D47;
  --navy-deep:    #12203A;   /* the panel in the mark */
  --navy-soft:    #EDF0F5;

  /* everything else is built off those, so nothing clashes */
  --ink:          var(--navy);
  --mute:         #6B7580;
  --line:         #E0E4E9;
  --bg:           #F4F6F8;
  --card:         #FFFFFF;
  --accent:       var(--brand);

  --ok:           #15803D;
  --warn:         #8A6100;
  --warn-bg:      #FFF8E6;
  --no:           #B4232A;

  --radius:       10px;
  --shadow:       0 1px 2px rgba(28,45,71,.06), 0 4px 14px rgba(28,45,71,.05);
}

/* ---- the bar across the top of every page ---------------------------- */
.brandbar{
  display:flex; align-items:center; gap:11px;
  background:var(--navy); color:#fff;
  padding:9px 16px;
}
.brandbar img{ height:30px; width:auto; display:block; }
.brandbar .name{ font-weight:700; letter-spacing:.01em; font-size:15px; }
.brandbar .name b{ color:var(--brand); font-weight:700; }
.brandbar .spacer{ flex:1 }
.brandbar a{
  color:#cfd6e2; text-decoration:none; font-size:13.5px;
  padding:5px 10px; border-radius:20px; white-space:nowrap;
}
.brandbar a:hover{ background:#ffffff1a; color:#fff }
.brandbar a[aria-current="page"]{ background:var(--brand); color:var(--navy); font-weight:600 }

/* Back to the front door. It sits on the LEFT beside the mark, not out on the
   right with the page tabs, because it is not another page — it is the way
   out. The href is "/" rather than the full address on purpose: on the office
   network the full address would throw you out to Cloudflare and ask you to
   sign in to reach a machine three metres away. */
.brandbar a.home{
  background:#ffffff1a; color:#fff; font-weight:600;
  padding:5px 12px; border-radius:20px; margin-left:2px;
}
.brandbar a.home:hover{ background:var(--brand); color:var(--navy) }
@media (max-width:640px){
  .brandbar{ gap:8px; padding:8px 12px; overflow-x:auto }
  .brandbar img{ height:24px }
  .brandbar .name{ display:none }
}

/* ---- things every page has ------------------------------------------- */
.brand-btn{
  background:var(--brand); color:var(--navy); border:1px solid var(--brand);
  font-weight:600;
}
.brand-btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff }

/* on paperwork the client sees */
.brand-head{ border-bottom:3px solid var(--brand); padding-bottom:10px; margin-bottom:16px }
.brand-head img{ height:52px }

@media print{
  .brandbar{ background:none; color:var(--navy); padding:0 0 8px }
  .brandbar a{ display:none }
}