/*
Theme Name: CPAWM Custom Theme
Theme URI:  https://clubpenguinarmymap.com/
Author:      Bull Hour
Author URI:  https://clubpenguinarmymap.com/
Description: A WordPress theme converted from a single-page HTML for the Club Penguin Armies World Map. Keeps original layout and features.
Version:     1.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cpa-world-map
Tags: one-column, responsive, custom-menu
*/

/* --- Begin original CSS from the user HTML --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  font-family: "Raleway", sans-serif;
  /* Dark navy instead of white — this is what briefly shows in the gap
     above a section while it's animating in during the scroll-reveal
     effect, so it now blends with the site's blue/navy sections
     instead of flashing white. */
  background: #05073b;
  color: #003366;
}

/* Sticky Navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  backdrop-filter: blur(12px);
  background: rgb(5 13 81 / 83%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 40px;
  z-index: 10000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar .logo {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0px;
  color: #fff;
  transition: color 0.3s ease;
}

/* Title hover color change */
.navbar .logo:hover {
  color: #05b3ef;
  cursor: pointer;
}

.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: "Oswald", sans-serif;
    z-index: 10000;
}

.navbar ul li {
  position: relative;
}

.navbar a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  transition: color 0.3s;
  position: relative;
  padding: 5px 0;
}

/* Line on hover */
.navbar a::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: #05b3ef;
  transition: width 0.3s ease;
}

.navbar a:hover::before {
  width: 100%;
}

.navbar a:hover {
  color: #05b3ef;
}

/* Dropdown */
.navbar ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.navbar ul li ul {
  position: absolute;
  top: 35px;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 10px 0;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
    z-index: 10000;
}

.navbar ul li ul li {
  padding: 8px 20px;
  width: 140px;
  text-align: left;
  z-index: 10000;
    
}


.navbar ul li ul li a {
  color: #003366;
  display: block;
  font-weight: 600;
}

.navbar ul li ul li a:hover {
  color: #007bff;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle div {
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px 0;
  transition: 0.3s;
}

@media (max-width: 850px) {
  .navbar ul {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    background: rgba(5, 13, 81, 0.95);
    flex-direction: column;
    gap: 15px;
    padding: 20px 0;
    transform: translateY(-200%);
    transition: transform 0.4s ease;
  }

  .navbar ul.active {
    transform: translateY(0);
  }

  .menu-toggle {
    display: flex;
  }

  .navbar ul li ul {
    position: static;
    background: rgba(255,255,255,0.1);
    box-shadow: none;
  }

  .navbar ul li ul li {
    padding: 8px 0;
    text-align: center;
  }

}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 40px;
margin-top: 50px;
width: 100%;
max-width: 900px;
}

.team-grid .member {
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-grid .member img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #fff;
transition: all 0.3s ease;
}

.team-grid .member h3 {
margin-top: 10px;
font-size: 18px;
color: #fff;
opacity: 0.8;
transition: opacity 0.3s ease, color 0.3s ease;
}

/* Hover Effects */
.team-grid .member:hover {
transform: translateY(-10px);
}

.team-grid .member:hover img {
box-shadow: 0 0 20px #05b3ef;
transform: scale(1.1);
border-color: #05b3ef;
}

.team-grid .member:hover h3 {
opacity: 1;
color: #05b3ef;
}
.team-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
margin-top: 40px;
}

.member {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 30px 20px;
text-align: center;
width: 200px;
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}

.member:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.member img {
width: 90px;
height: 90px;
border-radius: 50%;
margin-bottom: 15px;
transition: transform 0.3s ease;
}

.member:hover img {
transform: scale(1.1);
}

.member h3 {
font-size: 20px;
margin-bottom: 5px;
font-family: "Oswald", sans-serif;
font-weight: 700;
color: #fff;
}

.member span {
font-size: 14px;
color: #ccc;
font-weight: 500;
}

/* CPAL Section Layout */
.cpal-container {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
padding: 40px 20px;
max-width: 1200px;
margin: auto;
}

.cpal-image img {
width: 250px;
height: auto;
border-radius: 12px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
cursor: pointer;
}

.cpal-image img:hover {
transform: scale(1.1) rotate(3deg);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
background-color: #ffffff;   /* Add white background */
border-radius: 12px;         /* Keep rounded corners */
padding: 10px;               /* Optional: add padding to separate image from edges */
transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

.cpal-text {
max-width: 600px;
text-align: left;
}

.cpal-text h1 {
font-size: 60px;
font-weight: 900;
margin-bottom: 20px;
color: #fff;
}

.cpal-text p {
font-size: 20px;
line-height: 1.6;
color: #e4e4e4;
}

/* Responsive */
@media (max-width: 850px) {
.cpal-container {
flex-direction: column;
text-align: center;
}

.cpal-text {
text-align: center;
}

.cpal-image img {
width: 200px;
}
}


/* Team Section Mobile Responsiveness */
@media (max-width: 700px) {
.team-grid {
grid-template-columns: 1fr; /* Stack members vertically */
gap: 30px;
max-width: 90%;
margin: 40px auto;
}

.team-grid .member {
width: 100%;
max-width: 250px;
margin: 0 auto;
}

.member img {
width: 80px;
height: 80px;
}

.member h3 {
font-size: 18px;
}

.member span {
font-size: 13px;
}
}

/* === SMAL Section (Text Left + Image Right, CPAL Style Fixed) === */
#smal {
  background: #820404;
  color: white;
  padding: 80px 5%;
}

.smal-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* proper left-right layout */
  gap: 60px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* TEXT */
.smal-text {
  flex: 1;
  max-width: 600px;
  text-align: left;
}

.smal-text h1 {
  font-size: 60px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #05b3ef;
}

.smal-text p {
  font-size: 20px;
  line-height: 1.6;
  color: #f1f1f1;
}

/* IMAGE */
.smal-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smal-image img {
  width: 250px;
  height: auto;
  border-radius: 12px;
  background-color: transparent;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
}

/* Hover Effect — smooth, glow, no layout shift */
.smal-image img:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
  background-color: #fff;
}

/* === Responsive === */
@media (max-width: 900px) {
  .smal-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .smal-text {
    text-align: center;
  }

  .smal-image img {
    width: 200px;
  }
}


/* Sections */
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 80px 20px 60px;
transition: background 0.3s;
position: relative;
overflow: hidden;
}

/* HOME Section */
#home {
color: white;
/* Solid fallback color so the section never flashes gray/white while
   the (large) hero photo is still downloading — same tone the dark
   overlay already blends toward, so the look is unchanged once loaded. */
background-color: #050a2b;
background-image: url('https://clubpenguinarmymap.com/wp-content/uploads/2025/11/cpawmbghead.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
z-index: 0; /* establishes a stacking context so the video layer below stays contained inside this section instead of escaping behind the whole page */
}

/* background-attachment:fixed forces the browser to repaint the whole
   background on every scroll frame — on phones this is a major source
   of jank and can make the page feel like it's "still loading". Desktop
   keeps the fixed parallax feel; mobile scrolls normally. */
@media (max-width: 850px) {
  #home {
    background-attachment: scroll;
  }
}

#home::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
background: rgba(0,0,0,0.3);
z-index: 0;
}

#home * {
position: relative;
z-index: 1;
}

/* YouTube background video — sits behind the existing dark overlay
   (#home::before, z-index:0) and behind the text (z-index:1), so the
   overlay and title/tagline look exactly the same as before. Desktop
   only: mobile keeps the lightweight static image for performance. */
#home .home-video-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

#home .home-video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;   /* 16:9 "cover" trick so the video always fills the box */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #home .home-video-bg {
    display: none; /* respect accessibility setting; static image shows instead */
  }
}

@font-face {
font-family: "Sliced";
src: url("sliced.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap; /* show fallback text instantly instead of a blank flash while the font downloads */
}

#home h1 {
font-size: 72px;
font-weight: 700;
font-family: "Sliced", sans-serif;
letter-spacing: 2px;
color: #fff;

text-shadow: none;
transition: all 0.3s ease;
}

#home h1:hover {
color: #00e5ff;
}

#home p {
font-size: 22px;
margin-top: 10px;
}

#home .btn {
background-color: transparent;
border: 2px solid white;
color: white;
padding: 12px 28px;
margin: 10px;
font-size: 25px;
font-family: "Oswald", sans-serif;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}

#home .btn:hover {
background-color: white;
color: black;
}

#about { background: #ffffff; color: #003366; }
#team { background: #08175e; color: white; }
#leagues { background: #ffffff; color: #003366; }
#cpal { background: #1b05a8; color: white; }
#smal { background: #820404; color: white; }

section h1 {
font-size: 60px;
font-weight: 900;
margin-bottom: 20px;
}

section p {
font-size: 20px;
max-width: 700px;
line-height: 1.6;
}

footer {
background: rgb(5 42 129);
color: white;
text-align: center;
padding: 15px;
font-size: 14px;
}

/* Preloader container */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px; /* thickness of the bar */
  background: rgba(0,0,0,0.05); /* subtle background */
  z-index: 9999;
  overflow: hidden;
}

/* Actual loading bar */
#preloader .loading-bar {
  width: 0%;
  height: 100%;
  background: #25c1ff; /* bright blue */
  transition: width 0.2s ease;
}

/* Fade out */
#preloader.loaded {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* ==========================================================
   Logo now wraps in a link to the homepage — keep its look
   identical to the old plain <div class="logo">.
========================================================== */
.navbar .logo a.logo-link,
.navbar .logo-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================
   NAVBAR AUTO-HIDE — home page only (class added in header.php).
   Hidden by default, slides down on mouse movement / touch /
   scroll, then slides back up after a short pause.
========================================================== */
body.home-autohide-nav .navbar {
  transform: translateY(-110%);
  transition: transform 0.4s ease;
}

body.home-autohide-nav .navbar.nav-visible {
  transform: translateY(0);
}

/* Always show it once a dropdown or the mobile menu is open */
body.home-autohide-nav .navbar:hover,
body.home-autohide-nav .navbar ul.active {
  transform: translateY(0);
}

/* ==========================================================
   SCROLL-REVEAL EFFECT — sections fade + slide up into view.
========================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   BACK-TO-TOP BUTTON
========================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #05b3ef;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, visibility 0.3s;
  z-index: 9998;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #00ceff;
  transform: translateY(-4px);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* --- End original CSS --- */
/* ==================================================================
   MERGED "ADDITIONAL CSS" — previously pasted separately into
   Appearance → Customize → Additional CSS. Now baked into the theme
   itself, so nothing extra needs to be pasted there anymore.
   (If you still have the old text in that Customizer box, you can
   safely delete it now — everything it did is included below.)
   ================================================================== */

/* ==================================================================
   CPA WORLD MAP — Additional CSS (Appearance → Customize → Additional CSS)
   Cleaned up / de-duplicated version. Nothing here changes any color
   or the final look — it's the same rules, just organized once instead
   of scattered/repeated, plus two small "fallback background" fixes
   (marked below) that stop a blank flash before large images load.
   ================================================================== */

/* === SMAL Section (Text Left + Image Right, CPAL Style Fixed) === */
.smal-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* proper left-right layout */
  gap: 60px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* TEXT */
.smal-text {
  flex: 1;
  max-width: 600px;
  text-align: left;
}

.smal-text h1 {
  font-size: 60px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #fff;
}

.smal-text p {
  font-size: 20px;
  line-height: 1.6;
  color: #f1f1f1;
}

/* IMAGE */
.smal-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smal-image img {
  width: 250px;
  height: auto;
  border-radius: 12px;
  background-color: transparent;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
}

/* Hover Effect — smooth, glow, no layout shift */
.smal-image img:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
  background-color: #fff;
}

/* === Responsive === */
@media (max-width: 900px) {
  .smal-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .smal-text {
    text-align: center;
  }

  .smal-image img {
    width: 200px;
  }
}

/*=================*/
/* ABOUT SECTION LAYOUT WITH ORIGINAL BG */
#about {
    background: #05073b url(https://clubpenguinarmymap.com/wp-content/uploads/2025/10/cpagroupfi.png) center no-repeat;
    background-size: cover; /* cover the section — #05073b already acts as the loading fallback color */
    color: #f7f8ff;
    padding: 120px 40px;
}

/* Preserve your paragraph styling */
#about p {
    font-size: 20px;
    max-width: 700px;
    line-height: 1.6;
    transition: all 0.3s ease;
}

#about p:hover {
    transform: translateY(-10px) perspective(500px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* layout wrapper */
#about .about-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    max-width:1300px;
    margin:auto;
}

/* globe container */
#about .about-globe{
    position:relative;
    width:450px;
    flex-shrink:0;
}

/* rotating globe */
#about .globe{
    width:100%;
    animation:rotateGlobe 25s linear infinite;
    filter:drop-shadow(0 0 35px rgba(0,170,255,0.55));
}

/* floating logo text */
#about .logo-text{
    position:absolute;
    bottom:-8%;
    left:50%;
    transform:translateX(-50%);
    width:120%;
    animation:floatText 4s ease-in-out infinite;
}

/* text container */
#about .about-content{
    flex:1;
}

/* animations */
@keyframes rotateGlobe{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

@keyframes floatText{
    0%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,-6px);}
    100%{transform:translate(-50%,0);}
}

/* responsive */
@media (max-width:900px){
    #about .about-wrapper{
        flex-direction:column;
        text-align:center;
    }

    #about .about-globe{
        width:320px;
        margin-bottom:30px;
    }
}

/* ABOUT SECTION TEXT LEFT ALIGN & GLOW HOVER WITH PADDING & ROUNDED CORNERS
   (final/authoritative version of #about .about-content p — the earlier
   duplicate block from the same paste is intentionally not repeated) */
#about .about-content p {
    text-align: left;
    font-size: 20px;
    max-width: 700px;
    line-height: 1.6;
    transition: all 0.3s ease;
    padding: 0;
    border-radius: 0;
}

#about .about-content p:hover {
    transform: translateY(-10px) perspective(500px) rotateX(5deg);
    box-shadow: 0 8px 15px rgba(0,170,255,0.55);
    padding: 10px 15px;
    border-radius: 12px;
}

/* ========================= */
/* LATEST POSTS (grid is currently hidden — see #latest-posts{display:none} below,
   kept from your original paste; styles left in place in case you re-enable it) */
/* ========================= */
#latest-posts .post-card {
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    overflow:hidden;
    opacity:0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards;
}

#latest-posts .post-card:nth-child(1) {animation-delay:0s;}
#latest-posts .post-card:nth-child(2) {animation-delay:0.1s;}
#latest-posts .post-card:nth-child(3) {animation-delay:0.2s;}
#latest-posts .post-card:nth-child(4) {animation-delay:0.3s;}
#latest-posts .post-card:nth-child(5) {animation-delay:0.4s;}
#latest-posts .post-card:nth-child(6) {animation-delay:0.5s;}

@keyframes fadeUp {
    to {opacity:1; transform: translateY(0);}
}

#latest-posts .post-thumb img {
    width:100%;
    height:auto;
    border-radius:8px;
    margin-bottom:15px;
}

#latest-posts .post-title {
    font-size:20px;
    margin-bottom:10px;
    color:#003366;
}

#latest-posts .post-excerpt {
    font-size:14px;
    color:#555;
    line-height:1.5;
}

/*==============*/
.page-id-127 .navbar {
  display: none !important;
}

/*==============*/
/* Hide popup on mobile devices */
@media (max-width: 768px) {
  #popup {
    display: none !important;
  }
}

.post {
    border: 3px solid #044fe169;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 29%);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0px;
    color: #fff;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('https://clubpenguinarmymap.com/wp-content/uploads/2025/12/cropped-cpawmiconweb-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#home p {
    font-size: 36px;
    margin-top: 20px;
    font-weight: 700;
    font-family: 'impact', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Colors */
#home p .claim { color: #5dff85 !important; }
#home p .defend { color: #FFFFFF !important; }
#home p .conquer { color: #25c1ff !important; }

/* Make spans inline-block for animation */
#home p span {
    display: inline-block;
    opacity: 0;
    animation: blinkingFadeSequential 3s infinite;
}

/* Add delays for sequential blinking */
#home p .claim { animation-delay: 0s; }
#home p .defend { animation-delay: 1s; }
#home p .conquer { animation-delay: 2s; }

@keyframes blinkingFadeSequential {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

#latest-posts{
	display:none;
}

#home .btn {
	background-color: #8e9394a8;
    width:170px;
}

/* ========================= */
/* CPAL SECTION DESIGN */
/* ========================= */
#cpal{
    padding:120px 20px;
    display:flex;
    justify-content:center;
    /* fallback color so the section isn't blank white while the
       background photo is still downloading */
    background-color:#1b05a8;
    background-image:url("https://clubpenguinarmymap.com/wp-content/uploads/2026/03/cpalsectionbg.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}

/* container */
#cpal .cpal-container{
    max-width:950px;
    width:100%;
    text-align:center;
    padding:60px 50px;
    border-radius:25px;
    position:relative;
    z-index:2;
	 background:rgba(27,5,168,0.78);
    backdrop-filter:blur(10px);
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
}

/* OFFICIAL TAG */
.cpal-tag{
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    background:#9c0000;
    color:white;
    font-size:13px;
    font-weight:bold;
    padding:6px 16px;
    border-radius:20px;
    letter-spacing:1px;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
    z-index:3;
}

/* logo */
.cpal-logo{
    width:110px;
    margin-bottom:12px;
}

/* title */
.cpal-title{
    font-size:42px;
    color:white;
    margin:10px 0;
    letter-spacing:2px;
}

/* description */
.cpal-desc{
    color:#e8e8e8;
    font-size:17px;
    max-width:680px;
    margin:auto;
    line-height:1.7;
}

/* cards */
.cpal-cards{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:45px;
    flex-wrap:wrap;
}

.cpal-card{
    width:200px;
    background:rgba(255,255,255,0.9);
    border-radius:14px;
    padding:25px 18px;
    text-decoration:none;
    color:#1b05a8;
    font-weight:bold;
    transition:0.25s;
}

.cpal-card:hover{
    transform:translateY(-7px);
    box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.card-icon{
    font-size:28px;
    margin-bottom:10px;
}

.card-title{
    font-size:16px;
}

.discord{
    color:#5865F2;
}

/* Card icon container */
.cpal-card .card-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images inside card-icon */
.cpal-card .card-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* ========================= */
/* CPAJ GLASS SECTION */
/* ========================= */
#cpaj{
    padding:120px 20px;
    /* fallback color so the section isn't blank white while the
       background photo is still downloading */
    background-color:#8b2052;
    background-image:url("https://clubpenguinarmymap.com/wp-content/uploads/2026/03/rpfacpbattle.webp");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
    color:white;
    overflow:hidden;
}

/* snowy blur overlay */
#cpaj::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgb(139 32 82 / 92%);
}

/* layout */
.cpaj-wrapper{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    flex-wrap:wrap;
}

/* text */
.cpaj-text{
    flex:1;
    max-width:550px;
	z-index:2
}

.cpaj-title{
    font-size:64px;
    font-weight:900;
    margin-bottom:20px;
    letter-spacing:2px;
}

/* visual area */
.cpaj-visual{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* glass blob */
.cpaj-blob{
    position:absolute;
    width:320px;
    height:320px;
    background:rgb(188 181 71 / 60%);
    backdrop-filter:blur(12px);
    border-radius:55% 45% 60% 40% / 60% 40% 60% 40%;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

/* penguin */
.cpaj-penguin{
    width:280px;
    position:relative;
    z-index:2;
    transition:transform .4s ease;
    cursor:pointer;

    /* face LEFT by default */
    transform: scaleX(-1);
}

/* hover animation */
.cpaj-visual:hover .cpaj-penguin{
    transform: scaleX(-1) translateY(-10px) scale(1.05);
}

/* responsive */
@media (max-width:900px){
    .cpaj-wrapper{
        flex-direction:column;
        text-align:center;
        gap:60px;
    }

    .cpaj-title{
        font-size:48px;
    }

    .cpaj-penguin{
        width:220px;
    }

    .cpaj-blob{
        width:260px;
        height:260px;
    }
}

/* CPAJ Text Link Styling */
.cpaj-text b { color: #ffd700; font-weight: 700; }

.cpaj-desc{
    font-size:20px;
    line-height:1.8;
    color:#f3e9ef;
    text-align:left;
    margin-top:10px;
}

/* -------------------------------------------------------------
   Final overrides — kept last on purpose, exactly as in your
   original paste, so they stay the winning rule in the cascade.
   ------------------------------------------------------------- */
#smal {
  display: none;
}