/*
 * Global styling for the cybersecurity portfolio.
 * A dark theme with neon accents invokes a hacker‑like aesthetic.
 */

/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Fira Code', monospace;
  /* Prevent horizontal scrollbars on the root document. Animations that
   * translate sections horizontally could otherwise cause the page to
   * overflow.
   */
  overflow-x: hidden;
}

/* Layout containing left and right panes */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Left pane displays the currently active section */
.left-pane {
  flex: 1;
  padding: 40px;
  /* Use the generated image as a subtle background texture */
  background-image: url('../assets/bg.png');
  background-size: cover;
  background-position: center;
  /*
   * Hide horizontal overflow to prevent scrollbars when sections slide
   * horizontally. Vertical overflow is disabled here because each
   * .content-section handles its own scrolling. The left pane is
   * positioned relative so absolutely positioned sections align to
   * its bounds.
   */
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Right pane houses the vertical navigation */
/*
 * Right pane styling
 *
 * The navigation sidebar uses a column flex layout so that items are
 * stacked vertically. Items are aligned to the center horizontally
 * but start near the top rather than being centered vertically. A top
 * padding gives breathing room above the first navigation entry.
 */
.right-pane {
  width: 30%;
  min-width: 220px;
  background-color: #111;
  border-left: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation styling */
/*
 * Navigation list styling
 *
 * The unordered list for the navigation is converted to a flex column
 * so that items are centered horizontally. A top margin pushes the
 * navigation down from the very top of the sidebar. Adjust the margin
 * value to tune how far down the first item appears.
 */
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.navigation li {
  padding: 15px 20px;
  cursor: pointer;
  font-size: 1.1em;
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.navigation li:hover,
.navigation li.active {
  background-color: #222;
  border-left-color: #00ffbb;
}

/*
 * Highlight bar for navigation items
 *
 * A pseudo-element is used to create a consistent-height vertical bar
 * on the left side of each item. It changes colour when the item is
 * hovered or active. Without this pseudo-element, using a border on
 * the li itself caused inconsistent heights between items.
 */
.navigation li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background-color 0.2s ease;
}

.navigation li:hover::before,
.navigation li.active::before {
  background: #00ffbb;
}

/* Section visibility control */
/*
 * Position each content section absolutely within the left pane so that
 * they stack on top of one another. Animations will slide sections in
 * and out horizontally. By default sections are hidden (display: none)
 * and invisible (opacity: 0). The "active" class reveals a section and
 * enables pointer events so that content can be scrolled. Additional
 * animation classes (slide‑in and slide‑out) apply keyframe animations.
 */
.content-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  display: none;
}

/* Active section is visible and interactive */
.content-section.active {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Slide animation classes added/removed via JavaScript */
.content-section.slide-in-right {
  animation: slideInRight 0.5s forwards;
  display: block;
}

.content-section.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Headings and lists */
h1 {
  margin-top: 0;
  font-size: 2em;
  color: #00ffbb;
}

h2 {
  color: #00bfa0;
  margin-bottom: 5px;
}

.projects-list,
.skills-list {
  list-style: none;
  padding-left: 0;
}

.projects-list li,
.skills-list li {
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Custom bullets for skills */
.skills-list li::before {
  content: '▸';
  margin-right: 8px;
  color: #00ffbb;
}

/* Hover area for contact button */
/* Contact trigger areas on the edges */
.contact-hover-area {
  position: fixed;
  z-index: 1000;
  overflow: visible;
}

/* Specific positions for each edge */
.right-edge {
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
}

.left-edge {
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
}

.bottom-edge {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}

/* Base styling for contact buttons */
.contact-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ffbb;
  color: #0a0a0a;
  border: none;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  padding: 12px 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

/* Right edge button positioning */
.right-edge .contact-button {
  top: 50%;
  right: -180px;
  transform: translateY(-50%);
  border-radius: 4px 0 0 4px;
}
/*
 * Hover interactions for the contact buttons are now handled in
 * JavaScript based on cursor proximity to the edges. The CSS
 * hover rules have been removed to prevent conflict with the
 * scripted behavior.
 */

/* Left edge button positioning */
.left-edge .contact-button {
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
}
/* Left edge hover rules removed; logic handled via JS */

/* Bottom edge button positioning */
.bottom-edge .contact-button {
  left: 50%;
  bottom: -70px;
  transform: translateX(-50%);
  border-radius: 4px 4px 0 0;
}
/* Bottom edge hover rules removed; logic handled via JS */

/* Label and chevron inside contact buttons */
.contact-button .contact-label {
  margin: 0 8px;
}

.contact-button .chevron {
  position: absolute;
  font-size: 1.2em;
  pointer-events: none;
  transition: top 0.1s ease, left 0.1s ease;
}

/* Default chevron positions */
.right-edge .contact-button .chevron {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.left-edge .contact-button .chevron {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.bottom-edge .contact-button .chevron {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
}

/* Remove outline on focus */
.contact-button:focus {
  outline: none;
}

/*
 * Generic wrapper for each section's content
 *
 * Constrain the width of long lines and center content horizontally. The
 * bottom padding ensures that long sections do not overlap with the
 * anchored footer.
 */
.section-inner {
  max-width: 800px;
  margin: 0 auto;
  /* Provide top spacing so the content isn't stuck to the top edge. The
   * bottom padding ensures content doesn't overlap the footer. */
  padding-bottom: 80px;
  padding-top: 80px;
}

/*
 * Styling for collapsible experience items
 *
 * Each experience entry consists of a clickable title and a hidden
 * details container. When the title is clicked, JavaScript toggles
 * the visibility of the details. Additional spacing is added between
 * successive entries.
 */
.experience-item + .experience-item {
  margin-top: 20px;
}

.experience-title {
  cursor: pointer;
  margin: 20px 0 5px;
  font-size: 1.2em;
  color: #00ffbb;
}

.experience-details {
  display: none;
  margin-left: 0;
  margin-bottom: 10px;
}

/*
 * Global footer styling
 *
 * The footer is anchored to the bottom of the left pane. By setting an
 * absolute position and specifying a bottom offset, it remains fixed
 * regardless of the content height. The width is set to 100% so that
 * the text is centered across the available space.
 */
.footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 0.8em;
  color: #666;
  text-align: center;
}

/* Contact page styles */
.contact-page {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-image: url('../assets/bg.png');
  background-size: cover;
  background-position: center;
  color: #e0e0e0;
  padding: 40px;
  font-family: 'Fira Code', monospace;
}

/* ------------------------------------------------------------------ */
/* Custom overrides for the updated portfolio layout                  */
/*                                                                   */
/* Navigation layout tweaks: center the list vertically with margin  */
/* and draw a uniform bar on the left via a pseudo-element instead   */
/* of using border-left.                                             */
/* ------------------------------------------------------------------ */

/* Override the navigation list layout */
.navigation ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}

/* Override navigation list items */
.navigation li {
  position: relative;
  padding: 12px 20px;
  margin: 6px 0;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left: none;
}

/* Pseudo-element to create the coloured bar at the left */
.navigation li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

/* Background highlight for hovered and active nav items */
.navigation li:hover,
.navigation li.active {
  background-color: #222;
}

/* Colour the left bar on hover and active state */
.navigation li:hover::before,
.navigation li.active::before {
  background-color: #00ffbb;
}

/* Section inner container: center content and add breathing room */
.section-inner {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  /* Add generous top padding to visually center the content within the left pane. 10vh scales with the viewport height */
  padding-top: clamp(40px, 10vh, 120px);
  /* Ensure sufficient space above the footer */
  padding-bottom: 100px;
}

/* Footer anchored to the bottom of the left pane */
.left-pane .footer {
  position: absolute;
  bottom: 20px;
  left: 40px;
  right: 40px;
  text-align: center;
  font-size: 0.9em;
  color: #888;
}

/* Experience accordion styles */
.experience-item {
  margin-bottom: 20px;
}

.experience-title {
  cursor: pointer;
  color: #00bfa0;
  margin-bottom: 5px;
}

.experience-details {
  margin-left: 15px;
  margin-bottom: 10px;
  line-height: 1.5;
  display: none;
}

.experience-item.open .experience-details {
  /* When an experience item is open the details expand fully and fade in. */
  max-height: 500px;
  opacity: 1;
}

/*
 * ------------------------------------------------------------------
 * Final overrides to adjust the appearance and behavior of navigation
 * and content layout. These rules appear near the end of the file so
 * they take precedence over any earlier declarations with the same
 * specificity.
 *
 * Navigation highlight: revert to using a simple left border for the
 * active/hover state. The pseudo-element defined earlier is hidden
 * and the border-left property is reintroduced. This restores the
 * original aesthetic where the highlight bar is integrated into the
 * list item rather than a floating bar.
 */
.navigation li {
  /* Reintroduce the left border so it can be coloured on hover/active */
  border-left: 4px solid transparent;
  /* Override transition to include border-left-color */
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.navigation li:hover,
.navigation li.active {
  /* Colour the left border when the item is hovered or selected */
  border-left-color: #00ffbb;
}

/* Hide the pseudo-element used earlier for the highlight bar */
.navigation li::before {
  display: none;
}

/*
 * Section padding override: increase the top padding to better center
 * the content vertically within the left pane. The clamp() function
 * specifies a minimum of 60px, a preferred value based on 12% of the
 * viewport height and a maximum of 160px. The bottom padding is
 * slightly increased to maintain separation from the footer.
 */
.section-inner {
  padding-top: clamp(60px, 12vh, 160px);
  padding-bottom: 120px;
}

/*
 * Accordion animation for experience sections
 *
 * The experience details start collapsed (max-height: 0) and transparent (opacity: 0).
 * When the parent .experience-item has the .open class, the max-height expands and
 * the opacity transitions to 1. Setting display: block here overrides earlier
 * declarations that hide the element and enables smooth transitions without
 * relying on inline styles in JavaScript.
 */
.experience-details {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.experience-item.open .experience-details {
  max-height: 500px;
  opacity: 1;
}

/*
 * Floating contact button
 *
 * Positions the contact button at the bottom right corner of the viewport.
 * The z-index ensures it stays above other content. Adjust the bottom and
 * right offsets to change its position. The .contact-button styling is
 * reused for consistency across interactive buttons.
 */
/*
 * Adjust floating contact button
 *
 * This places the contact call‑to‑action just off the right edge of the
 * viewport so that it appears to float. The slight negative right offset
 * pulls the button outwards without hiding its label. The button inherits
 * the base .contact-button styling for colour and typography. A higher
 * z-index keeps it above other content.
 */
/*
 * Floating contact button
 *
 * Slightly offset from the right edge so it's visible but appears to hang
 * off the page. The bottom offset keeps it aligned near the bottom of
 * the viewport. Increase the negative right offset if you want more of
 * the button offscreen; reduce it to show more.
 */
/*
 * Floating contact button
 *
 * Anchored to the bottom right of the viewport and offset slightly so
 * it appears to float off the edge. Adjust the right value to tune
 * how far offscreen the button sits. Setting it to zero keeps it
 * flush with the edge.
 */
.floating-contact {
  position: fixed;
  /* Position the contact button just off the right edge so it appears to hang
   * slightly outside the viewport. A tiny negative offset ensures the border
   * radius on the left edge remains visible while the right edge hugs the
   * screen. */
  right: -1px;
  bottom: 20px;
  z-index: 1000;
}

/*
 * Center navigation vertically in the sidebar
 *
 * The <nav> element becomes a flex container spanning the full height of the
 * right pane. Its list of links is centred along the vertical axis.
 */
.right-pane nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Remove any manual top margin on the navigation list so it centres properly */
.navigation ul {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Fade‑out animation class
 *
 * When applied to the <body>, this animation smoothly transitions the
 * entire page to transparent over half a second. Used when navigating
 * away from a page to another (for example, to dnd.html).
 */
.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Ensure the floating contact button lays out its contents horizontally */
.floating-contact .contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px 0 0 4px;
  padding: 12px 24px;
  width: auto;
}

/* Space between label and chevron in floating contact button */
.floating-contact .contact-button .chevron {
  margin-left: 8px;
}

/* =====================================================================
   New floating contact button

   Position a clear, wide call‑to‑action at the bottom right of the page.
   The .contact-floating wrapper anchors the button and the button itself
   inherits the neon palette of the portfolio. These styles are defined
   near the end of the stylesheet to ensure they override any legacy
   contact button styles defined above.                                     
   ===================================================================== */
.contact-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.contact-floating-button {
  display: inline-block;
  background-color: #00ffbb;
  color: #0a0a0a;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s ease;
}

.contact-floating-button:hover {
  background-color: #00d699;
}

.contact-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 30px;
  border-radius: 8px;
}

.contact-container h1 {
  color: #00ffbb;
  margin-top: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-top: 15px;
}

.contact-form input,
.contact-form textarea {
  margin-top: 5px;
  padding: 10px;
  background-color: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #00ffbb;
}

.contact-form button {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #00ffbb;
  color: #0a0a0a;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #00d699;
}

.back-link {
  margin-top: 20px;
}

.back-link a {
  color: #00ffbb;
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

/* Contact details on the contact page */
.contact-details p {
  margin: 5px 0;
}

.contact-details a {
  color: #00ffbb;
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

/* Footer in the left pane */
.footer {
  margin-top: 40px;
  font-size: 0.8em;
  color: #666;
  text-align: center;
}

/*
 * Constrain the content within each section to a reasonable width and
 * center it horizontally. Without this rule, absolutely positioned
 * sections would span the full width of the left pane. Using a
 * wrapper allows the page to feel balanced and improves readability.
 */
.section-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* =========================================================
   Unified Sidebar Overrides — 2025-08-09
   Scope: Left-hand navigation only (.right-pane + .navigation)
   Intent: Single highlight strategy (border-left), consistent hitboxes,
           no vertical margins, top-anchored sidebar. Neutralize legacy
           pseudo-element bars and flex-centering.
   ========================================================= */

 /* Anchor the sidebar from the top-left and add breathing room */
.right-pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0px;
}

/* Navigation wrapper */
.navigation { width: 100%; }

/* List: remove centering & offsets; stack items naturally */
.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block; /* undo any flex-centering from earlier rules */
}

/* Items: single source of truth for spacing + highlight */
.navigation li {
  position: relative;
  margin: 0;                /* no vertical gaps so highlight spans full height */
  padding: 15px 20px;       /* consistent, comfortable hitbox */
  font-size: 1.1em;
  cursor: pointer;
  border-left: 4px solid transparent; /* highlight lives here */
  transition: background-color 0.2s ease, border-left-color 0.2s ease, color 0.2s ease;
  border-radius: 0 10px 10px 0;        /* soften right edge on hover */
}

/* Make whole row clickable if anchors/buttons are used inside li */
.navigation a,
.navigation button {
  display: block;
  width: 100%;
  padding: 15px 20px;
  color: inherit;
  text-decoration: none;
  font: inherit;
  text-align: left;
}

/* Hover/active states */
.navigation li:hover,
.navigation li.active {
  background-color: #222;
  border-left-color: #00ffbb;
}

/* Neutralize any pseudo-element highlight strategies from earlier CSS */
.navigation li::before,
.navigation li::after {
  content: none !important;
  display: none !important;
}

/* Guard rails: prevent stray borders/shadows from older rules */
.navigation li {
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .navigation li { transition: none; }
}