/* MOBILE: hide nested lists by default and show toggle buttons */
@media (max-width: 1024px) {
  nav ul ul { display: none; }
  .nav-toggle {
    border: 0;
    background: transparent;
    padding: .5rem;
    cursor: pointer;
    line-height: 1;
  }
  .nav-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
}

/* DESKTOP: show submenus on hover/focus; hide toggle buttons */
@media (min-width: 1025px) {
  .nav-toggle { display: none; }
  nav li:hover > ul,
  nav li:focus-within > ul { display: block; }
}

/* Optional: improve contrast for your terminal/input note */
/* Ensure form fields use light text on the darker background */
input, textarea { color: #ffffff; }




/* Base: keep submenus hidden by default on small screens */
@media (max-width: 1024px) {
  .menu .sub-menu { display: none; }
  .menu .submenu-toggle {
    border: 0;
    background: transparent;
    font: inherit;
    line-height: 1;
    padding: .5rem;
    cursor: pointer;
  }
  /* Optional: rotate caret when open */
  .menu .submenu-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
}

/* Desktop: classic hover/focus opens submenu, and we hide the toggles */
@media (min-width: 1025px) {
  .menu .submenu-toggle { display: none; }
  .menu li.menu-item-has-children:hover > .sub-menu,
  .menu li.menu-item-has-children:focus-within > .sub-menu { display: block; }
}




/* Let avatars keep their natural aspect ratio (no square crop) */
.bbp-user-profile .avatar,
.bbp-author-avatar img,
.bbp-topic-author .avatar,
.bbp-reply-author .avatar,
#bbpress-forums .avatar {
  width: auto !important;        /* ignore the inline width attr */
  height: auto !important;       /* ignore the inline height attr */
  max-width: 100% !important;    /* responsive */
  max-height: 320px !important;  /* tune this number to taste */
  aspect-ratio: auto !important; /* don’t force 1:1 */
  object-fit: contain !important;/* show entire portrait, no crop */
  border-radius: 12px;           /* optional: rounded rectangle, not a circle */
}

/* If some theme sets circle avatars */
img.avatar { border-radius: 12px !important; }



/* Glassmorphism effect for bbPress forum elements */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer,
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.odd, 
#bbpress-forums div.even,
#bbpress-forums ul.odd,
#bbpress-forums ul.even,
#bbpress-forums ul.super-sticky,
#bbpress-forums ul.sticky {
  background: rgba(0, 0, 0, 0.4) !important;   /* translucent black background (40% opacity) */
  backdrop-filter: blur(8px);                 /* frosted-glass blur effect */
  -webkit-backdrop-filter: blur(8px);         /* ensure blur works on Safari */
}

/*
 * Brand colour palette for asklagaffe.com
 *
 * The original theme defined a rainbow “pride” palette.  To better match
 * the playful cartoon feel of the Ask La Gaffe logo we repurpose the
 * existing CSS custom properties with a cohesive set of warm greens,
 * oranges and creams sampled from the provided artwork.  Keeping the
 * same variable names means the rest of the stylesheet continues to
 * function without further changes.
 */
:root {
  /* Accent colours for the Mini Mensa site.  The youthful brand imagery
     features bright low‑poly mice rendered in saturated blues, purples and
     teals.  To improve text readability on glass overlays we darken the
     heading colour while preserving the playful accent hues elsewhere. */
  /*
   * Monochrome palette for the Pawn Army theme
   *
   * The original Mini Mensa palette used a rainbow of oranges, greens and blues.
   * For this black‑and‑white redesign we replace each accent with a neutral
   * shade.  Pure white (#fff) provides crisp borders and links, while
   * graduated greys (#e5e5e5, #cccccc, #555555, #111111) introduce subtle
   * contrast for hover states and buttons without introducing colour.  The
   * heading colour is set to white to stand out against the dark glass
   * backgrounds.
   */
  --pride-red:    #ffffff; /* borders and accents are white */
  --pride-orange: #e5e5e5; /* light grey for the header top border */
  --pride-yellow: #555555; /* medium grey for hover states */
  --pride-green:  #111111; /* very dark grey for buttons and highlights */
  --pride-blue:   #ffffff; /* white for links */
  --pride-indigo: #cccccc; /* light grey for hover links */
  /* Heading text: white for high contrast on dark backgrounds */
  --pride-violet: #ffffff;
}


/* === Pride Palette Accent Integration === */
a, a:visited {
  color: var(--pride-blue);
}
a:hover {
  color: var(--pride-indigo);
}
button, .button, input[type=submit] {
  background-color: var(--pride-green);
  color: white;
}
button:hover, .button:hover, input[type=submit]:hover {
  background-color: var(--pride-yellow);
}
nav, .navbar, .menu {
  border-bottom: 3px solid var(--pride-red);
}
header {
  border-top: 4px solid var(--pride-orange);
}
.site-title, h1, h2, h3 {
  color: var(--pride-violet);
}
/* Section-specific coloring */
.section-general { border-left: 5px solid var(--pride-red); }
.section-linkhunter { border-left: 5px solid var(--pride-orange); }
.section-timemachine { border-left: 5px solid var(--pride-green); }


/* === Use a clean, friendly sans‑serif font for header & nav === */
/*
 * The original theme used the Chewy display font to mirror the Ask La Gaffe
 * cartoon aesthetic.  For the Mini Mensa youth think tank we switch to
 * Montserrat, a geometric sans‑serif that retains warmth and personality
 * while dramatically improving legibility on small screens.  The font is
 * loaded via Google Fonts in functions.php.
 */
:root{ --header-font: 'Montserrat', sans-serif; }
header, .site-header, .site-title, .logo, .branding, .brand, nav, .nav, .navbar, .menu, .menu a, .nav a, .site-branding, .main-navigation, .main-navigation a, .site-title a, h1, h2, h3 {
  font-family: var(--header-font) !important;
  letter-spacing: 0.02em;
}


/*
Theme Name: Pawn Army
Theme URI: https://example.com/pawn-army
Author: Pawn Army Team
Description: A monochrome WordPress theme inspired by classic chess sets.  
This redesign of the original Mini Mensa theme swaps the rainbow palette for high‑contrast blacks and whites, updates the photographic backgrounds and logo to futuristic chess imagery, and retains the responsive drawer navigation and glass overlays.  
Version: 1.0
License: GPLv2 or later
*/

/* Custom white‑glass aesthetic */
/*
 * Glass panels now use a dark translucent background to complement the
 * monochrome photography.  A subtle blur is retained, and the border
 * switches to a semi‑transparent white to delineate panels on dark
 * backgrounds.
 */
.glass {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

/* Full‑screen rotating background wrapper */
#bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
#bg-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#bg-container img.active {
  opacity: 1;
}

/* Navigation bar */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
#nav-toggle {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
#mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 1rem;
}
#mobile-menu.show {
  transform: translateX(0);
}
#mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#mobile-menu li a {
  display: block;
  padding: 0.5rem 0;
  color: #fff;
  text-decoration: none;
}

.menu, nav, header {
  position: relative;
  z-index: 9999;
}

h1, h2, h3, h4, h5, h6, header, .site-title, .site-header {
    /* Use the brand font defined in :root */
    font-family: var(--header-font) !important;
}


h1, h2, h3, h4, h5, h6, header, .site-title, .site-header, nav, .nav, .navbar, .logo {
    /* Apply the same font to nav links and logo */
    font-family: var(--header-font) !important;
}


/* Global paragraph text improvements */
body,
p,
li {
  font-size: 1.125rem;   /* ~18px */
  line-height: 1.6;      /* Good vertical spacing */
  font-weight: 400;      /* Keeps it readable without being bold */
  letter-spacing: 0.02em; /* Slight tracking for clarity */
}

/* Optional: Adjust headings for better hierarchy */
h1 {
  font-size: 2.25rem;   /* ~36px */
  line-height: 1.3;
}
h2 {
  font-size: 1.75rem;   /* ~28px */
  line-height: 1.4;
}
h3 {
  font-size: 1.5rem;    /* ~24px */
  line-height: 1.4;
}

/* Slightly more spacing between paragraphs globally */
p {
  margin-bottom: 1.2em;
}