/**
 * local-theme.css
 * Iron Man Ornamental overrides for Startup Growth (dark/red scheme).
 * Keeps the Startup Growth layout but enforces the iron-black palette with red accents.
 */

/* ----------------------------------------------------------
 * 0. Shared palette
 * -------------------------------------------------------- */
 :root {
  --iron-black: #000000;
  --iron-black-soft: #111111;
  --iron-gray: #32373c;
  --iron-gray-dark: #212121;
  --iron-gray-light: #3a3f45;
  --iron-divider: #464b50;
  --iron-hover-gray: #444b52;
  --text-primary: #fdf0f0;
  --text-secondary: #a0a6ac;
  --text-white: #ffffff;
  --accent-red: #961300;
  --accent-red-strong: #dd1d00;
  --accent-red-hover: #ff4a26;
  --accent-red-border: #990000;
  --accent-red-soft: rgba(221, 29, 0, 0.7);
  --accent-amber: #ffcc66;
}

/* ----------------------------------------------------------
 * 1. Global layout & typography
 * -------------------------------------------------------- */
body {
  background-color: var(--iron-black) !important;
  color: var(--text-primary) !important;
}

a {
  color: var(--text-white) !important;
}

a:hover,
a:focus {
  color: var(--accent-red-hover) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--text-white) !important;
}

.page,
.page-wrapper,
.main-container,
.region-content {
  background-color: var(--iron-black) !important;
  color: var(--text-primary) !important;
}

.white-region {
  background-color: var(--iron-black) !important;
  color: var(--text-primary) !important;
}

.light-gray-region {
  background-color: var(--iron-black-soft) !important;
  color: var(--text-primary) !important;
}

p,
li,
dt,
dd,
.block,
.block * {
  color: var(--text-primary);
}

img {
  border: none;
}

/* ----------------------------------------------------------
 * 2. Colored regions & highlighted strips
 * -------------------------------------------------------- */
.colored-region {
  background-color: var(--iron-black-soft) !important;
  color: var(--text-white) !important;
}

.colored-region.dark {
  background-color: var(--iron-gray-dark) !important;
  color: var(--text-white) !important;
}

.light-colored-region {
  background-color: rgba(12, 12, 12, 0.4) !important; /* fallback + softer overlay */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    url("/sites/default/files/styles/thumbnail/public/2025-11/metal-texture-3947946.jpg?itok=TawwEXPK");
  background-size: 1598px 737px;
  background-position: center;
  background-repeat: repeat;
  background-blend-mode: multiply;
  color: var(--text-white) !important;
}

.colored-region + .content-top-highlighted:before,
.colored-region.highlighted:after,
.colored-region + .highlighted:before {
  border-top-color: var(--iron-gray) !important;
}

.colored-region.dark + .content-top-highlighted:before,
.colored-region.dark.highlighted:after {
  border-top-color: var(--iron-gray-dark) !important;
}

.light-colored-region + .content-top-highlighted:before,
.light-colored-region.highlighted:after {
  border-top-color: var(--iron-gray-light) !important;
}

.colored-region.content-top-highlighted:after {
  border-top-color: var(--iron-gray) !important;
}

.colored-region.dark.content-top-highlighted:after {
  border-top-color: var(--iron-gray-dark) !important;
}

.light-colored-region.content-top-highlighted:after {
  border-top-color: var(--iron-gray-light) !important;
}

.colored-region.black a {
  color: var(--accent-red);
  text-decoration: none;
}

.colored-region.black a:hover {
  color: var(--accent-red-strong);
}

.highlighted,
.content-top-highlighted {
  background-color: var(--iron-gray);
  color: var(--text-white);
}

.colored-region:not(.black) ul.menu li a:hover {
  background-color: var(--iron-gray-light);
}

/* ----------------------------------------------------------
 * 3. Header: top bar, branding & navigation
 * -------------------------------------------------------- */
.header-top,
.header-top-region,
.region-header-top,
.region-header-top-inner {
  background-color: var(--iron-black-soft);
  color: var(--text-white);
  font-size: 0.875rem;
  line-height: 1.4;
}

.header-top a,
.header-top-region a,
.region-header-top a,
.region-header-top-inner a {
  color: var(--text-white);
}

.header-top a:hover,
.header-top-region a:hover,
.region-header-top a:hover,
.region-header-top-inner a:hover {
  color: var(--accent-red-strong);
}

.header-top .fa,
.header-top-region .fa,
.region-header-top .fa,
.region-header-top-inner .fa,
.header-top .icon,
.header-top-region .icon,
.region-header-top .icon,
.region-header-top-inner .icon {
  color: var(--text-primary);
}

.header-container {
  background-color: var(--iron-gray) !important;
  border-bottom: 4px solid var(--accent-red-border) !important;
}

.header-container .site-branding,
.header-container .navbar-brand,
.header-container .site-name {
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-container .site-branding a,
.header-container .navbar-brand,
.header-container .site-name a {
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-container .sf-menu > li > a,
.header-container nav > ul.menu > li > a {
  color: var(--text-white);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 18px 18px;
  border-right: 1px solid var(--iron-divider);
}

.header-container .sf-menu > li > a:hover,
.header-container .sf-menu > li.sfHover > a,
.header-container nav > ul.menu > li.menu-item--active-trail > a,
.header-container nav > ul.menu > li.menu-item--active-trail > a:hover,
.header-container ul.menu li a:hover {
  background-color: var(--iron-hover-gray) !important;
  color: var(--text-white) !important;
}

.header-container .sf-menu li li a,
.header-container nav ul.menu li li > a {
  background-color: rgba(50, 55, 60, 0.95);
  color: var(--text-white);
  font-size: 1.2rem;
}

.header-container .sf-menu li li a:hover,
.header-container nav ul.menu li li > a:hover {
  background-color: var(--iron-hover-gray);
  color: var(--text-white);
}

.header-container .navbar-toggle,
.header-container .navbar-toggler {
  border-color: var(--text-white);
}

.header-container .navbar-toggle .icon-bar,
.header-container .navbar-toggler-icon {
  background-color: var(--text-white);
}

ul.menu li.menu-item > a:before,
ul.menu li > a:hover:before,
ul.menu li.menu-item--expanded > a:hover:before,
.colored-region.black ul.menu li.menu-item--active-trail > a:before {
  color: var(--accent-red);
}

/* ----------------------------------------------------------
 * 4. Hero & media overlays
 * -------------------------------------------------------- */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(50, 55, 60, 0.85) 0%,
    rgba(150, 19, 0, 0.9) 100%
  );
}

.overlay h1,
.overlay h2,
.overlay h3,
.overlay p,
.overlay .caption-link a {
  color: var(--text-white);
}

.video-item > a:before {
  background: linear-gradient(
    to bottom,
    rgba(50, 55, 60, 0.85) 0%,
    rgba(150, 19, 0, 0.9) 100%
  );
}

/* ----------------------------------------------------------
 * 5. Buttons & calls to action
 * -------------------------------------------------------- */
a.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

a.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: var(--accent-red-strong);
  border-color: var(--accent-red-strong);
}

.colored-region:not(.black) a.button,
.colored-region:not(.black) input[type="submit"],
.colored-region:not(.black) input[type="reset"],
.colored-region:not(.black) input[type="button"] {
  background-color: var(--accent-red-strong);
  border-color: var(--accent-red-strong);
}

.colored-region:not(.black) a.button:hover,
.colored-region:not(.black) input[type="submit"]:hover,
.colored-region:not(.black) input[type="reset"]:hover,
.colored-region:not(.black) input[type="button"]:hover {
  background-color: var(--accent-red-soft);
}

.call-now-button {
  display: inline-block;
  padding: 12px 26px;
  background-color: var(--accent-red);
  border: 2px solid var(--text-white);
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.call-now-button:hover {
  background-color: var(--accent-red-strong);
  border-color: var(--text-white);
}

ul.links li a {
  background-color: var(--accent-red);
}

ul.links li a:hover {
  background-color: var(--accent-red-strong);
}

.colored-region:not(.black) ul.links li a {
  background-color: var(--accent-red-strong);
  border-color: var(--accent-red-strong);
}

.colored-region:not(.black) ul.links li a:hover {
  background-color: var(--accent-red-soft);
}

.comment ul.links li a {
  color: var(--accent-red);
}

.comment ul.links li a:hover {
  color: var(--accent-red-strong);
}

/* ----------------------------------------------------------
 * 6. Cards, tiles & white-region content
 * -------------------------------------------------------- */
.ironman-category-tile {
  background-color: var(--iron-black-soft) !important;
  border: 1px solid #333333;
  text-align: center;
  margin-bottom: 30px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ironman-category-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.ironman-category-tile h3 {
  text-transform: uppercase;
  margin: 16px 0 6px;
  color: var(--text-white) !important;
}

.ironman-category-tile .field--name-body,
.ironman-category-tile p {
  font-size: 0.85rem;
  color: var(--text-primary) !important;
  margin-bottom: 12px;
}

.ironman-category-tile a.view-more-link {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.ironman-category-tile:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
 * 7. Footer & subfooter
 * -------------------------------------------------------- */
.footer-area,
.site-footer,
.region-footer {
  background-color: var(--iron-black-soft);
  color: var(--text-white);
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.footer-area a,
.site-footer a,
.region-footer a {
  color: var(--text-white);
}

.footer-area a:hover,
.site-footer a:hover,
.region-footer a:hover {
  color: var(--accent-red-strong);
}

.footer-area ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-area ul.menu li {
  display: inline-block;
  margin-right: 12px;
}

.subfooter-area {
  background-color: var(--iron-gray-dark);
  color: #cccccc;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.8rem;
}

.subfooter-area a {
  color: var(--text-white);
}

.subfooter-area a:hover {
  color: var(--accent-red-strong);
}

.footer-area *,
.site-footer *,
.subfooter-area * {
  color: #f0f0f0 !important;
}

/* ----------------------------------------------------------
 * 8. Accent elements
 * -------------------------------------------------------- */
.breadcrumb a:hover {
  color: var(--accent-red-strong);
}

ul.icons-list li a {
  border-color: var(--accent-red);
}

ul.icons-list li a:hover {
  background-color: var(--accent-red-strong);
  border-color: var(--accent-red-strong);
}

.pager__items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

li.pager__item {
  margin: 0;
  padding: 0;
}

li.pager__item > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--iron-divider);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-white);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.colored-region ul.icons-list li a {
  border-color: var(--accent-red-strong);
}

.colored-region.black ul.icons-list li a {
  color: var(--accent-red-strong);
}

.colored-region:not(.black) .view-mt-popular-tags .views-row a {
  background-color: var(--accent-red-strong);
}

li.pager__item > a:hover {
  border-color: var(--accent-red-strong);
  background-color: rgba(221, 29, 0, 0.15);
  color: var(--accent-red-strong);
}

li.pager__item.is-active a,
li.pager__item.is-active:last-child a {
  border-color: var(--accent-red);
  background-color: rgba(150, 19, 0, 0.25);
  color: var(--text-white);
}

.view-pricing-tables .pricing-table {
  border: 1px solid var(--accent-red);
}

.view-pricing-tables .pricing-table-header,
.view-pricing-tables .views-field-field-mt-price {
  background-color: var(--accent-red);
}

.views-field-title a {
  color: var(--accent-red);
}

.views-field-title a:hover,
.white-region.content-top .views-field-title a:hover,
.light-gray-region.content-top .views-field-title a:hover {
  color: var(--accent-red-strong);
}

.banner {
  background-color: var(--iron-black);
}

.banner-area a {
  color: var(--text-white) !important;
}

.banner-area a:hover,
.banner-area a:focus {
  color: var(--accent-amber) !important;
}

.boxed .page-container {
  border: none !important;
}

/* ----------------------------------------------------------
 * 9. Sticky header behavior
 * -------------------------------------------------------- */
.onscroll .header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 499;
  background-color: var(--iron-black) !important;
  border-bottom: 4px solid var(--accent-red-border) !important;
}

.onscroll .header .site-branding a,
.onscroll .header .navbar-brand,
.onscroll .header .site-name a,
.onscroll .header nav > ul.menu > li > a,
.onscroll .header .sf-menu > li > a {
  color: var(--text-white) !important;
}

.onscroll .header .logo img {
  max-height: 60px;
  height: auto;
  width: auto;
  transition: max-height 0.2s ease, padding 0.2s ease;
}

.onscroll .header .logo {
  padding-top: 4px;
  padding-bottom: 4px;
}

.onscroll .header .sf-menu > li > a,
.onscroll .header nav > ul.menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ----------------------------------------------------------
 * 10. Branding & site slogan
 * -------------------------------------------------------- */
.site-branding__name,
.site-name {
  display: none !important;
}

.logo-and-site-name-wrapper {
  width: 100%;
  text-align: center;
}

.logo-and-site-name-wrapper .logo,
.logo-and-site-name-wrapper .site-slogan,
.logo-and-site-name-wrapper .site-branding__slogan {
  float: none !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.site-slogan,
.site-branding__slogan {
  color: var(--text-white);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ----------------------------------------------------------
 * 11. Header contact strip
 * -------------------------------------------------------- */
.header-top-contact {
  padding: 4px 0;
}

.header-top-contact .header-address,
.header-top-contact .header-phone {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.header-top-contact .header-address,
.header-top-contact .header-phone {
  padding: 0;
}

.header-top-contact .header-address a,
.header-top-contact .header-phone a {
  color: var(--text-white);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: normal;
}

.header-top-contact .header-phone a .font-size-24 {
  font-size: 1.4rem !important;
  line-height: 1.1;
}

.header-top-contact .icons-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}

.header-top-contact .icons-list li {
  display: inline-flex;
  margin: 0;
}

.header-top-contact .icons-list li a {
  border: none;
  padding: 0 3px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.header-top-contact .icons-list li a:hover {
  color: var(--accent-red-strong);
  background: transparent;
}

.header-top-contact .block,
.region-header-top .block,
.header-top .block {
  padding-bottom: 0 !important;
}

.header-top-contact .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.header-top-contact .row > [class*="col-"] {
  flex: 1 1 0;
  text-align: center;
  float: none;
  min-width: 0;
}

.header-top-contact .col-sm-5,
.header-top-contact .col-md-5 {
  text-align: left;
}

.header-top-contact .col-sm-3,
.header-top-contact .col-md-3 {
  text-align: center;
}

.header-top-contact .col-sm-4,
.header-top-contact .col-md-4 {
  text-align: right;
}

.header-top-contact .header-address a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.header-top-contact .header-address-icon {
  font-size: 1.8rem;
  color: var(--accent-red-strong);
}

.header-top-contact .header-address span {
  line-height: 1.2;
  display: inline-block;
  font-size: 0.9rem;
}

@media (max-width: 912px) {
  .header-top-contact {
    font-size: 0.85rem;
  }

  .header-top-contact .row {
    gap: 4px;
  }

  .header-top-contact .header-address a,
  .header-top-contact .header-phone a {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
  }

  .header-top-contact .header-phone a .font-size-24 {
    font-size: 1.1rem !important;
  }

  .header-top-contact .header-address span {
    font-size: 0.8rem;
  }

  .header-top-contact .header-address-icon {
    font-size: 1.4rem;
  }

  .header-top-contact .icons-list li a {
    font-size: 0.8rem;
    padding: 0 2px;
  }
}

@media (min-width: 992px) {
  .header-top-contact .header-address a,
  .header-top-contact .header-phone a {
    font-size: 1.3rem;
  }

  .header-top-contact .header-phone a .font-size-24 {
    font-size: 1.6rem !important;
  }

  .header-top-contact .header-address span {
    font-size: 1rem;
  }

  .header-top-contact .header-address-icon {
    font-size: 2.2rem;
  }
}

/* ----------------------------------------------------------
 * 12. About sections
 * -------------------------------------------------------- */
.about-ironman {
  padding: 40px 0;
  background-color: var(--iron-black);
  color: var(--text-primary);
}

.about-ironman h1 {
  margin-bottom: 10px;
  font-size: 2.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-white);
}

.about-ironman__brand {
  color: #990000;
}

.about-ironman__divider {
  width: 120px;
  max-width: 40%;
  margin: 10px auto 25px auto;
  border: 0;
  border-top: 2px solid #888888;
}

.about-ironman p {
  margin-bottom: 12px;
  font-size: 1.7rem;
  line-height: 1.6;
}

.about-ironman strong {
  color: var(--text-white);
}

.about-ironman-teaser {
  text-align: center;
}

.about-ironman-teaser h3 {
  margin-bottom: 8px;
}

.about-ironman-teaser .about-ironman__divider {
  width: 80px;
  margin: 10px auto 20px auto;
}

.about-ironman-teaser p {
  margin-bottom: 10px;
}



/* ----------------------------------------------------------
 * 13. Media & project galleries
 * -------------------------------------------------------- */
.photoswipe-gallery.field--name-images .field__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.photoswipe-gallery.field--name-images .field__items > li {
  display: block !important;
  margin: 0;
  padding: 0;
  float: none !important;
  flex: 0 0 calc((100% - 24px) / 4);
  max-width: calc((100% - 24px) / 4);
}

.photoswipe-gallery.field--name-images .field__items > li > a {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.photoswipe-gallery.field--name-images .field__items > li > a::before {
  content: none !important;
}

.photoswipe-gallery.field--name-images img.image-style-media-gallery-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.path-galleries .view-media-galleries .view-content,
.path-media-gallery .field--name-images,
.embedded-entity .field--name-images {
  display: block !important;
  grid-template-columns: none !important;
  grid-gap: 0 !important;
}

@media (max-width: 1199.98px) {
  .photoswipe-gallery.field--name-images .field__items > li {
    flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
  }
}

@media (max-width: 900.98px) {
  .photoswipe-gallery.field--name-images .field__items > li {
    flex: 0 0 calc((100% - 8px) / 2);
    max-width: calc((100% - 8px) / 2);
  }
}

.path-project-gallery .view-project-gallery .views-view-grid .views-row {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.path-project-gallery .view-project-gallery .views-view-grid .views-col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 4px;
}

.path-project-gallery .view-project-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

/* Inline images embedded inside body copy */
.field.field--name-body img.align-left,
.field.field--name-body code img.align-left {
  display: inline-block;
  margin: 10px 10px 10px 0;
}

.field.field--name-body img.align-right,
.field.field--name-body code img.align-right {
  display: inline-block;
  margin: 10px 0 10px 10px;
}

.field.field--name-body img.align-left,
.field.field--name-body img.align-right,
.field.field--name-body code img.align-left,
.field.field--name-body code img.align-right {
  max-width: 45%;
}

.field.field--name-body code {
  background: none;
  padding: 0;
  border: 0;
}

/* ===== BREAKPOINT HELPER – visualize active range ===== */
body::after {
  content: "XS < 768px";
  position: fixed;
  bottom: 4px;
  right: 4px;
  padding: 3px 6px;
  font: 11px/1.4 monospace;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  z-index: 9999;
  pointer-events: none;
}

@media (min-width: 768px) {
  body::after {
    content: "SM ≥ 768px";
  }
}

@media (min-width: 901px) {
  body::after {
    content: "MD ≥ 901px";
  }
}

@media (min-width: 992px) {
  body::after {
    content: "LG ≥ 992px";
  }
}

@media (min-width: 1200px) {
  body::after {
    content: "XL ≥ 1200px";
  }
}