/* ==========================================================================
   Storage Solutions Plus — site-wide re-theme override
   Matches the Elementor-built pages to the homepage v2 look:
     red  #C02424 | navy #0A255C | gold #f6bb06
   Safe to remove: everything below only overrides; nothing is deleted.
   Added 2026-09-17. Delivered as the "SSP Re-theme Override" plugin (v1.0.1).
   ========================================================================== */

/* 1. Remap Elementor global colors to the homepage palette.
      Same usages, exact homepage shades. */
:root{
  --e-global-color-b41e63e:#C02424;  /* was #CF202E — primary red */
  --e-global-color-4ade329:#9c1e1e;  /* was #E20214 — darker red (hovers) */
  --e-global-color-0a78ab5:#C02424;  /* was #BC2D3B — red variant */
  --e-global-color-ec25634:#9c1e1e;  /* was #A60310 — darkest red */
  --e-global-color-07414c8:#0A255C;  /* was #0D236A — navy */
  --e-global-color-93537c9:#f6bb06;  /* was #FFC107 — gold */
}

/* 2. Shared header (template 147): keep the white sticky nav bar (the red
      logo image renders correctly on white; navy would muddy it). The red
      top strip is untouched. */

/* 3. Nav links: navy on the white bar, gold on hover / current page */
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li > a,
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{
  color:#0A255C !important;
}
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li > a:hover,
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li > a:focus,
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li:hover > a,
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator,
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav > li.current-menu-item > a{
  color:#f6bb06 !important;
}
/* dropdown panel keeps white bg / dark links for readability */
.elementor-147 .elementor-element-68a4697 .elementskit-navbar-nav .elementskit-submenu-panel{
  border-top:3px solid #f6bb06;
}

/* 4. Page heroes: flat red -> homepage navy gradient.
      Tower Oaks 1096 | Boat/RV 1097 | Sherwood 1098 | FAQ 308 | Size Guide 659 */
.elementor-1096 .elementor-element-90801c7,
.elementor-1097 .elementor-element-6e20a82,
.elementor-1098 .elementor-element-c9ded4e,
.elementor-308 .elementor-element-50eae02f,
.elementor-659 .elementor-element-c0f030f{
  background:linear-gradient(135deg,#071b45 0%,#0A255C 60%,#123a75 100%) !important;
}

/* 5. Shared footer (template 149): near-black -> navy */
.elementor-149 .elementor-element-534ebfd7{
  background-color:#0A255C !important;
}

/* 6. Gold kicker accent for page hero eyebrows (subtle homepage tie-in) */
.elementor-1096 .elementor-element-90801c7 .elementor-heading-title,
.elementor-1097 .elementor-element-6e20a82 .elementor-heading-title,
.elementor-1098 .elementor-element-c9ded4e .elementor-heading-title,
.elementor-308 .elementor-element-50eae02f .elementor-heading-title,
.elementor-659 .elementor-element-c0f030f .elementor-heading-title{
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Homepage header: larger brand text + logo */
.ssp2 .site-head .brand{font-size:32px;display:flex;align-items:center;gap:12px;}
.ssp2 .site-head .brand::before{content:"";flex:0 0 auto;width:126px;height:52px;border-radius:10px;background-color:#fff;background-image:url('https://storagesolutionsplus.com/wp-content/uploads/2026/06/Final-Logo.png');background-repeat:no-repeat;background-position:center;background-size:114px auto;}
@media(max-width:760px){
/* Mobile: brand text hides (the logo pill already carries the full name);
   this frees room so the phone button is never clipped. */
.ssp2 .site-head .brand{font-size:0;gap:0;}
.ssp2 .site-head .brand::before{width:124px;height:52px;background-size:112px auto;}
.ssp2 .site-head .head-call{flex-shrink:0;padding:10px 14px;}
}

/* Size Guide price table: 4 columns are unreadable on phones —
   restyle as stacked cards with labeled rows. */
@media(max-width:760px){
.elementor-659 .elementor-element-a5fe840 thead{display:none;}
.elementor-659 .elementor-element-a5fe840 table,
.elementor-659 .elementor-element-a5fe840 tbody,
.elementor-659 .elementor-element-a5fe840 tr,
.elementor-659 .elementor-element-a5fe840 td{display:block;width:100%;box-sizing:border-box;}
.elementor-659 .elementor-element-a5fe840 tr{margin:0 0 14px;border:1px solid #e3e6ee;border-radius:12px;overflow:hidden;background:#fff;}
.elementor-659 .elementor-element-a5fe840 td{border:0;border-bottom:1px solid #eef0f5;padding:10px 14px;text-align:left;}
.elementor-659 .elementor-element-a5fe840 td:last-child{border-bottom:0;}
.elementor-659 .elementor-element-a5fe840 td:first-child{background:#0A255C;color:#fff;font-size:20px;font-weight:800;}
.elementor-659 .elementor-element-a5fe840 td:nth-child(2)::before{content:"Good for: ";font-weight:700;color:#0A255C;}
.elementor-659 .elementor-element-a5fe840 td:nth-child(3)::before{content:"Starting at: ";font-weight:700;color:#0A255C;}
}
/* Hero H1: force white on navy gradient */
.ssp2 .hero h1{color:#fff !important;}

/* Shared header promo banner: on phones stack the "RENT ONLINE NOW" message
   above the Reserve/Rent buttons so both stay fully visible (no clipping). */
@media(max-width:760px){
.elementor-147 .elementor-element-b6129f6{flex-wrap:wrap;}
.elementor-147 .elementor-element-3c3f5e5,
.elementor-147 .elementor-element-6717b52{width:100%;}
}