/* ======================================================================
   MAIN SITE CSS — CONSOLIDATED & THEME-DRIVEN
   Fully corrected version with stable mobile/desktop behaviour.
   Sidebar width is now adjustable via --sidebar-width (see annotation).
   ====================================================================== */


/* ==========================
   1. BASE COLOR VARIABLES
   ========================== */

:root {

    /* ================================================================
       RHS BORDER SETTING HERE  >>>  CHANGE THIS TO ADJUST SIDEBAR
       This controls:
       - Desktop right border width
       - Mobile slide-in panel width
       - Main panel margin on desktop
       ================================================================= */
    --sidebar-width: 180px;

    --bg-main:     #f4ecd8;
    --bg-sidebar:  #dbe4d6;
    --bg-header:   #2f4f4f;
    --text-main:   #333333;
    --text-header: #ffffff;
    --link-main:   #1a3c6a;
    --link-hover:  #ff8c42;
    --footer-bg:   #2f4f4f;
    --footer-text: #ffffff;
}


/* ==========================
   2. THEME OVERRIDES
   ========================== */

body.theme-blue {
    --bg-main:     #e6f0fa;
    --bg-sidebar:  #cce0ff;
    --bg-header:   #1a3c6a;
    --text-main:   #1a1a1a;
    --text-header: #ffffff;
    --link-main:   #003366;
    --link-hover:  #ff9933;
    --footer-bg:   #1a3c6a;
    --footer-text: #ffffff;
}

body.theme-green {
    --bg-main:     #e6f9e6;
    --bg-sidebar:  #ccf2cc;
    --bg-header:   #2a5a2a;
    --text-main:   #1a1a1a;
    --text-header: #ffffff;
    --link-main:   #1a3c6a;
    --link-hover:  #ff9933;
    --footer-bg:   #2a5a2a;
    --footer-text: #ffffff;
}

body.theme-paper {
    --bg-main:     #f6f1e7;
    --bg-sidebar:  #ede4d3;
    --bg-header:   #3b2f2f;
    --text-main:   #2b2622;
    --text-header: #f5efe6;
    --link-main:   #6b3e26;
    --link-hover:  #b35a1f;
    --footer-bg:   #3b2f2f;
    --footer-text: #f5efe6;
}


/* ==========================
   3. GLOBAL ELEMENTS
   ========================== */

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: Verdana, Arial, sans-serif;
}

a { color: var(--link-main); text-decoration: none; }
a:hover { color: var(--link-hover); }



/* ==========================
   4. HEADER
   ========================== */

#Header {
    background-color: var(--bg-header);
    color: var(--text-header);
    width: 100%;
    padding: 1% 5%;
    background-image: url(/images/AWideSky.gif);
    background-repeat: no-repeat;
    background-position: center;
}

#Header h1 {
    font-size: 3rem;
    margin: 0;
    padding-left: 1rem;
    font-family: Palatino, Georgia, "Times New Roman", serif;
}

#Header h2 {
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    margin: 0;
}



/* ==========================
   5. FOOTER
   ========================== */

#Footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 1rem;
}



/* ==========================
   6. RIGHT SIDEBAR (STATIC DESKTOP)
   ========================== */

#LeftBar {
    background-color: var(--bg-sidebar);
    width: var(--sidebar-width);
    float: right;
    padding: 2rem 1rem;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: right 0.3s ease;
}

/* links */
#LeftBar a {
    display: block;
    padding: 0.3rem 0.5rem;
}


/* ==========================
   7. MAIN CONTENT PANEL
   ========================== */

#MainPanel {
    background: white;
    color: #505050;
    padding: 1rem 2.5%;
    margin-right: calc(var(--sidebar-width) + 20px);
    position: relative;
}

/* left decorative shadow */
#MainPanel::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 100%;
    content: "";
    background: rgba(0,0,0,0.07);
}



/* ==========================
   8. HAMBURGER
   ========================== */

.hamburger {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    font-size: 2rem;
    cursor: pointer;
    background: rgba(0,0,0,0.45);
    color: var(--text-header);
    border-radius: 5px;
}



/* ==========================
   9. MOBILE (<900px)
   ========================== */

@media (max-width: 900px) {

    #LeftBar {
        position: fixed;
        top: 4.5rem;                     /* pushes under hamburger */
        right: calc(-1 * (var(--sidebar-width) + 20px));
        width: var(--sidebar-width);
        height: calc(100% - 4.5rem);
        float: none;
        z-index: 1500;
        box-shadow: -4px 0 8px rgba(0,0,0,0.25);
    }

    #LeftBar.active {
        right: 0;
    }

    #MainPanel {
        margin-right: 0;
        margin-left: 0;
        padding-top: 3rem;               /* ensures content clears hamburger */
    }

    .hamburger {
        display: block;
    }
}


/* ==========================
   10. TINY PHONES (<600px)
   ========================== */

@media (max-width: 600px) {
    #MainPanel {
        padding-left: 1rem;   /* add some breathing room */
        padding-right: 1rem;  /* optional: keep right spacing consistent */
    }

  /* Sidebar: stop sliding, make it flow */

  #LeftBar {
    position: static !important;
    width: 100%;
    height: auto;
    right: auto;
    top: auto;
    box-shadow: none;
    margin: 1.5rem 0;
    padding: 0.2rem 1rem;  /* or whatever looks tight but readable */
    margin: 0;             /* remove the extra top/bottom margin */
  }

  /* Menu text: make it readable */
    #LeftBar ul {
      margin: 0     /* remove top/bottom spacing */
      padding: 0;    /* remove left/right indentation if any */
  }
  
  #LeftBar a,
  #LeftBar nav,
  #LeftBar li {
    font-size: 1.05rem;
    margin: 0;     /* remove top/bottom spacing */
     padding: 0;    /* remove left/right indentation if any */
  line-height: 0.8;
  }
  
 
    .hamburger {
        display: none;
    }
    

  /* ===== Compact header ===== */
  /* ===== Slim header ===== */
  #Header {
      padding: 0.2rem 1rem;        /* minimal top/bottom padding */
  }

  #Header h1 {
      font-size: 1.5rem;
      margin: 0;                   /* remove all margin */
  }

  #Header h2 {
      display: none;               /* hide subheading on phones */
  }

  /* ===== Sidebar menu items ===== */
  #LeftBar a {
      padding: 0.3rem 0.5rem;      /* reduce vertical spacing */
      font-size: 1rem;             /* keep readable */
  }

  /* ===== Main panel padding ===== */
  #MainPanel {
      padding: 0.5rem 1rem;        /* tight top/bottom padding */
      margin: 0;
  }
} /* closes <600px media query */




/* ==========================
   11. set ruled lines
   ========================== */

hr {
    border: none;
    height: 3px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    margin: 2.5rem 0;
}



/* ==========================
   12. AUDIO NOTE & DETAILS
   ========================== */

div.audio-note {
  max-width: 36rem;
  margin: 2rem auto;            /* centers horizontally */
  padding: 0.75rem 1rem;
  border: 1px solid #444;       /* subtle framing */
  border-radius: 6px;
  background-color: inherit;     /* matches #MainPanel background */
  box-sizing: border-box;
  text-align: left;
  color: #505050;                /* mainPanel default color */
}

div.audio-note details {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #505050;                /* mainPanel default text */
}

div.audio-note details summary {
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  color: #333333;                /* slightly darker for clickable header */
  list-style: none;
}

div.audio-note details summary::-webkit-details-marker {
  display: none;
}

div.audio-note details summary::before {
  content: "▸ ";
  font-size: 1rem;
  color: #444;
}

div.audio-note details[open] summary::before {
  content: "▾ ";
}

div.audio-note details p {
  margin: 0.5rem 0 0 1.2rem;
  line-height: 1.5;
  color: #505050;                /* mainPanel default text */
}

/*========== to get image with text wrapped======*/
.book-row {
  display: flex;
  align-items: flex-start;  /* aligns top of image with top of text */
  gap: 1rem;                /* space between image and text */
  flex-wrap: wrap;           /* allows wrapping on very narrow screens */
}

.book-row img {
  width: 150px;              /* keep your existing width */
  height: auto;
  float: none;               /* remove old float */
}

.book-info {
  flex: 1;                   /* text takes remaining space */
}

/* ==========================
   POPUP OVERLAY
   ========================== */

.popup-overlay {
    position: fixed;       /* ensures it stays on screen */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    display: none;         /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 3000;         /* above sidebar, header, main content */
}

.popup-overlay.active {
    display: flex;         /* shows the popup */
}

.popup-panel {
    background: white;
    padding: 1.5rem;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}