/*
Theme Name:         Downtown Tampa Storage
Template:      	    tsg-pinnacle
Theme URI:          http://www.storageinternetmarketing.com
Description:

Version:            1.0
Author:             The Storage Group
Author URI:         http://www.storageinternetmarketing.com

License:            For use by The Storage Group only.
*/

/*QC fixes*/
.mobileMenuToggle.color_2.googleTagManager {
  color: #fff !important;
}

/*site theme styles*/
.dt-wrap{--max:1200px; --g: clamp(16px, 3vw, 28px); --r: 18px; --shadow: 0 10px 30px rgba(0,0,0,.12);}
.dt-wrap{max-width:var(--max); margin-inline:auto; padding:clamp(16px,3vw,32px);}
.dt-hero{
  display:grid; gap:var(--g); align-items:center;
  grid-template-columns: 1.1fr .9fr;
  padding: clamp(28px,6vw,56px) clamp(18px,4vw,36px);
  background:
    linear-gradient(135deg, color-mix(in srgb, #B30000 20%, transparent) 0%,
                           color-mix(in srgb, #B30000 8%, transparent) 45%,
                           transparent 45%) no-repeat,
    linear-gradient(180deg, color-mix(in srgb, #880101 92%, #000 10%) 0%,
                           color-mix(in srgb, #880101 85%, #000 5%) 100%);
  color:#fff; border-radius: var(--r); box-shadow: var(--shadow); overflow:clip;
}
.dt-hero .dt-title{font-size: clamp(32px, 4.5vw, 56px); line-height:1.05; letter-spacing:.5px; margin:0 0 .35em;}
.dt-hero p.lede{font-size:clamp(16px,1.4vw,18px); opacity:.95; max-width:60ch}
.dt-hero .dt-hero-badge{
  display:inline-block; background: color-mix(in srgb, #B30000 85%, #000 15%);
  color:#fff; padding:.4rem .7rem; border-radius:999px; font-weight:600; letter-spacing:.3px; margin-bottom:.6rem;
}
.dt-hero .dt-hero-media{
  aspect-ratio: 4/3; border-radius: var(--r);
  background: radial-gradient(60% 80% at 70% 30%, color-mix(in srgb, #fff 6%, #B30000) 0%, transparent 70%),
              #1a1a1a;
  display:grid; place-items:center; padding:10px; box-shadow: var(--shadow);
}
.dt-hero .dt-hero-media img{width:100%; height:100%; object-fit:cover; border-radius: calc(var(--r) - 6px);}

/* Grid + cards */
.dt-grid{display:grid; gap:var(--g);}
.dt-grid.cols-3{grid-template-columns: repeat(3,1fr);}
.dt-grid.cols-2{grid-template-columns: repeat(2,1fr);}
.dt-card{
  background:#fff; border-radius: var(--r); box-shadow: var(--shadow);
  padding:clamp(16px,2.4vw,22px); border:1px solid color-mix(in srgb,#000 6%, transparent);
}
.dt-card h3{margin:.1rem 0 .35rem; font-size:clamp(18px,1.6vw,22px)}
/* .dt-muted{color:#555;} */
.dt-kicker{font-weight:700; color:#B30000; letter-spacing:.4px; text-transform:uppercase; font-size:.82rem}

/* Lists */
.dt-checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.2rem; margin:0; padding:0; list-style:none;}
.dt-checks li{
  padding-left:1.6rem; position:relative;
}
.dt-checks li::before{
  content:""; position:absolute; left:0; top:.25rem; width:1rem; height:1rem; border-radius:3px;
  background:#B30000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.35a1 1 0 1 1 1.414-1.414l4.156 4.156 8.485-8.485a1 1 0 0 1 1.515.101Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.35a1 1 0 1 1 1.414-1.414l4.156 4.156 8.485-8.485a1 1 0 0 1 1.515.101Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* CTAs */
.dt-cta{display:inline-grid; place-items:center; grid-auto-flow:column; gap:.6rem; font-weight:800;
  background: #B30000; color:#fff; padding:.9rem 1.1rem; border-radius: 999px; text-decoration:none;
  box-shadow: 0 6px 18px color-mix(in srgb, #B30000 30%, transparent);
}
.dt-cta:hover{filter:brightness(1.05); transform: translateY(-1px);color: #fff;}
.dt-cta.secondary{background: #880101;}

/* Section headers with skyline accent */
.dt-section h2{
  margin:0 0 .6rem; font-size:clamp(26px,3.5vw,40px);
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.8rem;
}
.dt-section h2::after{
  content:""; height:8px; border-radius:999px;
  background:linear-gradient(90deg, #B30000, color-mix(in srgb, #880101 70%, #B30000));
}

/* Media blocks */
.dt-media{
  display:grid; gap:var(--g); align-items:start;
  grid-template-columns: 1.1fr .9fr;
}
.dt-media img{width:100%; border-radius: var(--r); box-shadow: var(--shadow);}

/* Utilities */
.dt-pill{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:#f4f4f4;}
.center{text-align:center;}
.mt-1{margin-top:.6rem} .mt-2{margin-top:1.2rem} .mt-3{margin-top:1.8rem}
.mb-0{margin-bottom:0}

/* Responsive */
@media (max-width: 980px){
  .dt-hero, .dt-media{grid-template-columns:1fr}
  .dt-grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .dt-grid.cols-3, .dt-grid.cols-2, .dt-checks{grid-template-columns:1fr}
}


/*iOS/iPhone fallbacks*/
/* ===== iOS/Safari compatibility patch ===== */

/*overflow:clip => hidden */
.dt-hero { overflow: hidden; }

/*Provide background fallbacks without color-mix(), then enhance if supported */
.dt-hero {
  /* Simple fallbacks first */
  background:
    linear-gradient(135deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.03) 45%, transparent 45%) no-repeat,
    linear-gradient(180deg, var(--candee-primary, #B30000) 0%, #B30000 100%);
}
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .dt-hero {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, #B30000 20%, transparent) 0%,
        color-mix(in srgb, #B30000 8%, transparent) 45%,
        transparent 45%) no-repeat,
      linear-gradient(180deg,
        color-mix(in srgb, #880101 92%, #000 10%) 0%,
        color-mix(in srgb, #880101 85%, #000 5%) 100%);
  }
}

/*Mask shorthand → explicit -webkit- longhands (plus standard where it works) */
.dt-checks li::before{
  /* keep the bg as your primary color */
  background: #B30000;

  /* iOS-friendly masking */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.35a1 1 0 1 1 1.414-1.414l4.156 4.156 8.485-8.485a1 1 0 0 1 1.515.101Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  /* Standards (safe to leave): */
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.35a1 1 0 1 1 1.414-1.414l4.156 4.156 8.485-8.485a1 1 0 0 1 1.515.101Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* 4) aspect-ratio fallback for older iOS */
.dt-hero .dt-hero-media {
  aspect-ratio: 4 / 3;
}
@supports not (aspect-ratio: 1 / 1) {
  .dt-hero .dt-hero-media {
    position: relative;
    height: 0;
    padding-bottom: calc(100% * 3 / 4); /* 4:3 */
  }
  .dt-hero .dt-hero-media > * {
    position: absolute; inset: 10px; /* keep your padding look */
  }
}

/* 5) Avoid position: initial on mobile */
div#calc-box {
  position: static !important; /* instead of initial; behaves predictably on iOS */
}

/* 6) Mobile Safari zoom quirks (optional but helpful) */
html { -webkit-text-size-adjust: 100%; }

/* solid fallback colors (tweak to your exact brand) */
:root{
  --brand-maroon: #7a0019;
  --brand-maroon-tint: #b23a48; /* lighter red you want */
}

/* Make the ::after bar render on iOS 15 */
.dt-section h2::after{
  content:"";
  display:block;          /* ensure it boxes out */
  grid-column: 2 / -1;    /* sit in the second grid column */
  width:100%;             /* span the line */
  height:8px;
  border-radius:999px;

  /* iOS 15 fallback (no color-mix) */
  background: linear-gradient(
    90deg,
    var(--brand-maroon),
    var(--brand-maroon-tint)
  );
}

/* Keep the fancy mix for capable browsers */
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .dt-section h2::after{
    background: linear-gradient(
      90deg,
      #B30000,
      color-mix(in srgb, #880101 70%, #B30000)
    );
  }
}



/*DEFAULT STYLES*/
.calloutTitle {
    text-transform: capitalize;
}
.featureBlock.flex-item{
	    min-width: 32% !important;
}
input.wpcf7-form-control, textarea.wpcf7-form-control {
    width: 100%;
}
.lowImprint.columns.four.imprint.shortcode-copyright-bottom {
    width: 100%;
    text-align: center;
}
@media (max-width: 550px) {
.footerLogo img {
    text-align: center;
    margin: 0 auto;
}
}
@media (max-width: 480px) {
	.calloutButton {
    padding: 5px !important;
}
.calloutTitle {
    font-size: 1.3rem !important;
}
.mainMenuToggle {
    top: 0rem !important;
}
}
@media (max-width: 430px) {
.mainMenuToggle {
    top: 41px !important;
}
}
@media (max-width: 400px) {
	.calloutTitle {
    font-size: 1.1rem !important;
}
.calloutDesc {
    font-size: .8rem !important;
}
}
/* CALCULATOR */
div#calc-box {
    position: initial !important;
    bottom: 0;
    z-index: 1!important;
}

#calc-form .panel-title {
  cursor: pointer;
  font-size: 20px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1em;
}

.fullTemplateCalcBox {
  position: fixed;
  top: 0px;
  background-color: #B30000;
  right: 0px;
  left: 0px;
  z-index: 999;
  color: #fff;
  overflow: auto;
  padding: 15px 10%;
  height: 55px;
}

.calc-box-left {
  float: left;
  width: 49%;
  text-align: center;
  margin-top: -12px;
}

.calc-box-right {
  float: right;
  width: 49%;
  text-align: center;
  margin-top: -12px;
}

.panel-collapse {
  display: none;
  overflow: auto;
}

#calc-form .accordianElement {
  float: left;
  width: 50%;
  height: 50px;
  line-height: 40px;
}

#calc-form .accordianElement .accordianInput {
  width: 45px;
  float: left;
  margin-right: 10px;
}

#calc-box {
  background-color: #B30000;
  color: #fff;
  right: 0px;
  left: 0px;
  z-index: 999;
  color: #fff;
  overflow: auto;
  padding: 15px 10%;
}

.page-template-calculator .pageContent {
  padding-top: 125px;
}

.page-template-calculator .eight.columns, .page-template-calculator aside .four.columns {
  float: none;
  width: 100%;
}

#calc-form .accordianElement {
  line-height: normal;
}

.hero_image .container:before {
  content: "" !important;
}

.wpcf7 form {
    padding: 0px;
}

@media screen and (max-width: 400px) {
  #calc-form .accordianElement {
    width: 100%;
  }
}
/* END CALCUTOR */


.background_1 {
  background-color: #B30000 !important;
}

.tsg-menu-class ul.sub-menu a:hover{
  color:#000 !important;
}