/* 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 */
input, textarea { color: #111; }




/* 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 the “Light and Shadow” theme.
 *
 * The new artwork depicts intense games of Go set in a traditional
 * Japanese tatami room.  To complement the warm reds and earthy
 * browns of the kimonos and wooden boards, we switch to a cohesive
 * palette of burnt oranges, muted creams and deep umber tones.  We keep
 * the same CSS variable names so the rest of the stylesheet continues
 * to function without modification.
 */
:root {
  /* Primary accent: a deep burnt orange inspired by lacquered wood and
     kimono fabrics.  Used for borders and subtle highlights. */
  --pride-red:    #b5472f;
  /* Secondary accent: a warm orange that pairs nicely with the primary. */
  --pride-orange: #d67f2b;
  /* Creamy beige for hover states and glass overlays.  This neutral
     backdrop harmonises with the interior paper screens and tatami mats. */
  --pride-yellow: #f5e1c0;
  /* A dark brown for buttons and highlights evokes the polished wood of
     the Go board and temple beams. */
  --pride-green:  #4d3b2d;
  /* Very dark brown used for link text to maintain high contrast on
     lighter panels. */
  --pride-blue:   #2f2921;
  /* Almost black for link hover states. */
  --pride-indigo: #1e1a15;
  /* Headline colour: a rich chestnut brown that stands out against our
     backgrounds without clashing with the artwork. */
  --pride-violet: #3a291b;
}


/* === 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); }


/* === Typography for Light and Shadow === */
/*
 * To evoke the refined atmosphere of a Go match, we adopt a classic
 * serif for headings and navigation.  The Cormorant Garamond typeface
 * provides elegant, calligraphic strokes reminiscent of brushwork, while
 * the Lora typeface supplies a warm, readable serif for body copy.  Both
 * fonts are loaded via Google Fonts in functions.php.
 */
:root{ --header-font: 'Cormorant Garamond', serif; --body-font: 'Lora', 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;
}
body, p, ul, ol, li {
  font-family: var(--body-font);
}


/*
Theme Name: Light and Shadow
Theme URI: https://notyouagain.ai/
Author: Alfons Scholing & ChatGPT
Description: A custom WordPress theme inspired by the ancient game of Go.  Featuring elegant Japanese‑style artwork, a warm, earthy colour palette and refined typography, Light and Shadow brings calm focus to your content.  Includes a mobile‑first design with a frosted glass overlay and responsive drawer menu.
Version: 1.0
License: GPLv2 or later
*/

/* Custom white‑glass aesthetic */
/* Frosted glass panels tinted to complement the warm palette. */
.glass {
  /* Use the cream tone from our palette with a slight transparency. */
  background: rgba(245, 225, 192, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* A semi‑transparent border to delineate the panel without drawing
     too much attention. */
  border: 1px solid rgba(245, 225, 192, 0.4);
  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;
}