/* ============================================================================
   DocupletionForms — HOUSE THEME OVERRIDES (house-theme.css)
   ----------------------------------------------------------------------------
   Pulls the active WordPress theme toward the same look as the standalone
   house-style HTML pages: navy / amber palette, Archivo + Hanken Grotesk +
   IBM Plex Mono, sticky translucent menu bar, amber buttons, dark footer.
 
   HOW TO TUNE:
   - Almost everything reads from the :root variables in BLOCK 1.
   - To recolor the MENU BAR, change --menu-bg / --menu-fg / --menu-accent.
   - Selectors are intentionally broad and use !important because they must beat
     a parent theme we don't control. If something doesn't change, your theme
     uses a different class — right-click it in the browser, choose "Inspect",
     copy the selector, and add it next to the matching rule below.
   ========================================================================== */
 
 
/* ---------------------------------------------------------------------------
   BLOCK 1 — DESIGN TOKENS  (edit these, not the rules below)
   --------------------------------------------------------------------------- */
:root {
  --navy:       #0F1B3D;
  --navy-soft:  #2a3556;
  --amber:      #C9A227;
  --amber-deep: #a8841a;
  --paper:      #F8F5ED;
  --paper-2:    #FFFFFF;
  --line:       #e3ddcd;
  --ink-soft:   #555f78;
  --footer-bg:  #0a1330;
 
  --sans:    "Hanken Grotesk", system-ui, sans-serif;
  --display: "Archivo", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
 
  /* ---- MENU BAR CONTROLS ---------------------------------------------------
     Default = "paper" look that matches the house HTML header (translucent
     light bar, navy text, amber accents).
     For a DARK navy bar instead, swap to the values in the comment.        */
  --menu-bg:     rgba(248, 245, 237, 0.90);   /* dark option: rgba(15,27,61,0.95) */
  --menu-fg:     #2a3556;                      /* dark option: #dfe3ee            */
  --menu-fg-hover: #0F1B3D;                    /* dark option: #ffffff            */
  --menu-accent: #C9A227;                      /* stays amber either way          */
  --menu-border: #e3ddcd;                      /* dark option: rgba(255,255,255,0.12) */
}
 
 
/* ---------------------------------------------------------------------------
   BLOCK 2 — GLOBAL: background fix + base typography
   (also kills any theme/page background image, e.g. the palm-tree bg)
   --------------------------------------------------------------------------- */
html, body,
#page, .site, #content, .site-content {
  background-color: var(--paper) !important;
  background-image: none !important;
}
 
body {
  font-family: var(--sans) !important;
  color: var(--navy) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
 
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title, .site-title {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--navy) !important;
}
 
/* mono accents for small labels often used by themes */
.eyebrow, .post-meta, .entry-meta, .breadcrumbs, .wp-block-post-date {
  font-family: var(--mono) !important;
  letter-spacing: 0.04em;
}
 
 
/* ---------------------------------------------------------------------------
   BLOCK 3 — HEADER + MENU BAR
   Broad net across the common header/nav container class names.
   --------------------------------------------------------------------------- */
header,
#masthead,
.site-header,
.site-header-inner,
#site-header,
.header-main,
.main-header,
.top-header,
.header-wrap {
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--menu-border) !important;
  box-shadow: none !important;
}
 
/* Make the primary header/menu sticky like the house pages */
header,
#masthead,
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 999;
}
 
/* Nav container backgrounds (some themes color the menu strip separately) */
nav,
.main-navigation,
#site-navigation,
.navigation,
.navbar,
.menu-primary-container,
.primary-menu-container,
.nav-menu,
.menu {
  background: transparent !important;
}
 
/* Menu links */
.main-navigation a,
#site-navigation a,
.nav-menu li a,
.menu li a,
#primary-menu a,
.primary-menu a,
.navbar a,
header nav a {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--menu-fg) !important;
  text-transform: none !important;
  transition: color 0.18s ease;
}
 
.main-navigation a:hover,
#site-navigation a:hover,
.nav-menu li a:hover,
.menu li a:hover,
#primary-menu a:hover,
.primary-menu a:hover,
header nav a:hover,
.menu .current-menu-item > a,
.menu .current_page_item > a {
  color: var(--menu-fg-hover) !important;
}
 
/* Dropdown submenus */
.sub-menu,
.children,
ul.sub-menu {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px -24px rgba(15,27,61,0.4) !important;
}
.sub-menu a,
.children a { color: var(--navy-soft) !important; }
.sub-menu a:hover { color: var(--amber-deep) !important; background: rgba(201,162,39,0.08) !important; }
 
 
/* ---- BLOCK 3b — SMARTLINE LITE (ThemeZee) — REAL IDs from View Source ------
   Verified structure on this site:
     #header-wrap  → wraps #topnav (top mini-menu) + #header (logo/social)
     #navi-wrap    → wraps #mainnav  (the MAIN blue menu bar)
       <ul id="mainnav-menu" class="main-navigation-menu"> … sub-menus …
     #footernav    → footer legal menu  (<ul id="footernav-menu">)
     .widgettitle  → sidebar widget titles (ONE word, not .widget-title)        */
 
/* Header / top mini-menu area: keep the light "paper" look */
#header-wrap, #header, #topnav, #logo, #header-content {
  background: var(--menu-bg) !important;
  border: none !important;
  box-shadow: none !important;
}
#topnav, #topnav .top-navigation-menu, #topnav-menu { background: var(--menu-bg) !important; }
#topnav a, #topnav-menu a { color: var(--menu-fg) !important; }
#topnav a:hover, #topnav-menu a:hover { color: var(--menu-fg-hover) !important; }
 
/* MAIN MENU BAR — lighter-blue (navy-soft) band, edge to edge */
#navi-wrap, #mainnav, #mainnav-menu, #mainnav .main-navigation-menu {
  background: var(--navy-soft) !important;
  border: none !important;
  box-shadow: none !important;
}
#navi-wrap { position: sticky !important; top: 0; z-index: 999; width: 100% !important; }
/* clear per-item backgrounds so the blue reads as one continuous bar */
#mainnav li, #mainnav-menu li, #mainnav-menu > li { background: transparent !important; }
 
#mainnav a, #mainnav-menu a, #mainnav-menu li a {
  color: #ffffff !important;
  background: transparent !important;
  text-transform: none !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
/* ROLLOVER + current page — light grey text on a soft overlay, never dark */
#mainnav a:hover, #mainnav-menu a:hover, #mainnav-menu li a:hover,
#mainnav-menu .current-menu-item > a,
#mainnav-menu .current_page_item > a,
#mainnav-menu .current-menu-ancestor > a {
  color: #dfe3ee !important;
  background: rgba(255,255,255,0.12) !important;
}
/* DROPDOWNS under the main bar — light text on the lighter-blue panel */
#mainnav .sub-menu, #mainnav-menu .sub-menu, #mainnav ul ul {
  background: var(--navy-soft) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.5) !important;
}
#mainnav .sub-menu a, #mainnav-menu .sub-menu a, #mainnav ul ul a, #mainnav .sub-menu li a {
  color: #ffffff !important;
  background: transparent !important;
}
#mainnav .sub-menu a:hover, #mainnav-menu .sub-menu a:hover, #mainnav ul ul a:hover {
  color: #dfe3ee !important;
  background: rgba(255,255,255,0.12) !important;
}
 
 
/* ---------------------------------------------------------------------------
   BLOCK 4 — LOGO / SITE TITLE  (adds the amber diamond + house wordmark type)
   If you upload an amber-diamond logo IMAGE in the Customizer instead,
   you can delete the ::before rule so you don't get two diamonds.
   --------------------------------------------------------------------------- */
.site-title,
.site-title a,
#site-title a,
.beta.site-title {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--navy) !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
 
.site-title a::before,
#site-title a::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
 
/* Tagline ("A Contact Form That Completes Documents!") */
.site-description {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--ink-soft) !important;
}
 
 
/* ---------------------------------------------------------------------------
   BLOCK 5 — CTA MENU ITEMS AS AMBER BUTTONS
   Add a CSS class to your "REGISTER" (and optionally "LOGIN/ACCOUNT")
   menu items so they render as buttons:
     WP Admin → Appearance → Menus → Screen Options (top right) → tick
     "CSS Classes" → then type  dpf-cta  in that item's "CSS Classes" box.
   --------------------------------------------------------------------------- */
.menu-item.dpf-cta > a,
li.dpf-cta > a {
  background: var(--amber) !important;
  color: var(--navy) !important;
  border-radius: 7px !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.menu-item.dpf-cta > a:hover,
li.dpf-cta > a:hover {
  background: var(--amber-deep) !important;
  color: var(--navy) !important;
  transform: translateY(-1px);
}
 
/* Optional "ghost" variant — add class  dpf-ghost  to e.g. LOGIN/ACCOUNT */
.menu-item.dpf-ghost > a,
li.dpf-ghost > a {
  border: 1px solid var(--line) !important;
  border-radius: 7px !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
}
.menu-item.dpf-ghost > a:hover,
li.dpf-ghost > a:hover { border-color: var(--navy) !important; }
 
 
/* ---------------------------------------------------------------------------
   BLOCK 6 — CONTENT: links, buttons, headings within the page body
   --------------------------------------------------------------------------- */
.entry-content a,
.page-content a,
.post-content a {
  color: var(--amber-deep) !important;
  font-weight: 600;
}
.entry-content a:hover,
.page-content a:hover { text-decoration: underline; }
 
/* Generic buttons / submit inputs / block buttons */
.button, .btn, button:not(.menu-toggle),
input[type="submit"],
.wp-block-button__link,
.wp-element-button {
  background: var(--amber) !important;
  color: var(--navy) !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.button:hover, .btn:hover, button:not(.menu-toggle):hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--amber-deep) !important;
  transform: translateY(-1px);
}
 
/* Section heading underline accent to echo the house pages (optional) */
.entry-content h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amber);
}
 
/* Widget titles in the sidebar — white text on a navy bar so they're readable.
   Smartline uses .widgettitle (ONE word) with an inner <span>. */
.widgettitle,
.widgettitle span,
.widget-title,
.widget .widgettitle,
#sidebar .widgettitle,
.secondary .widgettitle,
.widget h2.widgettitle,
.widget h3.widgettitle {
  font-family: var(--display) !important;
  color: #ffffff !important;
  background: var(--navy) !important;
  padding: 12px 16px !important;
  border-radius: 8px 8px 0 0;
}
.widgettitle span { background: transparent !important; padding: 0 !important; }
 
 
/* ---------------------------------------------------------------------------
   BLOCK 7 — FOOTER (dark navy, amber link hovers)
   --------------------------------------------------------------------------- */
footer,
#colophon,
#footer,
.site-footer,
.footer-wrap,
#footernav,
.site-info {
  background: var(--footer-bg) !important;
  color: #ffffff !important;
  border-top: none !important;
}
/* Footer links — white so they're readable on the dark bar.
   Smartline's footer menu is #footernav / #footernav-menu. */
footer a,
#colophon a,
#footer a,
.site-footer a,
#footernav a,
#footernav-menu a,
#footernav-menu li a,
.footer-navigation a,
#footer-navigation a,
.footer-menu a {
  color: #ffffff !important;
  transition: color 0.15s ease;
}
footer a:hover,
#footer a:hover,
#footernav a:hover,
#footernav-menu li a:hover,
.site-footer a:hover { color: var(--amber) !important; }
 
 
/* ---------------------------------------------------------------------------
   BLOCK 8 — OPTIONAL: only restyle on the public marketing pages
   If you ever DON'T want these styles on certain pages, wrap rules in a body
   class. WordPress adds body classes like  .page-id-123  and  .page-template-*.
   Example (commented out):
 
     body.page-id-456 .site-header { ... }
 
   Or to EXCLUDE a page, scope the overrides to :not():
     body:not(.page-id-456) .site-header { ... }
   --------------------------------------------------------------------------- */
 
 
/* ---------------------------------------------------------------------------
   BLOCK 9 — CONTENT + SIDEBAR: one continuous background to the footer
   Makes the whole content region the same "paper" tone all the way down so the
   main column and sidebar don't end at different heights with mismatched color.
   --------------------------------------------------------------------------- */
#page, .site,
#wrapper, #wrap, #header-wrap, #navi-wrap,
#content, .site-content, .content-wrap, #content-wrap,
#primary, #main, .content-area, .site-main, main,
#secondary, #sidebar, .widget-area, .sidebar, .secondary,
.hentry, .type-page, .page article, .entry-content,
.page-content, article, .entry {
  background-color: var(--paper) !important;
  background-image: none !important;
}
 
/* OPTIONAL — let the sidebar "slide" independently (stick to the viewport as
   you scroll the longer main column). Works when the layout isn't float-based;
   Smartline is float-based, so this is best-effort. If it looks wrong, delete
   this @media block.                                                          */
@media (min-width: 992px) {
  #secondary, #sidebar, .widget-area, .secondary {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;            /* clears the sticky navy menu bar */
    align-self: flex-start;
    height: -moz-fit-content;
    height: fit-content;
  }
}