/*
Theme Name: SIX Containers
Theme URI: https://sixcontainers.com
Description: Hello Elementor child theme for SIX Container Sales and Rentals, LLC.
Author: WebJed
Template: hello-elementor
Version: 1.0.0
Text Domain: six-containers
*/

:root {
  --six-navy: #0C3154;
  --six-blue: #125AA2;
  --six-light: #DBE5F0;
  --six-orange: #D0520E;
  --six-brown: #8F5127;
  --six-ink: #062039;
  --six-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --six-body: 'IBM Plex Sans', Arial, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--six-body); background: #000; color: #fff; }
a { color: var(--six-light); }
a:hover { color: #fff; }

/* Section headings drop shadow (mockup) */
.six-h { text-shadow: 3px 3px 2px rgba(0, 0, 0, .65); }

/* ---------- Header ---------- */
.six-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
}
/* Pages without an Elementor hero (default template, posts, archives) get a solid header in normal flow */
body.page-template-default .six-header, body.single .six-header, body.archive .six-header,
body.search .six-header, body.error404 .six-header { position: relative; background: var(--six-navy); }
.six-header .six-logo--scrolled { display: none; }
.six-header .six-logo img { height: auto; }

/* nav */
.six-nav .elementor-nav-menu--main .elementor-item {
  font-family: var(--six-body); font-weight: 700; font-size: 18px; color: #fff;
}
.six-nav .elementor-nav-menu--main .elementor-item:hover,
.six-nav .elementor-nav-menu--main .elementor-item.highlighted { color: var(--six-light); }
.six-nav .elementor-nav-menu--main .sub-arrow { color: var(--six-orange); margin-left: 4px; }
.six-nav .elementor-nav-menu--main .sub-arrow i { font-size: 14px; }
.six-nav .elementor-nav-menu--dropdown { background: var(--six-navy); border-radius: 0 0 8px 8px; }
.six-nav .elementor-nav-menu--dropdown a { color: #fff; font-family: var(--six-body); font-weight: 700; }
.six-nav .elementor-nav-menu--dropdown a:hover { color: var(--six-light); background: var(--six-blue); }
.six-nav .elementor-menu-toggle { color: #fff; border: 0; }

/* Call Now (default state: orange circle icon + light text) */
.six-call .elementor-button {
  background: transparent; padding: 0; font-family: var(--six-body);
  font-weight: 400; font-size: 24px; color: #fff; box-shadow: none; border: 0;
}
.six-call .elementor-button:hover { color: var(--six-light); background: transparent; }
.six-call .elementor-button-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--six-orange);
  color: #fff; font-size: 18px; transition: background .2s;
}
.six-call .elementor-button-icon svg { width: 18px; height: 18px; fill: #fff; }
.six-call .elementor-button-content-wrapper { gap: 10px; align-items: center; }

/* Get A Quote */
.six-quote-btn .elementor-button {
  background: var(--six-orange); color: #fff; font-family: var(--six-body);
  font-weight: 700; font-size: 20px; border-radius: 6px; padding: 12px 26px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .45); transition: all .2s;
}
.six-quote-btn .elementor-button:hover { background: #b8460b; color: #fff; }

/* Scrolled / sticky state (matches "Nav on Scroll" comp) */
.six-header.six-scrolled {
  position: fixed; top: 0;
  background: var(--six-orange);
  padding-top: 8px !important; padding-bottom: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  animation: six-slide-down .25s ease;
}
@keyframes six-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.six-header.six-scrolled .six-logo--main,
.six-header.six-scrolled .six-nav { display: none; }
.six-header.six-scrolled .six-logo--scrolled { display: block; }
.six-header.six-scrolled .six-call { margin-left: auto; }
.six-header.six-scrolled .six-call .elementor-button {
  background: #fff; color: var(--six-orange); font-weight: 700; font-size: 22px;
  border-radius: 8px; padding: 6px 14px 6px 8px; box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.six-header.six-scrolled .six-call .elementor-button-icon { width: 34px; height: 34px; }
.six-header.six-scrolled .six-quote-btn .elementor-button {
  background: var(--six-light); color: var(--six-navy); font-size: 18px; padding: 12px 20px;
}
.six-header.six-scrolled .six-quote-btn .elementor-button:hover { background: #fff; }

/* Mobile sticky bottom bar */
.six-mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  background: var(--six-navy); box-shadow: 0 -2px 8px rgba(0, 0, 0, .4);
}
.six-mobile-bar .elementor-button { width: 100%; font-weight: 700; font-size: 16px; border-radius: 6px; }
@media (max-width: 767px) {
  .six-mobile-bar { display: flex; }
  body { padding-bottom: 66px; }
  .six-header .six-call, .six-header .six-quote-btn { display: none; }
  .six-header.six-scrolled .six-logo--scrolled img { max-width: 180px; }
  /* Keep the two CTAs side by side: Elementor sets --flex-wrap-mobile:wrap, and two
     50% children plus the gap overflow the row, so they would stack. */
  .six-mobile-bar { flex-wrap: nowrap !important; }
  .six-mobile-bar > .e-con { flex: 1 1 0; width: auto !important; min-width: 0; }
  .six-mobile-bar .elementor-button { font-size: 15px; padding: 12px 6px; white-space: nowrap; }
  .six-mobile-bar .elementor-button-icon { margin-right: 6px; }
  .six-mobile-bar .elementor-button-icon svg { width: 15px; height: 15px; }
}
@media (max-width: 360px) {
  .six-mobile-bar .elementor-button { font-size: 13px; }
}
@media (max-width: 1024px) {
  .six-call .elementor-button { font-size: 18px; }
  .six-quote-btn .elementor-button { font-size: 16px; padding: 10px 18px; }
}

/* ---------- Home page ---------- */
.six-hero h1 { line-height: 1; }

/* hero bullet list */
.six-bullets .elementor-icon-list-item { font-style: italic; }
.six-bullets .elementor-icon-list-icon { width: auto; }
.six-bullets .elementor-icon-list-icon svg { width: 10px; height: 10px; flex-shrink: 0; fill: var(--six-orange); }

/* light buttons */
.six-btn-light .elementor-button {
  background: var(--six-light); color: var(--six-navy); font-family: var(--six-body);
  font-weight: 700; font-size: 18px; border-radius: 6px; padding: 14px 26px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .5); transition: all .2s;
}
.six-btn-light .elementor-button:hover { background: #fff; color: var(--six-navy); }
/* orange buttons */
.six-btn-orange .elementor-button {
  background: var(--six-orange); color: #fff; font-family: var(--six-body);
  font-weight: 700; font-size: 18px; border-radius: 6px; padding: 14px 32px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .5); transition: all .2s;
}
.six-btn-orange .elementor-button:hover { background: #b8460b; color: #fff; }

/* Buy vs Rent comparison grid */
.six-cell { border: 2px solid var(--six-light); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.six-cell--label { background: #051b32; }
.six-cell--label .elementor-heading-title { font-style: italic; }
.six-cell--head { background: #0b3251; }
.six-cell--body { background: #0b3155; }

/* Container type rows */
.six-type-row { border-bottom: 4px solid #000; }
.six-type-row h3 { line-height: 1.05; }

/* Service area / trust cards */
.six-card { background: #0b3155; border: 2px solid var(--six-light); border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.six-card--warn { border-color: var(--six-orange); }
.six-list .elementor-icon-list-icon svg { flex-shrink: 0; }
.six-list .elementor-icon-list-item { line-height: 1.3; }

/* Large buttons (About / Team comps) */
.six-btn-lg .elementor-button { font-size: 24px; padding: 18px 32px; border-radius: 8px; }
@media (max-width: 767px) { .six-btn-lg .elementor-button { font-size: 18px; padding: 14px 20px; } }

/* About: audience line with orange dots */
.six-who-line .six-dot { color: var(--six-orange); margin: 0 10px; }

/* Light CTA band */
.six-cta h2 { text-shadow: none; }

/* Team grid */
.six-member-photo img { border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.45); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.six-member .elementor-heading-title { text-transform: uppercase; }

/* Product pages (Rent / Buy) */
.six-bullets--plain .elementor-icon-list-item { font-style: normal; }
.six-bestfor { color: var(--six-orange); font-weight: 700; font-style: italic; margin-right: 6px; }
.six-btn-navy .elementor-button {
  background: var(--six-navy); color: #fff; font-family: var(--six-body);
  font-weight: 700; font-size: 16px; border-radius: 6px; padding: 12px 40px; transition: all .2s;
}
.six-btn-navy .elementor-button:hover { background: var(--six-blue); color: #fff; }
.six-acc-body p { margin: 0 0 16px; }
.six-acc-body strong { display: inline-block; margin-bottom: 2px; }

/* Light quote form */
.six-form--light .elementor-field-group label { color: var(--six-navy); font-family: var(--six-heading); text-transform: uppercase; font-size: 24px; }
.six-form--light .elementor-field-type-radio { text-align: center; }
.six-form--light .elementor-field-type-radio > label { flex: 0 0 100%; display: block; text-align: center; padding: 0 0 4px; }
.six-form--light .elementor-field-type-radio .elementor-field-subgroup { flex: 1 1 100%; }
.six-form--light.elementor-labels-inline .elementor-field-group > label { padding-right: 14px; white-space: nowrap; }
.six-form--light.elementor-labels-inline .elementor-field-group .elementor-field-textual { flex: 1 1 auto; width: auto; }
.six-form--light .elementor-field-subgroup.elementor-subgroup-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; padding: 4px 0 6px; }
.six-form--light .elementor-field-subgroup label { color: var(--six-navy); font-family: var(--six-body); text-transform: none; font-size: 24px; font-weight: 400; }
.six-form--light .elementor-field-subgroup input[type="radio"] { width: 20px; height: 20px; accent-color: var(--six-navy); margin-right: 8px; }
.six-form--light .elementor-field-textual { background: transparent; color: var(--six-navy); border: 1px solid var(--six-navy); border-radius: 6px; min-height: 52px; }
.six-form--light .elementor-field-textual:focus { border-color: var(--six-orange); border-width: 2px; }
.six-form--light .elementor-button[type="submit"] { font-size: 28px; border-radius: 8px; padding: 18px 44px; box-shadow: 0 3px 5px rgba(0,0,0,.4); }
.six-form--light .elementor-message-success { color: var(--six-navy); }
@media (max-width: 767px) {
  .six-form--light .elementor-field-group label { font-size: 20px; }
  .six-form--light .elementor-field-subgroup { gap: 6px 18px; }
  .six-form--light .elementor-field-subgroup label { font-size: 18px; }
  .six-form--light .elementor-button[type="submit"] { font-size: 22px; padding: 14px 28px; }
}

/* Container Types spec table */
.six-spec-table .six-cell--head .elementor-heading-title,
.six-spec-table .six-cell--body .elementor-heading-title { font-size: 17px; }
.six-spec-table .six-cell--label .elementor-heading-title { font-size: 18px; }
@media (max-width: 1024px) {
  .six-spec-table .six-cell--head .elementor-heading-title,
  .six-spec-table .six-cell--body .elementor-heading-title { font-size: 15px; }
}
@media (max-width: 767px) {
  .six-spec-table .six-spacer { display: none; }
  .six-spec-table .six-cell { min-height: 0 !important; }
}

/* Service Areas hub rows */
.six-hub-row .six-city-list p { text-transform: uppercase; letter-spacing: .2px; }
.six-hub-row .six-city-list .six-dot { color: var(--six-orange); margin: 0 6px; }

/* FAQ page */
.six-hero-sub { max-width: 820px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
#still-have-questions .elementor-heading-title { text-shadow: none; }

/* Quote page — white canvas for the Stella / Lily Pad widget */
.six-quote-embed-wrap { background: #fff; }
.six-quote-embed, .six-quote-embed * { color: var(--six-navy); }
.six-quote-embed a { color: var(--six-blue); }
.six-quote-embed .stella-widget { min-height: 640px; }
.six-quote-embed .noscript {
  padding: 28px; border: 2px solid var(--six-orange); border-radius: 8px;
  font-weight: 700; text-align: center;
}
.six-quote-header .elementor-heading-title { text-shadow: 3px 3px 2px rgba(0,0,0,.45); }

/* Legal / utility prose pages */
.six-prose-wrap { background: #fff; }
.six-prose, .six-prose p, .six-prose li { color: var(--six-navy); }
.six-prose p { margin: 0 0 18px; }
.six-prose ul { margin: 0 0 18px 22px; }
.six-prose li { margin: 0 0 8px; }
.six-prose a { color: var(--six-blue); text-decoration: underline; }
.six-prose a:hover { color: var(--six-orange); }
.six-prose-h {
  font-family: var(--six-body); font-weight: 700; font-size: 24px; color: var(--six-navy);
  margin: 34px 0 12px; line-height: 1.25;
}
.six-prose .six-caps { font-size: 15px; line-height: 1.6; }

/* Footer legal links beside the copyright line */
.six-copy .six-legal-links { margin-top: 6px; font-size: 16px; }
.six-copy .six-legal-links a { color: #fff; text-decoration: none; }
.six-copy .six-legal-links a:hover { color: var(--six-light); text-decoration: underline; }
.six-copy .six-sep { color: var(--six-orange); margin: 0 10px; }
@media (max-width: 600px) {
  .six-copy .six-legal-links { line-height: 2; }
  .six-copy .six-sep { margin: 0 6px; }
}

/* 3-step tiles */
.six-step { background: var(--six-orange); border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
.six-step h3 { line-height: 1.05; }

/* FAQ accordion */
.six-faq .e-n-accordion-item-title { color: #fff; padding: 22px 0 8px; border: 0 !important; background: transparent !important; }
.six-faq .e-n-accordion-item-title-header .e-n-accordion-item-title-text { font-family: var(--six-body); font-weight: 700; font-size: 28px; text-transform: none !important; }
.six-faq .e-n-accordion-item-title-icon { color: var(--six-orange); font-size: 26px; }
.six-faq .e-n-accordion-item-title-icon svg { fill: var(--six-orange); }
.six-faq .e-n-accordion-item > .e-con { padding: 0 0 12px 0; border: 0 !important; background: transparent !important; }
.six-faq .e-n-accordion-item { border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Quote form */
.six-form .elementor-field-group label { color: #fff; font-weight: 700; }
.six-form .elementor-field-textual { background: #fff; color: var(--six-navy); border: 2px solid var(--six-light); border-radius: 6px; }
.six-form .elementor-field-textual:focus { border-color: var(--six-orange); }
.six-form .elementor-field-subgroup label { color: #fff; font-weight: 400; }
.six-form .elementor-button[type="submit"] {
  background: var(--six-orange); color: #fff; font-weight: 700; font-size: 20px; border-radius: 6px;
  padding: 16px 32px; box-shadow: 0 3px 4px rgba(0,0,0,.5);
}
.six-form .elementor-button[type="submit"]:hover { background: #b8460b; }
.six-form .elementor-message-success { color: var(--six-light); }

/* Footer */
.six-footer .six-footer-menu .elementor-heading-title { font-family: var(--six-body); font-weight: 700; font-size: 22px; color: #fff; }
.six-footer .six-footer-menu .elementor-heading-title::after {
  content: ''; display: inline-block; width: 14px; height: 10px; margin-left: 10px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D0520E' d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.4 24.5-9.4 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.six-footer .six-footer-links .elementor-icon-list-item { padding-left: 22px; }
.six-footer .six-footer-links .elementor-icon-list-text { color: #fff; font-weight: 700; font-size: 17px; }
.six-footer .six-footer-links a:hover .elementor-icon-list-text { color: var(--six-light); }
.six-footer .six-footer-phone .elementor-icon-list-text { color: #fff; font-size: 18px; }
.six-footer .six-footer-phone strong { font-weight: 700; }
.six-footer .six-copy a { color: #fff; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .six-hero h1 { font-size: 56px !important; }
  .six-h { font-size: 48px !important; }
}
@media (max-width: 767px) {
  .six-hero h1 { font-size: 40px !important; }
  .six-h { font-size: 36px !important; }
  .six-type-row h3 { font-size: 30px !important; }
  .six-faq .e-n-accordion-item-title-header .e-n-accordion-item-title-text { font-size: 20px; }
}