/* --- "Create a Meme Here" bar --------------------------------------------
   Full width, above the header. It earns its place on a fresh page view and
   stops earning it once someone starts reading, so generator-bar.js folds it
   away on scroll. Height is animated rather than toggling display so the
   header slides up instead of jumping. */
:root { --gen-bar-h: 38px; }
/* Set by generator-bar.js once the bar folds away, so everything pinned to the
   viewport (the sticky tag row, and the auth block on meme pages) follows it up
   instead of leaving a gap where the bar used to be. */
body.generator-bar-hidden { --gen-bar-h: 0px; }

.generator-bar {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  /* Kept deliberately short: it is an invitation above the header, not a
     second header. Height lives in --gen-bar-h so everything pinned below it
     can follow. */
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--gen-bar-h);
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  transition: height .18s ease, opacity .18s ease;
}
.generator-bar:hover,
.generator-bar:visited { color: #fff; text-decoration: none; }
.generator-bar i { color: #96E6A1; }
.generator-bar--hidden { height: 0; opacity: 0; border: 0; }

@media (max-width: 768px) {
  .generator-bar { font-size: 12px; }
}/* Extracted block 1 from base.html */
		  *, *::before, *::after {
	      box-sizing: border-box;
	  }
    /* Global Styles */
    body {
      font-family: Arial, sans-serif;
	  /* These values adjust Arial to better match Nunito's dimensions */
	    letter-spacing: -0.02em;
	    word-spacing: 0.05em;
      margin: 0;
      padding: 0;
      background: #ffffff;
    }
    header, footer {
      background: #000000;
      color: #fff;
      text-align: left;
      padding: 10px;
    }
    header h1, footer p {
      margin: 0;
    }

    a {
      color: #337ab7;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .loader-spinner {
      width: 42px;
      height: 42px;
      margin: 0 auto 8px;
      border: 5px solid #ddd;
      border-top-color: #111;
      border-radius: 50%;
      animation: loader-spin .8s linear infinite;
    }
    @keyframes loader-spin { to { transform: rotate(360deg); } }
    /* Breadcrumb trail (meme + tag pages) */
    .breadcrumbs {
      max-width: 100%;
      padding: 10px 14px 2px;
      font-size: 13px;
      color: #666;
      white-space: nowrap;
      overflow-x: auto;
    }
    .breadcrumbs a { color: #337ab7; }
    .breadcrumbs .sep { margin: 0 6px; color: #bbb; }
    .breadcrumbs .current {
      color: #666;
      display: inline-block;
      max-width: 46ch;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
    }
	.logo {
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  font-size: 29px;
	  font-weight: 800;
	}
	.logo a {
	  text-decoration: none;
	}
	.logo a:hover {
	  text-decoration: none;
	}
	.logo span.normal, footer p span.normal {
	  background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	}
	.logo span.highlight, footer p span.highlight {
	  background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	}
	
	
    /* New Styles for User Dropdown in Header */
	.header-right {
	    flex: 1;
	    display: flex;
	    justify-content: flex-end;
	    position: relative; /* Change from absolute to relative */
	    top: auto;
	    right: auto;
	  }
	
    /* Make Meme Button Styles */
    .make-meme-btn {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
      color: #000;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      text-transform: uppercase;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .make-meme-btn:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
      text-decoration: none;
    }
    
    .make-meme-btn:active {
      transform: translateY(1px);
      box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
    }
	
    /* Make Meme Button Styles */
    .upload-btn {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
      color: #000;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      text-transform: uppercase;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
      text-decoration: none;
	  height:38px;
    }
    
    .upload-btn:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
      text-decoration: none;
    }
    
    .upload-btn:active {
      transform: translateY(1px);
      box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
    }
    
	.header-content {
	    width: 100%;
	    display: flex;
	    align-items: center;
	  }
    
	  .header-left {
	      display: flex;
	      align-items: center;
	    }
	
	
	/* Header Center Navigation (Arrows) */
	.header-center {
	  flex: 1;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  visibility: hidden;
	  opacity: 0;
	  transition: visibility 0.2s ease, opacity 0.2s ease;
	}

	.meme-detail-page .header-center {
	  visibility: visible;
	  opacity: 1;
	}
    
    .arrow-container {
	 will-change: transform;
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
	  
	  height: 38px;
    }
    
    .arrow-container:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    }
    
    .arrow-btn {
      border: none;
      padding: 8px 16px; /* Match auth button padding */
      cursor: pointer;
      font-size: 16px;
      color: #000000;
      outline: none;
      transition: background 0.2s ease;
      text-decoration: none;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
    }
    
    /* Left half gradient to match login button */
    .left-arrow {
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  opacity: 1.0 !important;
    }
    
    /* Right half gradient to match signup button */
    .right-arrow {
      background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  opacity: 1.0 !important;
    }
    
    .arrow-btn:hover {
      opacity: 1;
	  text-decoration: none;
    }
	  
	/* User Icon Styles */
	.user-dropdown {
	  position: relative;
	  display: inline-block;
	}

	.user-button {
	  background: transparent;
	  border: none;
	  cursor: pointer;
	  padding: 0;
	  transition: transform 0.2s ease;
	}

	.user-button:hover {
	  transform: scale(1.1);
	}

	.user-icon {
		line-height: 40px;
	  border-radius: 50%;
	  display: block;
	  align-items: center;
	  justify-content: center;
	  font-family: 'Nunito', sans-serif;
	  font-weight: 800;
	  font-size: 18px;
	  color: #000;
	  background: linear-gradient(135deg, #A1C4FD, #C2E9FB);
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	  transition: all 0.3s ease;
	  width: 40px; /* Fixed width */
	  height: 40px; /* Fixed height */
	}

	.user-icon.with-image {
	  object-fit: cover;
	  background: none;
	}

	.user-button:hover .user-icon {
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  right: 0;
	  background-color: #fff;
	  min-width: 150px;
	  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	  border-radius: 8px;
	  z-index: 1;
	  overflow: hidden;
	  transform: translateY(10px);
	  opacity: 0;
	  transition: all 0.3s ease;
	}

	.user-dropdown:hover .dropdown-content {
	  display: block;
	  opacity: 1;
	  transform: translateY(5px);
	}

	.dropdown-content a {
	  color: #333;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  transition: background-color 0.2s ease;
	  font-family: 'Nunito', sans-serif;
	  font-weight: 600;
	  font-size: 14px;
	}

	.dropdown-content a:hover {
	  background-color: #f5f5f5;
	  color: #000;
	}

	/* Add a subtle separator between menu items */
	.dropdown-content a:not(:last-child) {
	  border-bottom: 1px solid #eee;
	}
	
	/* Footer structure */
	footer {
	  font-size: 13px;
	  font-weight: 800;
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  display: flex;
	  flex-direction: column;    /* THIS IS KEY: Stacks children (p and ul) vertically */
	  align-items: flex-start;   /* Aligns children to the left edge of the footer */
	  padding: 15px;             /* Padding around the content inside the footer */
	  text-align: left;          /* Default text alignment for content inside footer */
	  background: #000000;       /* Assuming you want to keep the black background */
	  color: #fff;               /* Assuming you want to keep the white text */
	}

	/* Copyright text styling */
	footer p {
	  margin: 0 0 8px 0;       /* No top/left/right margin, 8px bottom margin to create space before links */
	  width: 100%;               /* Ensures paragraph takes full width available */
	  text-align: left;          /* Ensures text within paragraph is left-aligned */
	  color: #fff;
	}

	/* Footer links styling (the UL element) */
	.footer-links {
	  list-style: none;          /* Removes bullet points */
	  padding: 0;                /* Removes default UL padding */
	  margin: 0;                 /* Removes default UL margin, so it sits right below paragraph's bottom margin */
	  display: flex;
	  flex-direction: row;    /* Stacks LI items vertically */
	  flex-wrap: wrap;
	  align-items: flex-start;   /* Aligns LI items to the left */
	  width: 100%;               /* Ensures UL takes full width available */
	  gap: 10px 15px;                  /* Adds 5px space between each link item (LI) */
	}

	/* Individual link items (LI) */
	.footer-links li {
	  margin: 0;                 /* No extra margin on LIs if using 'gap' on the parent UL */
	  /*width: 100%;  */             /* Ensures LI takes full width of its parent UL */
	  text-align: left;          /* Ensures content (the <a> tag) within LI is left-aligned */
	}

	/* Styling for the <a> tags inside LIs */
	.footer-links a {
	  color: #fff;
	  text-decoration: none;
	  font-size: 12px;
	  display: flex;             /* Allows alignment of icon and text within the link */
	  align-items: center;       /* Vertically centers icon and text if link has varying heights */
	  transition: color 0.2s ease;
	}

	.footer-links a:hover {
	  color: #A1C4FD;
	  text-decoration: none;
	}

	/* Icon styling within links */
	.footer-links i {
	  margin-right: 5px;
	  font-size: 14px;
	}

	/* Mobile adjustments (ensure consistency or specific mobile styling) */
	@media (max-width: 768px) {
	  footer {
	    padding: 10px; /* Slightly less padding on mobile */
	  }

	  footer p {
	    margin-bottom: 8px; /* Consistent bottom margin for copyright on mobile */
	  }
	  /* .footer-links, .footer-links li, and .footer-links a will inherit desktop styles
	     which are generally fine for mobile too in this layout. Adjust if needed. */
	}
	
    /* Was an orphaned "meme-detail-page" selector with no dot and no opening
       brace, so its closing brace terminated nothing and every rule after it was
       dropped by the parser. Restored to what it was evidently meant to be. */
    @media (max-width: 768px) {
      .meme-detail-page h1 {
        font-size: 24px;
      }
      .meme-detail-page .logo {
        font-size: 22px;
      }
    }

    /* Banner Ad Styles */
    #banner-ad {
      width: 100%;
      background: #000000;
      text-align: center;
      padding: 30px 0;
      overflow: hidden;
      max-height: 100px; /* initial height */
      transition: max-height 0.3s ease;
    }

    /* Sticky header */
    header {
      position: sticky;
      top: 0;
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
    }

    /* Tags Section Styles */
    #tags-section {
      background: #333;
      padding: 10px 20px;
      color: #fff;
      text-align: center;
    }
    /* Desktop: show one line by default, then expand on button click */
    @media (min-width: 769px) {
	    .fa-arrow-left, .fa-arrow-right {
	      will-change: transform;
	    }
      /* Make sure header is sticky on desktop */
      header {
        position: sticky;
        top: 0;
      }
      
      /* Properly position the arrows in the center */
	  .header-center {
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: 10;
	    display: flex; /* Changed from none to flex */
	    align-items: center;
	    visibility: hidden;
	    opacity: 0;
	  }
	  
	  /* Show arrows only on meme detail pages */
	    .meme-detail-page .header-center {
	      display: flex;
	    }
	    /* Show arrows on meme detail pages */
	    .meme-detail-page .header-center {
	      visibility: visible;
	      opacity: 1;
	    }
		
      
      /* Completely hide mobile arrows on desktop */
      .mobile-nav-arrows {
        display: none !important;
      }
      
      .arrow-btn {
        height: 38px; /* Match auth button height */
        display: flex;
        align-items: center;
      }
      
      main {
        padding: 5px;
        min-height: 80vh;
      }
      
      .user-icon {
        width: 40px;
        height: 40px;
      }
      
      #tags-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow: hidden;
        white-space: nowrap;
        transition: height 0.3s ease;
      }
      #tags-wrapper.expanded {
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
      }
      #more-tags-button {
        display: block;
        margin: 10px auto 0 auto;
        background: #fff;
        border: none;
        color: #000;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: bold;
      }
      /* Make tags sticky on meme detail pages */
      .sticky-tags {
        position: sticky;
        top: calc(var(--header-h, 59px) + var(--gen-bar-h, 0px));
        z-index: 950;
      }
      
      .tag {
        background: #555;
        padding: 5px 10px;
        border-radius: 3px;
        white-space: nowrap;
      }
      .mobile-upload-icon {
        display: none;
      }
    }
	
    /* Mobile: horizontal scroll, no More Tags button */
    @media (max-width: 768px) {
      /* Keep header sticky on mobile */
      header {
        position: sticky;
        top: 0;
      }
      
      /* Hide desktop arrows on mobile */
      .header-center {
        display: none !important;
      }
      
      /* Mobile nav arrows styles */
	  .mobile-nav-arrows {
	    position: fixed;
	    /* Offset by the generator bar, like .header-right, or the arrows land
	       on the bar instead of the logo row. */
	    top: calc(13px + var(--gen-bar-h, 0px));
	    right: 11px;
	    opacity: 0; /* Change back to 0 so it's initially hidden */
	    visibility: visible; /* Change back to hidden if transition */
	    transform: translateY(0);
	    transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
	    /* Must clear the header: it is a sibling of <header>, which is z-index
	       4000 with an opaque background, so anything lower is painted behind
	       it -- invisible AND unclickable. */
	    z-index: 4100;
	  }
		.mobile-nav-arrows.visible {
		  opacity: 1 !important;
		  visibility: visible !important;
		  display: flex !important;
		  /* Add more specific position */
		  position: fixed;
		  top: calc(13px + var(--gen-bar-h, 0px));
		  right: 10px;
		  z-index: 4100; /* Above the header (4000), or it is painted behind it */
		}
	  
      
      /* Ensure vertical alignment with auth buttons */
      .mobile-nav-arrows .arrow-container {
        display: flex;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Match auth buttons */
        height: 29px; /* Match auth button height */
      }
      
      /* Fast transition for header-right */
      .header-right {
        transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
      }
      
      .header-right.scrolled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
	  
	  
      
      /* Smaller arrow buttons on mobile */
      .arrow-btn {
        padding: 6px 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* Fill the container height */
      }
      
      .upload-btn {
        display: none;
      }
      .mobile-upload-icon {
        display: inline-block;
        cursor: pointer;
        font-size: 18px; /* Adjust size as needed */
        color: #A1C4FD; /* Use your preferred color #337ab7*/
        margin-right: 10px;
      }
      
      main {
        padding: 0px;
        min-height: 80vh;
      }
      
      .user-icon {
        width: 30px;
        height: 30px;
      }
      
      #tags-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      #more-tags-button {
        display: none;
      }
      .tag {
        display: inline-block;
      }
      /* Make tags sticky on meme detail pages */
	  /* Make tags sticky on meme detail pages - Fixed to always be sticky */
	  .sticky-tags {
	    position: sticky;
	    padding: 2px;
	    top: calc(var(--header-h, 49px) + var(--gen-bar-h, 0px));
	    z-index: 950;
	    font-size: 10px;
	    font-weight: 300;
	  }
	  /* Make ALL tags sections sticky on mobile */
	  #tags-section {
	    position: sticky;
	    /* This is an ID selector, so it outranks the .sticky-tags rule below --
	       it has to carry the same measured offset or it wins with a stale
	       hardcoded number and leaves a gap under the header. */
	    top: calc(var(--header-h, 46px) + var(--gen-bar-h, 0px));
	    z-index: 950;
	    background: #333;
	    padding: 4px 3px;
	    color: #fff;
	    text-align: center;
	    overflow-x: hidden;
	  }
      .tag {
        background: #555;
        padding: 4px 3px;
        border-radius: 3px;
        white-space: nowrap;
        font-size: 10px;
        font-weight: 300;
        margin-left: 3px;
      }
    }
    
	/* Fix for older browsers */
	.logo span, .logo .highlight, footer span, footer .highlight {
	  -webkit-text-fill-color: transparent;
	}
	
	#tags-section a {
	  color: #fff;
	  text-decoration: none;
	}
	
	.meme-title {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: rgba(0, 0, 0, 0.6);
	  color: #fff;
	  padding: 5px;
	  text-align: center;
	  font-size: 0.9em;
	}
	.hide-memes {
	  display: none;
	}

/* Extracted block 2 from base.html */
	  /* Auth Buttons Styles */
	  .auth-btn {
	    display: inline-block;
	    vertical-align: middle;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    padding: 8px 16px;
	    border-radius: 8px;
	    border: none;
	    text-transform: uppercase;
	    font-size: 14px;
	    cursor: pointer;
	    /* Fixed position shadow with space reserved for the hover state */
	    box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
	    transition: all 0.2s ease;
	    text-decoration: none;
	    color: #000;
	    /* Add margin to reserve space for shadow expansion */
	    margin-bottom: 2px;
	    margin-right: 2px;
	    /* Use transform instead of margin changes */
	    position: relative;
		height: 38px;
	  }

	  .login-btn {
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  }

	  .signup-btn {
	    background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  }

	  .auth-btn:hover {
	    transform: translateY(-2px);
	    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
	    text-decoration: none;
	  }

	  .auth-btn:active {
	    transform: translateY(1px);
	    box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
	  }

	  /* Mobile Styles */
	  @media (max-width: 480px) {
	    .auth-buttons {
		    display: flex;
		    flex-direction: row; /* Force horizontal alignment */
		    justify-content: flex-end;
		    align-items: center;
		    gap: 6px; /* Space between buttons */
	    }
		
		
  
	    .auth-btn {
	      padding: 6px 10px; /* Reduced padding */
	      font-size: 12px; /* Smaller font size */
	      border-radius: 6px; /* Slightly smaller border radius */
	      box-shadow: 2px 2px 0px rgba(0,0,0,0.8); /* Smaller shadow */
	      /* Smaller margin compensation for mobile */
	      margin-bottom: 1px;
	      margin-right: 1px;
		  
		  box-sizing: border-box;
		  height: 29px;
	      line-height: 1;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	    }
  
	    .auth-btn:hover {
	      box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Smaller hover shadow */
	    }
	  }

/* Extracted block 3 from base.html */
	/* Side Menu Styles */
	#sideMenu {
	  position: fixed;
	  left: 0;
	  width: 300px;
	  background-color: #1a1a1a;
	  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
		  z-index: 3900;
	  overflow-y: auto;
	  color: #fff;
	  font-family: 'Nunito', sans-serif;
	  /* Only use transform for animation, not display property */
	  transform: translateX(-100%);
	  transition: transform 0.3s ease;
	  /* Always visible in the DOM but off-screen */
	  visibility: hidden;
	}
	
    @media (min-width: 480px) {
		#sideMenu {
			top: 60px; /* Adjust if your header height is different */
  	  height: calc(100% - 60px);
  		}
    }
	  @media (max-width: 479px) {
	  #sideMenu {
		  top: 56px; /* Adjust if your header height is different */
	  height: calc(100% - 56px);
  		}
 	 }

	#sideMenu.active {
	  transform: translateX(0);
	  visibility: visible;
	}

	.menu-header {
	  padding: 20px 15px;
	  background: #000;
	  text-align: center;
	  border-bottom: 2px solid #333;
	}

	.menu-header .logo {
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  font-size: 26px;
	  font-weight: 800;
	}

	.menu-header .logo .normal {
	  background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	  -webkit-text-fill-color: transparent;
	}

	.menu-header .logo .highlight {
	  background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	  -webkit-text-fill-color: transparent;
	}

	#sideMenu ul {
	  list-style: none;
	  padding: 10px 0;
	  margin: 0;
	}

	.menu-divider {
	  height: 1px;
	  background: #333;
	  margin: 10px 20px;
	}

	#sideMenu li:not(.menu-divider) {
	  margin: 0;
	  transition: background-color 0.2s ease;
	}

	#sideMenu li:not(.menu-divider):hover {
	  background-color: #333;
	}

	#sideMenu a {
	  display: flex;
	  align-items: center;
	  text-decoration: none;
	  color: #fff;
	  font-size: 16px;
	  font-weight: 600;
	  padding: 15px 20px;
	  transition: color 0.2s ease;
	}

	#sideMenu a:hover {
	  color: #A1C4FD;
	  text-decoration: none;
	}

	#sideMenu a i {
	  width: 24px;
	  margin-right: 15px;
	  text-align: center;
	  font-size: 18px;
	}

	.menu-footer {
	  padding: 15px 20px;
	  border-top: 1px solid #333;
	  font-size: 12px;
	  color: #999;
	  text-align: center;
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  background: #151515;
	}

	/* Updated Hamburger Button Styles */
	.hamburger-btn {
	  background: transparent;
	  border: none;
	  cursor: pointer;
	  color: #A1C4FD;
	  transition: transform 0.3s ease, color 0.3s ease;
	  padding: 0;
	  z-index: 1001; /* Make sure it's above the menu */
  
	  /* Fixed width and height to prevent layout shift */
	  width: 40px;
	  height: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.hamburger-btn i {
	  /* Fixed font size */
	  font-size: 24px;
	  /* Center the icon within the fixed-width container */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 24px; /* Ensure the icon itself has a fixed width */
	  height: 24px; /* Ensure the icon itself has a fixed height */
	}

	.hamburger-btn:hover {
	  transform: scale(1.1);
	  color: #D4FC79;
	}

	/* Ensure minimum width on mobile */
	@media (max-width: 768px) {
	  #sideMenu {
	    width: 280px;
	  }
  
	  #sideMenu a {
	    font-size: 15px;
	    padding: 12px 20px;
	  }
  
	  .menu-header .logo {
	    font-size: 22px;
	  }
	  
	  .hamburger-btn {
	      width: 36px;
	      height: 36px;
	    }
  
	    .hamburger-btn i {
	      font-size: 20px;
	      width: 20px;
	      height: 20px;
	    }
		
		/* HIDING LOGIN AND SIGNUP ON MEME */
		.meme-detail-page .header-right {
		    /* display: none; */
		  }
	}

/* Extracted block 4 from base.html */
	  /* Improved sidebar search styles */
	  #sideMenu li.search-item {
	    padding: 0;
	    margin: 0;
	  }
  
	  #sideMenu li.search-item:hover {
	    background-color: transparent;
	  }
  
	  #sideMenu .sidebar-search-form {
	    padding: 5px 20px 15px;
	    background-color: #1a1a1a;
	  }
  
	  #sideMenu .sidebar-search-form form {
	    display: flex;
	    width: 100%;
	    box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
	    border-radius: 6px;
	    overflow: hidden;
	  }
  
	  #sideMenu .sidebar-search-form input {
	    flex: 1;
	    padding: 10px 12px;
	    border: none;
	    background: #333;
	    color: #fff;
	    font-family: 'Nunito', sans-serif;
	    font-size: 14px;
	    outline: none;
	  }
  
	  #sideMenu .sidebar-search-form input::placeholder {
	    color: #aaa;
	  }
  
	  #sideMenu .sidebar-search-form button {
	    padding: 0 15px;
	    border: none;
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	    color: #000;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
  
	  #sideMenu .sidebar-search-form button:hover {
	    background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  }

/* Extracted block 5 from base.html */
	  /* Desktop search box styles */
	  .desktop-search-box {
	    display: none; /* Initially hidden, will be shown with media query */
	    margin-left: 15px;
	    position: relative;
	  }
  
	  .desktop-search-box form {
	    display: flex;
	    height: 38px; /* Match the height of other buttons */
	  }
  
	  .desktop-search-box input {
	    padding: 8px 12px;
	    border-radius: 8px 0 0 8px;
	    border: none;
	    font-family: 'Nunito', sans-serif;
	    font-size: 14px;
	    width: 180px;
	    box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
	    position: relative;
	    z-index: 1;
	  }
  
	  .desktop-search-box button {
	    padding: 8px 12px;
	    border-radius: 0 8px 8px 0;
	    border: none;
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	    color: #000;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    cursor: pointer;
	    box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
	    position: relative;
	    z-index: 1;
	  }
  
	  /* Only show desktop search on larger screens */
	  @media (min-width: 769px) {
	    .desktop-search-box {
	      display: flex;
	    }
	  }
  
	  /* Adjust on smaller screens */
	  @media (max-width: 1024px) {
	    .desktop-search-box input {
	      width: 150px;
	    }
	  }

/* --- Mobile generator bar -------------------------------------------------
   The header cannot fit a generator button at phone widths, so on mobile the
   button is hidden there and this 50px bar carries the call to action instead.
   Desktop keeps the header button and never shows the bar. */

@media (max-width: 768px) {
  /* No room for it in the header on a phone. */
  header .make-meme-btn { display: none !important; }
}

/* --- "Make your own meme" card ------------------------------------------
   Sits inside the masonry grid as if it were a meme tile, but white, so it
   reads as an invitation rather than an ad break. break-inside:avoid keeps it
   from splitting across columns. */
.meme.meme-cta {
  background: #fff !important;
  border: 2px dashed #000;
  min-height: 0;
  break-inside: avoid;
}
.meme.meme-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 16px;
  text-align: center;
  color: #111;
  text-decoration: none;
}
.meme.meme-cta a:hover { text-decoration: none; background: #fafafa; }
.meme-cta__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #D4FC79, #96E6A1);
  font-size: 22px; color: #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.8);
}
.meme-cta__title {
  font-family: 'Nunito', Arial, sans-serif; font-weight: 800;
  font-size: 19px; line-height: 1.2;
}
.meme-cta__sub { font-size: 13px; color: #555; line-height: 1.45; max-width: 24ch; }
.meme-cta__btn {
  margin-top: 4px; padding: 9px 15px; border-radius: 8px;
  background: linear-gradient(90deg, #A1C4FD, #C2E9FB); color: #000;
  font-family: 'Nunito', Arial, sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: 12px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.8);
}
.meme.meme-cta a:hover .meme-cta__btn { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0,0,0,.8); }


/* --- Header row alignment -------------------------------------------------
   The header is a flex row of header-left / header-center / header-right, but
   without an explicit alignment the auth buttons and the prev/next arrows sat
   on their own line above the logo instead of beside it. */
/* Additive only. An earlier rule already makes the header a sticky flex row,
   and .header-center is absolutely positioned within it -- re-declaring
   display/flex-wrap/position here overrode that and pulled the prev/next arrows
   out of place. Only vertical alignment is set. */
header { align-items: center; }
.header-content, .header-left { align-items: center; }
.header-right { align-items: center; }

/* The generator call to action belongs on the header row itself, not stacked
   above it, on both desktop and mobile. */

@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-bottom: 0;
  }
  /* One generator entry point on mobile: the bar, not the header button. */
  header .make-meme-btn { display: none !important; }

  .header-left  { flex: 1 1 auto; min-width: 0; }
  .header-right { flex: 0 0 auto; }
}

/* Desktop meme pages: the prev/next arrows live in .header-center, which is
   absolutely positioned at left:50%. Out of flow, the header reserves no space
   for it, so it was landing 92px on top of the "Meme Generator" button. Put it
   back in the flex row so the header lays the two out side by side. */
@media (min-width: 769px) {
  .meme-detail-page .header-center {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin: 0 0 0 10px;
  }
}