/* =======================================================================
   Gouers Brand (site-wide) — CLEAN VERSION
   Replace your entire /css/brand.css with this file.
   ======================================================================= */


/* =========================
   0) BRAND TOKENS (ONE PLACE)
   ========================= */
:root{
  --g-navy: #0B1F3B;      /* primary blue (nav + headings) */
  --g-blue: #0F2B46;      /* slightly lighter blue (nav text option) */
  --g-gold: #C5A46D;      /* accent (subtitles / highlights) */
  --g-ink:  #0F172A;      /* darkest text */
  --g-muted:#475569;      /* body text */
  --g-border: rgba(11,31,59,.14);
  --g-cream: #F6F3EE;     /* soft background for cards */
}


/* =========================
   1) BASE TYPOGRAPHY
   ========================= */
body{
  font-family: "freight-sans-pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--g-muted) !important;
  background-image: none !important;
}

/* Headings: use the serif you already load via Adobe (freight-display-pro) */
h1, h2, h3, h4{
  font-family: "freight-display-pro", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--g-navy);
}

/* Links: do NOT force gold everywhere (this was breaking your menu) */
a{
  color: var(--g-navy);
}
a:hover{
  color: var(--g-gold);
}


/* =========================
   2) HEADER (NEW HEADER — index2.php)
   Targets your custom HTML:
   <div class="new-nav"><div class="new-wrap">...</div></div>
   ========================= */

/* The bar */
.new-nav{
  background:#ffffff !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}

/*
  IMPORTANT: This is what controls:
  - how LEFT the logo feels
  - how SHORT the header is

  Your old file used max-width + big padding which made it feel centered
  and tall. We make it full-width and tighter.
*/
.new-nav .new-wrap{
  width: 100% !important;
  max-width: none !important;        /* removes “centered container” feel */
  margin: 0 !important;
  padding: 0px 80px 0px 5px !important;     /* SHORTER header + left closer */
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 24px !important;
}

/* Logo wrapper */
.new-nav .new-brand{
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}

/* BIG logo */
.new-nav .new-brand img{
  height: 110px !important;           /* BIG — adjust 70–90 as you like */
  width: auto !important;
  max-height: none !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* Menu row */
.new-nav .new-menu{
  display:flex !important;
  align-items:center !important;
  gap: 30px !important;
  flex-wrap: wrap;
}

/* Menu style — BLUE, uppercase, spaced */
.new-nav .new-menu a{
  font-family: "freight-sans-pro", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 2.4px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  /* FORCE BLUE even if other rules try to override */
  color: var(--g-navy) !important;
  opacity: 0.90 !important;
}

/* Hover: still blue-ish (not gold) so it stays readable */
.new-nav .new-menu a:hover{
  opacity: 1 !important;
  color: var(--g-blue) !important;
}

/* If you kept a “Cost” special class, remove button styling */
.new-nav .new-menu .new-cost{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


/* Mobile: stack nicely */
@media (max-width: 900px){
  .new-nav .new-wrap{
    padding: 12px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .new-nav .new-menu{ gap: 14px !important; }
}


/* =========================
   3) HEADER (DEFAULT SITE HEADER — header.php)
   This makes the rest of your site match, even where you DIDN’T build .new-nav
   ========================= */

#header-bar{
  background:#ffffff !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}

/* reduce height/padding of the default header */
#header-bar .header-wrap{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* logo size on default header */
#header-bar .logo img{
  height: 78px !important;
  max-height: 78px !important;
  width: auto !important;
}

/* default menu items — BLUE */
#header-bar .menu-nav > li > a{
  font-family: "freight-sans-pro", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 2.4px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  color: var(--g-navy) !important;
  opacity: 0.90 !important;
}

#header-bar .menu-nav > li > a:hover{
  opacity: 1 !important;
  color: var(--g-blue) !important;
}

/* active state (subtle underline or color — keep it blue) */
#header-bar .menu-nav li.current-menu-item > a,
#header-bar .menu-nav > li.current-menu-ancestor > a{
  color: var(--g-navy) !important;
  border-color: var(--g-navy) !important;
}


/* =========================
   4) HERO IMAGE (index2.php)
   Your <div class="new-top-image"></div>
   ========================= */
.new-top-image{
  min-height: 760px !important;  /* adjust if you want shorter */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 12%;
}


/* =========================
   5) “PINK → ACCENT” REPLACEMENTS (CONTROLLED)
   We DO NOT change all <a> tags anymore.
   We only change the theme’s accent classes.
   ========================= */

/* Subtitle accents (keep gold here) */
.heading-subtitle,
.heading-subtitle2,
.heading-subtitle3{
  color: var(--g-gold) !important;
}

/* Icon bullets / before markers that used to be pink */
.list-items li:before,
.widget_archive ul li:before,
.widget_categories ul li:before,
.widget_recent_entries ul li:before,
.faq-title a:before{
  color: var(--g-gold) !important;
}


/* =========================
   6) SIDEBAR / WIDGETS — CLEANER
   ========================= */
.case-info{
  background: var(--g-cream) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-navy) !important;
}
.case-info .white{ color: var(--g-navy) !important; }
.case-info-list li{
  border-bottom: 1px solid var(--g-border) !important;
}

/* Tag pills */
.tagcloud a,
.tags-single-page a,
.widget_tag_cloud a{
  background: #fff !important;
  color: var(--g-navy) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.tagcloud a:hover,
.widget_tag_cloud a:hover{
  background: #FBF7EF !important;
  border-color: var(--g-gold) !important;
}

/* FAQ accordion */
.faq-title{
  border: 1px solid var(--g-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.08) !important;
}
.faq-title:hover,
.faq-title.active{
  border-color: var(--g-gold) !important;
}
.faq-section{
  border-color: var(--g-border) !important;
  background: #fff !important;
}