/* ==========================
   🌍 GLOBAL STYLES
   (Navbar, Headings, Body)
   --------------------------
   This section defines the universal styling
   used across every page of your website.
   It sets up your background, fonts, colors,
   and the navigation bar look.
   ========================== */

/* === 🖤 BODY ===
   Controls the overall look of every page:
   background color, text color, and base font.
*/
body {
  background-color: #000;       /* Black background for ATM brand */
  font-family: Arial, sans-serif; /* Clean, simple font */
  margin: 0;                    /* Removes default browser spacing */
  padding: 0;                   /* Keeps layout tight */
  color: #fff;                  /* White text for readability */
}

/* === 🌐 GLOBAL SMOOTH SCROLL ===
   Makes page scrolling glide smoothly
   instead of jumping harshly.
*/
html {
  scroll-behavior: smooth;
}

/* === 🏷️ HEADINGS (H1 + H2) ===
   Defines consistent colors, sizes,
   and spacing for your main titles.
*/
h1 {
  color: #FFD700;              /* ATM Yellow – primary highlight color */
  font-size: 2.2em;            /* Slightly large for emphasis */
  font-weight: bold;           /* Makes it stand out */
  margin-bottom: 10px;         /* Space below the heading */
}

h2 {
  color: #fff;                 /* White for secondary headings */
  font-size: 1.3em;            /* Smaller than h1 */
  margin-bottom: 15px;         /* Keeps clean spacing */
}

/* === 🎥 VIDEO DEFAULTS ===
   Used on pages with embedded videos
   (like your badge animation or future intros).
*/
video {
  width: 50%;                  /* Takes up half the container width */
  max-width: 400px;            /* Prevents videos from stretching too wide */
  border-radius: 10px;         /* Soft corners for a modern look */
  margin-top: 15px;            /* Adds breathing room above video */
}

/* === 📦 UTILITY CLASS: Centered Layout ===
   Quick helper class that centers content
   both horizontally and vertically on the page.
   (Useful for standalone message pages or coming soon sections.)
*/
.centered-page {
  text-align: center;
  padding: 20px;
}

/* === ✨ GLOW DIVIDER ===
   A reusable, thin golden line that fades
   at the edges. Used to separate story sections.
*/
.glow-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, rgba(255, 213, 112, 0.4), transparent);
  margin: 3rem auto;
  width: 80%;
  max-width: 300px;
}

/*
  REMOVED: All old .navbar, .dropdown, .menu-toggle, and .logo styles have been removed from this file.
  The new, self-contained styles are now located in /includes/header.html.
*/

/* ==========================
   🧱 PAGE CONTAINER (Optional Wrapper)
   --------------------------
   This section defines a reusable container
   that keeps content neatly centered on the page
   and prevents text from stretching too wide
   on large screens.
   ========================== */

.page-container {
  max-width: 900px;   /* Limits how wide content can go */
  margin: 0 auto;     /* Centers content horizontally */
  padding: 0 20px;    /* Adds left/right breathing room */
}


/* ======================================================
   👋 HOMEPAGE WELCOME SECTION
   ------------------------------------------------------
   A horizontally-spanning statement box under the navbar
   with brand accents and readable typography.
   ====================================================== */

.welcome-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 12px;
  margin: 12px auto 24px;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.08);
}

.welcome-section .section-inner {
  padding: 18px 0;
}

.welcome-section .intro p {
  margin: 8px 0;
  font-size: 1.05em;
}

.welcome-section .lead {
  color: #FFD700;
  font-weight: 800;
  font-size: 1.15em;
}

.welcome-section .mission-quote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 4px solid #FFD700;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-style: italic;
}

.welcome-section .cta-line {
  margin-top: 12px;
  font-weight: 800;
  color: #FFD700;
}

/* REMOVED: media query for welcome-section. This should be in mobile-responsive.css */


/* ==========================
   🧰 TOOLBOX LIST STYLES
   --------------------------
   This simply highlights certain text (like keywords
   or titles) inside your toolbox or info lists.
   ========================== */

.toolbox-list strong {
  color: #FFD700;  /* ATM yellow highlight for emphasis */
}


/* ==========================
   🟨 FRAME ANNOUNCEMENT BUTTON
   --------------------------
   Used for important call-to-action buttons
   such as “Download”, “Join”, or “See More”.
   Gives them a bright yellow style that matches
   your brand identity.
   ========================== */

.button {
  display: inline-block;      /* Makes it behave like a button (not inline text) */
  padding: 12px 24px;         /* Controls button size */
  margin-top: 15px;           /* Adds spacing above */
  background: #FFD700;        /* ATM yellow background */
  color: #000;                /* Black text for contrast */
  font-weight: bold;          /* Makes text stand out */
  border-radius: 8px;         /* Smooth rounded corners */
  text-decoration: none;      /* Removes underline if it’s a link */
  transition: all 0.3s ease;  /* Smooth hover animation */
}


/* ==========================
   🖱️ BUTTON HOVER EFFECT
   --------------------------
   When you hover over a button:
   - It lightens slightly
   - Text remains dark
   - A glowing shadow appears
   ========================== */

.button:hover {
  background: #fff;                            /* Turns white on hover */
  color: #000;                                 /* Keeps text readable */
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6); /* Adds soft yellow glow */
}
/* ======================================================
   ⚡ THE SPARK SECTION
   ------------------------------------------------------
   This section controls the main black/yellow content box
   for “The Spark” page — including spacing, text alignment,
   and how the gold border + glow are displayed.
   ====================================================== */

.spark-section {
  background-color: #000;                /* Black background */
  color: #f5f5f5;                        /* Light grey text for contrast */
  padding: 40px 0;                       /* Top and bottom padding */
  line-height: 1.7;                      /* Comfortable line spacing */
  border: 2px solid #FFD700;             /* ATM yellow border */
  border-radius: 14px;                   /* Rounded corners */
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); /* Soft yellow glow */
  margin: 40px auto;                     /* Centered with space above/below */
  max-width: 1100px;                     /* Keeps it readable on wide screens */
}

/* Center both main and sub-headings in the spark box */
.spark-section h1,
.spark-section h2 {
  text-align: center;
}

/* Style for all paragraph text inside the spark box */
.spark-section p {
  text-align: center;                    /* Center-aligns the paragraphs */
  max-width: 750px;                      /* Restricts text width for readability */
  margin: 0 auto 18px;                   /* Centers and adds spacing below */
}


/* ======================================================
   🔥 THE FIRE PAGE
   ------------------------------------------------------
   Focused on storytelling — bold orange headings,
   warm text spacing, and emotional emphasis.
   ====================================================== */

.fire-story h2 {
  color: #FF4500;                        /* Bright “fire” orange heading */
  font-size: 2.2em;                      /* Large title */
  margin-bottom: 25px;                   /* Space below the title */
}

.fire-story p {
  font-size: 1.15em;                     /* Slightly larger text for reading */
  line-height: 1.7;                      /* Looser line spacing for flow */
  margin: 18px 0;                        /* Space between paragraphs */
}

.fire-story strong {
  color: #FFD700;                        /* Gold highlight for key phrases */
}

.fire-story em {
  color: #1E90FF;                        /* Optional blue for emotional quotes */
}

/* Centers video embeds (used below Spark + Fire sections) */
.video-container {
  text-align: center;
}


/* ======================================================
   💬 THE MOVEMENT PAGE
   ------------------------------------------------------
   This section controls layout and text styles for
   “The Movement” — including containers, buttons, and
   the image container block.
   ====================================================== */

/* Main content container for The Movement page */
.container {
  max-width: 800px;                      /* Keeps layout neat */
  margin: 0 auto;                        /* Centers horizontally */
  padding: 20px;                         /* Adds space around content */
  text-align: center;                    /* Centers text and headings */
}

/* Headings follow brand hierarchy:
   h1 = gold, h2 = white, h3 = gold again */
h1 {
  color: #FFD700;
  font-size: 2.5em;
  margin-bottom: 10px;
}

h2 {
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 20px;
}

h3 {
  color: #FFD700;
  font-size: 1.3em;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* Default paragraph style for this section */
p {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Small highlight class for call-to-action phrases */
.cta {
  font-weight: bold;
  color: #FFD700;
}

/* ======================================================
   🟨 MOVEMENT PAGE BUTTON
   ------------------------------------------------------
   Reusable button design for “Join”, “Read More”, etc.
   ====================================================== */

.button {
  display: inline-block;                 /* Makes it behave like a button */
  margin-top: 20px;
  padding: 12px 24px;
  background: #FFD700;                   /* ATM gold background */
  color: #000;                           /* Black text for contrast */
  text-decoration: none;                 /* Removes underline */
  font-weight: bold;
  border-radius: 8px;                    /* Smooth edges */
  transition: all 0.3s ease;             /* Soft hover animation */
}

/* Hover animation for the button */
.button:hover {
  background-color: #fff;                /* Lightens on hover */
  color: #000;                           /* Keeps readable contrast */
}


/* ======================================================
   🖼️ MOVEMENT IMAGE STYLING
   ------------------------------------------------------
   This controls how the large visual elements (like
   movement posters or featured images) resize smoothly
   across different screen sizes.
   ====================================================== */

/* Main movement image container */
.movement-image img {
  max-width: 100%;     /* Ensures image never overflows its container */
  height: auto;        /* Keeps correct proportions */
  display: block;      /* Removes extra inline space around image */
}

/* REMOVED: All media queries for .movement-image. These should be in mobile-responsive.css */


/* ======================================================
   🧩 FRAMES PAGE (Optimised + Cinematic Glow)
   ------------------------------------------------------
   This section builds your “Frames Gallery” layout
   with glowing circular images (ATM profile frames,
   ally badges, etc.). Includes subtle animation + hover
   tooltips for extra polish.
   ====================================================== */

/* Global defaults for the frames page */
body {
  background: #000;          /* Black base background */
  color: #FFD700;            /* Gold text for ATM identity */
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
}

/* ===============================
   🧱 GALLERY LAYOUT
   -------------------------------
   Controls spacing and alignment of all frames.
   =============================== */

.frame-gallery {
  display: flex;             /* Places items in a flexible row */
  flex-wrap: wrap;           /* Allows wrapping to multiple lines */
  justify-content: center;   /* Centers them evenly */
  gap: 40px;                 /* Spacing between frames */
  margin: 50px auto;         /* Centers and adds top/bottom space */
  max-width: 1100px;         /* Keeps it neat on large screens */
}


/* ===============================
   🎞 FRAME ITEM CONTAINER
   -------------------------------
   Each frame (image + glow) lives inside one of these.
   =============================== */

.frame-overlay {
  position: relative;        /* Allows tooltip placement later */
  text-align: center;
  transition: transform 0.3s ease; /* Smooth hover effect */
  box-shadow: none;          /* No default shadow until hover */
}

/* Hover effect — subtle zoom in */
.frame-overlay:hover {
  transform: scale(1.08);
}


/* ===============================
   🪩 FRAME IMAGE (Circular Badge)
   -------------------------------
   Defines how each badge or profile image looks —
   round, glowing, with soft animations.
   =============================== */

.frame-overlay img {
  width: 180px;
  height: 180px;
  border-radius: 50%;                       /* Makes image perfectly circular */
  border: 2px solid #FFD700;                /* Gold outer ring */
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */

  /* Glow animation — soft yellow/blue flicker effect */
  animation: restingPulse 5s infinite ease-in-out;
  box-shadow:
    0 0 25px rgba(255, 215, 0, 0.3),       /* Gold glow */
    0 0 25px rgba(0, 150, 255, 0.25);      /* Soft blue halo */
}

/* ===============================
   ✨ HOVER STATE
   -------------------------------
   When you hover on a frame, it grows slightly
   and the glow becomes more intense.
   =============================== */

.frame-overlay:hover img {
  transform: scale(1.06);
  animation: pulseGlow 2s infinite ease-in-out; /* Faster glow animation */
  box-shadow:
    0 0 40px rgba(255, 215, 0, 0.7),
    0 0 40px rgba(0, 150, 255, 0.5);
}


/* ===============================
   💬 TOOLTIP POP-UP
   -------------------------------
   Displays a small yellow info box when you hover
   over a frame (using the `data-desc` attribute).
   =============================== */

.frame-overlay::after {
  content: attr(data-desc);                  /* Pulls text from HTML attribute */
  position: absolute;
  top: 105%;                                /* Below the circle */
  left: 50%;
  transform: translate(-50%) translateY(12px);
  background: rgba(0, 0, 0, 0.9);           /* Dark background */
  color: #FFD700;                           /* Gold text */
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  line-height: 1.3;
  width: max-content;                       /* Fits text size dynamically */
  max-width: 220px;
  text-align: center;
  white-space: normal;                      /* Allows wrapping for long text */
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
  opacity: 0;                               /* Hidden by default */
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 99999;                           /* Always stays above other elements */
  pointer-events: none;                     /* Prevents interfering with hover */
}

/* Reveal tooltip on hover */
.frame-overlay:hover::after {
  opacity: 1;
  transform: translate(-50%) translateY(0);
}


/* REMOVED: media query for .frame-overlay::after. This should be in mobile-responsive.css */


/* ======================================================
   🔄 SMART TOOLTIP FLIP (for bottom-row items)
   ------------------------------------------------------
   If a frame is near the bottom of the screen, we flip
   the tooltip upward instead of downward, so it never
   goes off-screen.
   ====================================================== */

/* Base positioning for flipped tooltips */
.frame-overlay.flip-up::after {
  top: auto;                /* Disables normal top position */
  bottom: 105%;             /* Places tooltip ABOVE the frame */
  transform: translate(-50%) translateY(-12px); /* Moves it slightly upward */
}

/* Smooth hover animation for flipped tooltips */
.frame-overlay.flip-up:hover::after {
  transform: translate(-50%) translateY(0); /* Slide-in animation */
}


/* ======================================================
   ✨ GLOW ANIMATIONS
   ------------------------------------------------------
   These create the alternating yellow/blue “breathing”
   glow that gives your frames their cinematic ATM vibe.
   ====================================================== */

/* ===============================
   🔄 pulseGlow (Hover Animation)
   -------------------------------
   This runs when you hover on a frame.
   The light alternates between bright gold and soft blue.
   =============================== */

@keyframes pulseGlow {
  0% {
    box-shadow:
      0 0 10px rgba(255, 215, 0, 0.4),    /* gold start */
      0 0 20px rgba(0, 150, 255, 0.2);    /* soft blue secondary */
  }

  50% {
    box-shadow:
      0 0 25px rgba(255, 215, 0, 0.8),    /* brighter gold mid-pulse */
      0 0 45px rgba(0, 150, 255, 0.45);   /* stronger blue halo */
  }

  100% {
    box-shadow:
      0 0 10px rgba(255, 215, 0, 0.4),    /* return to start */
      0 0 20px rgba(0, 150, 255, 0.2);
  }
}


/* ===============================
   💫 restingPulse (Idle Animation)
   -------------------------------
   A slow, subtle “breathing” effect used when not hovered.
   Keeps the badge alive and glowing gently in the background.
   =============================== */

@keyframes restingPulse {
  0% {
    box-shadow:
      0 0 15px rgba(255, 215, 0, 0.25),
      0 0 15px rgba(0, 150, 255, 0.15);
  }

  50% {
    box-shadow:
      0 0 25px rgba(255, 215, 0, 0.35),
      0 0 25px rgba(0, 150, 255, 0.25);
  }

  100% {
    box-shadow:
      0 0 15px rgba(255, 215, 0, 0.25),
      0 0 15px rgba(0, 150, 255, 0.15);
  }
}

/* ======================================================
   📱 RESPONSIVE TOOLTIP (MOBILE VIEW)
   ------------------------------------------------------
   Makes tooltips smaller and easier to read on phones.
   Prevents them from overflowing or covering the frames.
   ====================================================== */

@media (max-width: 600px) {
  .frame-overlay::after {
    top: 125%;                  /* Moves tooltip lower beneath frame */
    width: 180px;               /* Shrinks width for small screens */
    font-size: 0.8rem;          /* Slightly smaller text */
    white-space: normal;        /* Allows text wrapping */
    line-height: 1.2;           /* Tighter line spacing for compact layout */
  }
}



/* ======================================================
   ⚡ HERO / SPARK SHARED LAYOUT
   ------------------------------------------------------
   This is the main top box on your Spark page and other
   intro sections. It holds your title, EFL content, and
   corner logos in a balanced, flexible layout.
   ====================================================== */

.atm-hero_wrap {
  display: flex;                        /* Creates a flexible box layout */
  align-items: center;                  /* Vertically centers content */
  justify-content: center;              /* Centers items horizontally */
  gap: 30px;                            /* Space between inner items */
  flex-wrap: wrap;                      /* Allows wrapping on small screens */
  background: #000;                     /* Black ATM background */
  border: 2px solid #ffd700;            /* Gold border */
  border-radius: 25px;                  /* Smooth rounded edges */
  padding: 40px;                        /* Space inside the box */
  margin: 60px auto;                    /* Centers and adds top/bottom spacing */
  max-width: 1200px;                    /* Prevents it from being too wide */
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.25); /* Subtle gold glow */
  position: relative;                   /* Needed for absolute-positioned logos */
}


/* ======================================================
   🧠 HERO CONTENT (TEXT AREA)
   ------------------------------------------------------
   Controls the title, subtitle, and overall text alignment
   inside the hero section.
   ====================================================== */

.atm-hero_content {
  flex: 1;                              /* Allows content to scale evenly */
  min-width: 300px;                     /* Ensures readable width on small screens */
  color: #fff;
  text-align: center;
}

/* Title (The AntiTrollMovement) */
.atm-hero_content h1 {
  color: #ffd700;                       /* Gold highlight for main heading */
  font-size: 2.2rem;                    /* Large size for impact */
  margin-bottom: 0.3em;
}

/* Subtitle (The Spark, The Fire, etc.) */
.atm-hero_content h2 {
  color: #3aa6ff;                       /* Bright blue accent */
  font-size: 1.6rem;
  margin: 1.5em 0 0.6em;
}


/* ======================================================
   🛡️ ATM LOGOS (CORNER BADGES)
   ------------------------------------------------------
   These logos sit inside the hero box corners — one on
   the top-left and one on the bottom-right. The “relative”
   position on .atm-hero_wrap makes this possible.
   ====================================================== */

.atm-hero_logo img {
  width: 120px;
  height: auto;
  display: block;
}

/* Top-left logo */
.atm-hero_logo.left {
  position: absolute;
  top: 30px;
  left: 40px;
}

/* Top-right logo */
.atm-hero_logo.right {
  position: absolute;
  top: 30px;
  right: 40px;
}


/* ======================================================
   🔦 EFL SECTION (INSIDE HERO BOX)
   ------------------------------------------------------
   The three-part EFL breakdown (Empower, Flip, Light)
   that visually displays your core framework.
   ====================================================== */

.atm-hero_efl {
  margin-top: 40px;
  display: flex;
  flex-direction: column;               /* Stacks items vertically */
  gap: 25px;                            /* Space between each EFL item */
  align-items: center;
}

/* Each EFL line (like Empower, Flip, Light) */
.atm-efl_item {
  display: flex;                        /* Icon + text side-by-side */
  align-items: center;
  gap: 14px;                            /* Space between emoji and text */
  text-align: left;
  background: rgba(255, 215, 0, 0.05);  /* Subtle gold tint background */
  padding: 12px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  max-width: 700px;                     /* Keeps layout consistent */
}

/* Hover glow and lift */
.atm-efl_item:hover {
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.2);
  transform: translateY(-2px);          /* Small lift on hover */
}

/* Text highlights */
.atm-efl_item strong {
  color: #ffd700;
  font-weight: 700;
}

.atm-efl_item p {
  margin: 4px 0 0;
  line-height: 1.5;
  color: #fff;
}


/* ======================================================
   ✨ EMOJI GLOW EFFECT
   ------------------------------------------------------
   Adds interactive glow + bounce to each emoji icon when
   hovering over its EFL item.
   ====================================================== */

.atm-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;                       /* Prevents shrinking on narrow screens */
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

.atm-efl_item:hover .atm-emoji {
  text-shadow: 0 0 12px #ffd700;        /* Glowing gold effect */
  transform: scale(1.15);               /* Slight pop animation */
}


/* REMOVED: media query for .atm-hero_wrap. This should be in mobile-responsive.css */


/* ======================================================
   📘 EFL PLAYBOOK PAGE
   ------------------------------------------------------
   This section styles the main “EFL Playbook” layout.
   It creates a grid of interactive boxes (Empower · Flip · Light),
   plus a slogan and hero image at the top.
   ====================================================== */


/* ======================================================
   🔗 CLICKABLE BOX LINKS
   ------------------------------------------------------
   Removes underline and makes the entire box clickable.
   ====================================================== */

.efl-step-link {
  text-decoration: none;     /* Removes default link underline */
  color: inherit;            /* Inherits text color from parent */
  display: block;            /* Makes the entire box clickable */
}


/* ======================================================
   🧱 STEP BOX CONTENT
   ------------------------------------------------------
   Controls each individual “Empower”, “Flip”, “Light” box.
   ====================================================== */

.efl-step h2 {
  margin-bottom: 10px;
  color: #FFD700;            /* ATM gold headings */
  font-weight: bold;
  font-size: 1.3rem;
}

.efl-step p {
  color: #fff;               /* White body text */
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}


/* ======================================================
   ✨ HOVER EFFECTS
   ------------------------------------------------------
   Adds a glowing gold lift when hovering on boxes.
   ====================================================== */

.efl-step:hover {
  transform: translateY(-5px) scale(1.02);    /* Slight lift + zoom */
  background: #1a1a1a;                        /* Slightly lighter background */
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);/* Gold glow */
}

/* Headings glow on hover */
.efl-step:hover h2 {
  color: #fff176;                             /* Soft glowing yellow */
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}


/* ======================================================
   🟨 EQUAL BOX HEIGHTS
   ------------------------------------------------------
   Ensures each EFL box is the same height visually.
   ====================================================== */

.efl-steps {
  align-items: stretch; /* Makes all boxes equal height in the row */
}

.efl-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Balances heading + text evenly */
}


/* ======================================================
   💬 HOVER OVERLAY MESSAGE
   ------------------------------------------------------
   Displays extra text (like “Flip the script!”) when hovering.
   The message text comes from the HTML attribute data-hover="".
   ====================================================== */

.efl-step::after {
  content: attr(data-hover);             /* Pulls text from HTML attribute */
  position: absolute;
  top: 50%;                              /* Centers vertically */
  left: 50%;                             /* Centers horizontally */
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);       /* Dark overlay */
  color: #FFD700;                        /* Gold text */
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  opacity: 0;                            /* Hidden by default */
  pointer-events: none;                  /* Doesn’t block mouse hover */
  transition: opacity 0.3s ease;         /* Smooth fade in/out */
  white-space: nowrap;                   /* Keeps text on one line */
}

/* Show tooltip on hover */
.efl-step:hover::after {
  opacity: 1;
}


/* ======================================================
   💬 SLOGAN (E.g. “Expose · Flip · Light”)
   ------------------------------------------------------
   Highlights your main tagline above the steps.
   ====================================================== */

.efl-slogan {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #FFD700;             /* Gold headline */
  font-weight: bold;
  letter-spacing: 1px;        /* Subtle spacing for emphasis */
}


 /* ======================================================
   🖼️ HERO IMAGE CONTAINER
   ------------------------------------------------------
   Holds the Playbook hero image (like a branded logo or poster).
   ====================================================== */

.efl-image {
  display: flex;               /* Centers content horizontally + vertically */
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  padding: 20px;
  border: 3px solid #FFD700;   /* Gold border */
  border-radius: 12px;
  background: #000;
  max-width: 450px;
}

.efl-image img {
  max-width: 100%;             /* Makes image responsive */
  height: auto;
  display: block;
}


/* ======================================================
   📦 STEP BOXES LAYOUT
   ------------------------------------------------------
   Arranges all EFL steps (Empower · Flip · Light) in a row.
   ====================================================== */

.efl-steps {
  display: flex;
  flex-wrap: wrap;             /* Allows wrapping for smaller screens */
  justify-content: center;
  gap: 20px;                   /* Space between boxes */
  margin: 40px auto;
  max-width: 1000px;
}

/* Each step box link */
.efl-step-link {
  text-decoration: none;
  color: inherit;
  flex: 1 1 250px;             /* Responsive flex sizing */
}

/* Each box styling */
.efl-step {
  background: #111;            /* Dark background for contrast */
  border: 2px solid #FFD700;   /* Gold edge */
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, background 0.3s ease;
}

/* Hover softens the tone */
.efl-step:hover {
  transform: translateY(-5px);
  background: #222;            /* Slightly lighter on hover */
}


/* ======================================================
   📱 RESPONSIVE RULES
   ------------------------------------------------------
   Adjusts image and layout for tablets + phones.
   ====================================================== */

@media (max-width: 768px) {
  .efl-image { max-width: 300px; }  /* Scales hero image down */
}

@media (max-width: 600px) {
  .efl-steps {
    flex-direction: column;     /* Stack boxes vertically */
    align-items: center;
  }
  .efl-step {
    width: 90%;                 /* Centered with space on sides */
  }
}

@media (max-width: 480px) {
  .efl-image { max-width: 220px; }  /* Smallest devices */
}

/* ======================================================
   🛡️ ATM BADGES PAGE STYLING
   ------------------------------------------------------
   This section defines how the ATM Badges page looks.
   It uses a responsive grid to display badge cards
   with hover animations, glowing gold highlights, and
   responsive scaling for all screen sizes.
   ====================================================== */


/* ======================================================
   🎨 BADGE GALLERY LAYOUT
   ------------------------------------------------------
   The main container for all badges. Uses CSS Grid to
   arrange badges in neat rows that automatically resize.
   ====================================================== */

.badge-gallery {
  width: 100%;                             /* Take full width of the page */
  max-width: 1400px;                       /* Prevents overly wide layout on big screens */
  margin: 40px auto;                       /* Centered with vertical space */
  padding: 20px;
  display: grid;                           /* Enables grid layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Automatically creates as many 250px columns as possible */
  gap: 25px;                               /* Space between badge cards */
  justify-items: stretch;                  /* Makes all cards stretch evenly */
}


/* ======================================================
   📱 RESPONSIVE GRID ADJUSTMENTS
   ------------------------------------------------------
   Adjusts how many badges fit per row on smaller devices.
   ====================================================== */

/* Tablets (max 900px wide) → show 2 badges per row */
@media (max-width: 900px) {
  .badge-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phones (max 600px wide) → show 1 badge per row */
@media (max-width: 600px) {
  .badge-gallery {
    grid-template-columns: 1fr;
  }
}


/* ======================================================
   🏷️ HEADER AREA
   ------------------------------------------------------
   The top section introducing the badges grid.
   ====================================================== */

.badge-gallery-header {
  grid-column: 1 / -1;                     /* Spans full width of grid */
  text-align: center;
  margin-bottom: 30px;
}

.badge-gallery-header h1 {
  color: #FFD700;                          /* ATM gold */
  font-size: 2rem;
  margin-bottom: 10px;
}

.badge-gallery-header p {
  color: #fff;                             /* White supporting text */
  font-size: 1rem;
  margin: 0 auto;
  max-width: 600px;                        /* Keeps paragraph nicely contained */
}


/* ======================================================
   🎖️ BADGE CARD DESIGN
   ------------------------------------------------------
   Each badge card has its own background, glow, and
   hover effects.
   ====================================================== */

.badge-item {
  background: #111;                        /* Dark background to contrast gold */
  border: 2px solid #FFD700;               /* Gold border */
  border-radius: 12px;                     /* Rounded corners */
  padding: 20px;
  text-align: center;
  width: 100%;
  max-width: 250px;                        /* Prevent cards from getting too wide */
  margin: 0 auto;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* ======================================================
   🖼️ BADGE IMAGES
   ------------------------------------------------------
   Ensures all badge images are uniform and centered.
   ====================================================== */

.badge-item img {
  width: 100%;
  max-width: 180px;                        /* Keeps all badges same size */
  height: auto;
  margin: 0 auto 15px auto;
  display: block;
  border-radius: 8px;
  object-fit: contain;                     /* Maintains image proportions */
}

/* Badge title below image */
.badge-item h3 {
  color: #FFD700;
  font-weight: bold;
  margin: 0 0 10px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}


/* ======================================================
   🌟 HOVER ANIMATIONS
   ------------------------------------------------------
   Adds a glowing lift when hovering over each card.
   ====================================================== */

.badge-item:hover {
  transform: translateY(-5px);             /* Slight lift */
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.4); /* Gold glow */
}

/* Glow effect for badge titles */
.badge-item:hover h3 {
  color: #fff176;                          /* Softer yellow */
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}


/* ======================================================
   🔗 BADGE LINKS (Buttons)
   ------------------------------------------------------
   Turns badge links into gold buttons with hover effects.
   ====================================================== */

.badge-item a {
  display: inline-block;
  padding: 8px 14px;
  background: #FFD700;
  color: #111;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Hover effect for buttons */
.badge-item a:hover {
  background: #fff176;                     /* Lighter gold */
  transform: translateY(-3px);             /* Tiny lift */
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
}