/* Custom overrides for SF QR site (updated to fix header overlap and tooltips) */

/* Ensure vertical scrolling */
html, body {
  height: auto !important;
  overflow: auto !important;
  position: relative !important;
}

/* Force a fixed header height and reserve page space so the header won't overlap content */
header#header.fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  height: 126px !important; /* fixed header height matching original layout */
  min-height: 64px !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}

/* Reserve space below the header using #content so headings are not cropped */
body { padding-top: 0 !important; }
#content { padding-top: 220px !important; }

/* Hide the inline spacer used in some templates to avoid double-spacing */
.cheat-fix { display: none !important; height: 0 !important; }

/* Ensure the page title isn't hidden under the header */
#content h1, #content .h1 {
  margin-top: 0 !important;
  padding-top: 6px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Header layout: logo left, nav right */
header#header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px;
}
#logo { flex: 0 0 auto; }

/* Navbar: horizontal on wide screens, right aligned */
#navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}
#navbar li { list-style: none; }
#navbar a { color: #333 !important; text-decoration: none !important; padding: 6px 10px !important; display:inline-block !important; white-space:nowrap !important; }
#navbar a.menu-bg { background:#c4161c !important; color:#fff !important; padding:6px 12px !important; border-radius:4px !important; }

/* Form layout: use CSS grid for labels so help icon remains on same line */
.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap; /* allow children to wrap to avoid overlap on narrower widths */
}
.form-row label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  flex: 0 0 260px; /* increased width so longer labels don't wrap the help icon onto a new row */
  margin-bottom: 0;
  font-weight: 600;
  padding-right: 6px; /* small gap */
  text-align: left;
  box-sizing: border-box; /* ensure padding doesn't increase visual width */
}
.form-row input,
.form-row select,
.form-row textarea {
  flex: 1 1 0;
  min-width: 0; /* allow inputs to shrink below their content width to prevent overlap */
  max-width: 100%;
  /* make inputs visually distinct */
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Focus state for inputs */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: #c4161c;
  box-shadow: 0 0 0 3px rgba(196,22,28,0.08);
}

/* Keep the question-mark help small and non-wrapping */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: #c4161c;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  margin-left: 6px;
  cursor: help;
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Result table fixes: prevent column text overlap and enable wrapping */
.results-table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed; /* distribute column widths and allow wrapping */
  overflow: hidden;
}
.results-table th,
.results-table td {
  white-space: normal !important; /* allow wrapping */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 10px 8px !important;
  vertical-align: top !important;
  max-width: 180px; /* limit column width so content wraps */
}
/* Make header larger than row text to improve hierarchy */
.results-table thead th {
  font-weight: 700;
  background: transparent;
  font-size: 18px !important; /* header slightly larger */
  color: #111 !important;
}
.results-table td {
  font-size: 15px !important; /* smaller body text */
  color: #222 !important;
}

/* Add separator between rows for results table */
.results-table tbody tr {
  border-bottom: 1px solid #e6e6e6;
}
.results-table tbody tr:last-child {
  border-bottom: none;
}

/* Ensure cells don't overlap the border when using collapsed layout */
.results-table td {
  background-clip: padding-box;
}

/* Make the table horizontally scrollable on very narrow viewports rather than breaking layout */
@media (max-width: 980px) {
  .results-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* keep header readable in scroll */
  }
  .results-table th,
  .results-table td { white-space: normal; display: inline-block; vertical-align: top; }
}
/* For very small screens, stack rows vertically with labels above values */
@media (max-width: 600px) {
  .results-table,
  .results-table thead,
  .results-table tbody,
  .results-table th,
  .results-table td,
  .results-table tr {
    display: block !important;
    width: 100% !important;
  }
  .results-table thead { display: none; }
  .results-table tr { margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
  .results-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 0 !important;
    font-size: 15px !important;
  }
  /* prepend label using data-label attribute set in markup */
  .results-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    display: inline-block;
    width: 48%;
    box-sizing: border-box;
    font-size: 15px !important;
  }
}

/* Mobile/Responsive adjustments */
@media (max-width: 800px) {
  .form-row label { flex: 0 0 180px; grid-template-columns: 1fr auto; }
}
@media (max-width: 600px) {
  .form-inner { max-width: 100%; padding-left: 0; padding-right: 0; }
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row label,
  .form-row input,
  .form-row select,
  .form-row textarea { flex: unset; max-width: 100%; width: 100%; padding-right: 0; }
  .form-row label { margin-bottom: 6px; display: block; }

  /* Only show the logo on mobile: hide navigation and extra header content */
  header#header.fixed {
    height: 84px !important;
    padding: 6px 0 !important;
  }
  /* center the logo and collapse navigation */
  header#header .container { justify-content: center !important; }
  header#header .h_menu,
  header#header #topmenu_wrap,
  header#header .menu_container,
  header#header .menu-hovedmenu-container,
  #navbar,
  #navbar ul,
  #navbar li,
  #navbar a { display: none !important; }

  /* Ensure the logo remains visible and centered */
  #logo { display: block !important; margin: 6px auto !important; }

  /* Make the logo image fill the available header height (accounting for padding) */
  /* header height = 84px, padding 6px top + bottom => available image height ~72px */
  #logo img { height: 72px !important; width: auto !important; max-width: none !important; display: block; }

  /* Reduce content top padding to match smaller header */
  #content { padding-top: 120px !important; }
}

/* Tooltip styles */
.help::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  white-space: normal;
  width: 260px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: 13px;
  line-height: 1.3;
  display: none;
  z-index: 10001 !important;
}
.help:hover::after,
.help:focus::after,
.help:active::after { display: block; }

/* small arrow for tooltip */
.help::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 2px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.85);
  display: none;
  z-index: 10002 !important;
}
.help:hover::before,
.help:focus::before,
.help:active::before { display: block; }

/* Specific rule to force EGP logo at desired dimensions and override global img rules */
.egp-logo {
  width: 150px !important;
  height: 60px !important;
  max-width: 150px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 480px) {
  /* On very small screens scale down slightly but maintain aspect ratio */
  .egp-logo {
    width: 120px !important;
    height: auto !important;
    max-width: 120px !important;
  }
}