/* ==========================================================================
   Y2K RETRO CURSOR CONFIGURATION (SVG Data URI - Hot Pink Pixel Pointer)
   ========================================================================== */

body {
   font-family: 'Quicksand', sans-serif;
   color: #ffffff;
   margin: 0;
   padding: 0;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0 L0,18 L4,14 L8,22 L11,21 L7,13 L13,13 Z" fill="%23ff99e6" stroke="%23ffffff" stroke-width="1.5"/></svg>'), auto !important;
}

a, button, .pdf-button, .nav-btn, .profile-img {
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0 L0,18 L4,14 L8,22 L11,21 L7,13 L13,13 Z" fill="%23ff99e6" stroke="%23ffffff" stroke-width="1.5"/></svg>'), pointer !important;
}

/* Global Reset and Mobile Font Size Locking */
* {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Focus State for Accessibility */
:focus-visible {
   outline: 3px solid #ff99e6 !important;
   outline-offset: 3px !important;
}

/* Main Stacked Column Container */
.wrapper {
   max-width: 1100px;
   width: 92%;
   margin: 0 auto;
   padding: 0 15px 40px 15px;
}

/* Main Content Container Box Styling */
.box {
   background-color: rgba(12, 5, 15, 0.90);
   border: 2px solid #ff99e6;
   border-radius: 12px;
   padding: 22px 28px;
   margin-bottom: 20px;
   box-shadow: 0 0 12px rgba(255, 128, 223, 0.3);
   backdrop-filter: blur(3px);
   width: 100%;
}

.box p[style*="color: #ff80df"],
.box-heading {
   color: #ff99e6 !important;
   text-align: center;
}

/* Standalone Profile Picture (NO Border Box, NO Outlines, NO Shadows) */
.profile-img {
   width: 130px;
   height: 130px;
   border-radius: 50%;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   object-fit: cover;
   display: inline-block;
   margin-bottom: 15px;
}

/* Primary Link Buttons (VIEW CV, Portfolio, Email) */
.pdf-button, 
button.pdf-button, 
a.pdf-button {
   font-family: 'Press Start 2P', monospace !important;
   font-size: 8pt !important;
   color: #1a0014 !important;
   background: linear-gradient(180deg, #ff99e6 0%, #ff40d0 100%);
   border: 2px solid #ffffff;
   border-radius: 8px;
   padding: 8px 14px !important;
   text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 2px 2px 0px #000000, 0 0 8px rgba(255, 128, 223, 0.5);
   transition: all 0.15s ease-in-out;
   text-transform: uppercase;
   line-height: 1.2;
   outline: none;
   -webkit-appearance: none;
   appearance: none;
   max-width: 90%;
   text-align: center;
}

.pdf-button:hover,
button.pdf-button:hover,
a.pdf-button:hover {
   background: linear-gradient(180deg, #ffffff 0%, #ff66d9 100%);
   transform: translateY(-2px);
   box-shadow: 3px 3px 0px #000000, 0 0 12px rgba(255, 128, 223, 0.8);
   color: #000000 !important;
}

.pdf-button:active,
button.pdf-button:active,
a.pdf-button:active {
   transform: translateY(1px);
   box-shadow: 1px 1px 0px #000000;
}

/* PREV / NEXT Flipbook Buttons */
.nav-btn {
   font-family: 'Press Start 2P', monospace !important;
   font-size: 8pt !important;
   color: #1a0014 !important;
   background: linear-gradient(180deg, #ff99e6 0%, #ff40d0 100%);
   border: 2px solid #ffffff;
   border-radius: 6px;
   padding: 8px 14px !important;
   text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 2px 2px 0px #000000, 0 0 6px rgba(255, 128, 223, 0.4);
   transition: all 0.15s ease-in-out;
   text-transform: uppercase;
   line-height: 1;
   outline: none;
   -webkit-appearance: none;
   appearance: none;
}

.nav-btn:hover {
   background: linear-gradient(180deg, #ffffff 0%, #ff66d9 100%);
   transform: translateY(-1px);
   box-shadow: 2px 2px 0px #000000, 0 0 10px rgba(255, 128, 223, 0.7);
   color: #000000 !important;
}

.nav-btn:active {
   transform: translateY(1px);
   box-shadow: 1px 1px 0px #000000;
}

/* WCAG 2.2 Compliant Keyboard Focus States */
a:focus-visible, button:focus-visible {
   outline: 3px solid #ff99e6;
   outline-offset: 4px;
}

/* FLIPBOOK CONTAINER & SCALING WRAPPER */
.flipbook-container {
   width: 100% !important;
   max-width: 600px;
   height: 775px;
   margin: 10px auto;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   overflow: hidden !important;
   position: relative;
}

/* Base #book dimensions */
#book {
   width: 600px !important;
   height: 775px !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   background-color: transparent !important;
   overflow: hidden !important;
   margin: 0 auto !important;
   transform-origin: top center !important;
}

#book * {
   max-width: 100%;
}

.page {
   width: 100% !important;
   height: 100% !important;
   background-color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
}

.page canvas {
   width: 100% !important;
   height: 100% !important;
   object-fit: contain !important;
   display: block;
   margin: 0 auto;
}

/* Centered Navigation Controls Bar */
.nav-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   margin: 15px auto 5px auto;
   width: 100%;
   text-align: center;
}

/* Mobile & Small Screen Layout Adjustments */
@media screen and (max-width: 650px) {
   .wrapper {
       width: 95%;
       padding-left: 10px;
       padding-right: 10px;
   }

   .profile-img {
       width: 110px;
       height: 110px;
       margin-bottom: 10px;
   }

   .pdf-button, 
   button.pdf-button, 
   a.pdf-button {
       font-size: 7pt !important;
       padding: 8px 10px !important;
       width: 100%;
       max-width: 280px;
       text-align: center;
   }

   .nav-btn {
       font-size: 6pt !important;
       padding: 5px 8px !important;
   }

   .nav-controls {
       gap: 8px;
       margin-top: 10px;
   }

   #page-info {
       font-size: 10px !important;
   }

   /* MOBILE-ONLY FLIPBOOK FIX: Force top alignment to reveal full page */
   .flipbook-container {
       align-items: flex-start !important;
       justify-content: center !important;
   }

   #book {
       transform-origin: top center !important;
       margin-top: 0 !important;
   }
}