/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:#222;background:#f3f4f6}
.container{max-width:1080px;margin:0 auto;padding:0 16px;font-size:16.5px;line-height:1.6;
}

/* Topbar */
.topbar{background:#2d2f33;color:#e8e8e8;font-size:13px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.topbar-left{opacity:.95;font-style:italic}
.topbar-right{display:flex;gap:10px}
.pill,.back-pill,.job-pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#d61f26;color:#fff;text-decoration:none;font-weight:800;font-size:12px}
.job-pill{background:#0000cc;float:right;padding:10px 16px;font-size:16px;}
.pill{font-weight:700}
.pill:hover,.back-pill:hover,.job-pill:hover,.btn:hover,.search button:hover{filter:brightness(.95)}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #d9dbe1}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px;background:#e9edf3;border-radius:2px;border:1px solid #d6dae4;
  padding-top:10px;padding-bottom:10px;margin-bottom:0;border-bottom:1px solid #d6dbe4
}
.header-inner+.primary-nav,.header-inner+nav,header+.primary-nav{margin-top:0}

/* Brand / Logo */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.logo-box{width:180px;height:60px;border:2px solid #0b3b8c;display:flex;align-items:center}
.logo-text{font-weight:900;letter-spacing:1px;font-size:24px}
.logo-link{display:inline-flex;line-height:0}
.site-logo{display:block;height:64px;width:auto;max-width:100%;max-height:100%}

/* Search */
.search{display:flex;align-items:stretch;gap:0}
.search input{width:360px;max-width:52vw;padding:10px 12px;border:1px solid #cfd3db;border-right:0;outline:0}
.search button{width:46px;border:1px solid #cfd3db;background:#d61f26;color:#fff;cursor:pointer}

/* Primary nav */
.primary-nav{background:#0b3b8c;padding:0}
.nav-inner{display:flex;gap:40px;padding:12px 0}
.navlink{color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.3px}
.navlink:hover,.navlink.is-active{text-decoration:underline}
.primary-nav a{padding:12px 16px;line-height:1.1}
.primary-nav ul{margin:0;padding:0}

/* Page shell */
.page{padding:26px 0 40px}
.content-shell{background:#fff;border:1px solid #e1e4ea;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:22px}
.content-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.panel-title{margin:0 0 12px;font-size:20px;font-weight:800}

/* Hero */
.hero-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px;font-size:12px;border-radius:2px}
.hero-arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.arrow{width:42px;height:42px;border-radius:2px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.25);color:#fff;font-size:26px;cursor:pointer}
.arrow:hover{background:rgba(0,0,0,.35)}
.dots{display:flex;gap:8px;padding:10px 0 0}
.dot{width:10px;height:10px;border-radius:999px;background:#1d1d1d;opacity:.35}
.dot.is-active{opacity:1;background:#d61f26}

.hero{position:relative;height:300px;border:1px solid #d6dae4;overflow:hidden;background:#e6e9f1;}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.hero-slide.is-active{opacity:1;pointer-events:auto;}

/* Cards */
.card{display:grid;grid-template-columns:110px 1fr 22px;align-items:center;gap:12px;padding:12px;border:1px solid #d6dae4;background:#f7f7f9;text-decoration:none;color:inherit;margin-bottom:12px}
.card:hover{background:#f2f3f7}
.card-logo{height:54px;border:1px solid #cfd3db;background:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;text-align:center;padding:6px}
.card-desc{font-size:13px;line-height:1.35;color:#333}
.card-arrow{font-size:22px;color:#b7bcc8;text-align:right}
.card img{width:100%;height:54px;object-fit:contain;background:transparent;border:0;padding:0;}

/* Body text vertical rhythm */
.page p,.col-text{line-height:1.6;margin-bottom:16px}
.page h1,.page h2,.page h3{margin-top:0;margin-bottom:14px}

/* Careers page */
.page-title{margin:0 0 18px;font-size:44px;font-weight:900;letter-spacing:.2px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.col-title{margin:0 0 10px;font-size:18px;font-weight:900}
.col-text{margin:0 0 12px;font-size:13px;color:#333}
.btn{display:inline-block;padding:10px 14px;background:#b3151b;color:#fff;text-decoration:none;font-weight:900;border-radius:2px;font-size:12px}

/* Footer bottom row layout */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding:22px 8px 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px
}
.footer-bottom-left{font-size:12px;opacity:.85}

/* Footer logos */
.footer-sites{display:flex;align-items:center;gap:46px;flex-wrap:wrap;justify-content:center;row-gap:18px}
.footer-sites img{height:38px;width:auto;max-width:170px;background:#fff;padding:6px 10px;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.18)}

/* Social icon */
.footer-bottom-right{display:flex;justify-content:flex-end}
.social-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border-radius:50%}
.social-icon svg{width:16px;height:16px;fill:#fff}
.social-icon:hover{background:rgba(255,255,255,.25)}
.social-icon.facebook{background:#1877F2;}
.social-icon.facebook:hover{background:#0f5dc4;}

/* FORCE footer background back on */
footer.footer{background:#2d2f33;color:#e8e8e8;border-top:4px solid #0b3b8c}
footer.footer .footer-inner{padding:26px 0 30px}

/* ===== FOOTER TOP ROW FIX (MENU + ADDRESS ONLY) ===== */
footer.footer .footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
footer.footer .footer-left{display:flex;flex-wrap:wrap;gap:14px 18px}
footer.footer .footer-left a{color:#e8e8e8;text-decoration:none;font-weight:700;font-size:13px;opacity:.9}
footer.footer .footer-left a:hover{text-decoration:underline;opacity:1}
footer.footer .footer-right{text-align:right;font-size:13px;line-height:1.6;opacity:.95;white-space:nowrap}
footer.footer .footer-phone{font-weight:700}
/* ===== END FOOTER TOP ROW FIX ===== */

/* Responsive */
@media (max-width:900px){
  .content-grid{grid-template-columns:1fr}
  .nav-inner{gap:18px;flex-wrap:wrap}
  .page-title{font-size:32px}
  .three-col{grid-template-columns:1fr}
}
@media (max-width:700px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .search input{width:100%;max-width:100%}
}
@media (max-width:800px){
  .footer-bottom{grid-template-columns:1fr;text-align:center}
  .footer-bottom-right{justify-content:center}
  footer.footer .footer-top{flex-direction:column}
  footer.footer .footer-right{text-align:left;white-space:normal}
}
@media (min-width:768px){
  .primary-nav a{padding-top:11px;padding-bottom:11px}
}

/* ===== Request form (new markup) ===== */
.container.page form[action="send_request.php"] {
  max-width: 860px;
  margin: 18px auto 0;
  padding: 0;              /* wrapper handles padding */
  background: transparent;  /* wrapper handles background */
  border: 0;
  box-shadow: none;
}

.rcl-form {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.rcl-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 780px) {
  .rcl-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
}

.rcl-field label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0,0,0,0.78);
}

.rcl-req {
  color: rgba(0,0,0,0.55);
  font-weight: 700;
}

.rcl-field input,
.rcl-field textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 12px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.rcl-field textarea {
  resize: vertical;
  min-height: 150px;
}

.rcl-field input:focus,
.rcl-field textarea:focus {
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.08);
}

/* Full-width helpers */
.rcl-col-12 {
  grid-column: 1 / -1;
}

/* Section header */
.rcl-section {
  grid-column: 1 / -1;
  padding-top: 4px;
}

.rcl-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.60);
}

.rcl-section-sub {
  margin-top: 4px;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.60);
}

/* Spacer that behaves in grid */
.rcl-spacer {
  display: none;
}

@media (min-width: 780px) {
  .rcl-spacer {
    display: block;
  }
}


/* ===== Compact single-column form ===== */

.rcl-form--single {
  max-width: 640px;              /* key: keeps height down */
  padding: 12px 14px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Fields */
.rcl-field {
  margin-bottom: 10px;
}

.rcl-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 3px;
  color: rgba(0,0,0,0.8);
}

.rcl-field input,
.rcl-field textarea {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
}

/* Inline city/state/zip row (still visually 1-column) */
.rcl-inline {
  display: flex;
  gap: 8px;
}

.rcl-inline > div {
  flex: 1;
}

.rcl-zip {
  max-width: 110px;
}

/* Message stays small */
.rcl-field textarea {
  resize: vertical;
}

/* Button */
.rcl-btn {
  margin-top: 6px;
  padding: 8px 16px;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

/* Note */
.rcl-note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.6);
}

/* ===== Left-aligned labels (compact) ===== */

.rcl-form--labels-left {
  max-width: 640px;
  padding: 12px 14px;
}

/* Each row = label + field */
.rcl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Labels */
.rcl-row label {
  width: 130px;               /* controls alignment + compactness */
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0,0,0,0.8);
  flex-shrink: 0;
}

/* Inputs */
.rcl-row input,
.rcl-row textarea {
  flex: 1;
  padding: 7px 9px;
  font: inherit;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
}

/* Inline city/state/zip */
.rcl-inline-fields {
  display: flex;
  gap: 6px;
}

.rcl-inline-fields input {
  flex: 1;
}

/* Message stays short */
.rcl-row textarea {
  resize: vertical;
}

/* Button */
.rcl-form--labels-left .rcl-btn {
  margin-top: 8px;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 999px;
}

/* Note */
.rcl-note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.6);
}

/* Mobile: stack labels above fields */
@media (max-width: 640px) {
  .rcl-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .rcl-row label {
    width: auto;
  }
}
/* ===== Fix ZIP overflow ===== */

.rcl-inline-fields {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0; /* critical: allows shrinking */
}

.rcl-inline-fields input {
  min-width: 0;
}

.rcl-inline-fields input[name="zip"] {
  flex: 0 0 90px;   /* fixed width but stays inside */
}

.rcl-row label {
  width: 120px;
}

/* Your ORIGINAL policy page card-link list (kept) */
.policy-list p {
  margin: 0 0 12px 0;
}

.policy-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background-color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  color: #1a2e45;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.policy-list a:hover {
  background-color: #eef3f8;
  transform: translateY(-1px);
}

.policy-list img {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.entry-title {
  margin-top: 0;
  font-size: 28px;
  color: #1a2e45;
}

/* HEADER */
.site-header {
  background-color: #0052aa;
  width: 100%;
  padding: 16px 0;
}

.header-content {
  max-width: 900px;  /* match .container */
  margin: 0 auto;    /* center like .container */
  padding: 0 20px;   /* same side padding as .container */
}

/* Header logo only */
.site-header .logo {
  display: block;
  max-width: 260px;
  margin: 0; /* override your .logo margin-bottom */
}

.main-content {
  margin-left: 60px;
  padding-left: 20px;
  border-left: 1px solid #d0d7de;
}

/* ===== Collapsible categories (only applies when you use <details class="policy-item">) ===== */

.policy-list details.policy-item {
  margin: 0 0 12px 0;
}

/* Make summary match your card-link style */
.policy-list details.policy-item > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;

  background-color: #ffffff;
  border-radius: 6px;
  color: #1a2e45;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;

  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  list-style: none;
}

/* Remove default disclosure triangle */
.policy-list details.policy-item > summary::-webkit-details-marker {
  display: none;
}
.policy-list details.policy-item > summary::marker {
  content: "";
}

/* Hover effect */
.policy-list details.policy-item > summary:hover {
  background-color: #eef3f8;
  transform: translateY(-1px);
}

/* 5) Highlight the OPEN category */
.policy-list details.policy-item[open] > summary {
  background-color: #eaf2ff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Optional icon inside summary */
.policy-list details.policy-item > summary img {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

/* If your HTML still has <span class="chev">, hide it (we draw chevron via ::after) */
.policy-list details.policy-item > summary .chev {
  display: none;
}

/* Chevron on the right (unicode escapes so editor encoding won’t matter) */
.policy-list details.policy-item > summary::after {
  content: "\25B8"; /* ? */
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
}

/* Open state chevron */
.policy-list details.policy-item[open] > summary::after {
  content: "\25BE"; /* ? */
}

/* 2) Smooth open/close animation */
.policy-list details.policy-item .sub-list {
  margin: 8px 0 0 0;
  padding: 0;

  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  list-style: none;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}

.policy-list details.policy-item[open] .sub-list {
  padding: 6px 0;
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

/* Divider between rows */
.policy-list details.policy-item .sub-list li + li {
  border-top: 1px solid #e5eaf0;
}

/* 3) Make sub-items look like individual clickable lines */
.policy-list details.policy-item .sub-list li {
  margin: 0;
  padding: 0; /* IMPORTANT: avoid “double padding” when <li><a>..</a></li> */
}

/* Style the link as the full-width row */
.policy-list details.policy-item .sub-list li > a {
  position: relative;
  display: block;
  padding: 10px 15px 10px 36px;
  font-size: 15px;
  line-height: 1.4;

  color: #1a2e45;
  text-decoration: none;
}

/* Bullet point */
.policy-list details.policy-item .sub-list li > a::before {
  content: "\2022"; /* • */
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #0052aa;
}

/* Hover each row */
.policy-list details.policy-item .sub-list li > a:hover {
  background-color: #eef3f8;
}

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }

  /* keep your original link list behavior */
  .policy-list a {
    padding: 10px;
  }

  /* collapsible summary matches */
  .policy-list details.policy-item > summary {
    padding: 10px;
  }
}

/* ===== Top map + contents layout ===== */

.top-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin-bottom: 30px;
  align-items: start;
}

/* Contents menu */
.contents-menu {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 15px;
}

.contents-menu h3 {
  margin-top: 0;
  font-size: 18px;
  color: #1a2e45;
}

.contents-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contents-menu li + li {
  margin-top: 6px;
}

.contents-menu a {
  text-decoration: none;
  color: #1a2e45;
}

.contents-menu a:hover {
  text-decoration: underline;
}

/* Map panel */
.map-panel img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobile: stack vertically */
@media (max-width: 800px) {
  .top-layout {
    grid-template-columns: 1fr;
  }

  .contents-menu {
    order: 2;
  }

  .map-panel {
    order: 1;
  }
}

/* ===== Contents menu (refined) ===== */

.contents-menu {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 0;
  overflow: hidden;
}

.contents-menu h3 {
  margin: 0;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 700;
  color: #1a2e45;
  background-color: #f4f6f8;
  border-bottom: 1px solid #e5eaf0;
}

.contents-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contents-menu li + li {
  border-top: 1px solid #e5eaf0;
}

.contents-menu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #1a2e45;
  font-size: 14px;
  transition: background-color 0.15s ease;
}

/* Hover */
.contents-menu a:hover {
  background-color: #eef3f8;
}

/* Active (scroll-spy) */
.contents-menu a.active {
  background-color: #eaf2ff;
  font-weight: 600;
  color: #0052aa;
}

/* Small chevron indicator for active */
.contents-menu a.active::before {
  content: "\25B8"; /* ? */
  margin-right: 6px;
}

/* Ensure both columns match height */
.top-layout {
  align-items: stretch;
}

/* Map image defines the height */
.map-panel img {
  display: block; /* removes inline image baseline gap */
  width: 100%;
  height: auto;
}

/* Contents menu matches map height */
.contents-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make the list scroll if it's taller than the map */
.contents-menu ul {
  overflow-y: auto;
}

/* Default layout helper if you're using flex */
.policy-list > p > a {
  display: flex;
  align-items: center;
}

/* PDF links */
.policy-list > p > a[href$=".pdf"]::after {
  content: "PDF";
  margin-left: auto;
  font-size: 12px;
  color: #6b7c93;
}

/* Web form links (aspx) */
.policy-list > p > a[href$=".aspx"]::after {
  content: "WebForm";
  margin-left: auto;
  font-size: 12px;
  color: #6b7c93;
}
