/*  
Theme Name: Central Self Storage
Theme URI: http://sww.co.nz/
Description: Custom WordPress theme by Stellar Web Works
Version: 1.0
Author: Aidan Curran
Author URI: http://sww.co.nz/
*/

/* 
   Contents:
   0. Variables
   1. Basics
   2. Header
   3. Sticky Header
   4. Navigation Menus
   5. Dropdown Menu
   6. Lists
   7. Blockquotes
   8. Style classes for use in Editor
   9. Sections (Groups)
   10. Columns
   11. Cover Block, Hero, Top Header
   12. Call to action
   13. Cards
   14. Buttons
   15. Headings
   16. Seperators
   17. Swiper (slider)
   
   20. Footer
   21. Gutenberg overrides and workarounds
   22. Other

   CLAUDE: sections 30-35 (Swiper, Photo Layout, Hero Video, Breadcrumbs, Blog Styles, Comments) removed -
   not used on this site (no slider, hero video, blog or comments)

   R. Responsive Elements
   R1. Defaults
   R2. MEDIUM-WIDE SCREEN (max-width: 1200px)
   R3. MEDIUM-SMALL SCREEN (max-width: 1000px)
   R4. SMALL SCREEN (max-width: 700px)

*/

/* -------------------------------------------------------------------------------------------------------------------- 
   0. Variables
*/
:root {
   /* colour shortcuts */
   --orange: var(--wp--preset--color--orange);
   --dark: var(--wp--preset--color--dark);
   --charcoal: var(--wp--preset--color--charcoal);

   /* font size shortcuts */
   --s: var(--wp--preset--font-size--small); /* 17-22px */
   --sm: var(--wp--preset--font-size--sm-med); /* 17-22px */
   --m: var(--wp--preset--font-size--medium); /* 18-24px */
   --l: var(--wp--preset--font-size--large); /* 24-32px */
   --xl: var(--wp--preset--font-size--x-large); /* 32-48px */
   --xx: var(--wp--preset--font-size--xx-large); /* 32-64px */
   --xxx: var(--wp--preset--font-size--xxx-large); /* 36-72px */

   /* spacing shortcuts */
   --sp1: var(--wp--preset--spacing--10); /* 8-16px */
   --sp2: var(--wp--preset--spacing--20); /* 16-32px */
   --sp3: var(--wp--preset--spacing--30); /* 24-48px */
   --sp4: var(--wp--preset--spacing--40); /* 32-64px */
   --sp5: var(--wp--preset--spacing--50); /* 48-96px */
   --sp6: var(--wp--preset--spacing--60); /* 70-140px */
   --sp7: var(--wp--preset--spacing--70); /* 80-160px */

   --header-top-height: 90px;
   --header-nav-height: 60px;
   --header-height-full: calc(var(--header-top-height) + var(--header-nav-height));
   --header-height-mobile-full: var(--header-height-full)
   --sticky-height: 70px;
}


/* -------------------------------------------------------------------------------------------------------------------- 
   1. Basics
*/
/* set a reasonable absolute max width for the entire site (for massive screens) */
body {
   max-width: 3000px;
   margin-left: auto;
   margin-right: auto;
   min-width: 300px;
}
/* Set content width as percentage when max width is not in play (because styles > spacing > padding does not get applied to content inside a full width block ) */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
   width: 90%;
}
/* cancel out above rule affecting image alignment block editor */
.block-editor-block-list__layout figure {
   width: auto;
}
h3 a {
   text-decoration: none;
   color: var(--dark);
}
h3 a:hover {
   color: var(--orange);
}


/* -------------------------------------------------------------------------------------------------------------------- 
   2. Header
*/
header {
   background-color: var(--orange);
}
#header-container {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   position: relative;
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;   
   padding: 20px 0;
}
#headerleft {
   flex-grow: 0;
   flex-shrink: 1;
   position: relative;
}
#headerright {
   text-align: center;
}
header #logo {
   display: block;
   max-width: 320px;
   width: 18vw;
   min-width: 180px;
   height: auto;
   transition: all 0.25s;
}
header #logo img {
   width: 100%;
   height: auto;
   object-fit: contain;
   overflow: hidden;
   transition: all 0.2s;
}
header #logo img:hover {
   transform: scale(1.05);
}
#tagline {
   text-transform: uppercase;
}
#header-contact {
   text-align: right;
}
#header-contact-label {
   display: block;
   color: white;
   font-size: var(--sm);
   letter-spacing: 0.05em;
   margin-bottom: 8px;
   text-transform: uppercase;
}
.phone-btn {
   display: block;
   width: 200px;
   text-align: center;
   padding: 12px 0;
   margin: 10px auto;
   background-color: var(--dark);
   color: var(--white, #fff);
   text-decoration: none;
   font-size: var(--m);
   letter-spacing: 0.03em;
   border: 2px solid var(--dark);
   transition: background-color 0.25s;
}
.phone-btn:hover {
   background-color: var(--orange);
   color: #fff;
}

/* -- Nav bar (dark): main menu + mobile logo/call icon -- */
#header-nav-bar {
   background-color: var(--dark);
}


/* make header appear on top of hero video */
.has-hero-vid header {
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 10;   
}

/* --------------------------------------------------------------------------------------------------------------------
   3. Sticky Header
*/
/* The sticky class is added to the header with JS when it reaches its scroll position */
#header-sticky.sticky {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
#header-sticky.mobile-menu-open {
   height: auto;
}
/* on desktop, sticky collapses the header down to just the dark nav bar */
#header-sticky.sticky #header-top {
   display: none;
}
#header-sticky.sticky #header-container {
   height: var(--sticky-height);
}
.admin-bar #header-sticky {
   top: 32px;
}
@media screen and (max-width: 782px) {
   .admin-bar #header-sticky {
      top: 46px;
   }
}
@media screen and (max-width: 600px) {
   .admin-bar #header-sticky {
      top: 0;
   }
}



/* --------------------------------------------------------------------------------------------------------------------
   4. Navigation Menus
*/
nav {
   text-align: center;
}
#topnav {
   line-height: 1;
}
#topnav #menu-main-menu {
   display: flex;
   justify-content: center;
}
#topnav a {
   margin: 0;
   padding: 10px 24px;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   font-size: var(--sm);
   display: inline-block;
   color: #fff;
   transition: background-color 0.3s ease;
}
#topnav a:hover, 
#topnav li.current_page_item > a,
#topnav li.current-page-ancestor > a {
   background-color: var(--orange);
}
nav ul, #subnav ul, footer nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
nav li, #subnav li, footer nav li {
   display: inline;
   list-style: none;
   margin: 0;
   padding: 0;
   background: none;
}


/* --------------------------------------------------------------------------------------------------------------------
   5. Dropdown Menu
*/
#topnav ul.sub-menu { 
	display: none; 
	position: absolute; 
	top: 100%;
   left: 0;
	min-width: 180px;
	z-index: 21;
   background-color: var(--dark);
   box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
   padding: 3px 20px;
   text-align: left;
}
/* second sub level */
#topnav ul.sub-menu ul.sub-menu { 
   position: static;
   padding: 0 0 0 15px;
}
#topnav ul.sub-menu ul.sub-menu a { 
   padding: 0;
   margin: 0;
}
#topnav ul.sub-menu ul.sub-menu a::before { 
   content: " - ";
}
#topnav ul.sub-menu > li.menu-item-has-children > a {
   margin-bottom: 0;
}
#topnav ul.sub-menu li { 
   display: block;
   text-align: left;
}
#topnav ul.sub-menu.open {
	display: block;
}
#topnav ul.sub-menu a {
   opacity: 0.9;
}
#menu-main-menu > li {
	position: relative;
}
#menu-main-menu > li::before { /* to create hover buffer around menu item */
	position: absolute;
   content: '';
   width: 100%;
   height: 60px;
   top: -10px;
   left: 0;
   z-index: -1;
}
#topnav ul.sub-menu li { 
   margin:0;
}
#topnav ul.sub-menu a { 
   display: inline-block;
   padding: 2px 0;
   margin: 10px 0;
}
/*give the dropdowns an indicator arrow */
#topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
   font-family: 'icomoon';
	content: '\e90e';
   font-size: 14px;
	display: inline-block;
	padding-left: 10px;
}
.sticky #topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
   color: initial;
}
@media screen and (max-width: 700px) {
   #topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
      color: initial;
   }
      
}

/* --------------------------------------------------------------------------------------------------------------------
   6. Lists
*/
ul.is-style-fancy,
ul.is-style-checkmark {
   list-style-type: none;
   padding-left: 20px;
}
ul.is-style-fancy li,
ul.is-style-checkmark li {
   margin: 15px 0;
   padding-left: 30px;
   position: relative;
}
ul.is-style-fancy li::before,
ul.is-style-checkmark li::before {
   font-family: 'icomoon';
   content: '\ea1e';
   color: var(--orange);
   padding-right: 10px;
   position: absolute;
   left: 0;
   top: 3px;
}
ul.is-style-fancy li a {
   text-decoration: none;
}
ul.is-style-fancy li a:hover {
   text-decoration: underline;
}
ul.is-style-checkmark li {
   padding-left: 2rem;
}
ul.is-style-checkmark li::before {
   content: '\ea52';
   top: 4px;
}

/* --------------------------------------------------------------------------------------------------------------------
   7. Blockquotes
*/
blockquote.is-style-fancy {
   position: relative;
}
blockquote.is-style-fancy::before {
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(images/quotes.svg) left center no-repeat;
}
.has-dark-background-color blockquote.is-style-fancy {
   background-image: linear-gradient(to right, #191919, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0));
   color: #fff;
}
.has-dark-background-color blockquote.is-style-fancy-dark::before {
   background: url(images/quotes-dk.svg) left center no-repeat;
}


/* --------------------------------------------------------------------------------------------------------------------
   8. Style classes for use in Editor
*/
/* icons */
.fb-icon::before {
   font-family: 'icomoon';
   content: '\e904';
   display: inline-block;
   padding-right: 6px;
}
.phone-icon::before {
   font-family: 'icomoon';
   content: '\e942';
   display: inline-block;
   padding-right: 6px;
}
.mobile-icon::before {
   font-family: 'icomoon';
   content: '\e91c';
   display: inline-block;
   padding-right: 6px;
}
.mail-icon::before {
   font-family: 'icomoon';
   content: '\e903';
   display: inline-block;
   padding-right: 6px;
}
/* .plain-links */
.plain-links a {
   text-decoration: none;
   color: black;
}
.plain-links a:hover {
   color: var(--orange);
}
/* .more-link */
.more-link a {
   text-decoration: none;
   font-weight: bold;
   color: var(--orange);
}
.more-link a:hover {
   transform: scale(1.05);
   color: var(--dark);
}
.more-link a::after {
   font-family: 'icomoon';
   content: '\e90a';
   display: inline-block;
}
.allcaps {
   text-transform: uppercase;
}
figure.cover-area {
  width: 100%;
  height: 100%;
}
figure.cover-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.centered-list {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}
/* --------------------------------------------------------------------------------------------------------------------
   9. Sections (Groups)
*/

/* Apply default padding to the custom 'section' group style */
.wp-block-group.is-style-section {
   padding-top: var(--wp--preset--spacing--40);
   padding-bottom: var(--wp--preset--spacing--40);
}


/* --------------------------------------------------------------------------------------------------------------------
   10. Columns
*/
@media (max-width: 781px) {
   .wp-block-columns.is-style-2col-image-right {
        flex-direction: column-reverse;
   }
   .wp-block-columns.is-style-2col-image-right .wp-block-column > figure,
   .wp-block-columns.is-style-2col-image-left .wp-block-column > figure {
      max-width: 400px;
      margin:auto;
   }
}


/* --------------------------------------------------------------------------------------------------------------------
   11. Cover Block, Hero, Top Header
*/
.wp-block-cover.topheader {
   padding: 0;
   min-height: clamp(230px, 180px + 13vw, 430px);
}
.wp-block-cover.topheader h1 {
   font-size: var(--xl);
   color: white;
   padding: 5px 15px;
}
.wp-block-cover.topheaderplain, .topheaderplain {
   min-height: 200px;
}

/* #hero is just the header photo - it carries no overlaid heading/CTA (see .hero-tagline below) */
#hero {
   min-height: clamp(280px, 22vw, 480px);
}

/* Dark band directly under the hero photo, holding the page heading, pre-head and a CTA button side by side */
.hero-tagline {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: var(--sp3);
   padding-top: var(--wp--preset--spacing--30);
   padding-bottom: var(--wp--preset--spacing--30);
}
.hero-tagline h1 {
   margin: 0;
}
.hero-tagline .is-style-prehead {
   display: block;
   margin-top: 6px;
}


/* --------------------------------------------------------------------------------------------------------------------
   12. Call to action
*/
.wp-block-cover.cta {
   padding-top: var(--sp7);
   padding-bottom: var(--sp7);
}
.wp-block-cover.cta p {
   font-size: var(--xl);
   border-left: var(--sp3) solid var(--orange);
   padding-left: var(--sp3);
   text-shadow: 0 0 10px black; 
}


/* --------------------------------------------------------------------------------------------------------------------
   13. Cards
   Each card is a Group ("Section" style off, plain padding) with its own background colour (Dark/Orange/Charcoal)
   chosen per-instance in the editor to get the alternating look. The button inside inherits the default
   orange button style, or gets a manual colour override where it sits on the orange card - see delivery notes.
*/
.cards {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
}
.cards .wp-block-group,
.cards .wp-block-column {
   flex: 1 1 0;
   padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
   text-align: center;
   transition: transform 0.25s;
}
.cards .wp-block-group h3,
.cards .wp-block-column h3 {
   color: #fff;
   margin: 0 0 var(--wp--preset--spacing--10) 0;
}
.cards .wp-block-group p,
.cards .wp-block-column p {
   color: #fff;
}
@media screen and (max-width: 900px) {
   .cards {
      flex-direction: column;
   }
   .cards .wp-block-group,
   .cards .wp-block-column {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   14. Buttons
*/
.wp-block-button .has-dark-background-color {
   border-color: var(--dark);
}
.wp-block-button .has-dark-background-color:hover {
   background-color: var(--orange) !important;
}

/* --------------------------------------------------------------------------------------------------------------------
   15. Headings
*/

.is-style-prehead {
   text-transform: uppercase;
   letter-spacing: 0.2em;
   font-family: var(--wp--preset--font-family--body);
   font-weight: 500;
   font-size: smaller;
}

/* --------------------------------------------------------------------------------------------------------------------
   16. Seperators
*/
.wp-block-separator.is-style-narrow {
   width: 25%;
}

/* --------------------------------------------------------------------------------------------------------------------
   17. Swiper (slider)
*/
.swiper {
   width: 100%;
   height: 460px;
   min-height: 0;
}
@media screen and (max-width: 750px) {
   .swiper {
      height: 200px;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   20. Footer
*/
footer {
   background: var(--dark);
   color: #fff;
   overflow: hidden;
   font-size: var(--sm);
}
#footer-container {
   padding: var(--wp--preset--spacing--40) 0;
}
footer h4 {
   color: #fff;
   font-family: var(--wp--preset--font-family--heading);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   font-size: var(--m);
   margin: 0 0 12px 0;
}
footer h4:not(:first-child) {
   margin-top: var(--wp--preset--spacing--30);
}
footer a {
   color: #fff;
   text-decoration: underline;
}
footer a:hover {
   color: var(--orange);
}
footer p {
   margin: 0 0 1em 0;
}
.footercols {
   display: flex;
   gap: var(--sp4);
}
.footercol {
   flex-basis: 50%;
}
.footercol .contact-menu {
   list-style: none;
   margin: 0 0 1em 0;
   padding: 0;
}
.footercol .contact-menu li {
   line-height: 1.6;
}
footer #hours span {
   display: inline-block;
   width:112px;
}
#credits {
   text-align: center;
   font-size: 14px;
   color: #999;
   background-color: #000;
   padding: 10px 0;
   width: 100%;
}
#credits a {
   text-decoration: none;
   color: #999;
}
#credits a:hover {
   text-decoration: underline;
}
a.scrollup {
	width: 67px;
	height: 67px;
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: none;
	text-indent: -9999px;
	background: url('images/top.png') no-repeat;
	opacity: 0.3;
}
@media screen and (max-width: 750px) {
   .footercols {
      flex-direction: column;
      text-align: center;
   }
   .footercol .contact-menu {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   21. Gutenberg overrides and workarounds
*/
/* fix for fixed cover background issue on ipad */
@supports (-webkit-touch-callout: inherit) {
   .wp-block-cover .has-parallax {
      background-attachment: scroll !important;
   }
}
.wp-block-cover {
   overflow: hidden;
}
main .wp-block-cover .wp-block-cover__image-background {
   margin: auto;
}
.wp-block-spacer {
   margin: 0 !important;
}




/* --------------------------------------------------------------------------------------------------------------------
   22. Other
*/
/* hide arrows on Meow Lightbox */
@media screen and (max-width: 600px) {
   button.pswp__button--arrow {
      opacity: 0 !important;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   R. Responsive Elements
*/

/* R1. Defaults: computer monitors, tablets in landscape, standard and large screens (typically wider than 1024px), old browsers */
#mobile-menu-btn { display: none; }
img {
   max-width: 100%; 
   height: auto; 
}
   
/* R2. MEDIUM-WIDE SCREEN */
/* width 900px - 1200px */
@media screen and (max-width: 1200px) {


}

/* R3. MEDIUM-SMALL SCREEN */
/* width 700px - 1000px */
/* Mobile collapses the 2-row header into one slim white bar: hamburger | logo | call icon,
   with the nav dropping down full-width from the nav bar when opened. */
@media screen and (max-width: 1000px) {	
   #header-nav-bar {
      background-color: #fff;
      position: relative;
   }
   #mobile-logo {
      display: block;
      grid-column: 2;
      justify-self: center;
      max-width: 210px;
      width: 45vw;
   }
   #mobile-logo img {
      width: 100%;
      height: auto;
   }
   #mobile-call-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: 3;
      justify-self: end;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background-color: var(--dark);
      color: #fff;
      font-size: 18px;
   }
   #header-sticky.sticky + * {
      padding-top: var(--header-height-mobile-full);
   }
   #mobile-menu-btn { 
      display: inline-block;
      width: 32px;
      height: 32px;
      padding: 4px;
      cursor: pointer;
      position: absolute;
      top: -50px;
      right: 30px;
   }
   #mobile-menu-btn::after { 
      font-family: 'icomoon';
      content: '\e910';
      font-size: 32px;
      color: #000;
      display: inline-block;
   }
   header.mobile-menu-open #mobile-menu-btn::after {
      content: '\e911';
   }
   .phone-btn {
      width: 180px;
      text-align: center;
      padding: 8px 0;
      margin: 10px auto;
      background-color: var(--dark);
      font-size: var(--m);
      border: 2px solid var(--dark);
   }
   #headerright {
      margin-right: 70px;
   }
   #topnav { 
      float: none; 
      width: auto; 
      clear: both;
      position: relative;
      z-index: 9999;
   }
   #topnav a::before { 
      display: none;
   }
   #header-contact-label {
      display: none;
   }      
   #header-sticky.sticky #topnav {
      padding-top: 0;
   }   
   #topnav .menu { 
      padding-bottom: 15px;
   }   
   #topnav ul#menu-main-menu { display:none; }
   #topnav ul#menu-main-menu.open {  
     width: 100%;  
     display: block;  
     height: auto;  
     position: absolute;
     top: 100%;
     left: 0;
     background-color: var(--dark);
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
   }  
   #topnav li {  
     width: auto;  
     float: none;  
     position: relative;  
   }  
   #topnav li a {
     display: block;
     margin: 0;
     padding: 14px 20px;
     text-align: left;  
     width: 100%;  
     line-height: 1.4;
     color: #fff;
   }
   #topnav li.current_page_item > a {
      border-left-color: var(--orange);
      background-color: var(--charcoal);
   }
   #topnav ul.sub-menu { 
      display: block; 
      position: static; 
      background-color: transparent !important;
      padding: 3px 10px;
      box-shadow: none;
   }
   #topnav ul.sub-menu a {
      margin: 0 0 0 10px;
      padding: 8px 0;
   }
   #topnav ul li.menu-item-has-children > a:after {
      content: '';
      padding: 0;
   }
   .hero-tagline {
      flex-direction: column;
      align-items: flex-start;
   }

}


/* R4. SMALL SCREEN */
/* width 320px - 560px */
@media screen and (max-width: 560px) {
   #header-container {
      align-items: flex-start;
      padding: 15px 0;
   }
   #headerright {
      margin: 0;
      text-align: right;
   }
   #headerright > a:nth-of-type(2) {
      display: none;
   }
   #tagline {
      display: none;
   }
   header #logo {
      width: 18vw;
      min-width: 130px;
   }   
   a.phone-btn {
      border: 0;
      background-color: transparent;
      color: var(--dark);
      margin: 0;
      padding: 0;
      width: auto;
      margin-top: -10px;
   }
   a.phone-btn::before {
      font-family: 'icomoon';
      content: '\e942';
      display: inline-block;
      padding-right: 6px;
   }
}