/*
Theme Name: Thordis (Child Theme of Hello Elementor)
Template: hello-elementor
Description: Child theme for Thordis based on Hello Elementor.
Version: 1.0
Author: Bunch Web Development
Author URI: https://bunchwebdevelopment.com/
Text Domain: thordis
@package thordis
*/


/* Text-level semantics
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: #080808;
}
a:hover, a:active {
  color: #CCC;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
  outline: 0;
}

/* Menu Style (v1) */

/* Hamburger Icon */
.hamburger-icon {
  cursor: pointer;
  width: 40px; /* Icon width */
  height: 25px; /* Icon height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative; /* Ensure it's positioned correctly */
}

.hamburger-icon span {
  display: block;
  height: 4px; /* Line thickness */
  width: 100%; /* Line width */
  background-color: #333; /* Line color */
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Morphing Icon into 'X' */
.hamburger-icon.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.hamburger-icon.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Target Container */
.target-container {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff; /* Text color */
  box-sizing: border-box; /* Include padding in box size */
  z-index: 100; /* Above other content but below the icon */
  visibility: hidden;
}

.target-container.active {
  display: block;
  opacity: 1;
  visibility: visible;
}


/* Menu Style (v2) */

/* Mobile */

/* Hamburger Icon Mobile */
.hamburger-icon-mobile {
  cursor: pointer;
  width: 40px; /* Icon width */
  height: 25px; /* Icon height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative; /* Ensure it's positioned correctly */
}

.hamburger-icon-mobile span {
  display: block;
  height: 4px; /* Line thickness */
  width: 100%; /* Line width */
  background-color: #333; /* Line color */
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Morphing Icon into 'X' */
.hamburger-icon-mobile.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.hamburger-icon-mobile.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon-mobile.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Target Container */
.target-container-mobile {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff; /* Text color */
  box-sizing: border-box; /* Include padding in box size */
  z-index: 100; /* Above other content but below the icon */
  visibility: hidden;
}

.target-container-mobile.active {
  display: block;
  opacity: 1;
  visibility: visible;
}


/* Menu Style (v3) */


/* Hamburger Icon Mobile */
.hamburger-icon-mobile-button {
  cursor: pointer;
  width: 40px; /* Icon width */
  height: 25px; /* Icon height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 9999; /* Ensure it's on top of everything else */
}

.hamburger-icon-mobile-button span {
  display: block;
  height: 4px; /* Line thickness */
  width: 100%; /* Line width */
  background-color: #333; /* Line color */
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Morphing Icon into 'X' */
.hamburger-icon-mobile-button.menu-open span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.hamburger-icon-mobile-button.menu-open span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon-mobile-button.menu-open span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Custom Menu Slide-in Container - parent */
.custom-menu-slide-in-container {
  position:fixed !important;
  top: 45px !important;
  right:0 !important;
  width: 100% !important; 
  /* border:1px solid red !important; */
  /* background-color: pink !important; */
  z-index: 9997 !important;
}

/* Custom Menu Slide-in - child */
.custom-menu-slide-in {
  position:fixed !important;
  top: 45px !important;
  right: -200% !important;
  /* border:1px solid green !important; */
  /* background-color: blue !important; */
  transition: right 0.3s ease !important; 
  z-index: 9998 !important;
}

/* Slide-in when menu is open */
.custom-menu-slide-in.menu-open {
   right:0 !important;

}


/* also be aware of very local styles working on menu within elementor container manager 

#overide menu position 

.elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: static !important;
    z-index: 9997;
}

#overide menu margin 

.elementor-nav-menu--dropdown.elementor-nav-menu__container{
    margin-top:0 !important;
}

*/
















/* work image rollover */

.work-image-rollover {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.work-image-rollover img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.work-image-rollover img:first-child {
    position: relative;
    opacity: 1;
}

/* custom swiper slideshow */

.custom-slideshow {
  width: 100%;
  height: 100vh; /* Adjust height as needed */
  position: relative; /* For pagination positioning */
}

.swiper-slide {
  text-align: center;
  background: #fff; /* Default background, adjust as needed */
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}


/* 100% width css bug */


.e-con {
    --container-max-width: none !important;
}


/* play button over video featured images */

.hello-video {
    font-size: 20px;
    font-weight: bold;
    color:red;
    margin-bottom: 10px;
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.7;
}


.elementor-loop-container .elementor-element.elementor-widget-theme-post-featured-image {
    position: relative;
}



/* Conditional Display */

.work-detail-element,
.work-process-element,
.commission-detail-element,
.commission-process-element,
.public-art-detail-element,
.public-art-process-element {
    display: none; /* Hide these elements by default */
}


/* PDF embed container */


/* associated works masonary grid (v2) */

.related-works-title{
  font-size: 22px;
  text-transform: uppercase;
  font-family: "Switzer Regular", Sans-serif;
  font-weight: 600;
  color:#6D6D6D;
  text-align: center;
}

/* 3 column masonary */ 

.custom-masonry-section{
  /* background-color: purple; testing */

}

/* Parent container for the masonry grid */
.custom-masonry-section .associated-works-masonry-grid {
    display: block !important; /* Let Masonry handle layout */
    margin: 0 auto !important; /* Center the grid */
    width: calc(100% - 30px) !important; /* Account for 15px padding on both sides */
    padding-left: 15px !important; /* Add left padding */
    padding-right: 15px !important; /* Add right padding */
}

/* Grid items inside the masonry grid */
.custom-masonry-section .associated-works-masonry-item {
    width: calc(33.333% - 30px) !important; /* True 3-column layout with a 15px gutter */
    float: left !important; /* Ensure items align horizontally */
    margin-bottom: 15px !important; /* Bottom margin for vertical spacing */
    margin-right: 15px !important; /* Right gutter */
    box-sizing: border-box !important; /* Ensure margin and padding are accounted for */
}

/* Ensure images fill the width of their container */
.custom-masonry-section .associated-works-masonry-item img {
    width: 100% !important; /* Image should fill the container width */
    height: auto !important; /* Maintain the aspect ratio */
    display: block !important; /* Prevent extra space under images */
}

/* Remove margin for the last item in the row */
.custom-masonry-section .associated-works-masonry-item:nth-child(3n) {
    margin-right: 0 !important; /* Remove right margin for every third item */
}

/* Add clearfix to ensure the container wraps around the floated items */
.custom-masonry-section .associated-works-masonry-grid::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Two columns for iPhone width and smaller screens (below 768px) */
@media (max-width: 768px) {
    .custom-masonry-section .associated-works-masonry-grid {
        width: calc(100% - 20px) !important; /* Equalize padding on both sides */
        padding-left: 10px !important; /* Smaller left padding */
        padding-right: 10px !important; /* Smaller right padding */
    }

    .custom-masonry-section .associated-works-masonry-item {
        width: calc(45% - 10px) !important; /* Two columns with a 10px gutter */
    }
}

/* Three columns for anything wider than 768px */
@media (min-width: 769px) {
    .custom-masonry-section .associated-works-masonry-item {
        width: calc(33.333% - 30px) !important; /* Three columns with a 15px gutter */
    }
}


/**
 * Table styling
 */

/* Child Theme - Override Table Styling */



table {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important; /* Ensure table is not restricted by a max width */
  margin-block-end: 15px !important;
  font-size: 0.9em !important;
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
  /* border: red 1px solid; !important; */ 
  table-layout: fixed !important; /* Force the table to take full width */
}

table th,
table td {
  padding: 1px !important; 
  /* line-height: 1.5 !important; */
  vertical-align: top !important;
  border: none !important;
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
  background-color: transparent !important; /* Remove background on odd rows */
}

table tbody tr:hover > td,
table tbody tr:hover > th {
  background-color: transparent !important; /* Remove background on hover */
}

table tbody + tbody {
  border-block-start: none !important; /* Remove borders between table bodies */
}

/* Ensure table adjusts to full container width on smaller screens */
@media (max-width: 767px) {
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto; /* Ensure table can scroll horizontally if needed */
  }
}



/* video icon overlay */


/* Overlay play button on featured images for 'video' category posts */
.category-video .elementor-widget-theme-post-featured-image {
    position: relative;
}

/* Larger light grey play button overlay with drop shadow */
.category-video .elementor-widget-theme-post-featured-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;  /* Increased width for larger size */
    height: 80px; /* Increased height for larger size */
    background-color: rgba(200, 200, 200, 0.9); /* Light grey background */
    border-radius: 10px; /* Slightly larger rounded edges */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Drop shadow for depth */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Larger, darker grey play icon */
.category-video .elementor-widget-theme-post-featured-image::before {
    content: '\25B6'; /* Unicode for play triangle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%); /* Slightly adjust to center in grey box */
    font-size: 40px; /* Doubled font size */
    color: rgba(80, 80, 80, 0.9); /* Darker grey for the triangle */
    z-index: 3;
    pointer-events: none;
}