/*
Theme Name: GRG Partners
Theme URI: https://grg-partners.com
Author: Niko Gedaze
Description: Custom WordPress theme for GRG Partners | c July 2025
Version: 1.5 [BETA]
*/

/* =========================
   0.1 FROZEN HEADER & FOOTER TYPOGRAPHY
   ========================= */

/* HEADER FONT FREEZE */
header, 
header .menu-bullets, 
header .menu-bullets a, 
.header-right-group, 
.lang-switch, 
.lang-dropdown a,
#themeToggle,
.mobile-menu-toggle {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  color: var(--header-text, #202b3e) !important;
}

/* FOOTER FONT FREEZE */
footer, 
.footer-note, 
.footer-link {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em !important;
  color: var(--footer-text, #1b232f) !important;
}


/* =========================
   1.0 Theme Color Variables
   ========================= */
:root {
  --breakpoint-mobile: 700px;
  --breakpoint-tablet: 1100px;
  --nav-link: #1b2944;           /* Navy blue */
  --nav-link-hover: #355693;     /* Lighter blue on hover */
  --dropdown-bg: #f7f9fc;        /* Dropdown background */
  --dropdown-link: #1b2944;
  --dropdown-link-hover: #305496;
  --header-bg: #f8fafb;
  --header-text: #202b3e;
 /* --main-bg: #fff;*/
  --main-bg-night: #161c29;
  --main-text: #1b232f;
  --footer-bg: #f8fafb;
  --footer-text: #202b3e;
  --accent: #2e62b8;
}


body.dark-mode .main-canvas,
html.dark-mode .main-canvas {
  border-left: 1px solid #202b3e;      /* or any dark color */
  border-right: 1px solid #202b3e;
}

/* =========================
   1.1 TEXT (ease reading) 
   CANVAS DEFINITION LEFT + RIGHT
   ========================= */
.main-canvas {
  max-width: 55rem;    /* or any width you prefer */
  margin: auto auto;   /* center horizontally + vertical spacing */
  padding: 0rem 0rem;     /* inner padding left/right */
  border-left: 1px solid #ddd;  /* thin left border */
  border-right: 1px solid #ddd; /* thin right border */
  background: transparent;      /* or a color if you want */
  box-sizing: border-box;
}

/* =========================
   1.2 Base Typography & Layout
   ========================= */

/* hard-stop any stray spacing above the bar */
html, body, header{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;      /* just in case a theme adds a top border */
  box-sizing:border-box;
  font:400 1.15rem/1.6 'Open Sans', Arial, sans-serif;
}

html, body {
  margin: 0; 
  padding: 0; 
  background: var(--main-bg);
  color: var(--main-text);
}

body {
  display: flex;
  flex-direction: column;
  transition: background 0.3s, color 0.3s;
}

main { 
 flex: 1 0 auto; 
}

header {
   position: sticky;    
   top: 0;
   left: 0;
   z-index: 1000;
   background: linear-gradient(
   to bottom,
   var(--header-bg) 78%,
   rgba(226, 234, 245, 0.85) 100%
  );
  color: var(--header-text);
  box-shadow: 0 2px 8px 0 rgba(28,34,64,0.4), 0 2px 8px 0 rgba(28,34,64,0.4);
  border-bottom: none;
  transition: background 0.3s, color 0.3s;
  backdrop-filter: blur(6px) saturate(60%);
  background-color: rgba(248, 250, 251, 0.77);
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(9px);
}

/* =========================
   1.3 TYPOGRAPHY & Section Titles
   ========================= */
h1, h2, h3, h4 {
  font-family: 'Georgia', serif;
  color: var(--header-text);
  font-weight: 100;
  letter-spacing: 0.01em;
  margin-top: 0; margin-bottom: 0.6em;
  transition: color 0.3s;
}

.section-title {
  font-family: 'Georgia', serif;
  color: var(--nav-link);
  font-size: 1.32rem;
  font-weight: 100;
  margin-bottom: 1em;
  letter-spacing: 0.02em;
}

/* =========================
   1.4  Global Link Styling & Typography
     Main, Section, and CTA Links 
   ========================= */

a, a:visited,
.section-link,
.about-cta-link,
.footer-link,
.email-link,
.service-link {
  color: var(--nav-link) !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.18s;
  
  font-weight: 100;
  font-size: 1.08em;
  padding: 0.02em 0.04em;
  border-bottom: none;
}

/* Remove underline on section headers & cta links, globally */
.section-title a,
.section-link,
.about-cta-link {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ---- Hover/Focus ---- */
a:hover, a:focus,
.section-link:hover, .section-link:focus,
.about-cta-link:hover, .about-cta-link:focus,
.footer-link:hover, .footer-link:focus,
.email-link:hover, .service-link:hover {
  color: var(--nav-link-hover) !important;
  background: none !important;
  border-radius: 0.13em;
  outline: none;
}

/* =========================
   2.0 HEADER LOGO and BUTTONS 
   ========================= */

.main-logo {
  height: 180px; width: auto; max-width: 320px;
  display: block;
  margin: 0.0rem 0.0rem 0 0;  /* Logo Positioning */
  transition: filter 0.3s;
  filter: drop-shadow(0 2.5px 0px rgba(32,40,70,0.12));
  transition: filter 0.2s;
}
.main-logo:hover {
  filter: drop-shadow(0 4px 0px rgba(32,40,70,0.22));
}

body.dark-mode .main-logo {
  filter:
     drop-shadow(0 1.5px 0px rgba(120,220,255,0.18))
     drop-shadow(0 1px 12px rgba(80,170,255,0.18));
  transition: filter 0.16s cubic-bezier(.32,.81,.53,1.04);
}

body.dark-mode .main-logo:hover,
body.dark-mode .main-logo:focus {
  filter:
    drop-shadow(0 0 6px rgba(120,255,255,0.35))
    drop-shadow(0 0 14px rgba(120,255,255,0.45));
}

/* =========================
   2.1 HEADER NAVIGATION 
    --- Navigation Menu ---
   ========================= */

.menu-bullets {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;                         /* --- Vertical spacing between Menu items "height" --- */
  margin: 0 0 0 0.2rem;
  padding: 0;
  font-size: 1.10rem;
  font-family: 'Open Sans', Arial, sans-serif;
  list-style: none;
}
.menu-bullets > li { position: relative; }
.menu-bullets > li > a {
  color: var(--nav-link) !important;
  text-decoration: none !important;
  transition: color 0.15s;
  font-size: 1.01rem;
  padding: 0.13rem 0;
  line-height: 1.18;
}
.menu-bullets > li > a:hover,
.menu-bullets > li > a:focus { color: var(--nav-link-hover) !important; }

/* =========================
   2.2 HEADER NAVIGATION 
    --- DROPDOWN MENU ---
   ========================= */

.nav-dropdown { position: relative; }
.nav-dropdown .dropdown-content {
  display: none;
  position: absolute;
  left: 110%; top: 0;
  min-width: 175px;
  padding: 0.2rem 0;
  z-index: 100;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.90);         /* Semi-transparent white */
  backdrop-filter: blur(16px) saturate(120%);    /* Frosty blur effect */
  box-shadow: 0 4px 16px rgba(20,36,66,0.16);    /* Soft shadow */
  border-radius: 14px;
  border: 1.5px solid rgba(200,220,255,0.25);    /* Faint border for glass edge */
  transition: background 0.22s, box-shadow 0.22s, border 0.18s;
}

/* Dropdown: DARK MODE DROP DOWN MENU FROSTY GLASS EFFECT, blue shadow */
body.dark-mode .nav-dropdown .dropdown-content {
  background: rgba(32, 36, 56, 0.77);             /* Semi-transparent blue */
  backdrop-filter: blur(18px) saturate(120%);      /* Frosty blur effect */
  box-shadow: 0 8px 32px 0 rgba(60,110,190,0.20);   /* Soft shadow */
  border: 1.5px solid rgba(120,160,220,0.18);        /* Faint border for glass edge */
}

.nav-dropdown.show-dropdown .dropdown-content {
  display: flex; opacity: 1; pointer-events: auto; animation: fadeIn 0.22s;
}
.nav-dropdown .dropdown-content li { list-style: none; }
.nav-dropdown .dropdown-content li a {
  color: var(--dropdown-link) !important;
  padding: 10px 22px 10px 14px;
  display: block; border-radius: 9px;
  font-size: 0.97rem; white-space: nowrap;
  text-decoration: none; background: none !important;
  transition: background 0.14s, color 0.14s;
}

.nav-dropdown .dropdown-content li a:hover,
.nav-dropdown .dropdown-content li a:focus {
  background: rgba(255,255,255,0.50) !important;
  color: var(--dropdown-link-hover) !important;
}

body.dark-mode .nav-dropdown .dropdown-content li a:hover,
body.dark-mode .nav-dropdown .dropdown-content li a:focus {
  background: rgba(255,255,255,0.01) !important;
  color: var(--dropdown-link-hover) !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px);}
  to { opacity: 1; transform: translateY(0);}
}

/* =========================
   2.3 HEADER NAVIGATION & STYLING
    --- BUTTONS & GROUPING ---
   ========================= */

.header-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0 2.4rem;
  min-height: 124px;  /* adjust height as needed */
  box-sizing: border-box;
}

.header-center-group {
  display: flex;
  align-items: center;
  justify-content: center;   /* add this! */
  width: 100%;
  height: auto;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.main-logo {
  display: block;
  margin: 0 1.6rem 0 0; /* 1.6rem right margin to separate from nav, 0 top/bottom/left */
  max-height: 140px; /* Adjust for desired header height */
}

/* SETS the MIN HEIGHT OF THE HEADER to 150px below*/
.header-flex-row {
  min-height: 150px; /* Try increasing this (e.g., 150-180px) for a taller header */
}


/* =========================
   2.4 HEADER NAVIGATION 
--- BUTTONS & LANG & DARK SWITCHES---
   ========================= */

.header-right-group {
  position: absolute;
  right: 26px;
  top: 60px;           /* Increase this value to move group lower */
  /* ...existing styles... */
}

#themeToggle {
  all: unset;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;        /* Use center for proper vertical alignment */
  justify-content: center;
  border-radius: 50%;
  /* Remove or comment out backdrop-filter and background */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.18s;
}

#themeToggle:hover, #themeToggle:focus {
  background: none !important;   /* No highlight on hover */
  box-shadow: none !important;
  transform: scale(1.35);
  outline: none;
}

#themeToggle svg {
  color: #232b41;
  transition: color 0.2s;
}

/* Remove background/border in dark mode as well */
body.dark-mode #themeToggle {
  background: none !important;
  border: none !important;
}

body.dark-mode #themeToggle svg {
  color: #f2e8d7;
}

/* =========================
   2.5 HEADER NAVIGATION 
--- HAMBURGER & LANG SWITCH---
   ========================= */

.mobile-menu-toggle {
  display: none !important;
}

/* ====HEADER LANGUAGE SWITCH ======= */
/* Language Switcher Button */

.lang-switch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: inherit; /* Inherit parent font size */
  margin-top: 0.0em;
  margin-bottom: 0.6em;
}

/* Toggle Button: clean, zoom on hover, no background */
.lang-toggle {
  color: var(--nav-link) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 100;
  font-size: 0.7em; /* Match your global link size */
  padding: 0.08em 0.25em;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
  outline: none;
  display: block;
  margin: 0 auto;
}
.lang-toggle:hover, .lang-toggle:focus {
  color: var(--nav-link-hover) !important;
  transform: scale(1.18);
}

/* Dropdown Menu: hidden by default, shown when .open on parent */
.lang-dropdown {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  min-width: 60px;
  margin: 0;
  padding: 0.25em 0;
  z-index: 1101;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 4px 16px rgba(20,36,66,0.16);
  border-radius: 12px;
  border: 1.5px solid rgba(200,220,255,0.19);
  min-width: 90px;
}
body.dark-mode .lang-dropdown {
  background: rgba(32, 36, 56, 0.87);
  box-shadow: 0 8px 32px 0 rgba(60,110,190,0.18);
  border-radius: 12px;
  border: 1.5px solid rgba(120,160,220,0.12);
  backdrop-filter: blur(16px) saturate(120%);
}

.lang-switch.open .lang-dropdown {
  display: block;
}

/* Remove list dots/bullets and padding */
.lang-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown links: global style, block for easy tapping */
.lang-dropdown a {
  display: block;
  color: var(--nav-link) !important;
  text-decoration: none !important;
  font-weight: 100;
  font-size: 0.7em;
  padding: 0.44em 1.4em;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.18s;
  border-radius: 0;
}
.lang-dropdown a:hover, .lang-dropdown a:focus {
  color: var(--nav-link-hover) !important;
  background: none !important;
}

/* Dark mode colors for consistency */
body.dark-mode .lang-toggle,
body.dark-mode .lang-dropdown a {
  color: var(--nav-link) !important;
}
body.dark-mode .lang-toggle:hover,
body.dark-mode .lang-toggle:focus,
body.dark-mode .lang-dropdown a:hover,
body.dark-mode .lang-dropdown a:focus {
  color: var(--nav-link-hover) !important;
  background: rgba(255,255,255,0.01) !important;
}

.lang-dropdown a:hover,
.lang-dropdown a:focus {
  color: var(--nav-link-hover) !important;
  background: rgba(255,255,255,0.50) !important;
}

/* ====END HEADER & SWITCH MENU DESKTOP ======= 
===START  @media MEDIA HEADER MENU =====*/

/* =========================
   4.0 MOBILE DEVICE SETTINGS 
    --- @media settings   ---
   ========================= */

@media (max-width: 700px) {
  html, body {
    font-size: 92%;   /* or adjust to 90%, 94%, etc. as you wish */
    /* This makes all rem and em units smaller on mobile */
  }
  .hero-title { font-size: 1.12rem; }
  .hero-slogan { font-size: 0.98rem; }
  .about-blurb, .section-content p { font-size: 0.96rem; }
  .about-cta-link, .service-title { font-size: 0.94rem; }
  .hero-watermark {
    width: 120vw !important;      /* ZOOM IN! 120vw = 20% wider than screen */
    max-width: none;
    min-width: unset;
    left: unset;
    top: unset;
    transform: none;
    z-index: 0;
    opacity: 0.30 !important;
    pointer-events: none;
    display: block;
    margin: 0 auto;     /* extra safety */
  }
}

@media (max-width: 700px) {
  .about.home-section,
  .services.home-section {
    padding: 1.2rem 0.7rem 0.7rem 0.7rem;   /* Adjust Text canvas spacing and placing to be CENTERED! on mobile devices here */
  }

  .section-content {
    padding: 0 0.7rem;
  }
  .header-flex-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    min-height: 72px;
    padding: 0 0.4rem;
    gap: 0;
    width: 100%;
  }

  /* Center group with logo */
  .header-center-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    justify-content: flex-start;
  }
  .main-logo {
    display: block;
    margin: 0.5rem 0rem 0.15rem -0.8rem;  /* Top, Right, Bottom, Left */
    max-width: 180px;
    min-width: 154px;
    height: auto;
  }

  /* Right group (theme, language) */
  .header-right-group {
    position: absolute;
    top: 12px;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.0em;
    z-index: 1102;
    width: auto;
    background: none;
    margin: 0;
    font-size: 0.94rem; /* Base font-size for all children in this group */
  }

  /* Theme switch */
  .theme-switch {
    margin-bottom: 0 !important;
    margin: 5px 0 0px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
  }
  #themeToggle, .theme-switch button {
    font-size: 0.64rem !important;      /* Will inherit .header-right-group font-size */
    width: 2.2em;
    height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    border-radius: 50%;
    transition: color 0.18s, transform 0.18s;
    cursor: pointer;
  }
  #themeToggle:hover, #themeToggle:focus {
    color: var(--nav-link-hover);
    transform: scale(1.18);
    outline: none;
  }
  #themeToggle svg {
    font-size: 0.94rem;
    width: 1.15em;
    height: 1.15em;
  }

  /* Language switch */
  .lang-switch {
    margin-top: 0 !important;
    margin: 0.1em 0 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    font-size: 0.94rem; /* inherit .header-right-group 0.62em */
    position: relative;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .lang-toggle {
    color: var(--nav-link) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 100;
    font-size: 0.94rem;
    padding: 0.08em 0.25em;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.18s, transform 0.18s;
    outline: none;
    display: block;
    margin: 0 auto;
  }
  .lang-toggle:hover, .lang-toggle:focus {
    color: var(--nav-link-hover) !important;
    transform: scale(1.18);
  }
  .lang-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    min-width: 80px;
    margin: 0;
    padding: 0.18em 0;
    z-index: 1110;
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(14px) saturate(116%);
    box-shadow: 0 4px 16px rgba(20,36,66,0.13);
    border-radius: 12px;
    border: 1.5px solid rgba(200,220,255,0.16);
    min-width: 90px; /* match menu */
    left: 50%;
    transform: translateX(-50%);
  }
  body.dark-mode .lang-dropdown {
    background: rgba(32, 36, 56, 0.83) !important;
    box-shadow: 0 8px 32px 0 rgba(60,110,190,0.19);
    border-radius: 12px;
    border: 1.5px solid rgba(120,160,220,0.14);
    backdrop-filter: blur(14px) saturate(116%);
  }
  .lang-switch.open .lang-dropdown {
    display: block;
  }
  .lang-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .lang-dropdown a {
    display: block;
    color: var(--nav-link) !important;
    text-decoration: none !important;
    font-weight: 100;
    font-size: 0.94rem;        /* .header-right-group (0.62em) * 1em = 0.62em */
    padding: 0.19em 0.5em;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.18s;
    border-radius: 0;
  }
  .lang-dropdown a:hover, .lang-dropdown a:focus {
    color: var(--nav-link-hover) !important;
    background: none !important;
  }

  /* Hamburger menu toggle */
  .mobile-menu-toggle {
    display: block !important;
    position: absolute;
    left: 14px;
    top: 18px;
    z-index: 1110;
    background: none;
    border: none;
    font-size: 2.3rem;
    color: var(--nav-link);
    line-height: 1;
    padding: 0 7px 2px 7px;
    border-radius: 9px;
    transition: background 0.18s, box-shadow 0.15s;
    cursor: pointer;
  }
  .mobile-menu-toggle:focus,
  .mobile-menu-toggle:hover {
    background: rgba(45,65,120,0.07);
    outline: none;
  }
  .mobile-menu-toggle svg rect {
    transition: fill 0.2s;
    fill: var(--nav-link);
  }
  body.dark-mode .mobile-menu-toggle svg rect {
    fill: var(--nav-link);
  }

/* =========================
   4.1 MOBILE DEVICE SETTINGS 
         NAVIGATION MENU 
  drop down menu & background settings 
   ========================= */

  nav {
    display: none !important;
    position: absolute;
    top: 54px;
    left: 0;
    width: auto;
    min-width: 250px;   
    max-width: 97vw;
    z-index: 1099;
    border-radius: 0;
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(16px) saturate(120%);
    box-shadow: 0 4px 16px rgba(20,36,66,0.16);
    border-radius: 14px;
    border: 1.5px solid rgba(200,220,255,0.25);
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    transition: box-shadow 0.15s, background 0.25s;
    padding: 0.6rem 0 1.1rem 0;
    margin: 0;
  }
  body.dark-mode nav {
    background: rgba(32, 36, 56, 0.80);
    box-shadow: 0 2px 8px 0 rgba(60,110,190,0.55);
    border: 1.5px solid rgba(120,160,220,0.25);
  }
  /* Dropdown menus inside nav */
  .nav-dropdown .dropdown-content {
    background: rgba(255,255,255,0.05);     /* glassy white */
    backdrop-filter: blur(12px) saturate(115%);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(20,36,66,0.05);
    border: 1px solid rgba(200,220,255,0.05);
    min-width: 175px;  /* match desktop */
    max-width: 98vw;   /* safe fallback for tiny screens */
    margin-top: 0.25em;
    padding: 0.2rem 0;
    box-sizing: border-box;
    left: auto !important;
    right: auto !important;
    position: static !important;
  }

  body.dark-mode .nav-dropdown .dropdown-content {
  background: rgba(32, 36, 56, 0.05);
  backdrop-filter: blur(12px) saturate(115%);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(60,110,190,0.05);
  border: 1px solid rgba(120,160,220,0.05);
  }

  body.mobile-menu-open nav {
    display: flex !important;
  }

  /* Style the menu items in nav */
  .menu-bullets {
    min-width: 250px; 
    width: auto;
    max-width: 97vw;
    flex-direction: column;
    align-items: flex-start !important;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    box-sizing: border-box;
  }
  .menu-bullets > li {
    width: 100%;
    margin-bottom: 0.18em;
    text-align: left;
  }
  nav .menu-bullets > li > a,
  nav .menu-bullets > li > .submenu-toggle {
    font-size: 0.94rem;
  }
  /* Child dropdown items (same small size as parent) */
  .nav-dropdown .dropdown-content a {
    font-size: 0.94rem !important;
  }

  .nav-dropdown.open .dropdown-content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Remove background from children, only parent dropdown has bg */
  .nav-dropdown .dropdown-content a {
    padding-left: 0.7em;
  }
  .nav-dropdown .dropdown-content a:hover,
  .nav-dropdown .dropdown-content a:focus {
    color: var(--nav-link-hover) !important;
  }

}

/* =========================
   5.0 FOOTER SETTINGS  
   ========================= */

footer {
  z-index: 999;
  background: linear-gradient(
    to top,
    var(--footer-bg) 75%,
    rgba(250, 250, 250, 0.08) 100%
  );
  color: var(--footer-text);
  border-top: 1.5px solid rgba(120,150,200,0.23);
  box-shadow: 0 -3px 12px 0 rgba(40,60,120,0.14), 0 2px 8px 0 rgba(80,140,220,0.11);
  backdrop-filter: blur(10px) saturate(120%);
  transition: background 0.33s, color 0.33s, box-shadow 0.33s;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.04rem 0 0.2rem 0;  /* less top/bottom padding */
}

.footer-emblem-link {
  display: inline-block;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  z-index: 51;
  background: none;
  border: none;
  outline: none;
}

.footer-emblem {
  display: block;
  width: 96px;
  height: auto;
  margin: -2.1rem auto 0.0rem auto;
  opacity: 0.95;
  /* Day vision (default) SHADOW */
  filter: drop-shadow(0 2.5px 0px rgba(32,40,70,0.18));
  transition: filter 0.19s, opacity 0.18s;  cursor: pointer;
}

.footer-emblem-link:hover .footer-emblem,
.footer-emblem-link:focus .footer-emblem {
  filter: drop-shadow(0 2.5px 4px rgba(32,40,70,0.28));
}

.footer-note {
  color: var(--footer-text);
  font-size: 0.92rem;
  margin: 0.32rem 0 0.10rem 0;
  padding: 0;
}

.footer-link {
  color: var(--nav-link);
  font-size: 0.78rem;
  font-weight: 100;
  text-decoration: none;
  margin: 0 0.22em;
  transition: color 0.18s;
  background: none;
  border: none;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--nav-link-hover);
  text-decoration: none;
  background: none;
}

/* -- Dark Mode Footer -- */
body.dark-mode footer {
  background: linear-gradient(
    to top,
    var(--footer-bg) 95%,
    rgba(40,60,100,0.16) 100%
  );
  box-shadow: 0 -2px 18px 0 rgba(80,140,220,0.20), 0 2px 7px 0 rgba(80,140,220,0.10);
  border-top: 1.5px solid rgba(120,150,200,0.39);
  color: var(--footer-text);
}

body.dark-mode .footer-emblem {
  filter:
    drop-shadow(0 0 6px rgba(120,220,255,0.38))
    drop-shadow(0 0 14px rgba(80,170,255,0.14));
}
body.dark-mode .footer-emblem-link:hover .footer-emblem,
body.dark-mode .footer-emblem-link:focus .footer-emblem {
  filter:
    drop-shadow(0 0 6px rgba(120,255,255,0.35))
    drop-shadow(0 0 14px rgba(120,255,255,0.45));
}


/* =========================
   5.1 FOOTER MOBILE SETTINGS  
   ========================= */

@media (max-width: 700px) {
  footer {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0.07rem 0 0.18rem 0;
    background: linear-gradient(
      to top,
      var(--footer-bg, #f5f9ff) 85%,
      rgba(250, 250, 250, 0.10) 100%
    );
    color: var(--footer-text, #192a3a);
    border-top: 1px solid rgba(120,150,200,0.19);
    box-shadow: 0 -2px 7px 0 rgba(40,60,120,0.07);
    backdrop-filter: blur(5px) saturate(110%);
    font-size: 0.74rem;
    text-align: center;
    z-index: 2;
  }
  .footer-emblem-link {
    display: inline-block;
    width: auto;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    background: none;
    border: none;
    outline: none;
  }
  .footer-emblem {
    display: block;
    width: 48px !important;    /* Never huge! */
    min-width: 32px;
    max-width: 72px;
    height: auto !important;
    margin: -1.2rem auto 0.11rem auto;  /* Stick out slightly */
    opacity: 0.96;
    filter: drop-shadow(0 2.5px 7px rgba(32,40,70,0.15));
    transition: filter 0.17s, opacity 0.13s;
    cursor: pointer;
  }
  .footer-emblem-link:hover .footer-emblem,
  .footer-emblem-link:focus .footer-emblem {
    opacity: 1;
    filter: drop-shadow(0 6px 14px rgba(32,40,70,0.18));
  }
  .footer-note {
    color: var(--footer-text, #192a3a);
    font-size: 0.71rem;
    margin: 0.05rem 0 0.09rem 0;
    padding: 0;
  }
  .footer-link {
    color: var(--nav-link, #1a4a7b);
    font-size: 0.67rem;
    font-weight: 100;
    text-decoration: none;
    margin: 0 0.13em;
    background: none;
    border: none;
    transition: color 0.16s;
  }
  .footer-link:hover,
  .footer-link:focus {
    color: var(--nav-link-hover, #2451a7);
    text-decoration: none;
    background: none;
  }
  /* Dark mode */
  body.dark-mode footer {
    background: linear-gradient(
      to top,
      var(--footer-bg, #253046) 92%,
      rgba(40,60,100,0.19) 100%
    );
    color: var(--footer-text, #d2e6ff);
  }
  body.dark-mode .footer-emblem {
    filter:
      drop-shadow(0 0 3px rgba(120,220,255,0.40))
      drop-shadow(0 0 8px rgba(80,170,255,0.17));
  }
}

/* =========================
   6.0 MODULAR SECTIONS   
   ========================= */

/* -- ABOUT/SECTION (modular home-section) -- */

.about.home-section,
.services.home-section {
  max-width: 100%; 
  text-align: center;
  background: none;
  box-shadow: none;                             /* Remove heavy shadow */
  border-radius: 0.7rem;                        /* Optional: keep if you want */
  border: none;                                 /* Remove unless you want a faint line */
  position: relative; 
  z-index: 1; 
  box-sizing: border-box;
  margin: 0 auto 0 auto; 
  margin-bottom: 0;
  padding: 2.2rem 1.2rem 0.7rem 1.2rem;          /* This sets main body content centered! "left = right" here */
  animation: aboutFadeIn 1.2s cubic-bezier(0.18,0.85,0.45,1.1);
}

/* Section content + animation */
@keyframes aboutFadeIn {
  from { opacity: 0; transform: translateY(22px);}
  to   { opacity: 1; transform: translateY(0);}
}
.section-content { max-width: 710px; margin: 0 auto; padding: 0 1.2rem; text-align: center; }

/* Section content TEXT */

.section-content p {   
  margin-bottom: 1.3em;   /* This controls the p tag value "Paragraph Spacing"  */
  line-height: 1.96;
}

.about-blurb {
  font-size: 1.18rem; color: var(--main-text); max-width: 640px; margin: 0 auto 1.17em auto;
  line-height: 1.65; letter-spacing: 0.01em; font-family: 'Open Sans', Arial, sans-serif;
  opacity: 0; transform: translateY(24px); animation: aboutBlurbIn 0.92s 0.33s cubic-bezier(0.32,0.82,0.52,1.08) forwards;
}

@keyframes aboutBlurbIn {
  from { opacity: 0; transform: translateY(32px);}
  to   { opacity: 1; transform: translateY(0);}
}

/* Section CTA link */
.about-cta-link {
  display: inline-block; margin-top: 1.5em; margin-bottom: 2.5rem;
  color: var(--nav-link); background: none; border: none;
  border-radius: 8px; font-weight: 400; letter-spacing: 0.02em;
  font-size: 1.04rem; transition: background 0.18s, color 0.15s;
  text-decoration: none !important; cursor: pointer;
  opacity: 0; transform: translateY(22px);
  animation: aboutCtaIn 0.92s 0.55s cubic-bezier(0.32,0.82,0.52,1.08) forwards;
}
.about-cta-link:hover, .about-cta-link:focus {
  color: var(--nav-link-hover) !important;
  background: none !important;
  text-decoration: none !important;
}
@keyframes aboutCtaIn {
  from { opacity: 0; transform: translateY(24px);}
  to   { opacity: 1; transform: translateY(0);}
}

/* =========================
   6.1 MODULAR SECTIONS   
    --- HERO SECTION & STYLING ---
   ========================= */

.hero {
  position: relative;
  width: 100%;
  min-height: 430px; /* Adjust as needed */
  padding: 0; /* or as desired */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #f5f7fa 0%, #e3e9f3 100%);

 /* Remove the soft/fuzzy box-shadow: */
 /* box-shadow:
    0 6px 0 0 rgba(44,54,94,0.10),       /* sharp bottom line */
    0 18px 20px 0 rgba(80,95,125,0.05);  /* faint 2nd drop for subtle elevation */ */

border-bottom: 2px solid rgba(40,55,90,0.09); /* crisp, dark line */
box-shadow:
    0 4px 0 0 rgba(44,54,94,0.08); /* single, sharp shadow (no blur) */
  overflow: hidden;
  box-sizing: border-box;
  transition: background 0.3s; 
 
 /* /* ...existing styles... */
  border-bottom: 2px solid rgba(40,55,90,0.13);
  box-shadow: none; */

}

.hero::after {
  /* Subtle dark edge for ?glass? effect at the bottom */
  content: '';
  pointer-events: none;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 88px;
  background: linear-gradient(to top,rgba(30,40,60,0.07),transparent 80%);
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-watermark {
  width: 1500px;      /* adjust for size */
  max-width: 95vw;
  opacity: 0.35 !important;

  /* Crunchy shadow: offset-y, zero or tiny blur, higher opacity */

  filter: drop-shadow(0 4px 0px rgba(32,40,70,0.15))
          drop-shadow(0 1.5px 4px rgba(32,40,70,0.07));

  user-select: none;
  margin: 0 auto;
  animation: heroWatermarkIn 1.7s cubic-bezier(0.22, 0.82, 0.52, 1.08) both;
  /* Depth! */
  transform: scale(1.02);
}

@keyframes heroWatermarkIn {
  from { opacity: 0; transform: scale(1.11) translateY(32px);}
  to   { opacity: 0.23; transform: scale(1.02) translateY(0);}
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
}

.hero-title {
  font-family: 'Georgia', serif;
  color: var(--nav-link);
  font-size: 2.7rem;
  letter-spacing: 0.03em;
  font-weight: 100;
  margin: 0 0 0.2em 0;
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeIn 1.0s 0.2s cubic-bezier(0.32, 0.72, 0.52, 1.04) forwards;
  /* existing styles ... */
  text-shadow:
    0 2px 12px rgba(46,98,184,0.13),   /* gentle blue glow */
    0 1px 1px rgba(44,54,94,0.12);     /* soft navy shadow for depth */
}

.hero-slogan {
  font-size: 1.15rem;
  color: var(--nav-link);
  font-family: 'Open Sans', Arial, sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(22px);
  animation: heroFadeIn 1.1s 0.62s cubic-bezier(0.32, 0.72, 0.52, 1.04) forwards;
  text-shadow:
    0 1.5px 8px rgba(46,98,184,0.12),   /* soft blue glow */
    0 1px 1px rgba(44,54,94,0.08);
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive for mobile */
@media (max-width: 700px) {
  .hero.home-section { min-height: 250px; }
  .hero-watermark { width: 98vw; max-width: 98vw; }
  .hero-title { font-size: 1.6rem; }
  .hero-slogan { font-size: 1.08rem; }
}

/* =========================
   7.0 DARK MODE OVERRIDES PREMIUM   
=== DARK MODE POLISH: Glass, Glow, and Crisp Edges ===
   ========================= */

body.dark-mode {
  --nav-link: #b2cafe;
  --nav-link-hover: #d5e8f7;
  --dropdown-bg: #1a2538;
  --dropdown-link: #b2cafe;
  --dropdown-link-hover: #d5e8f7;
  --header-bg: #232d41;
  --header-text: #eaf1fa;
  --main-bg: var(--main-bg-night);
  --main-text: #eaf1fa;
  --footer-bg: #232d41;
  --footer-text: #b2cafe;
  --accent: #7cc3e7;
}

/* Header: Glass, crisp border, blue glow */
body.dark-mode header {
  position: sticky !important;
  background: rgba(33, 45, 65, 0.35);
  backdrop-filter: blur(12px) saturate(110%);
  color: var(--header-text);
  box-shadow: 0 2.5px 16px 0 rgba(80,140,220,0.50), 0 1.5px 0 rgba(80,140,220,0.15);
  border-bottom: 2px solid rgba(120,150,200,0.85);
}

/* Nav: always readable */
body.dark-mode .menu-bullets > li > a {
  color: var(--nav-link) !important;
}
body.dark-mode .menu-bullets > li > a:hover,
body.dark-mode .menu-bullets > li > a:focus {
  color: var(--nav-link-hover) !important;
}

/* Hero: glass, blue edge, subtle glow */
body.dark-mode .hero {
  background: linear-gradient(120deg,
    rgba(35,45,68, 0.90) 10%,
    rgba(20,27,40, 0.82) 100%
  );
  backdrop-filter: blur(15px) saturate(110%);
  border-bottom: 2px solid rgba(90,120,180,0.30);
  box-shadow: 0 4px 20px 0 rgba(100,170,255,0.35);
}

/* Hero watermark: More blue glow, stronger 3D effect in dark mode */
body.dark-mode .hero-watermark {
  opacity: 0.07 !important; /* increase visibility */
  filter:
    drop-shadow(0 0 0.5vw rgba(80,160,255,0.55))   /* blue core glow */
    drop-shadow(0 0 1.2vw rgba(60,110,190,0.38))   /* large blue glow, matches menu style */
    drop-shadow(0 8px 32px rgba(60,110,190,0.12))  /* soft blue shadow, from dropdown */
    drop-shadow(0 2px 12px rgba(90,160,255,0.08))  /* extra blue bottom light */
    drop-shadow(0 3px 11px rgba(0,0,0,0.12))       /* bottom 3D shadow */
    ;
  /* Optional: Add subtle border for more glass effect */
  border: 1.5px solid rgba(120,160,220,0.11);
  border-radius: 99vw;      /* keeps emblem soft */
  background: none;         /* ensure transparent background */
  transition: filter 0.3s, opacity 0.3s, border-color 0.3s;
}
/* Hero title & slogan: luminous, crisp */
body.dark-mode .hero-title,
body.dark-mode .section-title {
  color: #eaf1fa;
  text-shadow:
    0 1.5px 8px rgba(120,200,255,0.19),
    0 1px 1px rgba(90,160,255,0.18);
}
body.dark-mode .hero-slogan {
  color: #c7e3fa;
  text-shadow: 0 1px 6px rgba(80,180,240,0.16);
}

/* Main modular sections: glass, blue glow 
body.dark-mode .about.home-section,
body.dark-mode .services.home-section {
  background: linear-gradient(
    120deg,
    #212b3e 77%,
    #293552 100%
  );
  box-shadow: 0 4px 20px 0 rgba(80,140,220,0.10);
  border-radius: 0.7rem;
  color: var(--main-text);
} */

/* Section content text/link */
body.dark-mode .section-content,
body.dark-mode .about-blurb,
body.dark-mode p,
body.dark-mode .service-title {
  color: var(--main-text);
}
body.dark-mode .about-cta-link,
body.dark-mode .section-link,
body.dark-mode .footer-link {
  color: var(--nav-link) !important;
}
body.dark-mode .about-cta-link:hover,
body.dark-mode .section-link:hover,
body.dark-mode .footer-link:hover,
body.dark-mode .about-cta-link:focus,
body.dark-mode .section-link:focus,
body.dark-mode .footer-link:focus {
  color: var(--nav-link-hover) !important;
  background: none !important;
}

body.dark-mode .home-section {
  /*   background: none !important;
  background: linear-gradient(120deg, #222b38 100%, #28354c 100%) !important; */
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  color: var(--main-text);   /* Uses your already defined variable */
  /* Add more here if needed for padding or spacing */
}