:root {
  --bg-color: #121212;

  --surface-color: #1e1e1e;
  --primary-color: #bb86fc;
  --secondary-color: #03dac6;
  --text-color: #e0e0e0;
  --muted-color: #a0a0a0;

  /* Google Colors */
  --google-blue: rgb(66, 133, 244);
  --google-red: rgb(234, 67, 53);
  --google-yellow: rgb(251, 188, 5);
  --google-green: rgb(52, 168, 83);
  --google-purple: rgb(161, 66, 244);
  /* For Hidden tab */

  --sidebar-width: 45px;
  --topbar-height: 55px;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-fancy: 'Dancing Script', cursive;
  --spacing-unit: 1rem;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  --input-bg: rgba(255, 255, 255, 0.1);
  --tab-hover-bg: rgba(255, 255, 255, 0.08);
  --tab-active-bg: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --surface-color: #f5f5f5;
  --text-color: #121212;
  --muted-color: #5f6368;

  /* Adjust shadows for light mode */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  --input-bg: rgba(0, 0, 0, 0.05);
  --tab-hover-bg: rgba(0, 0, 0, 0.05);
  --tab-active-bg: rgba(0, 0, 0, 0.1);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
}

.content,
.container {
  background: var(--bg-color);
  border: none;
  color: var(--text-color);
  font-family: var(--font-main);
  margin-left: 150px;
  padding: 1rem;
  padding-bottom: 6rem;
  width: auto;
}

@media (max-width: 768px) {

  .content,
  .container {
    margin-left: 0;
    padding-bottom: 150px;
    /* Clear Footer (32px) + Tabs (60px) + Buffer */
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-color);
  margin-top: 0;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--secondary-color);
}

/* Layout Grid */
.app-container {
  display: flex;
  height: calc(100vh - var(--topbar-height));
  margin-top: var(--topbar-height);
  overflow: hidden;
}

/* Top Bar */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background-color: var(--surface-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0 0.5rem;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.top-bar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align left */
  width: auto;
  /* Allow growth */
  overflow: visible;
  /* Show all content */
  padding-right: 0;
  /* Reduced spacing */
}

.home-icon {
  font-size: 1.2rem;
  color: var(--text-color);
  display: flex;
  /* Keeps image centered vertically if needed, but it's an inline-block mostly */
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  /* Ensure no underline on the name */
}

.home-icon span {
  display: none;
}

.brand-name {
  display: block !important;
  /* Force show */
  font-family: var(--font-fancy);
  font-size: 1.8rem;
  color: var(--text-color);
  font-weight: 700;
  margin-left: 0;
  /* Removed margin-left */
  white-space: nowrap;
  line-height: 1;
  /* Stacking adjustment */
}

.brand-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
}

.brand-tagline {
  font-size: 0.7rem;
  color: var(--muted-color);
  font-family: var(--font-main);
  line-height: 1.2;
  white-space: nowrap;
  display: block !important;
  /* Override .home-icon span { display: none } */
}

/* Tagline Links */
.brand-tagline a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-tagline a:hover,
.brand-tagline a:focus,
.brand-tagline a:visited {
  color: inherit;
  color: inherit;
  text-decoration: none;
}

/* Brand Name Link Wrapper */
.brand-name-link {
  color: var(--text-color) !important;
  text-decoration: none !important;
}

@media (min-width: 769px) {
  .home-icon span {
    display: none;
  }
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-widget input {
  background: var(--input-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  color: var(--text-color);
  outline: none;
  transition: all 0.2s ease;
  width: 200px;
  /* Reduced from 240px */
  margin-right: 0;
  /* Reduced spacing */
}

.search-widget input:focus {
  background: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.email-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.email-label {
  color: var(--muted-color);
  /* Fixed Muted Color */
  font-size: 0.9rem;
  white-space: nowrap;
  font-weight: bold;
}

.email-input-box {
  background: var(--input-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  color: var(--text-color);
  outline: none;
  transition: all 0.2s ease;
  width: 260px;
  font-size: 0.9rem;
}

.email-input-box:focus {
  background: rgba(255, 255, 255, 0.15);
}

/* Sidebar (Vertical Tabs) */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--surface-color);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  position: fixed;
  left: 0;
  top: var(--topbar-height);
  bottom: 0;
  padding: 1rem 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.tab-btn {
  display: block;
  width: 23px;
  min-height: 80px;
  padding: 0.5rem 0.2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: none;
  border-radius: 0 8px 8px 0;
  /* Unrotated: TR/BR. Rotated: BL/TL (Visual Right -> Left?) */
  /* Wait, user wants VISUAL LEFT. 
     Rotated 180deg:
     Top -> Bottom
     Bottom -> Top
     Left -> Right
     Right -> Left
     
     If I want Visual Left:
     I need Unrotated Right.
     Unrotated Right is border-right and radius TR/BR (0 8px 8px 0).
  */
  color: #a0a0a0;
  /* Fixed Muted Color */
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;

  /* Vertical Text */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.tab-btn:hover {
  color: var(--text-color);
  background-color: var(--tab-hover-bg);
}

.tab-btn.active {
  background-color: var(--tab-active-bg);
  border-left: none;
  /* Was right: none */
  width: 23px;
  /* Keep consistent width */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  /* Flip shadow x? */
  border-right-width: 4px;
  border-right-style: solid;
  /* Default fallback if specific colors don't match */
  border-right-color: var(--primary-color);
  color: var(--text-color);
}

/* Tab Colors Rotation (Google Colors) - Specificity applied */
/* 1: Blue */
.tab-btn:nth-child(4n+1).active {
  color: var(--google-blue);
  border-right-color: var(--google-blue);
  background: var(--tab-active-bg);
}

/* 2: Red */
.tab-btn:nth-child(4n+2).active {
  color: var(--google-red);
  border-right-color: var(--google-red);
  background: var(--tab-active-bg);
}

/* 3: Yellow */
.tab-btn:nth-child(4n+3).active {
  color: var(--google-yellow);
  border-right-color: var(--google-yellow);
  background: var(--tab-active-bg);
}

/* 4: Green */
.tab-btn:nth-child(4n+4).active {
  color: var(--google-green);
  border-right-color: var(--google-green);
  background: var(--tab-active-bg);
}

/* Main Content Area */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Tab Content */
.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Cards */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.link-card {
  background-color: var(--surface-color);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.link-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  /* Increased size for fancy font */
  font-weight: 700;
  font-family: var(--font-fancy);
  /* Fancy Font */
}

/* Google Colors based on Tab */
/* Personal: Blue */
#tab-personal .link-card h3 {
  color: var(--google-blue);
}

#tab-personal .link-card {
  border-top: 3px solid var(--google-blue);
}

/* Business: Red */
#tab-business .link-card h3 {
  color: var(--google-red);
}

#tab-business .link-card {
  border-top: 3px solid var(--google-red);
}

/* Music: Yellow */
#tab-music .link-card h3 {
  color: var(--google-yellow);
}

#tab-music .link-card {
  border-top: 3px solid var(--google-yellow);
}

/* Projects: Green */
#tab-projects .link-card h3 {
  color: var(--google-green);
}

#tab-projects .link-card {
  border-top: 3px solid var(--google-green);
}

/* Specific overwrite for MAPS card to look like version 4.0 */
.link-card.card-maps h3 {
  font-family: var(--font-fancy);
  font-size: 1.3rem;
  /* Slightly smaller than default 1.5rem */
}

.link-card p {
  color: var(--muted-color);
  font-size: 0.95rem;
  margin: 0;
}

/* Footer */
footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: var(--muted-color);
  font-size: 0.85rem;
}

/* Sidebar Wrapper (Desktop: Invisible) */
.sidebar-wrapper {
  display: contents;
}

.nav-arrow {
  display: none;
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
    margin-top: var(--topbar-height);
    /* Adjust height for mobile: 100vh - topbar - bottombar (approx 60px) */
    height: calc(100vh - var(--topbar-height) - 60px);
  }

  /* Top Bar Adjustments */
  .top-bar {
    padding: 0 1rem;
    justify-content: space-between;
  }

  .top-bar-left {
    padding-right: 0.5rem;
  }

  .brand-name {
    font-size: 1.4rem;
    /* Smaller font for mobile */
  }

  .brand-text-col {
    display: flex !important;
    position: relative;
    z-index: 1002;
    /* Ensure on top */
  }

  .brand-tagline {
    font-size: 0.65rem;
    /* Slightly increased for better tap targets */
    position: relative;
    z-index: 1003;
  }

  /* .home-icon span rule removed */

  .top-bar-right {
    gap: 0.5rem;
  }

  /* Search Widget Mobile */
  .search-widget input {
    width: 150px;
    /* Smaller search bar */
    font-size: 0.9rem;
  }

  .email-form {
    display: none;
    /* Hide email form on mobile to save space? Or move to footer? Hidden for now as it takes too much space in top bar */
  }

  /* Sidebar Wrapper -> Bottom Navigation Container */
  .sidebar-wrapper {
    display: flex;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 20px;
    /* Adjusted to sit flush on top of footer (height ~20px) */
    left: 0;
    background-color: var(--surface-color);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
  }

  /* Arrows */
  .nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--muted-color);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
  }

  .nav-arrow:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
  }

  /* Sidebar (Scrollable Container) */
  .sidebar {
    position: static;
    /* Wrapper handles position */
    width: auto;
    /* Flexible width */
    flex: 1;
    /* Take remaining space */
    height: 100%;
    /* Fill wrapper height */
    border: none;
    /* Border on wrapper */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 0.5rem;
    align-items: center;
    background-color: transparent;
    /* Wrapper has bg */
    z-index: auto;
    overflow-y: hidden;
    overflow-x: auto;
    /* Enable horizontal scroll */
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
  }

  .tab-btn {
    width: auto;
    /* Allow natural width */
    min-width: auto;
    /* Remove fixed min-width to reduce whitespace */
    flex-shrink: 0;
    /* Prevent shrinking */
    height: 36px;
    /* Reduced height from 40px */
    padding: 0 0.8rem;
    /* Tightened padding */
    /* Horizontal padding */

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    /* Rounded corners for all tabs (hover state too) */
    border: none;
    /* Reset borders */
    position: relative;
    /* For pseudo-element */

    /* Reset vertical text */
    writing-mode: horizontal-tb;
    transform: none;

    font-size: 0.9rem;
    color: var(--muted-color);
  }

  .tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .tab-btn.active {
    width: auto;
    /* Reset width */
    min-width: auto;
    border: none;
    /* Remove all borders */
    box-shadow: none;
    /* Remove shadow on mobile */
    background-color: var(--tab-active-bg);
    /* Make background visible */
    color: var(--text-color);
    border-radius: 20px;
    /* Pill shape */
  }

  /* Rounded Accent Indicator */
  .tab-btn.active::after {
    display: none;
  }

  /* Specific color overrides for active tabs on mobile */
  /* We want the text to take the color */
  .tab-btn:nth-child(4n+1).active {
    border: none;
    color: var(--google-blue);
    background-color: rgba(66, 133, 244, 0.15);
    /* Tinted background */
  }

  .tab-btn:nth-child(4n+2).active {
    border: none;
    color: var(--google-red);
    background-color: rgba(234, 67, 53, 0.15);
  }

  .tab-btn:nth-child(4n+3).active {
    border: none;
    color: var(--google-yellow);
    background-color: rgba(251, 188, 5, 0.15);
  }

  .tab-btn:nth-child(4n+4).active {
    border: none;
    color: var(--google-green);
    background-color: rgba(52, 168, 83, 0.15);
  }

  /* Hidden tab */
  .tab-btn[data-tab="tab-hidden"].active {
    border: none;
  }


  .main-content {
    margin-left: 0;
    /* No margin bottom needed as container height excludes bottom bar */
    padding: 1rem;
    /* Reduced padding */
  }


}

/* Hidden: Purple */
#tab-hidden .link-card h3 {
  color: var(--google-purple);
}

#tab-hidden .link-card {
  border-top: 3px solid var(--google-purple);
}

/* Override for Hidden Tab Button */
.tab-btn[data-tab="tab-hidden"].active {
  color: var(--google-purple);
  border-right-color: var(--google-purple);
  background: var(--tab-active-bg);
}

/* Hide footer inside content frames (prevent double footer) */
.content-frame .copyright {
  display: none !important;
}

/* Shell Copyright styling */
/* Shell Copyright styling - Global (Desktop & Mobile Unified) */
.copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  box-sizing: border-box;
  background-color: var(--surface-color);
  padding: 0.3rem;
  /* Reduced padding */
  text-align: center;
  color: var(--muted-color);
  font-size: 0.7rem;
  z-index: 2002;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.copyright p {
  margin: 0;
}

/* Footer Navigation Buttons */
.footer-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted-color);
  cursor: pointer;
  padding: 0 1rem;
  z-index: 2003;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
  height: 100%;
  /* Full height of footer for easier clicking? Or just button size */
  height: auto;
  border-radius: 4px;
}

.footer-nav-btn:hover {
  color: var(--text-color);
  background-color: rgba(255, 255, 255, 0.05);
}

.footer-nav-btn.left {
  left: 0;
}

.footer-nav-btn.right {
  right: 0;
}

@media (max-width: 768px) {
  .footer-nav-btn {
    padding: 0 0.5rem;
  }
}

/* Desktop-specific adjustments */
@media (min-width: 769px) {
  .copyright {
    left: var(--sidebar-width);
    /* Start after sidebar */
    width: auto;
    /* Fill remaining width */
    padding-left: 0;
    /* Reset padding if necessary */
  }
}



.page-title {
  text-align: center;
  font-family: var(--font-fancy);
  color: var(--text-color);
  font-size: 3rem;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* Added for better visibility */
}

/* Common Content Page Styles (Moved from contact.php) */
.iframe-body {
  background-color: var(--bg-color);
  padding: 2rem;
  overflow-y: auto;
}

.content-container {
  max-width: 800px;
  margin: 0 auto;
}

.content-container h2 {
  color: var(--google-blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
  margin-top: 2rem;
  font-family: var(--font-heading);
}

.content-container blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--google-blue);
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0 8px 8px 0;
}

.content-container .standout {
  font-weight: bold;
  color: var(--google-green);
}

.content-container address {
  font-style: normal;
  line-height: 1.6;
}

.content-container a {
  color: var(--google-blue);
}

/* Quotes List - Single Spaced & Plain */
.quotes-list li {
  margin-bottom: 0.2rem;
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.2;
}

/* Theme Toggle Button */
.theme-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.page-description {
  text-align: center;
  max-width: 800px;
  margin: -1rem auto 2rem auto;
  /* pulls it up closer to title, pushes content down */
  color: var(--muted-color);
  font-size: 1.1rem;
  line-height: 1.5;
}

.info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  /* Auto width for labels, remaining for values */
  gap: 0.5rem 1.5rem;
  /* Row gap, Col gap */
  align-items: center;
}


[data-theme="dark"] .cpanel-logo {
  filter: invert(1) hue-rotate(180deg);
  /* Invert brightness and rotate hue to keep colors somewhat similar if needed, or just invert(1) for pure negative */
  background: transparent !important;
  /* Remove white background in dark mode if image allows, otherwise invert will turn white bg to black */
}

/* Wait, image has inline style background: white. Invert(1) on white bg makes it black. 
   If user wants "inverse colors", maybe they mean the logo itself?
   If I invert the whole element including background:
   White bg -> Black bg.
   Orange/Blue logo -> Inverted colors.
   
   If I remove background in dark mode:
   If image is transparent PNG:
     Logo colors invert.
   If image is not transparent:
     Background inverts too.
   
   Let's assume transparent PNG since it has style="background: white".
   So removing background and inverting might be best?
   Or just inverting the whole thing?
   
   User said "inverse the colors on the cPanel logo".
   Let's try simple inversion first. But inline style has priority. 
   So I used !important.
*/

/* MAPS Modal Styles (Ported from MAPSStyle.css) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  background: var(--surface-color);
  color: var(--text-color);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 90%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-btn {
  background: var(--google-blue);
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: opacity 0.2s;
}

.modal-btn:hover {
  opacity: 0.9;
}

/* Status Colors for CheckAddress */
.status-green {
  color: var(--google-green);
}

.status-red {
  color: var(--google-red);
}

.status-muted {
  color: var(--muted-color);
}

.status-text {
  color: var(--text-color);
}

.status-yellow {
  color: var(--google-yellow);
}

.status-bold {
  font-weight: bold;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility functions for user requested buttons */
.rounded-lg {
  border-radius: 0.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.transition-colors {
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:bg-sky-600:hover {
  background-color: rgb(2, 132, 199);
}

[data-theme="dark"] .dark\:hover\:bg-sky-500:hover {
  background-color: rgb(14, 165, 233);
}

.active\:scale-95:active {
  transform: scale(0.95);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--ring-color, #38bdf8);
}

.focus\:ring-sky-500:focus {
  --ring-color: rgb(14, 165, 233);
}

/* Ensure theme-toggle in header overrides default button styles appropriately if they conflict */
.theme-toggle.nav-menu-item {
  /* Ensuring flex is set if not already handled by .theme-toggle */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Embedded context fixes (e.g. for MAPS in iframe) */
.embedded footer.copyright {
  display: none !important;
}

/* Ensure the main container in embedded mode has space at the bottom */
.embedded .content {
  padding-bottom: 2rem !important;
}