/**
 * Bushue HR theme — subtheme of Bootstrap Barrio.
 *
 * Color palette:
 *   --bushue-red       #cc0000   Primary brand color; navbar, headings
 *   --bushue-red-dark  #a00000   Hover/active states
 *   --bushue-blue      #1e3a5f   Hero overlay
 *   --bushue-blue-dark #142840   Footer
 *   --bushue-gray      #4a4a4a   Body text
 *   --bushue-gray-soft #e9eef2   Subtle backgrounds
 */

/* 1. Custom properties + Bootstrap variable overrides
   ------------------------------------------------------ */
:root {
  --bushue-red: #cc0000;
  --bushue-red-dark: #a00000;
  --bushue-red-bright: #e60000;
  --bushue-blue: #1e3a5f;
  --bushue-blue-dark: #142840;
  --bushue-gray: #4a4a4a;
  --bushue-gray-soft: #e9eef2;
  --bushue-white: #ffffff;
  --bushue-black: #000000;

  --bs-primary: var(--bushue-red);
  --bs-primary-rgb: 204, 0, 0;
  --bs-link-color: var(--bushue-red);
  --bs-link-hover-color: var(--bushue-red-dark);
}

/* 2. Navbar — brand red top bar
   ------------------------------------------------------ */
.navbar,
.navbar-dark,
.navbar.bg-primary,
nav.navbar {
  background-color: var(--bushue-red) !important;
  background-image: none !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand a {
  color: var(--bushue-white) !important;
  font-weight: 600;
  padding-left: 1.5rem;
}

.navbar .nav-link,
.navbar a {
  color: var(--bushue-white) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar a:hover,
.navbar a:focus {
  color: var(--bushue-white) !important;
  background-color: var(--bushue-red-dark);
  border-radius: 4px;
}

.navbar .nav-link.active {
  background-color: var(--bushue-red-dark);
  border-radius: 4px;
}

/* No logo asset exists — hide all navbar logo images.
   The "Bushue HR" text serves as the brand. */
.navbar-brand img,
.site-branding img,
a.navbar-brand img {
  display: none !important;
}

/* Role-aware navbar link block (RoleMenuLinkBlock).
   The block renders as <div id="block-bushue-theme-rolelink"> with the link
   inside a nested .content div — not a navbar <li>. Style the wrapper to
   sit inline with the navbar menu, and the link to look like other nav items. */
#block-bushue-theme-rolelink {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  order: 50; /* between main menu items (default) and user menu (order:99) */
}

#block-bushue-theme-rolelink .content {
  display: inline-block;
}

#block-bushue-theme-rolelink a {
  color: var(--bushue-white) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.85rem;
  font-weight: 500;
  border-radius: 4px;
}

#block-bushue-theme-rolelink a:hover,
#block-bushue-theme-rolelink a:focus {
  background-color: var(--bushue-red-dark);
  color: var(--bushue-white) !important;
}

/* Push the user account menu (Login/Logout) to the far right of the navbar */
.navbar .block-system-menu-block--account,
.navbar .menu--account,
.navbar nav[role="navigation"]:last-of-type {
  margin-left: auto !important;
  order: 99;
}

/* Bootstrap dropdown menus (About Us submenu, etc.) — match the navbar:
   brand red background, white text, darker red on hover. */
.navbar .dropdown-menu {
  background-color: var(--bushue-red) !important;
  border: 1px solid var(--bushue-red-dark);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  padding: 0.25rem 0;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a {
  color: var(--bushue-white) !important;
  padding: 0.5rem 1.25rem;
  background-color: transparent !important;
  text-decoration: none !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus {
  background-color: var(--bushue-red-dark) !important;
  color: var(--bushue-white) !important;
}

/* If dropdown items render as nav-links inside the menu */
.navbar .dropdown-menu .nav-link {
  color: var(--bushue-white) !important;
  background-color: transparent !important;
}

.navbar .dropdown-menu .nav-link:hover {
  color: var(--bushue-white) !important;
  background-color: var(--bushue-red-dark) !important;
}

/* When the account menu sits above the navbar (in a top region),
   move it inline with the navbar and right-aligned */
.region-navigation > .block-menu--account,
.region-header .menu--account {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 10;
}

.region-navigation .menu--account ul,
.region-header .menu--account ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3. Page title / headings — brand red
   ------------------------------------------------------ */
h1.page-title,
.page-title,
main h1:first-of-type {
  color: var(--bushue-red);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
}

/* 4. Hero block region — full width breakout from Bootstrap container
   The `margin-left/right: calc()` trick pulls the region out of the
   container so the dark-blue background spans the entire viewport.
   ------------------------------------------------------ */
/* Apply background ONLY on the outermost region container,
   not on nested blocks. Otherwise the image stacks/repeats. */
.region-featured-top {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  background:
    linear-gradient(135deg, rgba(20, 40, 64, 0.55) 0%, rgba(30, 58, 95, 0.35) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat,
    var(--bushue-blue);
  padding: 5rem 2rem;
  color: var(--bushue-white);
  text-align: center;
  margin-bottom: 2rem;
}

/* Any block inside the featured top region: transparent background,
   no extra padding (let the region handle layout). */
.region-featured-top .block,
.region-featured-top .block-block-content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Override h1 red color specifically inside the hero — must win
   against .page-title / .field--name-body rules. */
.region-featured-top h1,
.region-featured-top .hero-title,
.region-featured-top h2,
.region-featured-top h3,
#block-bushue-homepage-hero h1,
#block-bushue-homepage-hero .hero-title {
  color: var(--bushue-white) !important;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}

.region-featured-top .hero-location,
#block-bushue-homepage-hero .hero-location {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: var(--bushue-white);
}

.region-featured-top .hero-phone,
#block-bushue-homepage-hero .hero-phone {
  margin-top: 1.5rem;
  font-size: 2rem;
  color: var(--bushue-white);
}

/* 5. Marketing page content (Basic Page)
   ------------------------------------------------------ */
.node--type-page .field--name-body h1,
.node--type-page .field--name-body h2,
.node--type-page .field--name-body h3,
.node--type-page .field--name-body h4 {
  color: var(--bushue-red);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2rem;
}

.node--type-page .field--name-body .lead,
.node--type-page .field--name-body p.lead {
  font-size: 1.25rem;
  color: var(--bushue-red);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* 6. Portal / authenticated pages
   ------------------------------------------------------ */
.view-portal-hr-documents h2,
.view-portal-user-documents h2,
.view-agent-my-bids h2,
.view-bid-management h2,
.view-nextgen-my-uploads h2,
.view-nextgen-admin-user-uploads h2 {
  color: var(--bushue-red);
}

.nav-tabs .nav-link.active,
ul.tabs--primary li a.is-active,
ul.nav-tabs li a.active {
  background-color: var(--bushue-red);
  color: var(--bushue-white) !important;
  border-color: var(--bushue-red);
}

/* 6b. Grouped table views (HR Documents, Portal User Documents)
   Bootstrap Barrio's views-view-table template wraps each grouping
   in <div class="table-responsive col"> inside <div class="view-content row">.
   With many groups, the flex .col makes each table only a fraction of the
   viewport wide. Force each grouping to span 100% and stack vertically.
   Also move the table <caption> (group label) to the top and style it
   as a section heading, matching the D7 layout.
   ------------------------------------------------------ */
.view-portal-hr-documents .view-content.row,
.view-portal-user-documents .view-content.row,
.view-nextgen-admin-user-uploads .view-content.row,
.view-nextgen-my-uploads .view-content.row,
.view-agent-my-bids .view-content.row,
.view-bid-management .view-content.row {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

.view-portal-hr-documents .view-content > .table-responsive.col,
.view-portal-user-documents .view-content > .table-responsive.col,
.view-nextgen-admin-user-uploads .view-content > .table-responsive.col,
.view-nextgen-my-uploads .view-content > .table-responsive.col,
.view-agent-my-bids .view-content > .table-responsive.col,
.view-bid-management .view-content > .table-responsive.col {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin-bottom: 2rem;
}

/* Group heading (table caption) */
.view-portal-hr-documents .views-view-table > caption,
.view-portal-user-documents .views-view-table > caption,
.view-nextgen-admin-user-uploads .views-view-table > caption,
.view-nextgen-my-uploads .views-view-table > caption,
.view-agent-my-bids .views-view-table > caption,
.view-bid-management .views-view-table > caption {
  caption-side: top;
  text-align: left;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bushue-white);
  background-color: var(--bushue-red);
  padding: 0.5rem 0.85rem;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

/* Tighter table header row — explicit dark text since Bootstrap Barrio
   defaults thead th to white text on a dark background. */
.view-portal-hr-documents .views-view-table thead th,
.view-portal-hr-documents .views-view-table thead th a,
.view-portal-user-documents .views-view-table thead th,
.view-portal-user-documents .views-view-table thead th a,
.view-nextgen-admin-user-uploads .views-view-table thead th,
.view-nextgen-admin-user-uploads .views-view-table thead th a,
.view-nextgen-my-uploads .views-view-table thead th,
.view-nextgen-my-uploads .views-view-table thead th a,
.view-agent-my-bids .views-view-table thead th,
.view-agent-my-bids .views-view-table thead th a,
.view-bid-management .views-view-table thead th,
.view-bid-management .views-view-table thead th a {
  background-color: var(--bushue-gray-soft) !important;
  color: var(--bushue-gray) !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 2px solid #dee2e6;
}

/* Striped rows for legibility */
.view-portal-hr-documents .views-view-table tbody tr:nth-child(even),
.view-portal-user-documents .views-view-table tbody tr:nth-child(even),
.view-nextgen-admin-user-uploads .views-view-table tbody tr:nth-child(even),
.view-nextgen-my-uploads .views-view-table tbody tr:nth-child(even),
.view-agent-my-bids .views-view-table tbody tr:nth-child(even),
.view-bid-management .views-view-table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

/* Table body text color (in case it inherits something off) */
.view-portal-hr-documents .views-view-table tbody td,
.view-portal-hr-documents .views-view-table tbody td a,
.view-portal-user-documents .views-view-table tbody td,
.view-portal-user-documents .views-view-table tbody td a,
.view-nextgen-admin-user-uploads .views-view-table tbody td,
.view-nextgen-admin-user-uploads .views-view-table tbody td a,
.view-nextgen-my-uploads .views-view-table tbody td,
.view-nextgen-my-uploads .views-view-table tbody td a,
.view-agent-my-bids .views-view-table tbody td,
.view-agent-my-bids .views-view-table tbody td a,
.view-bid-management .views-view-table tbody td,
.view-bid-management .views-view-table tbody td a {
  color: var(--bushue-gray);
}

.view-portal-hr-documents .views-view-table tbody td a,
.view-portal-user-documents .views-view-table tbody td a {
  color: var(--bushue-red);
  text-decoration: none;
}

.view-portal-hr-documents .views-view-table tbody td a:hover,
.view-portal-user-documents .views-view-table tbody td a:hover {
  color: var(--bushue-red-dark);
  text-decoration: underline;
}

/* Body cells: keep content from overflowing into narrow look */
.view-portal-hr-documents .views-view-table td,
.view-portal-user-documents .views-view-table td {
  vertical-align: middle;
  padding: 0.6rem 0.75rem;
}

/* 7. Sidebar blocks
   In Bootstrap Barrio, sidebar_first is the .sidebar.col-md-2 column.
   Sidebar block markup in this theme has plain <h2> titles (no .block-title
   class), so target the h2 directly under the block wrapper.
   ------------------------------------------------------ */
#sidebar_first .block,
#sidebar_second .block,
.region-sidebar-first .block,
.region-sidebar-second .block {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--bushue-white);
  border: 1px solid var(--bushue-gray-soft);
  border-radius: 4px;
}

/* Sidebar block titles — brand red, compact */
#sidebar_first .block > h2,
#sidebar_second .block > h2,
.region-sidebar-first .block > h2,
.region-sidebar-second .block > h2,
#sidebar_first .block h2.block-title,
#sidebar_second .block h2.block-title {
  color: var(--bushue-red);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  padding: 0 0 0.4rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bushue-gray-soft);
}

/* Sidebar body text — slightly smaller for the narrow column */
#sidebar_first .block .content,
#sidebar_second .block .content,
.region-sidebar-first .block .content,
.region-sidebar-second .block .content {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Sidebar links default to brand red */
#sidebar_first .block .content a,
#sidebar_second .block .content a,
.region-sidebar-first .block .content a,
.region-sidebar-second .block .content a {
  color: var(--bushue-red);
  text-decoration: none;
}

#sidebar_first .block .content a:hover,
.region-sidebar-first .block .content a:hover {
  color: var(--bushue-red-dark);
  text-decoration: underline;
}

/* Upload Files button — red bg, white text, hover darker red.
   Class-based selector — matches whether the element is <a>, <button>,
   or any wrapper Drupal renders. Also matches descendant <a> if the
   class ends up on the wrapper. */
.upload-files-button,
.upload-files-button > a,
.block .upload-files-button,
#sidebar_first .upload-files-button,
.region-sidebar-first .upload-files-button,
.region-sidebar-first .block .content .upload-files-button,
.region-sidebar-first .block .content a.upload-files-button {
  display: block !important;
  width: 100%;
  text-align: center;
  background-color: var(--bushue-red) !important;
  color: var(--bushue-white) !important;
  padding: 0.85rem 0.5rem !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}

.upload-files-button:hover,
.upload-files-button:focus,
.block .upload-files-button:hover,
.region-sidebar-first .upload-files-button:hover,
.region-sidebar-first .block .content .upload-files-button:hover {
  background-color: var(--bushue-red-dark) !important;
  color: var(--bushue-white) !important;
  text-decoration: none !important;
}

/* The upload-files-button block wrapper: remove the bordered card look
   since the button is its own visual element.
   Match the actual block ID we see in DevTools. */
[id*="uploadfilesbutton"],
[id*="upload-files"],
.block-bushue-upload-files {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 1.25rem;
}

/* Target the link directly inside the upload block by ID — since the
   #attributes class on the render array isn't actually appearing in
   output (verified via DevTools), match by parent block ID instead. */
[id*="uploadfilesbutton"] a,
[id*="uploadfilesbutton"] .content a,
[id*="upload-files"] .content a,
.block-bushue-upload-files a,
#sidebar_first [id*="uploadfilesbutton"] a {
  display: block !important;
  width: 100%;
  text-align: center;
  background-color: var(--bushue-red) !important;
  color: var(--bushue-white) !important;
  padding: 0.85rem 0.5rem !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  border: none;
  line-height: 1.2;
}

[id*="uploadfilesbutton"] a:hover,
[id*="uploadfilesbutton"] a:focus,
[id*="uploadfilesbutton"] .content a:hover {
  background-color: var(--bushue-red-dark) !important;
  color: var(--bushue-white) !important;
  text-decoration: none !important;
}

/* Your Recent Uploads view — when empty, the views container collapses
   to a thin line. Add some friendly empty-state breathing room. */
.view-your-recent-uploads .view-empty,
.view-id-your_recent_uploads .view-empty {
  font-size: 0.85rem;
  color: var(--bushue-gray);
  font-style: italic;
  padding: 0.25rem 0;
}

/* 8. Footer — black, centered, matching D7 layout
   ------------------------------------------------------ */
footer.site-footer,
.site-footer,
[class*="region-footer"] {
  background-color: var(--bushue-black);
  color: var(--bushue-white);
  padding: 2rem 1rem;
}

/* Container resets — let our content span and center naturally. */
.site-footer .container {
  max-width: none;
}

.site-footer .block {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Top link row: pipe-separated, white, centered. */
.site-footer .footer-links {
  text-align: center;
  font-size: 0.95rem;
  padding-bottom: 1rem;
  letter-spacing: 0.01em;
}

.site-footer .footer-links a {
  color: var(--bushue-white);
  text-decoration: none;
  padding: 0 0.4rem;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus {
  text-decoration: underline;
  color: var(--bushue-white);
}

/* Address block: centered, bold company name. */
.site-footer .footer-address {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
}

.site-footer .footer-address strong {
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* Generic footer link fallback (in case Powered by Drupal returns or
   other blocks land in footer regions). */
.site-footer a {
  color: var(--bushue-white);
}

/* 9. Bootstrap buttons
   ------------------------------------------------------ */
.btn-primary {
  background-color: var(--bushue-red);
  border-color: var(--bushue-red);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bushue-red-dark) !important;
  border-color: var(--bushue-red-dark) !important;
}

/* 10. Responsive
   ------------------------------------------------------ */
@media (max-width: 768px) {
  .region-featured-top,
  #block-bushue-homepage-hero {
    padding: 3rem 1rem;
    min-height: 300px;
  }

  .region-featured-top .hero-phone,
  #block-bushue-homepage-hero .hero-phone {
    font-size: 1.5rem;
  }
}