/* ---------------------------
   General Body & Fonts
--------------------------- */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: white;
    color: #000;
}

/* ---------------------------
   Header
--------------------------- */
header {
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-bottom: 0;
    padding: 5px 0;
    text-align: center;
    border-radius: 10px;
}

header a {
    text-decoration: none;
}

/* Updated for branding div instead of h1 */
header .site-logo {
    background-color: yellow;
    color: black;
    margin: 0;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: 1px solid black;
    border-radius: 10px;
    display: inline-block;
    font-size: 2em; /* Adjust size like h1 */
    font-weight: bold;
}

/* ---------------------------
   Navigation Menu (Header & Footer)
--------------------------- */
nav.topnav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
    padding: 0;
    list-style: none; /* remove bullets */
    border-bottom: 1px solid #ccc;
    max-width: 900px;
    margin: 0 auto;      /* Center align */
}

nav.topnav ul li {
    margin: 0 5px 5px 0;
}

nav.topnav ul li a {
    background-color: white;
    color: black;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 10px;
    display: inline-block;
}

nav.topnav ul li a:hover {
    background-color: #f0f0f0;
}

/* ---------------------------
   Main Content Begin
--------------------------- */
main {
    background-color: #FFFFFF;
    padding: 0 20px 0px;
    max-width: 900px;
    margin: auto;
    margin-top: -10px;
    margin-bottom: 0px;
    font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
    font-size: 16px;       /* Good for readability */
    line-height: 1.3;      /* Comfortable spacing */
    color: #222;           /* Dark text for contrast */
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
}
 
main img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 15px auto;
    border-radius: 10px;
}

/* Headings spacing */
main h1, main h2, main h3, main h4, main h5, main h6 {
    margin-bottom: -10px;
    line-height: 1.0;  
    font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
}

/* Font sizes in pixels */
main h1 {
    font-size: 22px;
    
}

main h2 {
    font-size: 22px;
}

main h3 {
    font-size: 20px;
}

main h4 {
    font-size: 20px;
}

main h5 {
    font-size: 20px;
}

main h6 {
    font-size: 20px;
}

/* Lists */
main ul {
    margin: 10 0 15px 20px;
}

/* Links in Main Content */
main a {
    color: blue;
    text-decoration: underline;
}
/* ---------------------------
   Main Content End
--------------------------- */


/* ---------------------------
  Festival Post Style Css Begin
--------------------------- */
/* ---------------------------
  Featured Image Share Begin
--------------------------- */
.share-image-box {
  width: 90%;            /* responsive width */
  max-width: 800px;      /* max width for large screens */
  margin: 20px auto;
  text-align: center;
}

.share-image-box img {
  width: 100%;           /* fills container */
  height: auto;          /* maintains aspect ratio */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  display: block;
}

.share-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.share-buttons button {
  background: #ffa500;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}

.share-buttons button:hover {
  background: #ff8c00;
}

/* Mobile View */
@media screen and (max-width: 600px) {
  .share-buttons {
    flex-direction: row;      /* Keep buttons side by side */
    justify-content: center;  /* Center buttons horizontally */
    gap: 5px;                 /* Small space between buttons */
    flex-wrap: wrap;          /* Wrap to next line if screen is too narrow */
  }

  .share-buttons button {
    width: auto;              /* Let button width fit content */
    margin: 0;                /* Remove vertical margin */
  }
}
/* ---------------------------
  Featured Image Share End
--------------------------- */



/* ---------------------------
   Calendar Section Begin
--------------------------- */
#festival-calendar {
  max-width: 100%;
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #ffa500;
  border-radius: 12px;
  background: #fff8e1;
  font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.calendar-header h2 {
  font-size: 18px;
  margin: 5px 0;
  color: #d35400;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;  /* Make all cells equal width */
}

.calendar-table th,
.calendar-table td {
  border: 1px solid #ddd;
  padding: 8px;
  vertical-align: top;
  word-wrap: break-word;
}

.calendar-table td.today {
  background: #ffeb3b;
  font-weight: bold;
}

.calendar-table td.festival {
  background: #ffe0e0;
  color: #d32f2f;
  font-weight: bold;
  cursor: pointer;
}

.calendar-table .festival-name {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: #000;
}

.calendar-nav {
  background: #ffa500;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  margin: 5px 0;
}

.calendar-nav:hover {
  background: #ff7043;
}

/* Mobile Responsive: Stack the calendar table if needed */
@media screen and (max-width: 600px) {
    .calendar-table th, .calendar-table td {
        padding: 6px 2px;
        font-size: 12px;
    }
}
/* ---------------------------
   Calendar Section End
--------------------------- */

/* ---------------------------
   Festival Timing Table Begin
--------------------------- */
#festival-timing-calendar {
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
    padding-top: 0px;
    border: 2px solid #ffa500;
    border-radius: 10px;
    background: #fff8e1;
    font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
}

#festival-timing-calendar h3 {
    text-align: center;
    color: #d35400;
    margin-bottom: 10px;
}

#festival-timing-calendar table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

#festival-timing-calendar th,
#festival-timing-calendar td {
    border: 1px solid #ddd;
    padding: 8px;
}

#festival-timing-calendar th {
    background-color: #ffd54f;
    color: #000;
}

#festival-timing-calendar tr:nth-child(even) {
    background-color: #fff3e0;
}

/* Mobile Responsive */
@media screen and (max-width: 600px) {
    #festival-timing-calendar th,
    #festival-timing-calendar td {
        font-size: 14px;
        padding: 6px;
    }
}
/* ---------------------------
   Festival Timing Table End
--------------------------- */

/* ---------------------------
   Date & Time Display Begin
--------------------------- */
#india-date,
#india-clock {
    font-weight: bold;
    color: #000;
    font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
}

#india-date {
    display: block;
    font-size: 16px;
    color: #c0392b;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}

#india-clock {
    display: inline-block;
    font-size: 16px;
    color: #c0392b;
    letter-spacing: 0.5px;
}

/* Center alignment for parent <p> */
.time-display {
    text-align: center;
    background: #fff8e1;
    border: 2px solid #ffa500;
    border-radius: 10px;
    padding: 10px;
    max-width: 400px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.2);
}

/* Mobile friendly */
@media screen and (max-width: 600px) {
    #india-date {
        font-size: 16px;
    }
    #india-clock {
        font-size: 18px;
    }
}
/* ---------------------------
   Date & Time Display End
--------------------------- */

/* ---------------------------
   Quote Copy Begin
--------------------------- */
#quote-section {
  max-width: 700px;
  margin: 10px auto;
  text-align: center;
}

#quote-section h2 {
  color: #d35400;
  margin-bottom: 15px;
  font-family: 'Verdana', sans-serif;
}

.quote-box {
  border: 1px solid #ffc107;
  background: #fff9e6;
  padding: 12px;
  border-radius: 10px;
  margin: 10px 0;
  box-shadow: 0 0 6px rgba(255, 165, 0, 0.2);
  display: flex;
  flex-direction: column; /* Keep text above buttons */
  align-items: center;
}

.quote-box p {
  margin: 0;
  font-size: 15px;
  font-weight: bold; 
  color: #444;
  text-align: center;
  margin-bottom: 10px; /* Space between text and buttons */
  font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
}

/* Share Buttons Styling */
.Quote-share-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 300px;
}

.Quote-share-buttons button {
  background: #ffa500;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}

.Quote-share-buttons button:hover {
  background: #ff8c00;
}

/* Mobile View */
@media screen and (max-width: 600px) {
  .Quote-share-buttons {
    flex-direction: row;      
    justify-content: center;  
    gap: 5px;                 
    flex-wrap: wrap;      
  }

  .Quote-share-buttons button {
    width: auto;              
    margin: 0;              
  }
}
/* ---------------------------
   Quote Copy End
--------------------------- */

/* ===== GIF Section Standard Style (Responsive) Begin ===== */
.gif-box {
  text-align: center;
  margin: 25px auto;
  width: 100%;
  max-width: 700px; /* compacted for desktop */
  padding: 10px;
}

.gif-video {
  width: 100%;
  max-width: 512px;
  aspect-ratio: 1 / 1; /* maintain square layout */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  object-fit: cover;
  background-color: #000;
  pointer-events: none; /* prevent pause on click */
}

/* ===== Share Buttons ===== */
.share-buttons {
  margin-top: 10px;
  text-align: center;
}

.share-buttons button {
  background: linear-gradient(90deg, #ffb300, #ff6f00);
  color: #fff;
  border: none;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.3s ease;
}

.share-buttons button:hover {
  background: linear-gradient(90deg, #ff6f00, #ffb300);
  transform: scale(1.05);
}

/* ===== Responsive Breakpoints ===== */

/* Tablet screens */
@media (max-width: 1024px) {
  .gif-box {
    max-width: 600px;
  }
  .gif-video {
    max-width: 420px;
  }
}

/* Mobile screens */
@media (max-width: 768px) {
  .gif-box {
    max-width: 95%;
    padding: 5px;
  }
  .gif-video {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
  }
  .share-buttons button {
    font-size: 13px;
    padding: 6px 12px;
    margin: 3px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .gif-box {
    max-width: 100%;
    margin: 15px auto;
  }
  .gif-video {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }
}
/* ===== GIF Section Standard Style (Responsive) End ===== */


/* ===== Video Section Standard Style (Responsive) Begin ===== */
.video-box {
  text-align: center;
  margin: auto;
  width: 100%;
  max-width: 900px; /* compacted for desktop */
  padding: 0px;
}

.festival-video {
  width: 100%;
  max-width: 512px;
  aspect-ratio: 1 / 1; /* maintain square layout */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  object-fit: cover;
  background-color: transparent;
}


/* ===== Share Buttons ===== */
.share-buttons {
  margin-top: 10px;
  text-align: center;
}

.share-buttons button {
  background: linear-gradient(90deg, #ffb300, #ff6f00);
  color: #fff;
  border: none;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.3s ease;
}

.share-buttons button:hover {
  background: linear-gradient(90deg, #ff6f00, #ffb300);
  transform: scale(1.05);
}

/* ===== Responsive Breakpoints ===== */

/* Tablet screens */
@media (max-width: 1024px) {
  .video-box {
    max-width: 600px;
  }
  .festival-video {
    max-width: 420px;
  }
}

/* Mobile screens */
@media (max-width: 768px) {
  .video-box {
    max-width: 100%;
    padding: 0px;
  }
  .festival-video {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
  }
  .share-buttons button {
    font-size: 13px;
    padding: 6px 12px;
    margin: 3px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .video-box {
    max-width: 100%;
  }
  .festival-video {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }
}
/* ===== Video Section Standard Style (Responsive) End ===== */


/* ---------------------------
  Paragraph Tag Begin
--------------------------- */
.paragraph-tag {
    background-color: #ffd54f;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-family: Verdana, Geneva, Arial, "Comic Sans MS", "Book Antiqua", sans-serif;
    font-size: 16px;
    color: #000;
    width: fit-content;
    margin: 0px 0;
    line-height: 1.5; 
}

.paragraph-tag .highlight-text {
    background-color: #4e7e2f; /* Greenish background */
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
}
/* ---------------------------
  Paragraph Tag End
--------------------------- */
/* ---------------------------
  Festival Post Style Css End
--------------------------- */

/* ---------------------------
   Categories Section on Footer Begin
--------------------------- */
.footer-categories {
    background-color: #FFFFFF;
    color: black;
    padding: 0;
    text-align: center;
    max-width: 900px;       /* same width as footer */
    margin: 0 auto;         /* center align */
    margin-top: 0px;
    margin-bottom: 10px;
    position: relative;
}

.footer-categories::before {
    content: "";
    display: block;
    height: 1px;             /* thinner line */
    background: #ccc;        /* gray line */
    margin: 0 auto 10px;
    max-width: 900px;        /* longer line */
}
.footer-categories::after {
    content: "";
    display: block;
    height: 1px;             /* thinner line */
    background: #ccc;        /* gray line */
    margin: 0 auto 10px;
    max-width: 600px;        /* longer line */
}

.footer-categories h2 {
    font-size: 1.5em;
    margin-top: -5px;
    margin-bottom: 0px;
    color: #000;
}

.footer-categories .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.footer-categories .category-list li {
    margin: 0;
}

.footer-categories .category-list li a {
    text-decoration: none;
    background-color: yellow;
    color: black;
    padding: 6px 12px;
    border: 1px solid black; /* match footer buttons */
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.footer-categories .category-list li a:hover {
    background-color: #ffc107;
}

/* ---------------------------
   Categories Section on Footer End
--------------------------- */

/* ---------------------------
   Footer Begin
--------------------------- */
footer {
    background-color: #FFFFFF;
    color: black;
    padding: 0px 0;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;      /* Center align */
    margin-top: 0px;
    margin-bottom: 10px;
}

footer p {
    margin: 5px 0 0 0;
}

/* Footer navigation list */
footer ul.footer-menu {
    list-style: none;        /* Remove default bullets */
    padding: 0;              /* Remove default padding */
    margin-top: 0px;      /* Spacing from content */
    display: flex;           /* Horizontal layout */
    justify-content: center; /* Center menu items */
    flex-wrap: wrap;         /* Wrap on small screens */
    gap: 10px;               /* Space between links */
}

footer ul.footer-menu li {
    margin: 0;
}

footer ul.footer-menu li a {
    text-decoration: none;
    color: black;
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease;
}

footer ul.footer-menu li a:hover {
    background-color: #f0f0f0;
}
/* ---------------------------
   Footer End
--------------------------- */