/*
Theme Name: Vivian Contracting
Theme URI: https://viviancontracting.com
Author: Vivian Contracting
Description: Custom theme for Vivian Contracting — government technology solutions & procurement.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vivian-contracting
*/

/* ==========================================================================
   Brand tokens
   Colors/fonts below are pulled directly from the homepage bundle
   (assets/site-bundle.html) so every page — not just the home page —
   shares the same look.
   ========================================================================== */
:root {
  --vc-red: #ED1C24;
  --vc-red-dark: #c8161d;
  --vc-ink: #161f2b;
  --vc-gray: #5b6672;
  --vc-white: #ffffff;
  --vc-border: #eae7e1;
  --font-heading: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--vc-ink);
  background: var(--vc-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--vc-ink);
  font-weight: 800;
  margin: 0 0 0.5em;
}

a { color: var(--vc-red); text-decoration: none; }

/* ==========================================================================
   Site header / nav
   ========================================================================== */
.vc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vc-white);
  border-bottom: 4px solid var(--vc-red);
}

.vc-header-inner {
  padding: 14px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.vc-logo { display: flex; align-items: center; text-decoration: none; justify-self: start; }
.vc-logo-img { height: 52px !important; width: auto !important; max-width: none; display: block; }

.vc-nav {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-self: center;
}

/* Exact top-bar nav text spec: Urbanist, Semibold 0.95rem (~15.2px), gray by default, red on hover/active */
.vc-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: #8a92a0;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(var(--vc-red), var(--vc-red));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: color 0.4s ease, background-size 0.4s ease;
}

.vc-nav a:hover,
.vc-nav a.is-active {
  color: var(--vc-red);
  background-size: 100% 2px;
}

.vc-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.vc-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vc-red);
  color: var(--vc-white) !important;
  padding: 11px 22px;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(237,28,36,0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vc-account-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(237,28,36,0.5);
}

/* Hamburger button — hidden on desktop, shown only under the mobile breakpoint */
.vc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  justify-self: end;
}
.vc-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--vc-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.vc-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vc-hamburger.is-open span:nth-child(2) { opacity: 0; }
.vc-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.vc-nav-wrap {
  display: contents; /* desktop: nav + account sit directly in the header grid */
}

@media (max-width: 760px) {
  .vc-header-inner {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .vc-logo-img { height: 40px !important; }

  .vc-hamburger { display: flex; }

  /* Collapse nav + account button into a dropdown panel below the header */
  .vc-nav-wrap {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vc-white);
    border-bottom: 4px solid var(--vc-red);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .vc-nav-wrap.is-open { max-height: 400px; }

  .vc-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    white-space: normal;
    padding: 8px 20px 4px;
  }
  .vc-nav li { width: 100%; }
  .vc-nav a {
    display: block;
    width: 100%;
    padding: 12px 0;
    background-image: none; /* underline-on-hover doesn't make sense stacked/full-width on mobile */
  }
  .vc-nav a:hover,
  .vc-nav a.is-active { color: var(--vc-red); }

  .vc-header-actions {
    justify-content: flex-start;
    padding: 8px 20px 20px;
  }
  .vc-account-btn { width: 100%; justify-content: center; }
}

.vc-header-inner { position: relative; }
@media (max-width: 760px) {
  .vc-header { position: relative; }
}

/* ==========================================================================
   Page template (used for pages like Refund Policy, My Account, etc.)
   ========================================================================== */
.vc-page-hero {
  background: var(--vc-red);
  padding: 56px 40px;
}
.vc-page-hero h1 {
  color: var(--vc-white);
  font-size: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.vc-page-hero .vc-hero-inner { max-width: 900px; margin: 0 auto; }

.vc-page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 20px 90px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--vc-ink);
}
.vc-page-content p { margin: 0 0 1.2em; }
.vc-page-content ul, .vc-page-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.vc-page-content h2 { font-size: 24px; margin-top: 1.6em; }
.vc-page-content h3 { font-size: 19px; margin-top: 1.4em; }
.vc-page-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.vc-page-content table th, .vc-page-content table td { border: 1px solid var(--vc-border); padding: 10px 14px; text-align: left; }

/* Reserve room for the browser's native show/hide-password icon so it
   sits inside the field instead of overflowing outside it. WooCommerce's
   own default spacing for this varies across versions, so we set it
   explicitly here rather than relying on whatever WooCommerce version
   happens to be active. */
.woocommerce form .form-row input[type="password"],
.woocommerce-account input[type="password"],
input[type="password"] {
  box-sizing: border-box;
  padding-right: 42px !important;
}

/* WooCommerce buttons/links inherit brand color */
.vc-page-content .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--vc-red) !important;
  color: var(--vc-white) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 22px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--vc-red-dark) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.vc-footer {
  background: var(--vc-ink);
  color: #c7ccd4;
  padding: 40px;
  text-align: center;
  font-size: 14px;
}
.vc-footer a { color: var(--vc-white); }