/*
Theme Name: QnaBookStudy
Theme URI: http://gbbs.local/
Author: Author
Author URI: none
Description: A lightweight WordPress theme for hosting paragraph-based Q&A study of foundational texts, combining static HTML with dynamic reader dialogue.
Version: 1.0
*/
body {
  margin: 0;
  padding: 0rem 0.25rem 0 .25rem;
}

/* HEADER: Namespaced styling for fixed button bar, disclaimer, and copyright */
#wpWrapper-header {
  display: grid;
  grid-template-areas:
   "l1 r1"
   "l2 r2"
   "r3 r3";    
  /* grid-template-columns: 300px 0% auto; */
  grid-template-columns: 300px auto;
  grid-template-columns: 19.5rem auto;
  grid-auto-rows: auto;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 9999;
  border-bottom: 1.75px solid cornflowerblue;
  gap: 0.1rem;  
  padding: .5rem 0 0.1rem 0 ;
  box-sizing: border-box;
}
/* Grid cell assignment */
.wpWrapper-header-l1 { grid-area: l1; }
.wpWrapper-header-r1 { grid-area: r1; }
.wpWrapper-header-l2 { grid-area: l2; }
.wpWrapper-header-r2 { grid-area: r2; }
.wpWrapper-header-r3 { grid-area: r3; }

/* Shared cell styles */
.wpWrapper-header-cell {
  padding: 4px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  overflow-wrap: break-word;
  line-height: 1; 
  /* Uncomment for testing borders */
  border: 1px solid grey; 
  border: none; 
}

/* logo and title */
.wpWrapper-header-l1 {
 display: flex;
 align-items: center;
 white-space: nowrap;
 font-family: 'Times New Roman', Times, serif;
 font-style: italic;
 text-decoration: underline;
 text-decoration: none;
 margin: 0 0 0 0;
 font-size: 1.75rem;
 font-weight: 500;
 color: royalblue;
}
.wpWrapper-header-l1 > div > span:first-child { text-decoration: underline; }

/* Title Line 2 (inside of header-l1) */
.wpWrapper-header-l1a {
 display: flex;
 /* justify-content: flex-end;   */
 align-items: center;
 font-style: italic;
 text-decoration: none !important;
 font-size: .85rem;
 font-weight: 550;
 color: royalblue;
 margin: .25rem 0 0 0;
} 

.wpWrapper-logo {
 width: 1.55rem;
} 
/* .wpWrapper-title { */
 /* text-decoration: underline; */
 /* text-decoration: none; */
/* } */

/* END logo and title -------------- */

/* header line 2 text if any */
.wpWrapper-header-l2 {
 display: flex;
 justify-content: flex-end; 
 align-items: center;
 font-style: italic;
 font-size: .85rem;
 font-weight: 550;
 color: royalblue;
 margin: 0 0 0 0;
} 
/* END tagline text -------------------- */

/* wraps 2nd line from left to right */
/* 
  NOTE: This flex on one line, display:block on the next, display:inline-block on the nexts configurationallows proper right to left wrapping in either r2 or r3.
  When we tried to find a way to make everything work w just flex, nothing worked as expected and when we started tinkering to adjust it, we wrote more and more complex css that still didn't work as expected...
*/
/* .wpWrapper-header-r1, */
/* .wpWrapper-header-r2, */
/* .wpWrapper-header-r3 { */
 /* display: flex; */
 /* flex-wrap: wrap;  */
 /* justify-content: flex-end;  */
 /* white-space: normal; */
 /* display: flex; */
 /* flex-wrap: wrap;  */
 /* justify-content: flex-end;  */
/* } */
.wpWrapper-header-r1,
.wpWrapper-header-r2,
.wpWrapper-header-r3 {
 display: block; 
 text-align: right; 
 line-height: 1.2;
 white-space: normal; 
}
.wpWrapper-header-r1 > *, 
.wpWrapper-header-r2 > *,
.wpWrapper-header-r3 > * {
 display: inline-block;
 margin: 0 0.5rem; 
}
/* END wraps 2nd line from right to left ------------------- */

/* move entire r2 gridbox up slightly */
.wpWrapper-header-r2 {
 transform: translateY(-.2rem);
}
/* move entire r2 gridbox up slightly ---------------------- */

/* r3 Menu Items */
.wpWrapper-header-r3 {
 /* display: flex; */
 /* justify-content: flex-end;  */
 /* align-items: center; */
 font-size: 0.85rem; 
 line-height: 1;
 margin: 0.2rem 0 .2rem 0;
}
.wpWrapper-header-r3:empty {
  display: none;
}
/* END r3 Menu Items  ----------- */

/* END: HEADER: Namespaced styling for fixed button bar, disclaimer, and copyright ------------------ */

/* WPWRAPPER BUTTONS BTN BTNS */
.wpWrapper-btn {
 display: inline-flex; 
 align-items: center; 
 vertical-align: middle; 
 line-height: 1; 
 cursor: pointer;
 border-radius: 4px;
 overflow: hidden;
 text-decoration: none;
 font-size: .95rem;
 border: none;
 outline: none;
 color: royalblue;
 padding: .1rem .6rem .1rem .3rem;
 margin: 0 0.25rem;
 margin: 0;
 transform: translateY(-1px);
}
.wpWrapper-btn:visited {
  color: royalblue;
  text-decoration: underline;
}

.wpWrapper-btn-signup,
.wpWrapper-btn-login,
.wpWrapper-btn-initial {
 font-size: 0.74rem;
 padding: 0.35rem .45rem 0.4rem .45rem ;
 margin: 0 0.5rem 0 -0.15rem;
 margin: 0 0.5rem 0 -0.20rem;
 font-weight: 300;
 color:#fff;
 background-color: #496ab6; 
}
.wpWrapper-btn-initial {
 color:#fff;
 font-size: 1rem;
 padding: 0.2rem .5rem 0.3rem .5rem ;
}
.wpWrapper-btn-signup {
 color: #fff;
 background-color: #f400148a; 
}
.wpWrapper-btn-initial:visited,
.wpWrapper-btn-login:visited,
.wpWrapper-btn-signup:visited {
 color: #fff;
 text-decoration: none;
}

/* End:WPWRAPPER BUTTONS BTN BTNS */

/* WPWRAPPER CHANGE BUTTONS TEXT COLOR WHEN CURRENT PAGE MATCHES A MENU BUTTON */
.wpWrapper-header .current-menu-item a,
.wpWrapper-header a:hover {
 color: #f400148a;
}
/* End:WPWRAPPER CHANGE BUTTONS TEXT COLOR WHEN CURRENT PAGE MATCHES A MENU BUTTON */

/* WPHEADER BTNS HOVER ACCENT  */
/* .wpWrapper-btn-active { */
  /* color: royalblue; */
  /* text-decoration: none; */
  /* border-radius: 3px; */
  /* padding: 0.1rem 0.25rem; */
  /* transition: color 0.2s ease, background-color 0.2s ease; */
/*  */
  /* text-decoration: underline; text-underline-offset: 0.08em; */
/* } */
/* .wpWrapper-btn-active:hover, */
/* .wpWrapper-btn-active:focus-visible { */
  /* color: #0642f6 !important; */
  /* color: #f97580 !important; */
  /* font-size: 1rem; */
  /* margin: 0 .13rem 0 0; */
  /* margin-right: .13rem; */
  /* padding: 0 0; */
/*  */
  /* background-color: #496ab6;  */
  /* background-color: lightblue;  */
  /* outline: none; */
/* } */
/* .wpWrapper-btn-active:active { */
  /* filter: brightness(0.9); */
/* } */
/* End: Header hover accent for header buttons */
/* END: WPWRAPPER BUTTONS BTN BTNS ------------------------------------------ */

/* GENERAL REUSABLE CSS FOR USE IN ANY OF OUR WP FILES */
/* BEGIN TOOLTIPS ---------------- */
/* Base: enable tooltips on generic elements and header buttons */
.wpWrapper-tooltip,
.wpWrapper-btn[data-tooltip] {
 position: relative;
 cursor: pointer;
 pointer-events: auto; /* ensure hover/focus works */
 z-index: 1;           /* baseline so hovered one can rise above siblings */
}
/* Ensure tooltip content is not clipped by the button */
.wpWrapper-btn[data-tooltip] { overflow: visible; }

/* Tooltip box appearance (multi-line, centered, opaque) */
.wpWrapper-tooltip::after,
.wpWrapper-btn[data-tooltip]::after {
 content: attr(data-tooltip);
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 background: #fff;             /* opaque */
 color: #000;
 border: 1px solid #ccc;
 border-radius: 4px;
 /* max-width: 39ch;              /* roughly 39 chars per line */
 padding: 4px 8px;
 font-size: 10pt;
 line-height: 1.2;
 text-align: center;
 white-space: normal;          /* allow wrapping */
 overflow-wrap: break-word;    /* wrap long words */
 word-break: normal;
 hyphens: auto;                /* hyphenate if available */
 opacity: 0;
 visibility: hidden;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 pointer-events: none;         /* don't steal hover */
 z-index: 2;                   /* within the hovered button */
 transition: none;             /* instant show/hide */
 bottom: 125%;                 /* default above */
}
/* For header buttons near the top, place tooltip below */
.wpWrapper-btn[data-tooltip]::after {
 top: calc(100% + 8px);
 bottom: auto;
}

/* When JS manages tooltip layout, hide the pseudo-element so bubbles don't duplicate */
.wpWrapper-btn[data-tooltip].has-js-tooltip::after {
 content: none;
}

/* Shared styling for JS-created header tooltip bubbles */
.wpHeader-tooltip-bubble {
 position: fixed;
 background: #fff;
 color: #000;
 border: 1px solid #ccc;
 border-radius: 4px;
 /* max-width: 39ch; */
 padding: 4px 8px;
 font-size: 10pt;
 line-height: 1.2;
 text-align: center;
 white-space: normal;
 overflow-wrap: break-word;
 word-break: normal;
 hyphens: auto;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 z-index: 9999;
 pointer-events: none;
}

/* On hover/focus: raise the hovered element and show its tooltip */
.wpWrapper-tooltip:hover,
.wpWrapper-tooltip:focus,
.wpWrapper-btn[data-tooltip]:hover,
.wpWrapper-btn[data-tooltip]:focus {
 z-index: 999;                 /* above siblings on overlap */
}
.wpWrapper-tooltip:hover::after,
.wpWrapper-btn[data-tooltip]:hover::after,
.wpWrapper-tooltip:focus::after,
.wpWrapper-btn[data-tooltip]:focus::after {
 opacity: 1;
 visibility: visible;
}/* END: TOOLTIPS ------------------------- */
/* .wpWrapper-header .current-menu-item a, */
/* .wpWrapper-header a:hover { */
  /* color: #FAF0CA; */
/* } */

/* BEGIN REVIEW BTN CSS ---------------------- */
.review-btn {
  display: inline-block;
  font: inherit;
  font-size: 0.9em;         /* keep close to surrounding text */
  font-style: italic;
  text-decoration: underline;
  line-height: 1;
  padding: 0 4px;
  margin-right: 2px;        /* space before the leading '[' */
  border: 1px solid #3f6fd1;
  background: #496ab6;    /* matches login button background */
  color: #fff;
  border-radius: 3px;
  vertical-align: baseline;
  cursor: pointer;
}
.review-btn:hover { filter: brightness(0.95); }
.review-btn:active { transform: translateY(1px); }
.review-btn:focus { outline: 2px solid #000; outline-offset: 1px; }

/* END REVIEW BTN CSS ---------------------------------------------------------------------- */

/* 25-10-01 BEGIN REVIEWER PANAL CSS ---------------- */
/* === GBBS Reviewer Panel === */
.gbbs-msg-panel {
  position: fixed;
  top: 8vh;
  right: 0;
  width: 50vw;       /* your 1/2 viewport width */
  height: 75vh;
  z-index: 10000;
  background: #fff;
  border: 1px solid #99a;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.gbbs-rp-header {
  padding: 8px 10px;
  background: #eef3ff;
  border-bottom: 1px solid #cfd7e6;
  cursor: move;            /* draggable handle */
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gbbs-rp-title { font-weight: 600; margin: 0; }
/* identity line removed from header */
.gbbs-rp-body { padding: 8px 10px; flex: 1; display: flex; }
.gbbs-rp-textarea {
  width: 100%; height: 100%;
  resize: none;            /* resizing handled by jQuery UI */
  border: none; outline: none;
  font: inherit;
}
.gbbs-rp-footer {
  border-top: 1px solid #cfd7e6;
  padding: 8px 10px;
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  gap: 8px;
}
.gbbs-rp-actions { display: flex; gap: 8px; }
.gbbs-rp-copy { display: flex; align-items: center; gap: 6px; user-select: none; }
.gbbs-rp-copy input { margin: 0; }
.gbbs-rp-btn {
  padding: 6px 12px; border: 1px solid #99a; background: #f7f9ff; cursor: pointer;
}
.gbbs-rp-btn:hover { background: #edf2ff; }
/* 25-10-01 END REVIEWER PANAL CSS --------------------------------------------------------- */
/* 25-10-05 Canvas CSS additions: ensure copy checkbox/text accent is applied */
.gbbs-rp-copy-cb { accent-color: blue; }
.gbbs-rp-copy span { color: blue; }

/* END: GENERAL REUSABLE CSS FOR USE IN ANY OF OUR WP FILES ===================================== */

/* FOOTER: Namespaced styling for fixed button bar, disclaimer, and copyright */
.wpWrapper-footer {
 margin-bottom: 0pt;
 line-height: normal;
 font-family: Calibri;
 font-size: 11pt;
}
.qna-disclaimer-A9fX3bQz7LpK2m {
 font-size: 14px;
 color: #555;
 text-align: center;
 padding: 15px;
}
.qna-copyright-A9fX3bQz7LpK2m {
 font-size: 12px;
 color: #888;
 text-align: center;
 padding: 10px;
}
/* END FOOTER: Namespaced styling for fixed button bar, disclaimer, and copyright -------------------*/

/* END STYLE-CSS -------------------------------------------------------------------------------------- */