/* Clifton Cloudworks Theme - Dark Green/Olive Techno Style */

/* Global Colors - Updates CSS Variables used by Beautiful Jekyll */
:root {
  --page-col: #1a201c; /* Darker green-black base */
  --text-col: #ececec;
  --link-col: #70966a; /* Olive Green */
  --hover-col: #a4c2a0; /* Sage Green */

  /* Glassy transparent colors */
  --navbar-col: rgba(26, 32, 28, 0.4);
  --navbar-text-col: #ececec;
  --navbar-border-col: rgba(112, 150, 106, 0.3); /* Olive border */

  --footer-col: rgba(26, 32, 28, 0.4);
  --footer-text-col: #ccc;
  --footer-link-col: #70966a;
}

/* Base Body Styles */
body {
  background-color: var(--page-col);
  color: var(--text-col);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
}

/* Home Page Specific Overrides */
/* The home page will override overflow-y to hidden in index.md if needed */

/* Glassy Navbar */
.navbar-custom {
  background-color: var(--navbar-col) !important;
  border-bottom: 1px solid var(--navbar-border-col) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 20px !important;
}

/* Navbar Typography */
.navbar-custom .navbar-brand {
  font-size: 1.1rem !important;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navbar-text-col) !important;
}

.navbar-custom .nav-link {
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: var(--navbar-text-col) !important;
}

/* Glassy Footer - Sticky/Flex */
footer {
  background-color: var(--footer-col) !important;
  border-top: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 !important;
  padding: 10px 0 !important;
  z-index: 100;
  font-size: 0.75rem !important;
  /* Flex item behavior */
  flex-shrink: 0;
  position: relative !important;
  width: 100%;
}

/* Footer Flex Layout */
footer .container .row > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
}

footer ul.list-inline {
  margin: 0 !important;
  padding: 0 !important;
}

footer p {
  margin: 0 !important;
}

/* Footer Icons */
footer .fa-stack {
  width: 1.5em !important;
  height: 1.5em !important;
  line-height: 1.5em !important;
  font-size: 1.1rem !important;
}

footer .fa-stack-2x {
  font-size: 1.5em !important;
  display: none; /* Hide background circle for cleaner look */
}

footer .fa-stack-1x {
  font-size: 1.25em !important; /* Make icon larger */
  color: var(--footer-link-col) !important;
}

footer a:hover .fa-stack-1x {
  color: var(--hover-col) !important;
}


/* Content Layout Fixes for internal pages */
body > main {
  /* padding-top: 80px;  Removed: Header accounts for nav offset, or specific page styles should handle it. */
  padding-bottom: 20px;
  flex: 1 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Header & Typography Overrides */
.intro-header {
    margin-top: 100px !important;
    margin-bottom: 0 !important; /* Removed bottom gap entirely */
    padding-bottom: 0 !important;
}

@media (min-width: 1200px) {
  .intro-header {
      margin-top: 110px !important;
  }
}

/* Remove default top margins from the first content element to pull it up */
main .container-md > .row > div > *:first-child,
main .container-md > .row > div > div:first-child > p:first-child {
    margin-top: 0 !important;
}

.intro-header .page-heading {
    padding: 0 !important;
}

.intro-header .page-heading h1 {
    font-size: 2.8rem !important;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 4px 15px rgba(112, 150, 106, 0.4);
    letter-spacing: -0.5px;
}

.intro-header .page-heading .page-subheading {
    color: var(--hover-col);
    font-size: 1.15rem !important;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.intro-header hr.small {
    display: none; /* Cleaner look without the divider */
}

/* Card/Content Styling for readability on dark background */
.container-md {
  /* If we want a card look or just text on dark */
  color: var(--text-col);
}

a {
  transition: all 0.2s ease-in-out;
}

/* Immersive Liquid/Aurora Blobs Background */
.static-page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-color: var(--page-col);
  overflow: hidden; /* Contain the blobs */
}

.static-page-background::before,
.static-page-background::after {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic starting shape */
  mix-blend-mode: screen; /* Blends blobs nicely */
  filter: blur(60px); /* Soften edges for aurora feel */
  opacity: 0.4;
  animation: blob-move 20s infinite alternate ease-in-out;
}

/* Blob 1 - Sage/Olive */
.static-page-background::before {
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(112, 150, 106, 0.8), transparent 70%);
  animation-duration: 25s;
}

/* Blob 2 - Deep Green/Teal */
.static-page-background::after {
  bottom: -10%;
  right: -10%;
  background: radial-gradient(circle, rgba(79, 111, 82, 0.9), transparent 70%);
  animation-duration: 35s;
  animation-direction: alternate-reverse;
}

@keyframes blob-move {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  33% {
    transform: translate(10vw, 5vh) rotate(50deg) scale(1.1);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  66% {
    transform: translate(-5vw, 10vh) rotate(120deg) scale(0.9);
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

/* Base Body Styles */
body {
  background-color: var(--page-col);
  color: var(--text-col);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
}

/* Home Page Specific Overrides */
/* The home page will override overflow-y to hidden in index.md if needed */

/* Glassy Navbar */
.navbar-custom {
  background-color: var(--navbar-col) !important;
  border-bottom: 1px solid var(--navbar-border-col) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 20px !important;
}

/* Navbar Typography */
.navbar-custom .navbar-brand {
  font-size: 1.1rem !important;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navbar-text-col) !important;
}

.navbar-custom .nav-link {
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: var(--navbar-text-col) !important;
}

/* Glassy Footer - Sticky/Flex */
/* Glassy Footer - Sticky/Flex */
/* Glassy Footer - Sticky/Flex */
footer {
  background-color: var(--footer-col) !important;
  background-image: none !important; /* Remove any accidental gradients */
  border-top: 1px solid var(--navbar-border-col) !important; /* Match header border */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 !important;
  padding: 10px 0 !important; /* Touch-friendly padding */
  z-index: 100;
  font-size: 0.9rem !important; /* Slightly larger text */
  flex-shrink: 0;
  position: relative !important;
  
  /* Robust Full Width */
  width: 100% !important;
  max-width: 100% !important;
  left: 0;
  right: 0;
}

/* Footer Flex Layout - Responsive */
footer .container .row > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  flex-wrap: wrap; /* Safety for small screens */
  gap: 20px;
}

footer ul.list-inline {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .list-inline-item {
    margin: 0 8px !important;
}

footer p {
  margin: 0 !important;
}

/* Footer Icons - Touch Friendly & Visible */
footer .fa-stack {
  width: 1.8em !important;
  height: 1.8em !important;
  font-size: 1.3rem !important;
  display: inline-block !important; /* Robust container behavior */
  position: relative;
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

footer .fa-stack:hover {
    transform: scale(1.1);
}

footer .fa-stack-2x {
  /* Background Square */
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  
  color: transparent !important;
  background-color: rgba(112, 150, 106, 0.15);
  border-radius: 8px;
  transition: background-color 0.2s;
  
  /* Reset Any Font Styling interfering with box */
  line-height: normal !important; 
  display: block !important;
}

footer .fa-stack-1x {
  /* The Icon - Absolute Center with Visual Correction */
  font-size: 1.15em !important;
  color: var(--footer-link-col) !important;
  
  position: absolute !important;
  top: 53% !important; /* Visual centering (nudge down) */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  z-index: 2;
  transition: color 0.2s;
  text-align: center;
}

footer a:hover .fa-stack-1x {
  color: #fff !important;
}

footer a:hover .fa-stack-2x {
    background-color: var(--link-col) !important;
    opacity: 0.9;
}

/* Mobile-Specific Footer Layout */
@media (max-width: 768px) {
    footer .container .row > div {
        flex-direction: column !important; /* Stack vertically */
        justify-content: center !important;
        text-align: center;
        gap: 25px; /* Separation between icons and copyright */
    }
    
    footer .fa-stack {
        font-size: 1.4rem !important; /* Even larger base on mobile */
    }
    
    footer .copyright {
        order: 2; /* Ensure copyright is at bottom */
        opacity: 0.8;
    }
}

/* Content Layout Fixes for internal pages */
body > main {
  /* padding-top: 80px;  Removed: Header accounts for nav offset, or specific page styles should handle it. */
  padding-bottom: 20px;
  flex: 1 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Header & Typography Overrides */
.intro-header {
    margin-top: 100px !important;
    margin-bottom: 0 !important; /* Removed bottom gap entirely */
    padding-bottom: 0 !important;
}

@media (min-width: 1200px) {
  .intro-header {
      margin-top: 110px !important;
  }
}

/* Remove default top margins from the first content element to pull it up */
main .container-md > .row > div > *:first-child,
main .container-md > .row > div > div:first-child > p:first-child {
    margin-top: 0 !important;
}

.intro-header .page-heading {
    padding: 0 !important;
}

.intro-header .page-heading h1 {
    font-size: 2.8rem !important;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 4px 15px rgba(50, 108, 229, 0.4);
    letter-spacing: -0.5px;
}

.intro-header .page-heading .page-subheading {
    color: #b7d0f9;
    font-size: 1.15rem !important;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.intro-header hr.small {
    display: none; /* Cleaner look without the divider */
}

/* Card/Content Styling for readability on dark background */
.container-md {
  /* If we want a card look or just text on dark */
  color: var(--text-col);
}

a {
  transition: all 0.2s ease-in-out;
}

/* Immersive Static Background for Internal Pages */
.static-page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: var(--page-col);
  
  /* Modern Waves + Dynamic Glows */
  background-image: 
      /* Stronger Blue Glow Top-Left */
      radial-gradient(circle at 0% 0%, rgba(50, 108, 229, 0.15), transparent 50%),
      /* Subtle Purple/Grey Glow Bottom-Right */
      radial-gradient(circle at 100% 100%, rgba(100, 110, 130, 0.1) 0%, transparent 50%),
      /* Highlight Glow Center-Right */
      radial-gradient(circle at 80% 40%, rgba(50, 108, 229, 0.08), transparent 30%),
      
      /* Wave Pattern (SVG Data URI) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='30' viewBox='0 0 100 30'%3E%3Cpath d='M0 15 Q 25 25 50 15 T 100 15' fill='none' stroke='%2370966a' stroke-width='2' stroke-opacity='0.08'/%3E%3C/svg%3E");
      
  background-size: 100% 100%, 100% 100%, 100% 100%, 100px 30px; /* Tiled waves */
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: 0 0;
  pointer-events: none;
}

/* Mobile & Reduced Motion Optimizations */
@media (max-width: 768px) {
  .static-page-background::before,
  .static-page-background::after {
    animation: none !important; /* Disable moving blobs */
    filter: blur(30px); /* Reduce blur cost */
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .static-page-background::before,
  .static-page-background::after,
  * {
    animation: none !important;
    transition: none !important;
  }
}