/* ===============================
   🧱 Layout & Structure
   =============================== */

.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.site-header {
  flex: 0 0 auto;
  height: auto;
  padding: 20px;
  background: #333;
  color: white;
}

.site-main {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #222;
  color: white;
  font-size: 14px;
}

/* ===============================
   🖼️ Iframe Styling
   =============================== */

iframe {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  border-radius: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

/* ===============================
   🎯 Typography & Base
   =============================== */

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

h1, h2 {
  margin: 10px 0;
}

p {
  margin: 5px 0;
  line-height: 1.5;
}

.content-section {
  padding: 30px;
  max-width: 800px;
  margin: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ===============================
   🧭 Header & Navigation
   =============================== */

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header-container h1 {
  font-size: 48px;
  color: red;
}

.signup-section {
  list-style: none;
  display: flex;
  gap: 10px;
}

.signup-section a {
  padding: 6px 16px;
  background: #444;
  color: blue;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.signup-section a:hover {
  background: #555;
  color: white;
  border-color: white;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}

nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

nav ul li {
  margin: 0 15px;
  color: blue;
}

nav ul li a {
  padding: 10px 20px;
  background: #444;
  color: blue;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

nav ul li a:hover {
  background: #555;
  color: white;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}

/* ===============================
   🛍️ Product Listing
   =============================== */

ul.product-list {
  list-style: none;
  padding: 0;
}

ul.product-list li {
  margin: 10px 0;
  font-weight: bold;
}

ul.product-list li a {
  color: #0044cc;
  text-decoration: none;
}

ul.product-list li a:hover {
  text-decoration: underline;
}

/* ===============================
   🧾 Forms
   =============================== */

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

input, textarea, button {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  background: #333;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #555;
}


/* ===============================
   AI-Story-page Adjustments 
   =============================== */

.stories-container {
    display: flex; /* Enables side-by-side layout */
    flex-wrap: wrap; /* Forces items to wrap onto new rows */
    gap: 20px; /* Adds space between stories */
    justify-content: center; /* Centers the stories */
}

.story-container {
    flex: 1 1 calc(50% - 20px); /* Ensures two per row */
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body.AI-Story-page {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f4f4f4;
    color: #333;
}

body.AI-Story-page h1 {
    text-align: center;
}

body.AI-Story-page .highlight {
    font-weight: bold;
    color: #0044cc;
}


/* ===============================
   AI Introspection Adjustments
   =============================== */
	.category {
            font-size: 28px;
            font-weight: bold;
            margin-top: 10px;
            color: #d35400;
        }
	.sign {
            font-size: 30px;
            font-weight: bold;
            margin-top: 10px;
            margin-left: 0;
            align-items: left;

        }

        .horoscope-container {
            display: flex;
            align-items: left;
            margin-left: 0;
            max-width: 800px;
            margin: 5px auto;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
	.sign-box {
            display: flex;
            flex-direction: column; /* Arrange Sign and Text side-by-side */
            align-items: center; /* Align items vertically */
            gap: 5px; /* Adds spacing between Sign and Text */
            font-size: 24px;
            width: 320px; /* Adjust width as needed */
	}

        .emoji {
            font-size: 30px;
            margin-top: 5px;
        }
        .description {
            flex-grow: 1;
            font-size: 18px;
            margin-left: 20px;
            align-text: center;

        }




/* ===============================
   Social media styling 
   =============================== */

.social-icons {
    display: flex;
    align-items: center; /* Vertically centers the text and images */
    gap: 25px; /* Adds spacing between elements */
}


div.social-icons img {
    width: 30px; /* Adjust size */
    height: 30px; /* Adjust size */
}

.social-icons img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%; /* Optional: Make the images circular */
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1); /* Optional: Slight zoom effect on hover */
}

.social-text {
    font-size: 20px;
    font-weight: bold;
    color: blue;
    font-family: Arial, sans-serif;
    line-height: 30px; /* Matches icon height for better alignment */
}







/* ===============================
   📱 Responsive
   =============================== */

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .header-container h1 {
    font-size: 32px;
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .signup-section {
    flex-direction: column;
    align-items: center;
  }

  .content-section {
    padding: 20px;
  }
/* ===============================
   📱 Mobile Optimization Fixes
   =============================== */

/* Ensure inputs and textareas scale properly */
input, textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Improve button tap targets */
button {
  min-height: 48px;
  min-width: 48px;
}

/* Fix viewport height issues on mobile */
.page-wrapper {
  min-height: 100vh;
  height: auto;
}

/* Prevent iframe from overflowing on small screens */
iframe {
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

/* Make sure content inside iframe is scrollable */
.site-main {
  overflow-y: auto;
}

/* Responsive typography */
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

/* Responsive header layout */
.header-container {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Responsive nav layout */
nav ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}


/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

/* Ensure horizontal layout for social icons */
.social-icons {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping if needed */
  justify-content: center; /* Centers icons horizontally */
  align-items: center;
  gap: 15px;
  flex-direction: row; /* Explicitly set horizontal layout */
}

/* Ensure each icon stays compact */
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

}