/* ==========================================================================
   MALAYALAM THEYYAM SOCIAL MEDIA LINKS & SHARING LANDING PAGE
   Edanad Sree Thiruverkadu Bhagavathi Temple (Kunjikkannangad)
   IT Social Media Committee & Perunkaliyatta Mahotsavam 2027
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design System & CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette */
  --bg-page-base: #080505;
  --bg-card-glass: rgba(18, 12, 12, 0.9);
  --bg-card-solid: #140d0d;
  --bg-item-base: rgba(28, 17, 17, 0.85);
  --bg-item-hover: rgba(44, 25, 25, 0.98);

  --theyyam-red-dark: #6e0909;
  --theyyam-red: #8f0d0d;
  --theyyam-red-bright: #d9230f;
  --theyyam-red-glow: rgba(217, 35, 15, 0.35);

  --temple-gold-deep: #966f1e;
  --temple-gold: #d4af37;
  --temple-gold-light: #f5d76e;
  --temple-gold-glow: rgba(212, 175, 55, 0.3);

  --text-primary: #ffffff;
  --text-secondary: #e6dcce;
  --text-muted: #a39587;
  --text-gold: #f2c84b;

  /* Social Network Accents */
  --color-instagram: #e1306c;
  --grad-instagram: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --color-facebook: #1877f2;
  --grad-facebook: linear-gradient(135deg, #1877f2 0%, #0d5ec4 100%);
  --color-youtube: #ff0000;
  --grad-youtube: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  --color-whatsapp: #25d366;
  --grad-whatsapp: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

  /* Borders & Shadows */
  --border-gold-subtle: rgba(212, 175, 55, 0.28);
  --border-gold-strong: rgba(212, 175, 55, 0.7);
  --shadow-main-card: 0 16px 48px rgba(0, 0, 0, 0.9), 0 0 35px rgba(181, 24, 24, 0.22);
  --shadow-item: 0 4px 16px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-malayalam: 'Noto Serif Malayalam', 'Anek Malayalam', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Animation Easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Core Structure
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--bg-page-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.social-hub-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg-page-base);
}

.ml-text {
  font-family: var(--font-malayalam);
  letter-spacing: 0.015em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   3. Page Background: Original temple-night.JPG with Vignette & Embers
   -------------------------------------------------------------------------- */
.page-bg-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.38) saturate(1.15);
  transform: scale(1.04);
}

.page-bg-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(8, 5, 5, 0.35) 0%, rgba(8, 5, 5, 0.88) 75%, #080505 100%),
              linear-gradient(180deg, rgba(8, 5, 5, 0.85) 0%, transparent 35%, #080505 100%);
}

.ember-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Main Container & Centered Glassmorphism Card
   -------------------------------------------------------------------------- */
.social-hub-main {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}

.social-card-wrapper {
  background: var(--bg-card-glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1.5px solid var(--border-gold-strong);
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: var(--shadow-main-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.social-card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--temple-gold), transparent);
}

/* --------------------------------------------------------------------------
   5. Header & Hero Area (Compact & Balanced Vertical Spacing)
   -------------------------------------------------------------------------- */
.hub-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* Committee Banner Box (Supplied card-03.png) */
.committee-banner-box {
  width: 100%;
  max-width: 320px;
  background: #000;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-gold-subtle);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  margin: 0;
}

.committee-banner-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Original Festival Artwork Emblem Card (Supplied card-01.png) */
.festival-artwork-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  border: 1.5px solid var(--border-gold-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 20px var(--theyyam-red-glow);
  padding: 4px;
  margin: 0;
}

.artwork-inner {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.festival-emblem-full-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Second Festival Dates Artwork (Supplied card-02.png) */
.hero-festival-dates-artwork {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.dates-artwork-box {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 2.2 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.3));
}

.dates-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
  display: block;
}

/* Event Highlights Text Strip */
.event-highlights-strip {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(143, 13, 13, 0.35) 0%, rgba(20, 13, 13, 0.65) 100%);
  border: 1px solid var(--border-gold-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  margin: 0;
}

.highlight-item {
  color: var(--temple-gold-light);
  white-space: nowrap;
}

.highlight-divider {
  color: var(--temple-gold);
  font-weight: 400;
  opacity: 0.7;
}

.hub-lead-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.45;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Social Media Cards Container & Items with Dedicated QR Buttons
   -------------------------------------------------------------------------- */
.social-links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.social-card-wrapper-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.social-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-item-base);
  border: 1.5px solid var(--border-gold-subtle);
  border-radius: 16px;
  padding: 13px 18px;
  min-height: 72px;
  transition: all 0.3s var(--ease-spring);
  overflow: hidden;
  box-shadow: var(--shadow-item);
  flex: 1;
  min-width: 0;
}

.social-card-stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--temple-gold);
  transition: width 0.3s ease;
}

.social-card:hover {
  background: var(--bg-item-hover);
  border-color: var(--temple-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 175, 55, 0.2);
}

.social-card:active {
  transform: scale(0.98);
}

/* Dedicated QR Button on the Right of Every Card */
.card-qr-btn {
  width: 54px;
  height: 72px;
  border-radius: 16px;
  background: var(--bg-item-base);
  border: 1.5px solid var(--border-gold-subtle);
  color: var(--temple-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: all 0.25s var(--ease-spring);
  flex-shrink: 0;
  box-shadow: var(--shadow-item);
}

.card-qr-btn:hover {
  background: var(--temple-gold);
  color: #140d0d;
  border-color: var(--temple-gold-light);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 16px var(--temple-gold-glow);
}

.card-qr-btn:active {
  transform: scale(0.95);
}

/* Social Icon Box */
.social-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.wa-bg { background: var(--grad-whatsapp); }
.insta-bg { background: var(--grad-instagram); }
.fb-bg { background: var(--grad-facebook); }
.yt-bg { background: var(--grad-youtube); }

/* Specific Card Stripes & Hover Accents */
.whatsapp-card .social-card-stripe { background: var(--color-whatsapp); }
.instagram-card .social-card-stripe { background: var(--grad-instagram); }
.facebook-card .social-card-stripe { background: var(--color-facebook); }
.youtube-card .social-card-stripe { background: var(--color-youtube); }

.whatsapp-card:hover { border-color: rgba(37, 211, 102, 0.75); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(37, 211, 102, 0.3); }
.instagram-card:hover { border-color: rgba(225, 48, 108, 0.75); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(225, 48, 108, 0.3); }
.facebook-card:hover { border-color: rgba(24, 119, 242, 0.75); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(24, 119, 242, 0.3); }
.youtube-card:hover { border-color: rgba(255, 0, 0, 0.75); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.3); }

/* Text Content */
.social-text-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}

.social-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.network-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.network-badge {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
}

.wa-tag { background: rgba(37, 211, 102, 0.2); color: #8affb4; border: 1px solid rgba(37, 211, 102, 0.4); }
.insta-tag { background: rgba(225, 48, 108, 0.2); color: #ff8cb3; border: 1px solid rgba(225, 48, 108, 0.4); }
.fb-tag { background: rgba(24, 119, 242, 0.2); color: #8bbaff; border: 1px solid rgba(24, 119, 242, 0.4); }
.yt-tag { background: rgba(255, 0, 0, 0.2); color: #ff8a8a; border: 1px solid rgba(255, 0, 0, 0.4); }

.social-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-sub-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   7. Countdown / Festival Day Status Section (Placed AFTER Social Cards)
   -------------------------------------------------------------------------- */
.hub-countdown-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 2px;
}

.countdown-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(28, 17, 17, 0.95) 0%, rgba(72, 4, 4, 0.5) 50%, rgba(20, 13, 13, 0.95) 100%);
  border: 1.5px solid var(--border-gold-strong);
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 175, 55, 0.2);
  position: relative;
  overflow: hidden;
}

.countdown-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--temple-gold), transparent);
}

.countdown-text-display {
  font-size: 1.22rem;
  font-weight: 700;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.countdown-num-highlight {
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--temple-gold-light);
  line-height: 1;
  text-shadow: 0 0 14px var(--temple-gold-glow);
  padding: 0 2px;
}

.countdown-text-display.festival-day-mode {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--temple-gold-light);
  text-shadow: 0 0 16px var(--temple-gold-glow);
}

.countdown-text-display.future-wait-mode {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e6dcce;
}

/* --------------------------------------------------------------------------
   8. Bottom Sharing Actions: [ Share ] [ Copy Link ] [ Page QR ]
   -------------------------------------------------------------------------- */
.hub-share-actions-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.25s var(--ease-spring);
  min-height: 46px;
}

.share-btn-primary {
  background: linear-gradient(135deg, var(--theyyam-red) 0%, #c41c1c 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 4px 14px rgba(181, 24, 24, 0.4);
}

.share-btn-primary:hover {
  background: linear-gradient(135deg, #ab1212 0%, #e02424 100%);
  box-shadow: 0 6px 20px rgba(217, 35, 15, 0.55);
  transform: translateY(-2px);
}

.copy-btn-secondary {
  background: rgba(212, 175, 55, 0.12);
  color: var(--temple-gold-light);
  border: 1px solid var(--border-gold-strong);
  backdrop-filter: blur(8px);
}

.copy-btn-secondary:hover {
  background: rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 16px var(--temple-gold-glow);
  transform: translateY(-2px);
  color: #fff;
}

.page-qr-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-gold-subtle);
  color: var(--temple-gold-light);
}

.page-qr-btn:hover {
  background: var(--temple-gold);
  color: #140d0d;
  transform: translateY(-2px);
  box-shadow: 0 0 14px var(--temple-gold-glow);
}

.action-btn:active {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   9. Clean Footer (No "Managed by", keeping IT Social Media Committee)
   -------------------------------------------------------------------------- */
.hub-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 6px;
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold-subtle), transparent);
  margin-bottom: 4px;
}

.footer-temple-name {
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.footer-committee-credit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-committee-credit strong {
  color: var(--temple-gold);
}

/* --------------------------------------------------------------------------
   10. Universal Dynamic QR Code Modal
   -------------------------------------------------------------------------- */
.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.qr-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.qr-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.qr-modal-card {
  position: relative;
  z-index: 10;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--temple-gold);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 30px var(--temple-gold-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.8rem;
  color: var(--text-muted);
  line-height: 1;
  transition: color 0.2s ease;
}

.qr-close-btn:hover {
  color: var(--theyyam-red-bright);
}

.qr-mini-logo {
  max-width: 170px;
  height: auto;
  margin-bottom: 4px;
  margin-inline: auto;
}

.qr-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.qr-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.qr-code-display {
  padding: 14px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 188px;
  min-height: 188px;
}

.qr-code-display canvas,
.qr-code-display img {
  display: block;
  max-width: 160px;
  max-height: 160px;
}

.qr-foot-url {
  font-size: 0.75rem;
  color: var(--temple-gold-light);
  word-break: break-all;
  max-width: 100%;
}

.qr-copy-action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--theyyam-red);
  color: #fff;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease;
}

.qr-copy-action-btn:hover {
  background: var(--theyyam-red-bright);
}

/* --------------------------------------------------------------------------
   11. Toast Notification Popup
   -------------------------------------------------------------------------- */
.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1c1010;
  border: 1.5px solid var(--temple-gold);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px var(--temple-gold-glow);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-family: var(--font-malayalam);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s var(--ease-spring);
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-icon {
  color: var(--temple-gold-light);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   12. Mobile Responsiveness Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body.social-hub-body {
    padding: 14px 8px;
  }

  .social-card-wrapper {
    padding: 18px 12px;
    border-radius: 18px;
    gap: 13px;
  }

  .committee-banner-box {
    max-width: 270px;
    padding: 5px 10px;
  }

  .dates-artwork-box {
    max-width: 340px;
  }

  .event-highlights-strip {
    font-size: 0.82rem;
    padding: 7px 10px;
    gap: 5px 8px;
  }

  .social-card {
    padding: 12px 14px;
    gap: 10px;
    min-height: 66px;
  }

  .card-qr-btn {
    width: 46px;
    height: 66px;
    font-size: 1.2rem;
  }

  .social-icon-box {
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
  }

  .social-action-title {
    font-size: 0.92rem;
  }

  .countdown-text-display {
    font-size: 1.05rem;
    gap: 6px;
  }

  .countdown-num-highlight {
    font-size: 1.5rem;
  }

  .countdown-text-display.festival-day-mode {
    font-size: 1.15rem;
  }

  .hub-share-actions-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .page-qr-btn {
    grid-column: span 2;
  }
}