/* ====================================================
   GLOBAL STYLES - Common styles across all pages v1.22
   ==================================================== */
:root {
  --site-width: 700px; /* Universal width for containers across the site */
}

body {
  margin: 0 auto; /* Center the body */
  font-family: 'Shantell Sans', 'Comic Sans MS', cursive, sans-serif; /* Improved fallback chain */
  background-color: #001233;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  width: var(--site-width);/* Fixed width */
  padding-top: 10px;
  box-sizing: border-box;
}

/* Ensure SVG text inherits font properties */
svg text {
  font-family: inherit;
}

/* Make headings slightly bolder for better hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500; /* Medium weight for headings */
}

/* For UI elements like buttons, a slightly lighter weight */
button, .button, .tab-content h2 {
  font-weight: 400;
}

/* Site logo sizing */
.logo {
  height: 40px;
  width: auto;
}

/* Footer styling - appears on all pages */
footer {
  margin-top: auto; /* Pushes footer to bottom */
  padding: 1rem 0;
  color: #aaa;
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
}

footer a {
  color: #aaa;
  text-decoration: none;
  margin-left: 10px;
  transition: color 0.3s;
}

/* Footer link hover - COMMENTED OUT v1.05 */
/* footer a:hover {
  color: #fff;
} */

/* ====================================================
   APPS PAGE - Styles for apps.html
   ==================================================== */

/* Container for app tabs */
.tabs-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 2rem;
}

/* Individual MENU app tab styling */
.tab {
  width: 140px; /* Reduced from 200px to make all tabs thinner */
  margin: 0 0.4rem; /* distance between */
  position: relative;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.tab:hover {
  transform: translateY(-5px);
}

/* Content area within each tab */
.tab-content {
  /* Change from position: absolute to relative */
  position: relative;
  /* Remove top/left positioning */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  /* Remove fixed height */
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.3rem 2rem 0.3rem;  /* Increased bottom padding */
  box-sizing: border-box;
  text-align: center;
  border-radius: 0 0 50% 50% / 20%; /* Curved bottom edge */
  border: 2px solid white;
  overflow: hidden;
  min-height: 180px; /* Add a minimum height instead */
}

/* Tab header styling */
.tab-content h2 {
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}

/* Tab description text */
.tab-content p {
  font-size: 0.85rem;
  line-height: 1.3;
  margin: 0.6rem 0 1rem;
}

/* TAB App icon container styling update */
.app-icon {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

/* Update SVG icon styling to handle both SVG and image files */
.app-icon svg,
.app-icon img {
  width: 100%;
  height: 100%;
}

/* App-specific background colors */
.url-pro {
  background-color: #7755cc; /* Purple */
}

.youtube-subs {
  background-color: #b0713c; /* Orange-brown */
}

.ext-viewer {
  background-color: #08899d; /* Red-brown */
}

/* ====================================================
   MENU TAB - Navigation menu styling v1.22 - IMPROVED FONT HANDLING
   ==================================================== */

/* MENU LINKS CONTAINER */
.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: -10px; /* NEGATIVE MARGIN TO MOVE BINARY LINKS HIGHER */
}

/* MENU LINK STYLING - UPDATED FOR SVG SUPPORT V1.18 - FIXED SPACING */
.menu-links a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  margin: 0px 0px 10px 0px; 
  padding: 0px 2px; 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.menu-links a:hover {
  color: #ddd;
  transform: scale(1.1);
}

/* Font-aware SVG styling for menu links v1.15 */
.menu-links a img {
  width: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(100%); /* Make SVG white */
  transition: all 0.3s ease;
}

.menu-links a:hover img {
  filter: brightness(0) saturate(100%) invert(87%); /* Make SVG light gray on hover */
  transform: scale(1.05);
}

/* ====================================================
   APP PAGE - Expanded view for selected apps
   ==================================================== */
.app-details {
  display: none; /* Hidden by default */
  width: 100%;
  margin: 2rem auto;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

/* Show when app is selected */
.app-details.active {
  display: block;
}

/* Download button styling */
.download-button {
  display: inline-block;
  background-color: #001233;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: bold;
  margin-top: 1rem;
  border: 2px solid white;
  transition: all 0.3s ease;
}

.download-button:hover {
  background-color: white;
  color: #001233;
}

/* ====================================================
   MODAL SYSTEM - Reusable modal for contact forms
   ==================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 999; /* Ensures modal appears on top */
}

.modal-container {
  background-color: #001233;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: modalAppear 0.3s ease-out;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* animation for modal appearance */
@keyframes modalAppear {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Close button for modal */
.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 2;
}

.modal-close:hover {
  color: #7755cc;
}

/* Active state for showing modal */
.modal-overlay.active {
  display: flex;
}

/* ====================================================
   COMPACT MENU TAB - Special styling for thinner menu tab
   ==================================================== */
.menu-tab {
  width: 100px; /* Thinner than other tabs */
  height: 180px; /* Shorter than other tabs */
  background-color: #555; /* Neutral gray color */
  display: flex;
  align-items: center; /* Keep horizontal centering */
  justify-content: center;
  border-radius: 0 0 50% 50% / 20%;
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ====================================================
   RESPONSIVE LAYOUTS - Apps page adaptations
   ==================================================== */
@media (max-width: 900px) {
  /* Switch to wrapped layout below 900px */
  .tabs-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tab {
    margin: 0.7rem;
  }
}

@media (max-width: 700px) {
  /* Stack tabs vertically below 700px */
  .tabs-container {
    flex-direction: column;
    align-items: center;
  }
  
  .tab {
    margin: 0.7rem 0;
  }
}

/* ====================================================
   HOME PAGE - Styles for index.html
   ==================================================== */
.svg-container {
  position: relative;
  margin-top: 14%;
  width: 90%;
}

/* Logo/SVG container */
.container svg, .container img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Interactive hover areas */
.hover-zone {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

/* Tooltip styling for hover information */
.tooltip {
  position: absolute;
  background-color: rgba(30, 30, 30, 0.95);
  color: white;
  padding: 1rem;
  border-radius: 10px;
  width: 500px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s ease 0.5s; /* Added 0.3s delay here */
  pointer-events: none;
  z-index: 3;
  text-align: center;
  border: 2px solid white;
}

.hover-zone:hover + .tooltip {
  opacity: 1;
  transform: scale(1);
}

/* Positioning for each HOVER ZONE */
.zone-dev { top: 80px; left: 60px; }
.tooltip-dev { top: 50px; left: 120px; }
.zone-design { top: 40px; right: 40px; }
.tooltip-design { top: 20px; right: 140px; }
.zone-data { top: 400px; right: 260px; }
.tooltip-data { top: 50px; left: 100px; }

/* Tooltip image styling */
.tooltip img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

/* ====================================================
   CENTER NAVIGATION - PNG Button Images v1.11 - FIXED
   ==================================================== */
.center-btn {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.3s ease;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Remove link underlines */
}

/* Center button hover effects v1.11 - FIXED */
.center-btn:hover {
  opacity: 0.8;
}

/* Scale only the image inside, not the button container v1.11 - FIXED */
.center-btn:hover img {
  transform: scale(1.15);
}

/* PNG image styling within buttons v1.11 - FIXED */
.center-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* Positioned to match the logo design v1.11 */
.bit-btn {
  top: 25.6%;
  left: 50.2%;
  transform: translate(-50%, -50%);
  width: 48px;
}

.by-btn {
  top: 42.6%;
  right: 39.5%;
  transform: translate(50%, -50%);
  width: 30px;
}

.email-btn {
  bottom: 50%;
  left: 42.4%;
  transform: translate(-50%, 50%);
  width: 55px;
}

/* ====================================================
   CONTACT FORM - Contact form within modal
   ==================================================== */
.contact-form {
  padding: 3rem 2rem;
  border-radius: 20px;
}

.contact-form h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
  color: white;
  font-size: 22px;
  font-weight: 300;
}

/* Form inputs styling */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px 20px;
  margin: 0 0 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: inherit; /* Ensure form fields use Shantell Sans */
}

/* Textarea specific styling */
.contact-form textarea {
  min-height: 60px; /*  MESSAGE TEXT AREA HEIGHT */
  resize: vertical;
}

/* Form submit button */
.contact-form button {
  background-color: #7755cc;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  cursor: pointer;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.1rem;
  display: block;
  width: 220px;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
  font-family: inherit; /* Ensure button uses Shantell Sans */
}

/* Contact form button hover - COMMENTED OUT v1.05 */
/* .contact-form button:hover {
  background-color: #8866dd;
} */

/* ====================================================
   RESPONSIVE MODAL - Mobile adaptations for modal
   ==================================================== */
@media (max-width: 600px) {
  /* Narrower screens get fuller width modal */
  .modal-container {
    width: 95%;
    margin: 0 10px;
  }
  
  /* Reduced padding on smaller screens */
  .contact-form {
    padding: 2rem 1rem;
  }
}

/* ====================================================
   APP SCREENSHOTS - Image styling for app details
   ==================================================== */
/* App screenshots styling */
.app-screenshot {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.app-screenshot:hover {
  transform: scale(1.05);
}

.app-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add some spacing between features and screenshot */
.app-details ul {
  margin-bottom: 25px;
}

/* Responsive adjustments for screenshots */
@media (max-width: 700px) {
  .app-screenshot {
    max-width: 90%;
  }
}

/* ====================================================
   ABOUT PAGE - Styling for about.html
   ==================================================== */
.about-container {
  width: 100%;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin-bottom: 2rem;
}

.about-section {
  margin-bottom: 2.5rem;
}

.about-section:last-child {
  margin-bottom: 0;
}

.about-heading {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.about-heading img {
  height: 40px;
  width: auto;
  margin-right: 15px;
}

.about-image {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

.about-image object.svg-object {
  width: 100%;
  height: auto;
  display: block;
}

/* Back button styling */
.back-button {
  float: right;
  margin-left: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px;  /* Reduced padding */
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-decoration: none;
  width: 40px;  /* Added fixed width */
  height: 40px;  /* Added fixed height */
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

/* Style the SVG itself */
.back-button svg {
  width: 24px;
  height: 24px;
  stroke: white;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .about-container {
    padding: 1.5rem;
  }
}

/* ====================================================
   LOGO ANIMATION - Animated logo for home page v1.11
   ==================================================== */
/* Logo animation Styles */
.logo-animation {
  position: absolute;
  top: 38.2%;
  left: 43%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Below hover elements to prevent interference */
}

.logo-animation img {
  width: 60px;
  height: auto;
  animation: logoChange 1.7s infinite;
}

@keyframes logoChange {
  0% { content: url('animation/logo-1.svg'); }
  10% { content: url('animation/logo-2.svg'); }
  20% { content: url('animation/logo-3.svg'); }
  30% { content: url('animation/logo-4.svg'); }
  40% { content: url('animation/logo-5.svg'); }
  50% { content: url('animation/logo-6.svg'); }
  60% { content: url('animation/logo-7.svg'); }
  70% { content: url('animation/logo-8.svg'); }
  80% { content: url('animation/logo-9.svg'); }
  90% { content: url('animation/logo-10.svg'); }
  100% { content: url('animation/logo-1.svg'); }
}

/* ====================================================
   ANIMATION PAUSE ON BUTTON HOVER v1.11
   ==================================================== */
/* Pause logo animation when class is added via JavaScript */
.logo-animation.paused img {
  animation-play-state: paused;
}

/* ====================================================
   SEO HIDDEN CONTENT - Content for search engines v1.11
   ==================================================== */
/* Hide content visually but keep accessible to search engines */
.seo-content {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}