/*
 * SMASS Philippines, Inc. branding foundation.
 * This file intentionally overrides template tokens without changing layout.
 */

:root {
  --smass-navy: #0B1F3A;
  --smass-blue: #0077B6;
  --smass-red: #B22234;
  --smass-steel: #5F6C7B;
  --smass-light: #F4F7FA;
  --smass-white: #FFFFFF;
}

* {
  --body-font: "Manrope", Helvetica, Arial, sans-serif;
  --heading-font: "Raleway", "Manrope", Helvetica, Arial, sans-serif;
  --title-font: "Raleway", "Manrope", Helvetica, Arial, sans-serif;
  --body-font-color: var(--smass-steel);
  --body-font-color-dark: rgba(255, 255, 255, .82);
  --heading-font-color: var(--smass-navy);
  --heading-font-weight: 700;
  --h1-font-weight: 700;
  --h2-font-weight: 700;
  --h1-letter-spacing: 0;
  --h2-letter-spacing: 0;
  --bg-color-even: var(--smass-light);
  --bg-color-odd: var(--smass-white);
  --bg-light: var(--smass-light);
  --bg-grey: var(--smass-light);
  --bg-dark-1: var(--smass-navy);
  --bg-dark-2: #07172B;
  --bg-dark-3: #123052;
  --bg-dark-1-rgb: 11, 31, 58;
  --primary-color: var(--smass-red);
  --primary-color-rgb: 178, 34, 52;
  --swiper-theme-color: var(--smass-red);
  --btn-color: var(--smass-white);
}

body,
button,
input,
textarea,
select {
  font-family: "Manrope", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.subtitle,
#mainmenu a.menu-item,
.btn-main {
  font-family: "Manrope", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.smass-hero-heading,
.smass-stat-heading {
  font-family: "Raleway", "Manrope", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  color: var(--smass-steel);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--smass-navy);
  font-weight: 700;
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
footer h5,
#extra-content h5 {
  color: var(--smass-white);
}

.bg-light {
  background: var(--smass-light) !important;
}

.bg-dark,
.bg-dark-1,
.section-dark,
footer.section-dark,
header.header-mobile {
  background-color: var(--smass-navy) !important;
}

footer.section-dark {
  background-color: #07172B !important;
  background-image:
    linear-gradient(135deg, rgba(11, 31, 58, .88), rgba(7, 23, 43, .74)),
    url("../images/smass/smass-footer-texture.svg") !important;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: cover, 720px 420px;
}

footer.section-dark .subfooter {
  background: rgba(7, 23, 43, .7);
  font-size: 14px;
  line-height: 1.5;
}

/* Keep the mobile copyright and legal links in balanced, separate rows. */
@media (max-width: 767px) {
  footer.section-dark .subfooter .de-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  footer.section-dark .subfooter .de-flex-col {
    display: block;
    width: 100%;
  }

  footer.section-dark .subfooter .menu-simple {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 0;
  }

  footer.section-dark .subfooter .menu-simple li {
    display: block;
    margin: 0;
  }

  footer.section-dark .subfooter .menu-simple a {
    display: inline-block;
  }
}

.bg-dark-2 {
  background-color: #07172B !important;
}

.bg-dark-3 {
  background-color: #123052 !important;
}

.bg-color {
  background: var(--smass-blue) !important;
}

.id-color,
a:hover,
#mainmenu li a.active,
header.header-mobile #mainmenu li a.menu-item:hover,
.social-icons a:hover i,
.accordion-section-title.active {
  color: var(--smass-red) !important;
}

a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main,
input[type=submit].btn-main,
a.btn-line {
  background: var(--smass-red) !important;
  color: var(--smass-white) !important;
}

a.btn-main:hover,
.btn-main:hover,
input[type=submit].btn-main:hover {
  background: #941A2A !important;
  color: var(--smass-white) !important;
}

.circle.bg-color,
.abs.circle.bg-color,
#back-to-top {
  background: var(--smass-red) !important;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev:after,
.swiper-button-next:after,
#back-to-top:before {
  color: var(--smass-white) !important;
}

.smass-card-arrow {
  display: block;
  filter: brightness(0) invert(1);
}

.bg-color.text-dark,
.bg-color .text-dark,
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color p,
.bg-color i {
  color: var(--smass-white) !important;
}

.border-gray,
.form-control,
input,
textarea {
  border-color: rgba(95, 108, 123, .28) !important;
}

.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--smass-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(0, 119, 182, .12) !important;
}

header.smaller,
header.smaller.scroll-light,
header.header-mobile,
#extra-wrap {
  background: rgba(11, 31, 58, .72) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

header.smaller.scroll-light #mainmenu li a,
header.smaller.scroll-light #mainmenu li.has-child:after,
header.smaller.scroll-light .social-icons i {
  color: var(--smass-white) !important;
}

/* Keep location text and contact separators readable over the header image. */
#topbar .topbar-widget > span {
  color: var(--smass-white);
}

#mainmenu li a,
#topbar a,
footer,
footer a,
#extra-content {
  color: rgba(255, 255, 255, .86);
}

footer a:hover,
#extra-content a:hover {
  color: var(--smass-red) !important;
}

#mainmenu li {
  border-color: rgba(255, 255, 255, .16) !important;
}

.smass-form-privacy-note {
  margin: 0 0 18px;
  color: var(--smass-steel);
  font-size: 13px;
  line-height: 1.55;
}

.smass-legal-content h2 {
  margin-top: 34px;
  margin-bottom: 14px;
  font-size: 24px;
  line-height: 1.35;
}

.smass-legal-content h2:first-child {
  margin-top: 0;
}

.smass-legal-content p,
.smass-legal-content li {
  color: var(--smass-steel);
  line-height: 1.8;
}

.smass-legal-content ul {
  margin-bottom: 20px;
  padding-left: 22px;
}

.smass-legal-meta {
  margin-bottom: 28px;
  color: var(--smass-steel);
  font-size: 14px;
}

#mainmenu li a.active,
#mainmenu li a[aria-current="page"] {
  color: var(--smass-red) !important;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 993px) {
  header.transparent:not(.header-mobile),
  header:not(.header-mobile) {
    position: fixed;
    top: 0;
    margin-top: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header:not(.header-mobile).scroll-down,
  header:not(.header-mobile).nav-up {
    margin-top: 0;
  }

  header:not(.header-mobile):not(.smass-at-top).smaller,
  header:not(.header-mobile):not(.smass-at-top).scroll-down,
  header:not(.header-mobile):not(.smass-at-top).nav-up {
    background: rgba(11, 31, 58, .72) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  header:not(.header-mobile).smass-at-top,
  header:not(.header-mobile).smass-at-top.smaller,
  header:not(.header-mobile).smass-at-top.scroll-down,
  header:not(.header-mobile).smass-at-top.nav-up {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header:not(.header-mobile).smass-at-top #topbar,
  header:not(.header-mobile):not(.smaller) #topbar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header:not(.header-mobile) .header-col-mid {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  header:not(.header-mobile) #mainmenu {
    margin: 0 0 0 auto;
    text-align: right;
  }

  header:not(.header-mobile) .menu_side_area {
    margin-left: 18px;
  }
}

@media (max-width: 992px) {
  header.header-mobile,
  header.header-mobile #mainmenu,
  header.header-mobile #mainmenu ul,
  header.header-mobile #mainmenu li {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header.header-mobile {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    transition: background .3s ease;
  }

  header.header-mobile.clone,
  header.header-mobile.scroll-down,
  header.header-mobile.nav-up {
    top: 0 !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #content {
    margin-top: 0;
  }

  header.header-mobile:not(.smass-at-top),
  header.header-mobile.menu-open #mainmenu {
    background: linear-gradient(135deg, rgba(11, 31, 58, .94), rgba(7, 23, 43, .88)) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  header.header-mobile.menu-open {
    height: 100dvh !important;
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(11, 31, 58, .94), rgba(7, 23, 43, .88)) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  header.header-mobile:not(.menu-open) #mainmenu {
    display: none !important;
  }

  header.header-mobile.menu-open #mainmenu {
    display: block !important;
    top: 92px;
    right: 0;
    left: 0 !important;
    width: auto !important;
    height: calc(100dvh - 92px);
    max-height: calc(100dvh - 92px);
    margin-top: 0;
    padding: 0 20px !important;
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 0 !important;
  }

  h1 {
    font-size: 44px;
  }

  header.header-mobile #mainmenu li a.active,
  header.header-mobile #mainmenu li a[aria-current="page"] {
    color: var(--smass-red) !important;
    background: transparent;
    box-shadow: none;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  h1.fs-sm-10vw {
    font-size: 44px !important;
  }
}

/* Internal-page heroes need to clear the fixed navigation at every breakpoint. */
#subheader.smass-page-hero {
  min-height: 382px;
  padding: 190px 0 92px;
}

#subheader.smass-page-hero .spacer-double {
  display: none;
}

@media (max-width: 992px) {
  #subheader.smass-page-hero {
    min-height: 278px;
    padding: 128px 0 64px !important;
  }
}

@media (max-width: 767px) {
  #subheader.smass-page-hero {
    min-height: 250px;
    padding: 112px 0 56px !important;
  }
}

/* Legal banners follow their content height instead of the homepage viewport height. */
.smass-legal-hero .v-center {
  min-height: 0;
  display: block;
  background: transparent;
}

.smass-legal-hero .swiper-inner {
  position: relative;
  height: auto;
}

.smass-legal-hero .sw-caption {
  position: relative;
  top: auto;
  transform: none;
  padding: 190px 0 72px;
}

.smass-legal-hero .spacer-double {
  display: none;
}

@media (max-width: 992px) {
  .smass-legal-hero .sw-caption {
    padding: 128px 0 64px;
  }
}

@media (max-width: 767px) {
  .smass-legal-hero .sw-caption {
    padding: 112px 0 48px;
  }
}

.smass-logo {
  display: block;
  height: auto;
}

img[width][height] {
  height: auto;
}

.smass-logo-header {
  width: min(340px, 44vw);
  max-width: 340px;
  max-height: 72px;
}

.smass-brand-name {
  display: block;
  color: var(--smass-white);
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 50px;
  white-space: nowrap;
}

header div#logo img.smass-logo-header {
  width: min(340px, 44vw);
  max-width: 340px;
  height: 72px;
  max-height: 72px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 992px) {
  header.header-mobile div#logo img.smass-logo-header {
    width: min(300px, 52vw);
    height: auto !important;
    max-height: none;
    object-fit: contain;
    object-position: left center;
  }
}

@media (min-width: 993px) {
  header:not(.header-mobile) .de-flex.sm-pt10 {
    min-height: 82px;
    padding-top: 0;
    align-items: center;
  }
}

.smass-logo-footer,
.smass-logo-drawer {
  width: min(300px, 70vw);
  max-width: 300px;
  max-height: 72px;
}

footer img.smass-logo-footer {
  height: auto !important;
  max-height: none;
  aspect-ratio: 2141 / 407;
  object-fit: contain;
}

.smass-hero-heading,
.smass-stat-heading {
  font-family: var(--title-font);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

.text-light .smass-hero-heading {
  color: var(--smass-white);
}

.smass-mission-vision-section {
  background:
    linear-gradient(180deg, rgba(244, 247, 250, .96), rgba(255, 255, 255, .98));
}

.smass-mission-vision-panel {
  height: 100%;
  padding: 34px;
  border: 1px solid rgba(95, 108, 123, .22);
  border-radius: 8px;
  background: var(--smass-white);
  box-shadow: 0 18px 45px rgba(11, 31, 58, .08);
}

.smass-mission-vision-panel h3 {
  color: var(--smass-navy);
}

.smass-mission-vision-panel p {
  color: var(--smass-steel);
}

.smass-mission-vision-panel p {
  margin-bottom: 0;
  max-width: 34em;
}

@media (max-width: 767px) {
  .smass-mission-vision-panel {
    padding: 26px;
  }

  .smass-mission-vision-panel p {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

}

/* Trust and accessibility: controls remain identifiable without placeholders. */
#contact_form .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #132a4d;
    font-weight: 600;
}

/* Keep hints smaller without changing labels or entered text. */
#contact_form input.form-control::placeholder,
#contact_form textarea.form-control::placeholder {
    font-size: 13px;
}

#contact_form select.form-control:required:invalid {
    font-size: 13px;
    line-height: 24px;
}

#contact_form select.form-control option {
    font-size: 16px;
}

/* Contact-only feedback preserves the existing inquiry card and page layout. */
#contact_form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#contact_form .smass-form-availability {
    margin-bottom: 24px;
    padding: 14px 16px;
    border-left: 3px solid var(--smass-blue);
    background: #e8eff5;
    color: var(--smass-navy);
}

#contact_form .smass-form-availability p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

#contact_form .smass-field-error {
    margin: -10px 0 20px;
    color: #941a2a;
    font-size: 13px;
    line-height: 1.6;
}

#contact_form .smass-field-hint {
    margin: -10px 0 20px;
    font-size: 13px;
    line-height: 1.6;
}

#contact_form [aria-invalid="true"] {
    border-color: #941a2a !important;
}

#contact_form a,
#contact_form .smass-form-action {
    color: var(--smass-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#contact_form .smass-form-action {
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-align: left;
}

#contact_form .smass-form-recovery {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#contact_form .form-select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='none' stroke='%230b1f3a' stroke-width='2' d='m2 3 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 12px;
    background-position: right 16px center;
}

#contact_form #error_message {
    color: #941a2a;
    border-color: #941a2a;
}

#contact_form #success_message {
    color: #154c32;
    background: #e7f3eb;
    border-color: #28784d;
}

#contact_form [hidden] {
    display: none !important;
}

#contact_form #send_message:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

button#menu-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #164f97;
    outline-offset: 4px;
}

/* Legal content must remain readable without scrolling through animations. */
.smass-legal-content,
.smass-legal-content.wow {
    visibility: visible !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Content stays available if animation scripts fail or JavaScript is disabled. */
.wow {
    visibility: visible !important;
}

@media (max-width: 991px) {
    button#menu-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Approved illustrative photography: preserve card proportions and mobile subjects. */
img.smass-photo-square[width][height] {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.swiper-inner.smass-approved-hero {
  /* Override the carousel's inline background shorthand so the subjects stay visible. */
  background-position: 65% center !important;
}

@media (max-width: 767px) {
  .swiper-inner.smass-approved-hero {
    background-position: 72% center !important;
  }
}

/* Darken only the existing full-width hero background; preserve the original layout. */
.smass-approved-hero .sw-overlay {
  opacity: 1;
}

/* Slide 2: the outpainted warehouse fills the hero using proportional scaling. */
.swiper-inner.smass-approved-hero.smass-hero-freight {
    background-color: var(--bg-dark-1) !important;
    background-size: cover !important;
    background-position: right center !important;
}

@media (max-width: 991px) {
    .swiper-inner.smass-approved-hero.smass-hero-freight {
        /* Retain both subjects in a portrait viewport without stretching them. */
        background-size: auto 85% !important;
        background-position: 75% center !important;
    }
}

/* Slide 3: shift only the maintenance background image 70 pixels upward. */
.swiper-inner.smass-approved-hero.smass-hero-maintenance {
    background-position: 65% -70px !important;
}

@media (max-width: 767px) {
    .swiper-inner.smass-approved-hero.smass-hero-maintenance {
        background-position: 72% top !important;
    }
}

/* Slide 4: the photograph extends on both sides to fill the hero without seams. */
.swiper-inner.smass-approved-hero.smass-hero-partnership {
    background-color: var(--bg-dark-1) !important;
    background-size: cover !important;
    background-position: 38% center !important;
}

/* Use the approved slide 4 navy gradient consistently across homepage slides. */
.smass-approved-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(var(--bg-dark-1-rgb), 0.95) 0%,
        rgba(var(--bg-dark-1-rgb), 0.65) 35%,
        rgba(var(--bg-dark-1-rgb), 0) 70%
    );
}

@media (max-width: 991px) {
    .swiper-inner.smass-approved-hero.smass-hero-partnership {
        background-size: auto 85% !important;
        background-position: 46% center !important;
    }

    .smass-approved-hero::before {
        background: linear-gradient(
            180deg,
            rgba(var(--bg-dark-1-rgb), 1) 7.5%,
            rgba(var(--bg-dark-1-rgb), 0) 40%,
            rgba(var(--bg-dark-1-rgb), 0) 60%,
            rgba(var(--bg-dark-1-rgb), 1) 92.5%
        );
    }
}