/* BookStyle.css — Neocities
   Parchment-style Bootstrap cards + leather-toned curved navbar
   FIXED: navbar overlays no longer block clicks
*/

/* ===== Base Page ===== */
:root{
  --desk-bg: #f2f3f5;

  /* Parchment palette */
  --parchment-base: #efe3c2;
  --parchment-hi:   #f4e9c9;
  --parchment-lo:   #e3d2a2;

  --parchment-ink:  #4b3a1a;
  --parchment-edge: #c8b27a;

  /* Shadows */
  --shadow-1: 0 4px 6px rgba(0,0,0,0.25);
  --shadow-2: 0 18px 40px rgba(0,0,0,0.35);

  /* Shared layout controls */
  --content-max: 1600px;
  --content-gutter: 28px;
}

/* On very large monitors, allow a bit more width */
@media (min-width: 1700px){
  :root{
    --content-max: 1760px;
    --content-gutter: 34px;
  }
}

html, body{
  height: 100%;
}

body{
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ee635e0a-8ad2-4b97-b015-081828bf48db/ddo9g6-9e221d5e-819a-44f4-a602-fa716e9c58a9.jpg/v1/fit/w_828,h_1166,q_70,strp/grungy_paper_texture_v_5_by_bashcorpo_ddo9g6-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjgxOCIsInBhdGgiOiIvZi9lZTYzNWUwYS04YWQyLTRiOTctYjAxNS0wODE4MjhiZjQ4ZGIvZGRvOWc2LTllMjIxZDVlLTgxOWEtNDRmNC1hNjAyLWZhNzE2ZTljNThhOS5qcGciLCJ3aWR0aCI6Ijw9MjAwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.wxy_JRIOetP25DlJanC9fjyQG0J4hHljWpWGSvg8F2E");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* =========================================================
   Layout wrapper: make cards area match navbar margins/width
   ========================================================= */

main.container{
  max-width: var(--content-max) !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;

  padding-top: 1.75rem;
  padding-bottom: 2rem;
}

/* =========================================================
   Sticky Navbar — dark leather, curved + floating
   FIXED: overlays cannot block clicks
   ========================================================= */

/* Sticky wrapper */
.navbar.site-master{
  position: sticky;
  top: 0;
  z-index: 1050;

  background: transparent;
  border: 0;
  padding: 0;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Leather bar */
.navbar.site-master > .container-fluid{
  position: relative;

  /* MATCH the cards exactly */
  max-width: var(--content-max) !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;

  margin-left: auto;
  margin-right: auto;

  /* height/inner padding */
  padding-top: .65rem;
  padding-bottom: .65rem;

  /* space from top */
  margin-top: 14px;

  /* aged leather look */
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(0,0,0,.18), transparent 45%),
    linear-gradient(180deg, #7a5a2c 0%, #6a4c24 50%, #5a3f1c 100%);

  border: 1px solid rgba(60,40,15,.65);
  border-radius: 22px;

  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    inset 0 3px 0 rgba(255,255,255,.12);
}

/* inner aged edge (decorative layer) */
.navbar.site-master > .container-fluid::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 18px;

  /* IMPORTANT: never block clicks */
  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -16px 22px rgba(0,0,0,.35);
}

/* subtle top highlight (decorative layer) */
.navbar.site-master > .container-fluid::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;

  /* IMPORTANT: never block clicks */
  pointer-events: none;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* CRITICAL: ensure real clickable navbar elements are above everything */
.navbar.site-master .navbar-brand,
.navbar.site-master .nav-link,
.navbar.site-master .navbar-toggler,
.navbar.site-master .navbar-collapse{
  position: relative;
  z-index: 2;
}

/* Brand */
.navbar.site-master .navbar-brand{
  color: #f1e2c1 !important;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Nav links */
.navbar.site-master .nav-link{
  color: rgba(245,230,200,.85);
  font-weight: 600;
  border-radius: 10px;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.navbar.site-master .nav-link:hover,
.navbar.site-master .nav-link:focus{
  color: #fff2cf;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.navbar.site-master .nav-link.active{
  color: #fff2cf;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Toggler button */
.navbar.site-master .navbar-toggler{
  border-color: rgba(255,220,160,.55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.navbar.site-master.navbar-light .navbar-toggler-icon{
  filter: invert(92%) sepia(20%) saturate(200%) brightness(95%);
}

/* =========================================================
   Parchment Cards 
   ========================================================= */

.card.parchment-card{
  position: relative;
  background-color: var(--parchment-base);

  background-image:
    radial-gradient(circle at 20% 15%, rgba(120,90,40,0.18), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(120,90,40,0.14), transparent 40%),
    radial-gradient(circle at 40% 70%, rgba(120,90,40,0.16), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(120,90,40,0.12), transparent 40%),

    repeating-linear-gradient(
      90deg,
      rgba(120,90,40,0.06),
      rgba(120,90,40,0.06) 1px,
      transparent 1px,
      transparent 7px
    ),

    linear-gradient(to bottom right, var(--parchment-hi), var(--parchment-lo));

  border: 1px solid var(--parchment-edge);
  border-radius: 12px;
  box-shadow: var(--shadow-1), var(--shadow-2);
  color: var(--parchment-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card.parchment-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 8px 14px rgba(0,0,0,0.30),
    0 28px 60px rgba(0,0,0,0.45);
}

.card.parchment-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 40px rgba(90,60,20,0.35),
    inset 0 0 80px rgba(120,80,30,0.25);
}

.card.parchment-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.card.parchment-card .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(90,60,20,0.40);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--parchment-ink);
}

.card.parchment-card .card-body{
  color: var(--parchment-ink);
}

.card.parchment-card .card-footer{
  background: transparent;
  border-top: 1px solid rgba(90,60,20,0.40);
  font-size: 0.85rem;
  color: #6b5326;
}

/* ===== Clickable card links (NO blue, NO underline) ===== */
.card-link-wrapper{
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.card-link-wrapper:hover,
.card-link-wrapper:focus,
.card-link-wrapper:active{
  text-decoration: none !important;
  color: inherit !important;
}

/* Buttons for parchment */
.btn.parchment-btn{
  background: rgba(75,58,26,0.92);
  border-color: rgba(75,58,26,0.92);
  color: #fff;
}

.btn.parchment-btn:hover{
  background: rgba(75,58,26,1);
  border-color: rgba(75,58,26,1);
  color: #fff;
}

.btn-outline-parchment{
  border-color: rgba(75,58,26,0.65);
  color: rgba(75,58,26,0.95);
}

.btn-outline-parchment:hover{
  background: rgba(75,58,26,0.92);
  border-color: rgba(75,58,26,0.92);
  color: #fff;
}

/* Page section headings */
.section-title{
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.3px;
  color: #2a2a2a;
}

.content-surface{
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 1.25rem;
}