/*  
Theme Name: Base Hybrid Theme
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. Home Page: Numbered Steps (block style for core/columns)
   18. Home Page: Service Cards (block style for core/columns)
   19. Home Page: Supplier Logos (block style for core/columns)
   20. Home Page: Section, Curve Top/Bottom (block styles for core/group)
   21. Home Page: Contact Icon Circle (block style for core/paragraph)
   
   22. Footer
   23. Gutenberg overrides and workarounds
   24. Other

   REMOVE IF NOT USED:
   30. Swiper (slider)
   31. Photo Layout
   32. Hero Video
   33. Breadcrumbs
   34. Blog Styles
   35. 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 */
   --dark: var(--wp--preset--color--dark);
   --orange: var(--wp--preset--color--orange);
   --tan: var(--wp--preset--color--tan);
   --sage: var(--wp--preset--color--sage);
   --offwhite: var(--wp--preset--color--offwhite);
   --light-grey: var(--wp--preset--color--light-grey);
   --grey: var(--wp--preset--color--grey);
   --dark-grey: var(--wp--preset--color--dark-grey);

   /* font size shortcuts */
   --xs: var(--wp--preset--font-size--x-small); /* 15-17px */
   --sm: var(--wp--preset--font-size--small); /* 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 */
   --xw: var(--wp--preset--font-size--xw-large); /* 16-64px */

   /* 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-height-full: 190px; /* CLAUDE: increased — was 150px, too shallow for the header content and part of what was clipping the logo */
   --header-height-mobile-full: 100px;
   --sticky-height: 80px;
   --sww-curve-h: clamp(150px, 12vw, 250px);
}


/* -------------------------------------------------------------------------------------------------------------------- 
   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(--sage);
}

/* link colours on darker backgrounds */
.has-dark-background-color a,
.has-tan-background-color a,
.has-orange-background-color a,
.has-sage-background-color a {
   color: white;
}



/* -------------------------------------------------------------------------------------------------------------------- 
   2. Header
*/
header {
   background-color: var(--dark);
   padding: 0;
}
#header-container {
   height: var(--header-height-full);
   display: flex;
   justify-content: space-between;
   align-items: center;
}
#headerleft {
   flex-grow: 0;
   flex-shrink: 1;
   position: relative;
   flex-basis: 400px;
}
#headerright {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--sp3);
}
header #logo {
   display: block;
   max-width: 400px;
   width: auto; /* CLAUDE: was width:20vw with height:auto, which combined with the logo's ~1.6:1 aspect ratio made it render TALLER than the header at most viewport widths — clipped. Now capped by height instead, so it can never exceed the header. */
   min-width: 0;
   transition: all 0.25s;
}
header #logo img {
   width: auto;
   height: 100%;
   max-width: 100%;
   object-fit: contain;
   transition: all 0.2s;
}
header #logo img:hover {
   transform: scale(1.05);
}
/* CLAUDE: header social icons, added to match reference site's header layout (phone number moved to the welcome section instead) */
.socials {
   display: flex;
   align-items: center;
   gap: var(--sp2);
}
.socials a {
   color: white !important;
   width: 2.2rem;
   height: 2.2rem;
   box-shadow: 0px 0px 0px 2px white inset;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--m);
   line-height: 1;
   transition: all 0.25s;
   text-decoration: none;
   padding: 5px;
}
.socials a .icon-facebook::before,
.socials a .icon-instagram::before {
   color: white !important;
}
.socials a:hover .icon-facebook::before,
.socials a:hover .icon-instagram::before {
   color: var(--dark) !important;
}
.socials a:hover {
   color: var(--dark) !important;
   background-color: white;
}
/* 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;
   /*height: var(--sticky-height);*/
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
   background-color: var(--dark);
}
#header-sticky.sticky a {
   color: white;
}
#header-sticky.mobile-menu-open {
   /*position: static;*/
   height: auto;
}
#header-sticky.sticky #header-container {
   max-height: var(--sticky-height);
}
#header-sticky.mobile-menu-open #header-container {
   max-height: var(--header-height-mobile-full);
}
.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;
   }
}
#header-sticky.sticky #logo {
   width: 130px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
/* this should be equal to the initial header height */
#header-sticky.sticky + * {
   XXXpadding-top: var(--header-height-full);
}


/* --------------------------------------------------------------------------------------------------------------------
   4. Navigation Menus
*/
nav {
   text-align: center;
}
#topnav {
   float: right;
   clear: right;
   line-height: 30px;
}
#topnav a {
   margin: 0 var(--sp2);
   padding: 5px 0;
   text-decoration:none;
   font-weight: normal;
   font-size: var(-l);
   display: inline-block;
   color: white;
   transition: all 0.4s ease;
}
#topnav a:hover, 
#topnav li.current_page_item > a,
#topnav li.current-page-ancestor > a {
   color: var(--orange);
}
#topnav a {
   position: relative;
}
#topnav a::after {
   height: 1px;
   position: absolute;
   content: '';
   transition: all 0.4s ease;
   background-color: var(--orange);
   width: 0;
   bottom: 0;
   left: 0;
}
#topnav a:hover::after,
#topnav .current_page_item > a::after,
#topnav .current-page-ancestor > a::after {
   width: 100%;
}
#topnav li:first-child a {
   padding-left: 0;
   margin-left: 0;
}
#topnav li:last-child a {
   padding-right: 0;
   margin-right: 0;
}
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: 30px;
   left: 0;
	min-width: 150px;
	z-index: 21;
   background-color: white;
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
   padding: 3px 20px;
}
.sticky #topnav ul.sub-menu { 
   background-color: rgba(250,250,250,0.9);
}
/* 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;
   color: var(--dark); 
}
#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;
}

/* --------------------------------------------------------------------------------------------------------------------
   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: var(--light-grey);
}
.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(--sage);
}
.more-link a:hover {
   transform: scale(1.05);
   color: var(--orange);
}
.more-link a::after {
   font-family: 'icomoon';
   content: '\e90a';
   display: inline-block;
}
.allcaps {
   text-transform: uppercase;
}

/* --------------------------------------------------------------------------------------------------------------------
   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 {
   min-height: 85vh;
}
#hero .wp-block-cover__inner-container {
   width: 90%;
   max-width: var(--wp--style--global--content-size);
}
#hero h1 {
   font-size: clamp(2.75rem, 1.8rem + 3.8vw, 4.75rem); /* CLAUDE: nudged up further — still smaller than the reference by eye */
   line-height: 1.25;
   text-shadow:
      0 2px 10px rgba(0, 0, 0, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.2);   
}
#hero p {
   max-width: 36rem;
   color: #fffc !important;
}


/* --------------------------------------------------------------------------------------------------------------------
   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
*/
.cards .wp-block-group {
   background-color: var(--dark);
   padding: 0;
}
.cards .wp-block-group h3,
.cards .wp-block-group h3 a {
   color: white;
   margin: 0;
   padding: var(--sp1);
   font-size: var(--m);
}
.cards .wp-block-group {
   position: relative;
   transition: all 0.25s;
}
.cards .wp-block-group h3 a::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
.cards .wp-block-group:hover {
   scale: 1.015;
   background-color: var(--orange);
}
@media screen and (max-width: 900px) {
   .cards .wp-block-group {
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   14. Buttons
*/

/* --------------------------------------------------------------------------------------------------------------------
   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;
}

h2 mark {
   text-decoration: underline;
}


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

/* --------------------------------------------------------------------------------------------------------------------
   17. Home Page: Numbered Steps (block style for core/columns)
       CLAUDE: registered via functions.php as "Numbered Steps" — select it from the columns block's own
       Styles panel. Overrides the block's normal single-row flex layout with a responsive CSS Grid (breakpoints
       below), since a native Columns block can't do a reflowing multi-row grid on its own. Put all 10 steps in
       ONE Columns block (not two rows of 5) so the grid can wrap them correctly at every width. Numbers are
       typed directly into each heading's text (e.g. "1. Contact Us") rather than auto-generated, so they read
       correctly as real content.
*/
.is-style-numbered-steps {
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: var(--sp2) !important;
}
@media screen and (min-width: 761px) {
   .is-style-numbered-steps {
      grid-template-columns: repeat(2, 1fr) !important;
   }
}
@media screen and (min-width: 1001px) {
   .is-style-numbered-steps {
      grid-template-columns: repeat(3, 1fr) !important;
   }
}
@media screen and (min-width: 1101px) {
   .is-style-numbered-steps {
      grid-template-columns: repeat(4, 1fr) !important;
   }
}
@media screen and (min-width: 1201px) {
   .is-style-numbered-steps {
      grid-template-columns: repeat(5, 1fr) !important;
   }
}
.is-style-numbered-steps .wp-block-column {
   background-color: var(--offwhite) !important;
   padding: var(--sp2) !important;
   text-align: center !important;
   flex-basis: auto !important; /* CLAUDE: neutralise WP's own inline flex-basis percentage on each column, which has no effect under grid but is removed explicitly for clarity */
   width: auto !important;
}
.is-style-numbered-steps h3 {
   color: var(--tan);
   font-size: var(--m) !important;
   margin-top: 0 !important;
   margin-bottom: var(--sp1) !important;
}
.is-style-numbered-steps p {
   font-size: var(--xs) !important;
   margin: 0 !important;
}

/* --------------------------------------------------------------------------------------------------------------------
   18. Home Page: Service Cards (block style for core/columns)
       CLAUDE: registered via functions.php as "Service Cards" — arched image top, centred heading/text, and a
       button that aligns to the same baseline across all cards in a row regardless of text length (matches the
       reference site's borderless services layout).
       Expected structure inside each column: an Image block, then a Heading, Paragraph, and Buttons block.
       Use TWO separate "Service Cards"-styled Columns blocks (3 columns each) stacked one after another for a
       3x2 grid — a single 6-column Columns block only ever makes one row.
*/
.is-style-service-cards {
   align-items: stretch; /* CLAUDE: makes every column in the row match the tallest one, so buttons align even when paragraph lengths differ */
}
.is-style-service-cards .wp-block-column {
   text-align: center;
   display: flex;
   flex-direction: column;
   background-color: white;
   padding: var(--sp3);
}
.is-style-service-cards .wp-block-column figure.wp-block-image {
   margin: 0 0 var(--sp2);
}
.is-style-service-cards .wp-block-column figure.wp-block-image img {
   width: 100%;
   max-width: 380px;
   aspect-ratio: 1.5;
   object-fit: cover;
   border-radius: 300px 300px;
}
.is-style-service-cards h3,
.is-style-service-cards h4 {
   margin-top: 0;
}
.is-style-service-cards p {
   flex-grow: 1; /* CLAUDE: pushes the button to the same vertical position across all cards, regardless of how much text is above it */
}
.is-style-service-cards .wp-block-buttons {
   justify-content: center;
   margin-top: var(--sp1);
   margin-bottom: 0;
}

/* --------------------------------------------------------------------------------------------------------------------
   19. Home Page: Supplier Logos (block style for core/columns)
       CLAUDE: logos sit directly on the section background, no card/box wrapper (matches the reference site —
       most supplier logos already have their own coloured backing built into the file)
*/
.is-style-supplier-logos .wp-block-column {
   display: flex;
   align-items: center;
   justify-content: center;
}
.is-style-supplier-logos .wp-block-column figure {
   margin: 0;
   transition: transform 0.25s;
}
.is-style-supplier-logos .wp-block-column figure:hover {
   transform: translateY(-2px);
}
.is-style-supplier-logos .wp-block-column img {
   max-height: 50px;
   width: auto;
}

.logo-grid {
   max-width: 800px;
}
.logo-grid img {
   border-radius: 20px;
}


/* --------------------------------------------------------------------------------------------------------------------
   20. Curved Section Dividers
       

       (a) PHOTO-REVEAL curves (one side must show the neighbouring Cover block's photo): a transparent/filled
           SVG pair, where the FILL sits on whichever side is closer to this section's own actual content, and
           TRANSPARENT sits on the side closer to the neighbour (confirmed against the two dividers that were
           already rendering correctly, rather than re-derived from theory each time). Divider 1 (Welcome's own
           top, into the hero photo) and divider 4 (Process Steps' own top, into the quote-banner photo) use
           "transparent above / filled below". Divider 3 (Services' own bottom, into the quote-banner photo)
           needs the mirror of that -- "filled above / transparent below" -- since here the solid colour (grey)
           is the one on top.

       (b) SOLID-TO-SOLID curves (both sides are known, flat colours, no photo involved): a single FULLY OPAQUE
           two-colour SVG -- both fills baked directly into the image, meeting at the wave line, with the orange
           stroke drawn on top. Nothing here depends on which element happens to paint above which, since there's
           no transparency for a stacking order to affect. Used for divider 2 (Welcome's own bottom, dark/grey),
           and divider 5 & 6 (Testimonials' own top/bottom, white/orange and orange/white).

*/
.wp-block-group[class*="curve-top"],
.wp-block-group[class*="curve-bottom"] {
   position: relative !important;
   padding-top: calc(var(--sww-curve-h) + var(--sp3)) !important;
   padding-bottom: calc(var(--sww-curve-h) + var(--sp3)) !important;
}
.wp-block-group[class*="curve-bottom"] + .wp-block-group,
.wp-block-group[class*="curve-top-bottom"] + .wp-block-group {
   padding-top: calc(var(--sww-curve-h) + var(--sp3)) !important;
}
.is-style-curve-top-bottom-dark {
   margin-top: calc(-1 * var(--sww-curve-h)) !important;
   margin-bottom: calc(-1 * var(--sww-curve-h)) !important;
}
.is-style-curve-bottom-grey {
   margin-bottom: calc(-1 * var(--sww-curve-h)) !important;
}
.is-style-curve-top-white {
   margin-top: calc(-1 * var(--sww-curve-h)) !important;
}
.is-style-curve-top-bottom-tan,
.is-style-curve-top-bottom-sage {
   margin-top: calc(-1 * var(--sww-curve-h)) !important;
   margin-bottom: calc(-1 * var(--sww-curve-h)) !important;
}
.is-style-curve-top-bottom-dark::before,
.is-style-curve-top-bottom-dark::after,
.is-style-curve-bottom-grey::after,
.is-style-curve-top-white::before,
.is-style-curve-top-bottom-tan::before,
.is-style-curve-top-bottom-tan::after,
.is-style-curve-top-dark-tan::before,
.is-style-curve-top-bottom-sage::before,
.is-style-curve-top-bottom-sage::after {
   content: '' !important;
   display: block !important;
   position: absolute !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   height: var(--sww-curve-h) !important;
   background-repeat: no-repeat !important;
   background-size: 100% 100% !important;
   pointer-events: none !important;
   z-index: 20 !important;
}
.is-style-curve-top-bottom-dark::after,
.is-style-curve-bottom-grey::after,
.is-style-curve-top-bottom-tan::after,
.is-style-curve-top-bottom-sage::after {
   bottom: 0 !important;
   top: auto !important;
}
.is-style-curve-top-bottom-dark::before,
.is-style-curve-top-white::before,
.is-style-curve-top-bottom-tan::before,
.is-style-curve-top-bottom-sage::before,
.is-style-curve-top-dark-tan::before {
   top: 0 !important;
   bottom: auto !important;
}

/* Divider colours in background image data:
 - fill='%232c2d2d' - last 6 chars is the hex code
 - stroke='%23b88e53' - last 6 chars is the hex code
tan: b88e53
orange: f36b24
dark: 2c2d2d
sage: 7d9285
off-white: f6f4f1
*/
/* Divider 1 -- transparent above tan stroke, dark below (e.g. Welcome's own top, into hero) */
.is-style-curve-top-bottom-dark::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%232c2d2d'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 2 -- dark above tan stroke, off-white below (e.g. Welcome's own bottom, into Services) */
.is-style-curve-top-bottom-dark::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%232c2d2d'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23f6f4f1'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 3 -- off-white above tan stroke, transparent below (e.g. Services' own bottom, into quote-banner photo) */
.is-style-curve-bottom-grey::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%23f6f4f1'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 4 -- transparent above tan stroke, white below (e.g. Process Steps' own top, into quote-banner photo */
.is-style-curve-top-white::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23ffffff'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 5 -- white above orange stroke, tan (b88e53) below (e.g. Testimonials' own top, into Process Steps) */
.is-style-curve-top-bottom-tan::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%23ffffff'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23b88e53'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 6 -- tan above tan stroke, white below (e.g. Testimonials' own bottom, into Contact CTA) */
.is-style-curve-top-bottom-tan::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%23b88e53'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23ffffff'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 7 -- dark above orange stroke, tan below (e.g. Footer into credits)*/
.is-style-curve-top-dark-tan::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%232c2d2d'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23b88e53'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* Divider 8 -- white above tan stroke, sage (7d9285) below */
.is-style-curve-top-bottom-sage::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%23ffffff'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%237d9285'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='0' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* Divider 9 -- sage above tan stroke, white below */
.is-style-curve-top-bottom-sage::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%237d9285'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23ffffff'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='0' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}



/* --------------------------------------------------------------------------------------------------------------------
   21. Home Page: Contact Icon Circle (block style for core/paragraph)
       CLAUDE: registered via functions.php as "Icon Circle" — pick it on a Paragraph block containing just an
       icon span (e.g. <span class="icon-phone"></span>), used in the Contact CTA section.
*/
.is-style-icon-circle {
   flex-shrink: 0;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background-color: var(--orange);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 6rem;
   margin: 0;
}

/* --------------------------------------------------------------------------------------------------------------------
   22. Footer
*/
footer {
   background: var(--dark);
   color: #fff;
   font-size: var(--sm);
}
#footer-top-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--sp3);
   max-width: 1200px;
}
#footerlogo img {
   max-width: 500px;
   height: auto;
}
#footer-contact {
   text-align: right;
}
.footer-contact-line {
   font-size: var(--m);
   margin: 0 0 var(--sp2);
}
.footer-contact-line a {
   color: white;
   text-decoration: none;
}
.footer-contact-line a:hover {
   text-decoration: underline;
}
.socials-label {
   font-family: var(--wp--preset--font-family--heading);
   text-transform: uppercase;
   font-size: var(--m);
   margin: 0 0 var(--sp1);
}
footer .socials {
   justify-content: flex-end;
}
@media screen and (max-width: 700px) {
   #footer-top-row {
      flex-direction: column;
      text-align: center;
   }
   #footer-contact {
      text-align: center;
   }
   footer .socials {
      justify-content: center;
   }
}

/* Credits / bottom bar -- one continuous orange region, deep curved top edge */
#credits {
   position: relative;
   text-align: center;
   color: white;
   background-color: var(--tan);
   padding: calc(var(--sp6) + 20px) 0 var(--sp3);
   width: 100%;
   padding-top: var(--sww-curve-h);   
}
#credits::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   width: 100%;
   height: clamp(80px, 10vw, 170px);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,50 C900,115 300,-15 0,50 Z' fill='%232c2d2d'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50 L1200,100 L0,100 Z' fill='%23b88e53'/%3E%3Cpath d='M0,50 C300,-15 900,115 1200,50' fill='none' stroke='%23b88e53' stroke-width='6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");*/
}

#footer-service-area {
   font-size: 14px;
   margin: 0 0 var(--sp2);
}
#footer-menu-nav ul {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--sp3);
   list-style: none;
   margin: 0 0 var(--sp2);
   padding: 0;
}
#footer-menu-nav a {
   font-size: 14px;
   text-decoration: none;
   color: white;
}
#footer-menu-nav a:hover {
   text-decoration: underline;
}
#footer-copyright {
   font-size: 12px;
   opacity: 0.85;
   margin: 0;
}
#credits a {
   text-decoration: none;
   color: white !important;
}
#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;
   }
   .footercols ul {
      width: fit-content;
      margin: auto;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   23. 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;
}




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

/* ----------------------------------------- REMOVE THE BELOW STYLES IF NOT USED ------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------
   30. Swiper (slider)
       Remove if not used
*/
:root {
   --swiper-theme-color: white;
}
.swiper {
   width: 100%;
   height: calc(90vh - 186px);
   max-height: 2000px; /* set max height for massive screens */
   position: relative;
   min-height: calc(100vw / 3);
}
.swiper-wrapper .swiper-slide>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
}
.slider-overlay {
   position: absolute;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 8;
   background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.3));
}
.swiper-button-prev,
.swiper-button-next {
   outline: none;
   opacity: 0.5;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
   opacity: 1;
}
.slider-overlay .overlay-inner {
   width: 90%;
   height: auto;
   max-width: var(--wp--style--global--content-size);
   padding: 80px 0;
   color: white;
}
.slider-overlay .overlay-inner .lazyblock-inner-blocks {
   width: fit-content;
   /*background-color: rgba(0, 0, 0, 0.2);*/
   padding: 0;
}
.slider-overlay .overlay-inner .lazyblock-inner-blocks .wp-block-buttons {
   margin-bottom: 0;
}
.slider-overlay p {
   color: white;
   font-size: 24px;
   margin-top: 26px;
   margin-bottom: 26px;   
}
.slider-overlay h3 {
   color: white;
}
.slider-overlay h2 {
   font-size: var(--xw);
   color: white;
   border-left: var(--sp3) solid var(--orange);
   padding-left: var(--sp3);
   text-shadow: 0 0 10px black;
}
.slider-overlay .wp-element-button {
   background-color: white;
   color: var(--dark);
   margin-left: calc(var(--sp3) + var(--sp3));
   width: auto;
}
@media (max-width: 1400px) {
   .swiper-button-prev,
   .swiper-button-next {
      scale: 0.7;
   }     
}
@media (max-width: 600px) {
   .swiper {
      height: 50vh;
      max-height: 166vw;
      position: relative;
      min-height: calc(100vw / 3);
   }
   .slider-overlay {
      /*align-items: center;*/
   }
   .swiper-button-prev,
   .swiper-button-next {
      display: none;
   }   
}

/* --------------------------------------------------------------------------------------------------------------------
   31. Photo Layout
       using grid layout for photos, e.g. Tasman Carter
       Remove if not used
*/
.photo-layout .wp-block-image {
   height: 100%;
}
.photo-layout .wp-block-image img {
   height: 100%;
   object-fit: cover;
}

/* photo section at bottom of home page */
.photo-section .photo-layout {
   max-width: 2800px;
   margin-left: auto;
   margin-right: auto;
}
@media screen and (max-width: 1400px) {
   .photo-section .photo-layout .wp-block-group.is-layout-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .photo-section .photo-layout .wp-block-group.is-layout-grid .stack2 {
      display: none;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   32. Hero Video
*/
#hero {
   padding: 0;
   position: relative;
   z-index: 1;
   background-color: var(--dark); /* CLAUDE: fixed undefined --dark1 var from base theme */
}
#hero .video-wrapper {
   position: relative;
   aspect-ratio: 16/9;
   min-height: 200px;
   max-height: 100vh;
   overflow: hidden;
   width: 100%;

   /* alt image */
   background: url('images/static.jpg') no-repeat;
   background-size: cover;    
}
#hero .video-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 0;
}
.video-controls {
   position: absolute;
   bottom: 5%;
   right: 5%;
   z-index: 3;
   color: white;
   font-size: 50px;
}
.video-controls div {
   color: white;
   text-decoration: none;
   background-color: rgba(255,255,255,0.3);
   border-radius: 999px;
   width: 100px;
   height: 100px;
   display: block;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
}
.video-controls div:hover {
   background-color: rgba(255,255,255,0.4);
   transform: scale(1.2);
}
#vid-overlay-opacity,
#overlay-opacity {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   background-color: rgba(0,0,0,0.3);
}
#header-overlay-text {
   position: absolute;
   left: 0;
   right: 0;
   margin:auto;
   width: 50%;
   max-width: 1200px;
   height: auto;
   bottom: 10%;
   color: white;
   z-index: 2;
}

@media screen and (max-width: 900px) {
   .video #header-overlay-text {
      width: 75%;
   }
   .video-controls {
      font-size: 30px;
   }
   .video-controls div {
      width: 60px;
      height: 60px;
   }     
}
@media screen and (max-width: 700px) {
   .has-hero-vid header {
      position: static;
      /*background-color: var(--dark);*/
   }
   #hero .video-wrapper iframe {
      height: 100%;
      min-height: 200px;
   }
   #vid-overlay-opacity {
      display: none;
   }
   .video #header-overlay-text {
      position: static;
      width: 80%;
      padding-top: 20px;
   }
}


/* --------------------------------------------------------------------------------------------------------------------
   33. Breadcrumbs
       Remove if not used
*/
.breadcrumbs {
   font-size: var(--xs);
   background-color: var(--offwhite);
   padding: 7px 0;
}
.breadcrumbs a {
   text-decoration: none;
}


/* --------------------------------------------------------------------------------------------------------------------
   34. Blog Styles
       Remove if not used
*/
#blog-posts,
#single-blog-post,
#category-heading {
   padding-top: var(--sp4);
}
#featured-image {
   height: 500px;
   max-height: 50vh;
   overflow: hidden;
}
#featured-image img {
   object-fit: cover;
   object-position: 50% 20%;
   height: 100% !important;
   width: 100%;
}
.postmeta {
   color: #808080;
   font-size: 16px;
   margin: 2px 0;
}
div.postmeta {
   margin-top: 50px;
   padding-top: 20px;
   border-top: 1px solid #ccc;
}
.postdate {
   color: #808080;
   font-size: 16px;
}
/* blog categories list */
#blog-categories {
   background-color: #f9f9f9;
   padding: 30px 0;
}
#blog-categories ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#blog-categories li {
   display: inline;
   list-style: none;
   margin: 0 20px 0 0;
   padding: 0;
   background: none;
   color: #ccc;
}
#blog-categories li.current-cat a {
   font-weight: bold;
}
#blog-posts article {
   position: relative;
   display: flex;
   min-height: 360px;
   margin-bottom: 50px;
   box-shadow: 0 6px 24px rgba(11, 11, 11, 0.05);
   border: 1px solid #eeeeef;
   border-radius: 4px;
}
#blog-posts article .article-image {
   flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
}
#blog-posts article .article-summary {
   flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
   padding: 30px;
   align-self: center;
}
#blog-posts .article-summary h2 {
   font-size: var(--l);
   font-weight: bold;
   margin-top: 0;
   transition: all 0.3s;
}
#blog-posts .article-summary h2 a {
   text-decoration: none;
   color: black;
}
#blog-posts .article-summary h2 a:hover {
   color: var(--orange);
}
#blog-posts article .article-image img {
   object-fit: cover;
   height: 100%;
   width: 100%;
   transition: all 300ms linear 0ms;
}
#blog-posts article .article-image img:hover {
   transform: scale(1.1);
}
#blog-posts article::after {
   content: "";
   display: block;
   clear: both;
}
@media screen and (max-width: 900px) {
   #blog-posts article {
      flex-direction: column;
   }
   #blog-posts article .article-image {
      aspect-ratio: 120/63;
   }
}
@media screen and (max-width: 500px) {
   #blog-posts .article-summary h2 {
      font-size: 22px;
   }
}
div.back {
   margin: 30px 0;
   text-align: center;
}
div.back a {
   font-size: 24px;
   text-decoration: none;
}
div.back a::before {
   font-family: 'icomoon';
   content: '\e90d';
   padding-right: 5px;
}

/* --------------------------------------------------------------------------------------------------------------------
   35. Comments
       Remove if not used
*/
#comments {
   margin-top: 100px;
   color: #333;
   background: #f3f3f3;
   padding: 10px 20px;
   clear:both;
}
#comments .navigation {
	padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0;
}
h3#comments-title {
	padding-bottom: 24px;
}
.commentlist {
	list-style: none;
	margin: 0;
   padding: 0;
}
.commentlist li.comment {
	border-bottom: 1px solid #e7e7e7;
	line-height: 24px;
	margin: 0 0 24px 0;
	padding: 0 0 0 56px;
	position: relative;
}
.commentlist li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
	margin-bottom: 18px;
}
#comments .comment-body p:last-child {
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
	margin-bottom: 24px;
}
.commentlist ol {
	list-style: decimal;
}
.commentlist .avatar {
	position: absolute;
	top: 4px;
	left: 0;
}
.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
}
.comment-author .says {
	font-style: italic;
}
.comment-meta {
	font-size: 14px;
	margin: 0 0 18px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
	text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
	color: #ff4b33;
}
.reply {
	font-size: 14px;
	padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
	color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
	color: #ff4b33;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li {
	border: none;
	margin: 0;
}
.nopassword,
.nocomments {
	display: none;
}
#comments .pingback {
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
	margin-top: -6px;
}
#comments .pingback p {
	color: #888;
	display: block;
	font-size: 14px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url {
	font-size: 14px;
	font-style: italic;
}
/* Comments form */
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}
#respond p {
	margin: 0;
}
#respond .comment-notes {
	margin-bottom: 1em;
   font-style: italic;
   color: #999;
}
.form-allowed-tags {
	line-height: 1em;
}
.children #respond {
	margin: 0 48px 0 0;
}
h3#reply-title {
	margin: 18px 0;
}
#comments-list #respond {
	margin: 0 0 18px 0;
}
#comments-list ul #respond {
	margin: 0;
}
#cancel-comment-reply-link {
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
}
#respond .required {
	display:none;
}
#respond label {
	color: #888;
	font-size: 14px;
   width: 80px;
   display: block;
   float: left;
   text-align: right;
   padding-right: 10px;
}
#respond input {
	margin: 0 0 9px;
	width: 500px;
}
#respond textarea {
	width: 500px;
}
#respond .form-allowed-tags {
	color: #888;
	font-size: 14px;
	line-height: 18px;
}
#respond .form-allowed-tags code {
	font-size: 14px;
}
#respond .form-submit {
	margin: 12px 0;
}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
}





/* --------------------------------------------------------------------------------------------------------------------
   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 */
@media screen and (max-width: 1000px) {	
   header #header-container {
      flex-direction: column;
      align-items: stretch;
      height: var(--header-height-mobile-full);
   }
   #headerleft {
      height: var(--header-height-mobile-full);
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      flex-basis: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
   }
   #headerleft #logo{
      display: flex;
      align-items: center;
      height: 100%;
   }
   #topnav {
      background-color: #fff;
   }
   #header-sticky.sticky #headerleft {
      height: var(--sticky-height);
   }
   #header-sticky.sticky + * {
      padding-top: var(--header-height-mobile-full);
   }
   #header-container {
      width: 100%;
   }
   #mobile-menu-btn { 
      display: inline-block;
      width: 32px;
      height: 32px;
      padding: 4px;
      cursor: pointer;
      position: absolute;
      top: -60px;
      right: 30px;
   }
   #mobile-menu-btn::after { 
      font-family: 'icomoon';
      content: '\e910';
      font-size: 36px;
      color: white;
      display: inline-block;
   }
   header.mobile-menu-open #mobile-menu-btn::after {
      content: '\e911';
   }
   #headerright {
      display: block;
   }   
   #topnav { 
      float: none; 
      width: auto; 
      clear: both;
      position: relative;
      z-index: 9999;
   }
   #topnav a {
      color: var(--dark);
   }
   #topnav a::before { 
      display: none;
   }
   header .socials {
      display: none;
   }      
   #header-sticky.sticky #topnav {
      padding-top: 0;
   }   
   #topnav .menu { 
      padding-bottom: 15px;
   }
   #topnav ul { display:none; }
   #topnav ul#menu-main-menu.open {  
     width: 100%;  
     display: block;  
     height: auto;  
     padding-top: 0;
     margin-top:0;
     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: 6px 0px;
     text-align: left;  
     width: 100%;  
     text-indent: 25px;  
     line-height: 30px;
     border-left: 15px solid rgba(255,255,255,0);
   }
   #topnav li.current_page_item > a {
      border-left: 15px solid var(--orange);
   }
   #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: 0;
   }
   #topnav ul li.menu-item-has-children > a:after {
      content: '';
      padding: 0;
   }

}


/* R4. SMALL SCREEN */
/* width 320px - 700px */
@media screen and (max-width: 700px) {	

}