/* ------------------------
   Variables
------------------------ */

:root {
  /* Colors */

  --green: #0B3C3F;
  --light-green: #1A5C5E;
  --dark-green: #091E1F;

  --gold: #C4975A;
  --light-gold: #D4AB74;

  --light-beige: #FDFCFA;
  --beige: #FAF7F2;
  --dark-beige: #E8E4DF;


  --mid-gray: #8A8580;
  --dark-gray: #3D3D3D;


  --primary-color: var(--green);
  --primary-alt: var(--dark-green);
  --primary-highlight: var(--light-green);
  --primary-highlight-alt: var(--light-green);
  --primary-accent: var(--dark-green);

  --secondary-color: var(--gold);
  --secondary-alt: var(--light-gold);
  --secondary-highlight: var(--light-beige);
  --secondary-accent: var(--beige);
  --secondary-accent-alt: var(--dark-beige);

  --tertiary-color: var(--mid-gray);
  --tertiary-alt: var(--dark-gray);

  --text-gray: var(--dark-gray);
  --text-color: var(--text-gray);

  --light-color: #ffffff;
  --dark-color: #000000;
  --light-alt: var(--light-gray);
  --dark-alt: var(--dark-gray);

  /* Defaults */

  --default-font: var(--primary-font);
  --default-color: var(--text-color);

  /* Font Family */

  --primary-font : dm-sans, sans-serif;
  --secondary-font : cormorant-garamond, serif;
  --highlight-font : TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;

  /* Font Weight */

  --fw-thin: 100;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-heavy: 900;

  --nav-mobile : 50px;
  --nav-tablet : 50px;
  --nav-desktop : 83px;
  
  --sidebar : 370px;

  /* Breakpoints */

  --tablet: 768px;
  --og-desktop: 980px;
  /* --og-full: 1280px; */
  --og-full: 1210px;
  /* larger? 1536px */
  --desktop: calc( var(--og-desktop) + 80px );
  --full: calc( var(--og-full) + 80px );




  /* Variables and Color Options For the Navigation Menu */
  --nav-panel-phone-width: calc(100vw - 80px);
  --nav-panel-tablet-width: 50vw;
  --nav-panel-desktop-width: 500px;

  /* Hamburger Express Menu AND All Mobile Styles */
  --menu-express-font-size-parent: 26px;
  --menu-express-font-size-child: 20px;
  --menu-express-font-size-grandchild: 16px;
  --menu-express-text-color: var(--light-color);
  --menu-express-bg: var(--primary-color);
  /*--- Darkens the primary color by 5% ---*/
  --menu-express-bg-child: oklch(from var(--primary-color) calc(l - 0.05) c h);
  /*--- Darkens the primary color by 8% ---*/
  --menu-express-bg-grandchild: oklch(from var(--primary-color) calc(l - 0.08) c h);
  --menu-express-hover: var(--primary-alt);

  /* Hamburger Deluxe Menu Styles */
  --menu-deluxe-font-size-parent: 26px;
  --menu-deluxe-font-size-child: 26px;
  --menu-deluxe-font-size-grandchild: 22px;
  --menu-deluxe-bg-parent: green;
  --menu-deluxe-text-parent: lime;
  --menu-deluxe-bg-hover-parent: olive;
  --menu-deluxe-text-hover-parent: yellow;
  --menu-deluxe-bg-child: navy;
  --menu-deluxe-text-child:  aqua;
  --menu-deluxe-bg-hover-child: teal;
  --menu-deluxe-text-hover-child: fuchsia;
  --menu-deluxe-bg-grandchild: orange;
  --menu-deluxe-text-grandchild: maroon;
  --menu-deluxe-bg-hover-grandchild: red;
  --menu-deluxe-text-hover-grandchild: purple;

  /* Top Menu Styles */
  --menu-top-font-size-parent: 16px;
  --menu-top-font-size-child: 16px;
  --menu-top-font-size-grandchild: 16px;
  --mega-menu-font-size-child: 20px;
  --mega-menu-font-size-grandchild: 16px;
  --menu-top-bg-parent: transparent;
  --menu-top-text-parent: var(--dark-alt);
  --menu-top-bg-hover-parent: transparent;
  --menu-top-text-hover-parent: var(--primary-color);
  --menu-top-fixed-bg-parent: transparent;
  --menu-top-fixed-text-parent: var(--dark-alt);
  --menu-top-fixed-bg-hover-parent: transparent;
  --menu-top-fixed-text-hover-parent: var(--primary-color);
  --menu-top-bg-child: var(--primary-highlight);
  --menu-top-text-child: var(--light-color);
  --menu-top-bg-hover-child: var(--primary-color);
  --menu-top-text-hover-child: var(--light-color);
  --menu-top-bg-grandchild: var(--primary-color);
  --menu-top-text-grandchild: var(--light-color);
  --menu-top-bg-hover-grandchild: var(--primary-accent);
  --menu-top-text-hover-grandchild: var(--light-color);
}