/* --- Global & Base Styles --- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent horizontal scrollbar from offcanvas pushing content */
}

/* --- Content Area --- */
/* Content area grows to push footer down */
#content,
.site-content {
  flex: 1 0 auto;
}

/* --- Header & Navbar Styles --- */
.site-header {
  background-color: #fff; /* Ensure a white background */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Bootstrap's shadow-sm */
  z-index: 1030; /* Ensure header is above offcanvas */
}

.navbar {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Logo / Brand */
.navbar-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d6efd; /* Keep brand color as primary blue */
  display: flex;
  align-items: center;
  padding: 0.2rem 0;
  /* margin-right: 1rem; (Optional: can be removed if toggler is ms-auto) */
  text-decoration: none;
}

/* Header logo size */
.navbar-brand img {
  max-height: 32px;
  height: auto;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  transition: max-height 0.3s ease;
}

/* Navbar Toggler Button (for small screens) */
/* The toggler is now what activates the offcanvas */
.navbar-toggler {
  border: none; /* Remove default border */
  padding: 0.25rem 0.5rem; /* Adjust padding if needed */
  z-index: 1030; /* Ensure toggler is above offcanvas overlay */
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Focus outline for accessibility */
  outline: none;
}


/* --- Desktop Nav Links (inside .collapse) --- */
.navbar-nav .nav-link {
  padding: 0.4rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6c757d; /* Gray color for menu text */
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally on desktop */
  text-align: center;
  height: 100%;
  white-space: nowrap; /* Prevents links from wrapping */
}

/* Nav Links Hover / Focus (Desktop) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #adb5bd; /* Light gray on hover/focus */
  text-decoration: none;
  outline: none; /* Remove default focus outline */
  /* No box-shadow or border for simple effect */
}

/* Spacing between menu items - Desktop */
.navbar-nav .nav-item + .nav-item {
  margin-left: 0.5rem;
}

/* --- Hover Dropdown Styles (Desktop Only) --- */
@media (min-width: 992px) { /* Applies to large screens and up (desktop) */
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block; /* Show dropdown on hover */
    margin-top: 0; /* Remove any gap */
  }

  /* Dropdown menu items left align */
  .navbar-nav .dropdown-menu .dropdown-item {
    text-align: left; /* Explicitly left-align dropdown items */
  }

  /* For multi-level dropdowns (sub-sub-menus) - position to the left */
  .navbar-nav .dropdown .dropdown-menu .dropdown:hover > .dropdown-menu {
    display: block;
    left: auto; /* Reset Bootstrap's default horizontal positioning */
    right: 100%; /* Position to the left of the parent dropdown-menu */
    margin-top: -6px; /* Adjust vertical alignment as needed */
  }

  /* Optional: Hide the default caret arrow on desktop dropdowns if desired */
  /* .navbar-nav .dropdown .dropdown-toggle::after {
    display: none;
  } */
}


/* --- Responsive Adjustments (for the collapsed menu / mobile) --- */
@media (max-width: 991.98px) {
  /* Responsive spacing for smaller screens (stacked items) */
  .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
    margin-top: 0.4rem;
  }

  /* Hide default navbar-toggler on desktop (this is handled by d-lg-none class in HTML now) */
  /* .btn-outline-primary.d-lg-none {
    font-size: 1.25rem;
    line-height: 1;
  } */
}

/* --- Offcanvas Menu Styles (Mobile Only) --- */
.offcanvas {
  width: 280px; /* Adjust width of side drawer */
  background-color: #f8f9fa; /* Light background for the offcanvas */
  box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.15); /* Shadow from the right */
  z-index: 1020; /* Standard offcanvas z-index, higher than normal content */
}

/* Offcanvas body scroll */
.offcanvas-body {
  padding: 1rem;
  overflow-y: auto; /* Allows scrolling if content exceeds offcanvas height */
}

/* Offcanvas nav links (Mobile) */
/* These remain click-activated by Bootstrap's JS */
.offcanvas .navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: #6c757d; /* Gray color for offcanvas menu text */
  transition: color 0.3s ease, background-color 0.3s ease;
  justify-content: flex-start; /* Default: align left in offcanvas */
  text-align: left; /* Ensure text itself is left-aligned */
  white-space: nowrap;
}

/* Offcanvas dropdown items left align */
.offcanvas .navbar-nav .dropdown-menu .dropdown-item {
  text-align: left; /* Explicitly left-align dropdown items in offcanvas */
}

/* Hover/focus style for offcanvas links (Mobile) */
.offcanvas .navbar-nav .nav-link:hover,
.offcanvas .navbar-nav .nav-link:focus {
  color: #adb5bd; /* Light gray on hover/focus for offcanvas links */
  background-color: rgba(108, 117, 125, 0.1); /* Subtle gray background on hover */
  outline: none;
}

/* --- Footer Styles --- */
.site-footer {
  background-color: #000;
  color: #fff;
  flex-shrink: 0; /* Prevents footer from shrinking */
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
}

/* Custom CSS for TikTok Embed Adjustments */

.tiktok-embed-wrapper {
    /* Optional: Add some padding if the TikTok embed code doesn't manage its own spacing well */
    padding: 10px;
    background-color: #f8f9fa; /* Light background for visibility */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    display: flex; /* Use flexbox to center content */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide any overflow */
    height: 100%; /* Ensure all wrappers in a row have equal height */
}

/* The TikTok embed itself often uses an iframe or blockquote.
   We need to ensure it scales correctly within our wrapper. */
.tiktok-embed-wrapper blockquote.tiktok-embed {
    width: 100% !important; /* Make sure the embed takes full width of its parent */
    margin: 0 !important; /* Remove default margins from blockquote */
    max-width: none !important; /* Override TikTok's max-width if it's set too low */
}

.tiktok-embed-wrapper blockquote.tiktok-embed iframe {
    width: 100% !important;
    height: auto !important; /* Let height adjust automatically */
    min-height: 500px; /* Adjust as needed, TikTok videos are usually tall */
}

/* Ensure the script for TikTok embed runs for all blockquotes */
/* The script tag generated by TikTok automatically looks for blockquote.tiktok-embed */