/* style.css */

body {
      margin: 0;
      font-family: 'Cormorant Garamond', serif;
      background-color: #fff;
      font-size: 30px;
}

.header {
      display: flex;
      position: relative;
      align-items: center;         /* vertically center all children */
      
      justify-content: center;
      height: 140px;               /* fixed height for banner */
      background-image: url("images/rose_pattern.png");
      
      background-repeat: repeat;
      color: rgb(112, 48, 160);
      
      font-family: 'Kapakana', sans-serif;
      font-size: 3.5em;
      padding: 0 1rem;
      
      box-sizing: border-box;
      overflow: visible;
}

.central-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.3em;
      max-width: 600px;
}

.side-by-side {
      flex-direction: row;     /* horizontal layout */
      align-items: flex-start;
      text-align: left;
      gap: 2rem;
      flex-wrap: wrap;         /* allows wrapping on small screens */
}

.header-title-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 1rem;
}

.header-title-group {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 1rem;
}

.header-side {
      flex: 0 1 80px;
      max-width: 80px;
      min-width: 20px;
      overflow-wrap: normal;
      font-family: Calibri, sans-serif;
      font-size: 0.20em;
      font-style: italic;
      font-weight: bold;
      line-height: 1.05;
      text-align: center;
}

.header-title {
      white-space: nowrap;
}

.header a {
      text-decoration: none;
      color: inherit;
}

.description-bar {
      
      background-color: rgb(213, 184, 234);
      
      color: rgb(112, 48, 160);
      
      padding: 0.25em 0.8em;
      
      text-align: center;
      
      font-size: 0.8em;

      font-family: Arial, Calibri, Verdana, sans-serif;

      font-weight: bold;

      font-style: italic;
      }

.description-bar span {
      
      margin: 0 0.7em;

      }

.menu-bar {
      background-color: #E4CF82;

      overflow: hidden;

      display: flex;

      justify-content: center;

      flex-wrap: wrap;

      font-family: Arial, Calibri, Verdana, sans-serif;

      font-size: 0.8em;

      gap: 60px;
      }


/*
.menu-bar a {
      display: inline-block;
      color: rgb(112, 48, 160);;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      font-weight: bold;
      }
*/

.menu-bar a {
      display: inline-block;
      background-color: #BCE292;            /* Permanent rectangle background */
      border: 2px solid rgb(112, 48, 160);  /* Violet border */
      color: rgb(112, 48, 160);             /* Violet text */
      text-align: center;
      padding: 6px 14px;
      margin: 6px;
      text-decoration: none;
      font-weight: bold;
      
      transition: background-color 0.3s ease;
      }


.menu-bar a:hover {
      background-color: 	#9cc964;
      }

.garden-banner {

      width: 100%;

      height: 300px; /* or adjust as you like */

      background-image: url('images/garden_v3.jpg');

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;
        }

.rose-logo {
      width: 1.5em;

      height: auto;

    }

.rose-container {
  
      display: flex;
      align-items: center;
      width: 2em;                   /* width container to control spacing */
      height: auto;
}

.rose-edge-right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: auto;
      display: flex;
      align-items: center;
      z-index: 5;
}

.rose-edge-left {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: auto;
      display: flex;
      align-items: center;
      z-index: 5;
}

.rose-edge-right img {
      height: 100%;
      width: auto;
      object-fit: cover;
}

.rose-edge-left img{
      height: 100%;
      width: auto;
      object-fit: cover;
}

.rose-container.left {
      justify-content: flex-end;
}

.rose-container.right {
      justify-content: flex-start;
  
}

.subheader {
      font-size: 0.3em;
      font-family: Calibri, sans-serif;
      font-weight: bold;
      font-style: italic;
      color: rgb(112, 48, 160);
      margin-top: 0.3em;
}


h1 {
      text-align: center;

      font-size: 2.5rem;

      color: rgb(112, 48, 160);

      margin-top: 1.5rem;

      margin-bottom: 1rem;

}

.site-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1em;
      box-sizing: border-box;
}

.header-inner {
  width: min(1400px, 95vw);
  margin: 0 auto;
  padding-right: 2.2em;
  padding-left: 2.2em;
}