/* 
Theme Name: Rotunda Restaurant & Brewery
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: BlueCollarWebtech
Author URI: https://bluecollarwebtech.com/
Template: hello-elementor
Version: 2.0.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
  /* Colors */
  --primary: #FF6B6B;
  --dark_olive: #636457; /* Fallback: Solid hexadecimal color for older browsers */
  --dark_olive: hsla(65, 7%, 37%, 1); /* Modern: HSLA color (Royal Blue) for supporting browsers */
  --charcoal: #333433; 
  --charcoal: hsla(120, 1%, 20%, 1);
  --rich_black: #040404;
  --rich_black: hsla(0, 0%, 2%, 1);
  --soft_taupe: #938B79;
  --soft_taupe: hsla(42, 11%, 53%, 1);
  --deep_iron_grey: #474643;
  --deep_iron_grey: hsla(45, 3%, 27%, 1);
  /* From deep_iron_grey */
  --ash_grey: #E0DFDC;
  --ash_grey: hsla(45, 6%, 87%, 1);

  --burnt_sienna: #894000;
  --burnt_sienna: hsla(27, 100%, 27%, 1);
  /* Calculated Colors */
  --complementary: hsl(from var(--primary) calc(h + 180) s l);
  --triadic-1: hsl(from var(--primary) calc(h + 120) s l);
  --triadic-2: hsl(from var(--primary) calc(h - 120) s l);

  /* Brand Colors */
  --brand-color: #474643;
  --brand-lighter: hsl(from var(--brand-color) h s calc(l + 20));
  --brand-darker: hsl(from var(--brand-color) h s calc(l - 20));
  --brand-muted: hsl(from var(--brand-color) h calc(s - 30) l);
  --brand-vibrant: hsl(from var(--brand-color) h calc(s + 20) l);

  --todo-color: #9FFB12;
  /* Typography */

  /* Don't break price into multiple lines */


  /* Global Font Variables */
  @font-face {
    font-family: 'AlegreyaSansSC-Regular'; /* Name you will use in Elementor */
    src: url('/fonts/AlegreyaSansSC-Regular.ttf') format('truetype'), 
    font-weight: normal;
    font-style: normal;
}

  /* Elementor Pro Overrides */
  .e-loop-item * {
      word-break: normal;
      overflow-wrap: normal;
  }
 
  /* Remove icon bottom gap */

  .elementor-icon-wrapper {
    line-height: 0;
  }

  .elementor img {
    border-radius: 15px;
  }
  /* Image in a Posts widget */
  .elementor-post__thumbnail {
    border-radius: 15px;
  }
  .img {
    border-radius: 15px;
  }

/*
/* Remove link from the posts url for events and specials 
.elementor-post__title a {
    pointer-events: none;
    cursor: default;
}
/* Remove link from the post image - might want to make this a light box 
.elementor-post__thumbnail__link {
    pointer-events: none;
    cursor: default;
}
 Opted to have the image open in a lightbox - have to set the image to lage in the posts widget so it is not some small tiny blurry image 

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Select all post links in the widget
    const posts = document.querySelectorAll('.elementor-post');

    posts.forEach(post => {
        const titleLink = post.querySelector('.elementor-post__title a');
        const imgLink = post.querySelector('.elementor-post__thumbnail__link');
        const imgElement = post.querySelector('img');

        if (imgLink && imgElement) {
            const imgSrc = imgElement.src;

            // 1. Convert Image Link to Lightbox
            imgLink.setAttribute('href', imgSrc);
            imgLink.setAttribute('data-elementor-open-lightbox', 'yes');
            
            // 2. Disable Title Link (optional)
            if (titleLink) {
                titleLink.removeAttribute('href');
                titleLink.style.cursor = 'default';
            }
        }
    });
});
</script>

*/

/* Elementor Button customization */
.elementor-button {
    background-color: transparent;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
/*    border-color: #894000;  The copperish from online - make a variable */
    border-color: var(--burnt_sienna);
    text-decoration: none;
    color: var(--burnt_sienna);
    display: inline-block;
    /* font-size: 15px; */
    font-size: clamp(0.88rem, 0.75069rem + 0.55172vw, 1.13rem);
    line-height: 1;
    /* padding: 12px 24px; */
    /*fill: #fff;*/
    text-align: center;
    transition: all .3s 
}

.elementor-button:hover {
  background-color: var(--burnt_sienna); /* The copperish from online - make a variable */
  color: white;
}

.elementor-button-icon {
  fill: var(--burnt_sienna); /* The copperish from online - make a variable */
  transition: fill 0.3s ease; /* Smooth transition */
}

.elementor-button-text {
  color: var(--burnt_sienna);
}

.elementor-button-text:hover {
  color: white;
}

/* Mobile Entry Screen */
.main-reveal-container{
  background-color: var(--rich_black);
  color: var(--burnt_sienna);
}

.hero_banner {
  background-color: white;
}
/* Rotunda Custom Header */
/* Migrate this from selector to the rotunda-header class */


/* 2. Ensure hover state doesn't add extra pixels */
.rotunda-header .elementor-nav-menu--dropdown a:hover,
.rotunda-header .elementor-nav-menu--dropdown a.elementor-item-active {
    padding: 10px 20px ; /* Match the padding above exactly */
    margin: 0;
}


.rotunda-header .elementor-nav-menu--dropdown a {
    display: block;
    /* Set your desired padding here (Top Right Bottom Left) */
    padding: 10px 20px; 
    margin: 0;
    /* Force the line height to remain identical in all states */
    line-height: 1.2em;
    transition: none; /* Disable jumpy animations */
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    border-color: transparent;
    /* Did we just break the mobile menu here? !!!!!!!! */
}

/* 3. Stabilize the submenu container height */
.rotunda-header .elementor-nav-menu--dropdown {
    overflow: visible;
    height: auto;
    border-radius: 15px; /* Adds style - bottom border but also button like effect */
}

/* Add pill outline ot hovered dropdown item */
.rotunda-header .elementor-nav-menu--dropdown a:hover {
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    border-color: var(--burnt_sienna);  
}

.rotunda-header .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active)+.elementor-nav-menu__container {
    max-height: 0;
    overflow: hidden;
    transform: scaleY(1);

}
.elementor-nav-menu--main .elementor-item.elementor-nav-menu-main  {
    font-size: clamp(1.13rem, 0.93103rem + 0.82759vw, 1.50rem);
    line-height: 1.4em;
}
/* Deactivate per gemini
.elementor-widget-button .elementor-button .elementor-button-content-wrapper .elementor-button-icon:hover path {
  fill: #E0DFDC;
}


*/
/* From gemini */
/* Change the icon color when the entire button is hovered */
/* Fill Button Icon when Button is hovered not just the Icon */
.elementor-button:hover .elementor-button-icon,
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:hover .elementor-button-icon svg path {
  fill: var(--ash_grey); /* Ensure it overrides any inline SVG styles */
}



/* Link Customization */
nav ul li a:link {
  color: var(--rich_black);
}
nav ul li a:link:hover { 
  color: var(--burnt_sienna);
 }
nav ul li a:visited { 
  color: var(--rich_black);
}
nav ul li a:hover {
 color: var(--burnt_sienna);
 }
nav ul li a:active { text-decoration: none; }

.elementor-nav-menu--dropdown:hover {
    background-color: white;
    /* font-size: 13px; */
}

/* urls in text fields are white so why do we have this still ?
  1) hyperlinks are showing in red - elementor pro default */
a:link {
  color: var(--rich_black);
}
a:link:hover {
  color: var(--burnt_sienna);
}


.elementor-nav-menu--dropdown .elementor-item.elementor-item-active, 
.elementor-sub-item.elementor-item-active {
  background-color: white;
  color: var(--charcoal);
}

.elementor-nav-menu--dropdown .elementor-item.highlighted, 
.elementor-sub-item.highlighted
 {
    background-color: white;
    color: var(--rich_black);
}

.elementor-nav-menu--dropdown .elementor-item:focus, 
.elementor-nav-menu--dropdown .elementor-item:hover, 
.elementor-sub-item:focus, 
.elementor-sub-item:hover {
  background-color: white;
  color: var(--burnt_sienna);
}

.elementor-menu-toggle svg {
  fill: var(--burnt_sienna);
}
/* Scrollbar customization */
::-webkit-scrollbar,::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--burnt_sienna);
}


/* Rotunda Footer */
.rotunda-footer h1, 
.rotunda-footer h2, 
.rotunda-footer h3, 
.rotunda-footer h4, 
.rotunda-footer h5, 
.rotunda-footer h6,
.rotunda-footer p,
.rotunda-footer a,
.rotunda-footer a:link,
.rotunda-footer a:link:visited,
.rotunda-footer a p,
.rotunda-footer span  {
  color: var(--burnt_sienna);
}

.rotunda-footer a:link,
.rotunda-footer span:hover  {
  color: var(--rich_black);
}

.rotunda-footer .elementor-nav-menu--main ul li a, {
  font-size: clamp(1.1rem, 0.83103rem + 0.82759vw, 1.40rem);
    line-height: 1.4em;
}
.rotunda-footer .elementor-nav-menu--main ul li a,
.rotunda-footer .elementor-nav-menu--main ul li a:visited,
.rotunda-footer .elementor-nav-menu--main ul li a:active 
 {
  color: var(--burnt_sienna);
  font-size: clamp(1.1rem, 0.83103rem + 0.82759vw, 1.40rem);
    line-height: 1.4em;
}

.rotunda-footer .elementor-nav-menu--main ul li a:hover 
 {
  color: var(--rich_black);
  font-size: clamp(1.1rem, 0.83103rem + 0.82759vw, 1.40rem);
    line-height: 1.4em;
}

.rotunda-footer .elementor-image-box-title {
    font-size: clamp(1.00rem, 0.87069rem + 0.55172vw, 1.25rem);
    line-height: 1.4em;
}

.rotunda-footer .elementor-image-box-description {
    font-size: clamp(1.1rem, 0.83103rem + 0.82759vw, 1.40rem);
    line-height: 1.4em;
}

.rotunda-footer .elementor-icon-list-item {
  font-size: clamp(1.00rem, 0.87069rem + 0.55172vw, 1.25rem);
    line-height: 1.4em;
}

.rotunda-footer .elementor-icon-list-text:hover ,link:hover {
  color: var(--rich_black);
}

/* Footer link decoration */
.elementor-icon-list-icon svg {
  fill: var(--burnt_sienna);
}

.elementor-icon-list-icon svg:hover {
  fill: var(--rich_black);
}

.elementor-icon-list-text:hover ,link:hover {
  color: var(--rich_black);
}

/* Footer Social Icons - REVISIT Later */
.elementor-social-icon svg {
  fill: var(--burnt_sienna);;
}

.elementor-icon .elementor-social-icon .elementor-social-icon svg {
  fill: var(--burnt_sienna);
}

/* Footer Menu */
.rotunda-footer-menu nav ul li a,
.rotunda-footer-menu nav ul li a:visited, {
  color: var(--rich_black);
}
.rotunda-footer-menu > a:hover{
  color: var(--burnt_sienna);
}


/* 1. Apply the structure to ALL menu items for consistency */
.menu-card > .e-con-inner {
    border: 3px solid red; /* Keeps the 3px space reserved */
    border-radius: 10px;
    padding: 10px 10px;
    transition: border-color 0.3s ease; /* Smooth transition if icons toggle */
}

/* 2. Only change the border color if the icon is present */
/* .menu-card:has(.new-icon) > .name-entry, */
/* .e-loop-item .new-icon { */
/*.menu-card:has (div div.new-icon) */
.menu-card:has(.name-entry:has(.new-icon)) {    
    border-color: var(--burnt_sienna);

}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
}

.h2 { color: hsla(120, 1%, 20%, 1);}

html { font-size: 16px; } /* Default root size */
/* Asked Gemini for advice on opacity and they rewrote this 
body {
  /*background-color: #E0DFDC !important; */
  /*
  background-image: url(http://elementor-testbed.localwp/wp-content/uploads/2026/01/rotuda-logo-mono-classic-13-percent-opaque.png);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
/* For Dark Mode background-blend-mode: difference; */
/*
  font-family: 'AlegreyaSansSC-Regular';

}
end of Gemini rewrite */

/* Gemini body rewrite */
body {
  margin: 0;
  padding: 0;
  font-family: 'AlegreyaSansSC', sans-serif;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Keeps it behind your content */
  
  /* Your Background Settings */
  background-image: url('https://bluecollarwebtech.com/wp-content/uploads/2026/03/rotunda-logo-mono-classic-13-percent-opaque.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  
  /* ADJUST OPACITY HERE (0.0 to 1.0) */
  opacity: 0.3; 
  
  /* For Dark Mode */
  /* background-blend-mode: difference; */
}

/* end gemini body rewrite */
h1 {
    font-size: clamp(2.25rem, 1.86207rem + 1.65517vw, 3.00rem);
    line-height: 1.4em;
}

h2 {
    font-size: clamp(1.88rem, 1.55172rem + 1.37931vw, 2.50rem);
    line-height: 1.4em;
}

h3 {
    font-size: clamp(1.50rem, 1.24138rem + 1.10345vw, 2.00rem);
    line-height: 1.4em;
}

h4 {
    font-size: clamp(1.25rem, 0.99138rem + 1.10345vw, 1.75rem);
    line-height: 1.4em;
}

h5 {
    font-size: clamp(1.13rem, 0.93103rem + 0.82759vw, 1.50rem);
    line-height: 1.4em;
}

h6 {
    font-size: clamp(1.00rem, 0.87069rem + 0.55172vw, 1.25rem);
    line-height: 1.4em;
}

p {
    font-size: clamp(0.88rem, 0.74569rem + 0.55172vw, 1.13rem);
    line-height: 1.4em;
}

a {
    font-size: clamp(0.88rem, 0.75069rem + 0.55172vw, 1.13rem);
    line-height: 1.4em;
}

/* Spacing System */
--spacing-1: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);
--spacing-2: clamp(0.5rem, calc(0.45vw + 0.28rem), 0.75rem);
--spacing-4: clamp(1rem, calc(0vw + 0.56rem), 1.25rem);

/* Spacing Utilities */
.m-1 {
  margin: var(--spacing-1);
}
.m-2 {
  margin: var(--spacing-2);
}
.m-4 {
  margin: var(--spacing-4);
}
.p-1 {
  padding: var(--spacing-1);
}
.p-2 {
  padding: var(--spacing-2);
}
.p-4 {
  padding: var(--spacing-4);
}

/* Gap System */
--gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);
--gap-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem);
--gap-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);
--gap-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);
--gap-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);
--gap-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);
--gap-xxl: clamp(1.25rem, calc(11.36vw + -1.59rem), 7.5rem);

/* Gap Utilities */
.gap-xxs {
  gap: var(--gap-xxs);
}
.gap-xs {
  gap: var(--gap-xs);
}
.gap-s {
  gap: var(--gap-s);
}
.gap-m {
  gap: var(--gap-m);
}
.gap-l {
  gap: var(--gap-l);
}
.gap-xl {
  gap: var(--gap-xl);
}
.gap-xxl {
  gap: var(--gap-xxl);
}

/* Layout */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}

.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Components */
.button {
  background-color: var(--brand-color);
}

.button:hover {
  background-color: var(--brand-lighter);
}

.button:active {
  background-color: var(--brand-darker);
}

.feature-card {
  background: var(--primary);
  border-left: 4px solid var(--complementary);
}

/* Global Styles */
html {
  scroll-behavior: smooth;
}

.card {
  contain: layout;
}

.video-container {
  aspect-ratio: 16 / 9;
}

.modal-wrapper {
  isolation: isolate;
}

input[type="checkbox"] {
  accent-color: #2563eb;
}

/* Responsive Gap Utilities (for nested containers) */
.gap-xxs .e-con-inner {
  gap: var(--gap-xxs);
}
.gap-xs .e-con-inner {
  gap: var(--gap-xs);
}
.gap-s .e-con-inner {
  gap: var(--gap-s);
}
.gap-m .e-con-inner {
  gap: var(--gap-m);
}
.gap-l .e-con-inner {
  gap: var(--gap-l);
}
.gap-xl .e-con-inner {
  gap: var(--gap-xl);
}
.gap-xxl .e-con-inner {
  gap: var(--gap-xxl);
}