/* ==========================================================================
   MEXPRESS TRANSPORTATION — static site stylesheet
   Rebuilt to match the look of mxpresstrans.com (Transcargo WP theme):
   brand green #0C4C29, Titillium Web headings (uppercase), Open Sans body,
   black footer with background image, pill buttons.
   ========================================================================== */

:root {
  --green: #0C4C29;
  --green-light: #266F46;
  --green-pale: #D0E1D7;
  --text: #666666;
  --text-light: #808080;
  --dark: #000000;
  --white: #ffffff;
  --heading: "Titillium Web", sans-serif;
  --body: "Open Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-light);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-light); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading);
  text-transform: uppercase;
  color: #000;
  line-height: 1.25;
  margin-bottom: 18px;
}

h1 { font-size: 42px; font-weight: 300; }
h2 { font-size: 30px; font-weight: 700; color: var(--green); }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

p { margin-bottom: 16px; }

ul.bullets { margin: 0 0 16px 20px; }
ul.bullets li { margin-bottom: 8px; }

.container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }

section { padding: 60px 0; }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Buttons — pill shaped, uppercase, like the theme's vc_btn3 rounded style
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 32px;
  border-radius: 50px;
  border: 2px solid var(--green);
  color: var(--green);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover { background: var(--green); color: var(--white); }
.btn.btn-solid { background: var(--green); color: var(--white); }
.btn.btn-solid:hover { background: var(--green-light); border-color: var(--green-light); }
.btn.btn-white { border-color: var(--white); color: var(--white); }
.btn.btn-white:hover { background: var(--white); color: var(--green); }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
#header { background: var(--green); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

.top_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.logo img { max-height: 52px; width: auto; }

.main-nav { display: flex; align-items: center; list-style: none; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: block;
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  padding: 24px 16px;
}
.main-nav > li > a:hover,
.main-nav > li.current > a { color: var(--green-pale); }

/* dropdown */
.main-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--white);
  list-style: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.main-nav li:hover > ul { display: block; }
.main-nav li ul li a {
  display: block;
  padding: 11px 18px;
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--green);
  border-bottom: 1px solid #eee;
}
.main-nav li ul li a:hover { background: var(--green-pale); }

/* mobile toggle */
#menu_toggle {
  display: none;
  background: none;
  border: 2px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

@media (max-width: 900px) {
  #menu_toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--green);
  }
  .main-nav.open { display: flex; }
  .main-nav > li > a { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.15); }
  .main-nav li ul { display: block; position: static; background: rgba(0,0,0,.15); box-shadow: none; }
  .main-nav li ul li a { color: var(--white); border-bottom: none; padding-left: 36px; }
}

/* --------------------------------------------------------------------------
   Page title band
   -------------------------------------------------------------------------- */
.page_title {
  background: var(--green);
  background-size: cover;
  background-position: center;
}
.page_title h1 { color: var(--white); padding: 57px 0; margin: 0; }
.page_title.has-banner { position: relative; }
.page_title.has-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(12, 76, 41, .55);
}
.page_title.has-banner .container { position: relative; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.home-banner img { width: 100%; }

.quick-actions { background: var(--green-pale); padding: 40px 0; }
.quick-actions .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qa-card {
  background: var(--white);
  padding: 32px 26px;
  text-align: center;
  border-top: 4px solid var(--green);
}
.qa-card h4 { color: var(--green); margin-bottom: 10px; }
.qa-card p { font-size: 14px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

@media (max-width: 800px) {
  .quick-actions .grid, .two-col { grid-template-columns: 1fr; }
}

/* tabs (Southbound / Northbound) */
.tabs { margin-top: 20px; }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 3px solid var(--green); }
.tab-buttons button {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 26px;
  border: none;
  background: #eee;
  color: var(--text);
  cursor: pointer;
}
.tab-buttons button.active { background: var(--green); color: var(--white); }
.tab-panel { display: none; padding: 30px 0 0; }
.tab-panel.active { display: block; }
.tab-panel img { margin: 0 auto 24px; }

/* comparison table */
.compare-table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: 14px; }
.compare-table th {
  font-family: var(--heading);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--green);
  color: var(--white);
  padding: 14px 16px;
  text-align: left;
}
.compare-table td { padding: 12px 16px; border: 1px solid #ddd; vertical-align: top; }
.compare-table tr:nth-child(even) td { background: #f6f9f7; }

/* transit times */
.transit-block { background: #f6f9f7; border-left: 4px solid var(--green); padding: 24px 28px; margin-bottom: 24px; }
.transit-block h4 { color: var(--green); }
.transit-block li { list-style: none; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Services landing cards
   -------------------------------------------------------------------------- */
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  border: 1px solid #e2e2e2;
  border-top: 4px solid var(--green);
  padding: 34px 24px;
  text-align: center;
  transition: box-shadow .2s;
}
.service-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.service-card h3 { color: var(--green); }
@media (max-width: 900px) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .service-cards { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Locations
   -------------------------------------------------------------------------- */
.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.location-card { border: 1px solid #e2e2e2; padding: 26px 24px; font-size: 14px; }
.location-card h4 { color: var(--green); border-bottom: 2px solid var(--green-pale); padding-bottom: 10px; }
.location-card a { word-break: break-all; }
@media (max-width: 900px) { .location-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .location-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Resource center
   -------------------------------------------------------------------------- */
.fsc-box {
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.3;
  margin-bottom: 10px;
}
.fsc-box strong { color: var(--green-light); }
.fsc-updated { font-size: 13px; font-style: italic; color: var(--text-light); margin: 4px 0 20px; }

.resource-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.resource-columns h3 { color: var(--green); border-bottom: 2px solid var(--green-pale); padding-bottom: 8px; }
.resource-list { list-style: none; }
.resource-list li { margin-bottom: 9px; font-size: 14px; }
.resource-list li a { font-weight: 600; }
@media (max-width: 800px) { .resource-columns { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-block h3 { color: var(--green); }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#footer {
  background: var(--dark) url("../img/footer-bg.jpg") center/cover no-repeat;
  position: relative;
  color: var(--text-light);
  font-size: 14px;
}
#footer::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.82); }
#footer .container { position: relative; }
.footer-main { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; padding: 56px 0 40px; }
.footer-main h6 {
  font-family: var(--heading);
  font-size: 14px;
  letter-spacing: .56px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-logo img { max-width: 220px; margin-bottom: 18px; }
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 8px; }
.footer-nav a { color: var(--text-light); }
.footer-nav a:hover { color: var(--white); }
.footer-contact a { color: var(--green-pale); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
}
@media (max-width: 800px) { .footer-main { grid-template-columns: 1fr; } }