/* content/extra/custom.css */

:root {
    /*site's main colors*/
    --accent-color: #2596be ; /* Main color for links and buttons */
    --accent-color-secondary: rgb(9, 96, 155) ; /* Main color for links and buttons */
    --text-on-accent: #FFFFFF; /* Text color for buttons */

    /* Set system's accent color */
    accent-color: var(--accent-color);
}

/* Links */
a {
    color: var(--accent-color);
}

/* Links, hovered */
main a:hover,
article a:hover,
.content a:hover{
    color: var(--accent-color-secondary) !important;
    text-decoration: underline !important;
}

/* Ensure navigation links stay consistent */
#main-nav a,
.main-nav a,
.header nav a {
    color: var(--accent-color) !important;
}

#main-nav a:visited,
.main-nav a:visited,
.header nav a:visited {
    color: var(--accent-color) !important;
}

#main-nav a:hover,
.main-nav a:hover,
.header nav a:hover {
    color: var(--accent-color-secondary) !important;
}

/* Tag cloud links (buttons) */
.tag-cloud a {
    background-color: var(--accent-color);
    color: var(--text-on-accent);
}

/* Tag cloud links, hovered */
.tag-cloud a:hover {
    background-color: var(--accent-color-secondary);
}

/* Buttons */
a.btn,
section#isso-thread section.auth-section p.post-action input {
    background-color: var(--accent-color);
    color: var(--text-on-accent);
}

/* Buttons, hovered */
a.btn:hover {
    background-color: var(--accent-color-secondary);
}


/* --- REMOVE TOP NAVIGATION BAR --- */
main nav {
    display: none !important;
}

/* Add padding at the top of the content */
main,
.main-content,
article {
    padding-top: 20px !important;
}

body {
    padding-top: 0 !important;
}

/* Main page background color */
body {
    background-color: #ffffff;
}


/* Navigation sidebar background color */
aside,hr {
    background-color: #393939;
}

aside,
.sidebar {
    padding-top: 20px !important;
}

aside img,
.sidebar img,
img[src*="profile"],
#sidebar img {
    width: 200px !important;
    height: 200px !important;
    max-width: none !important;
    border-radius: 50% !important;
    /*border: 5px solid #9bb4f5 !important;*/
    border: 5px solid #5c5c5c !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important;
    object-fit: cover !important;
    display: block !important;
    margin:0 auto !important;
}

/* Show and style the site name/author name below profile image */
aside h1,
aside .site-name,
.sidebar h1,
.sidebar .site-name,
aside h1 a,
.sidebar h1 a {
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
    font-size: 1.7em !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Remove underline from name link on hover */
aside h1 a:hover,
.sidebar h1 a:hover,
aside .site-name a:hover,
.sidebar .site-name a:hover {
    text-decoration: none !important;
    color: #ffffff !important;
}

/* --- SIDEBAR NAVIGATION STYLES --- */

/* Prevent text transformation to lowercase in sidebar */
aside a,
aside nav a,
.sidebar a,
.sidebar nav a,
aside li a,
nav li a {
    text-transform: none !important;
}

/* Add underline on hover for sidebar links */
aside a:hover,
aside nav a:hover,
.sidebar a:hover,
.sidebar nav a:hover,
aside li a:hover,
nav li a:hover {
    text-decoration: underline !important;
}

/* Target social icons specifically */
aside .social a,
.sidebar .social a {
    text-transform: none !important;
}

aside .social a:hover,
.sidebar .social a:hover {
    text-decoration: underline !important;
}

/* --- HIDE FOOTER TEXT --- */
footer p,
footer .copyright,
.footer-text {
    display: none !important;
}

/* ----------------------------------------------------------- */
/* ----------------- ART GALLERY GRID STYLES ----------------- */
/* ----------------------------------------------------------- */

/* Make the main content area wider */
main,
.main-content,
article,
.page {
    max-width: 1000px !important;
    width: 1000px !important;
}   

/* Gallery container */
#my-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    padding: 20px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Individual gallery items - WHITE BORDER */
#my-gallery a {
    display: block !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-decoration: none !important;
    background: #ffffff !important;
}

/* Hover effect */
#my-gallery a:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
}

/* Images in the gallery*/
#my-gallery img {
    width: 100% !important;
    height: 260px !important;
    object-fit: contain !important;
    display: block !important;
    background: #f8f8f8 !important;
    
    /* Pixel-perfect rendering */
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* Pixel art in lightbox - crisp rendering */
.pswp img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* Responsive: 2 columns on tablets */
@media (max-width: 768px) {
    #my-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 480px) {
    #my-gallery {
        grid-template-columns: 1fr !important;
    }
    
    #my-gallery img {
        height: 220px !important;
    }
}


/* ========================================= */
/* MOBILE & TABLET RESPONSIVE FIXES */
/* ========================================= */

/* Fix body and html to allow full width */
@media (max-width: 1024px) {
  
  /* Prevent any horizontal overflow */
  html {
    overflow-x: hidden !important;
  }
  
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Fix all elements to use border-box */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
  
  /* Force sidebar to full width */
  aside {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 20px 5% 30px 5% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    float: none !important;
    display: block !important;
  }
  
  /* Fix potential flex container issues */
  body > div,
  body > .container,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Center profile image with less spacing */
  aside img,
  .sidebar img {
    margin: 0 auto 10px auto !important;
  }
  
  /* Center name/title with less spacing */
  aside h1,
  aside h1 a {
    text-align: center !important;
    margin: 8px auto 15px auto !important;
    word-wrap: break-word !important;
  }
  
  /* Center navigation links with less spacing */
  aside nav,
  aside nav ul {
    text-align: center !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }
  
  aside nav ul li {
    display: inline-block !important;
    margin: 0 10px 5px 10px !important;
  }
  
  /* Center social icons with less spacing */
  aside .social,
  aside ul.social {
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
  }
  
  aside .social li {
    display: inline-block !important;
    margin: 0 8px !important;
  }
  
  /* Main content */
  main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 6% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Articles with better text margins */
  article,
  .page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* Text content with proper spacing */
  article p,
  article div,
  article h1,
  article h2,
  article h3,
  .page p,
  .page div,
  .page h1,
  .page h2,
  .page h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  /* Adjust gallery for tablets */
  #my-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  
  #my-gallery img {
    height: 240px !important;
  }
}

/* Mobile phones (portrait) */
@media (max-width: 768px) {
  
  /* More compact sidebar with responsive padding */
  aside {
    padding: 10px 4% 15px 4% !important;
  }
  
  /* Smaller profile image on mobile */
  aside img,
  .sidebar img {
    width: 50px !important;
    height: 50px !important;
    border-width: 2px !important;
    margin-bottom: 5px !important;
  }
  
  /* Smaller title text */
  aside h1,
  aside h1 a {
    font-size: 1.2em !important;
    margin: 3px auto 8px auto !important;
  }
  
  /* Compact navigation container - centered */
  aside nav {
    margin: 8px auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 200px !important; /* Constrain width */
    text-align: center !important;
  }
  
  /* Navigation list - 2 COLUMN GRID */
  aside nav ul {
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
  }
  
  /* Navigation links as grid items */
  aside nav ul li {
    display: block !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    text-align: center !important;
    font-size: 0.95em !important;
  }
  
  aside nav ul li a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
  }
  
  /* MORE SPACE between navigation grid and social icons */
  aside .social,
  aside ul.social {
    margin: 15px 0 0 0 !important;
  }
  
  aside .social li {
    margin: 0 5px !important;
  }

  /* Gallery to two columns on mobile */
  #my-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  
  #my-gallery img {
    height: 180px !important;
    object-fit: cover !important;
  }

}

/* ========================================= */
/* PHOTOSWIPE CONFIGURATION VARIABLES */
/* ========================================= */

:root {
  --caption-height-desktop: 35%;
  --caption-height-mobile-landscape: 35%;
  --caption-height-mobile-portrait: 40%;
}

/* Caption container */
.pswp__custom-caption {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 20px 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  max-height: var(--caption-height-desktop);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .pswp__custom-caption {
    padding: 15px 20px;
    font-size: 0.9em;
    max-height: var(--caption-height-mobile-portrait);
  }
  
  .pswp__custom-caption .caption-title {
    font-size: 1.2em !important;
    margin-bottom: 8px !important;
  }
  
  .pswp__custom-caption .caption-desc {
    font-size: 0.95em !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .pswp__custom-caption {
    max-height: var(--caption-height-mobile-landscape);
  }
}

.pswp__custom-caption::-webkit-scrollbar {
  width: 8px;
}

.pswp__custom-caption::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.pswp__custom-caption::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.pswp__custom-caption::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7);
}

.pswp__custom-caption .caption-title {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 10px;
}

.pswp__custom-caption .caption-desc {
  font-size: 1em;
  line-height: 1.5;
}

/* ========================================= */
/* PHOTOSWIPE: BASIC SETUP */
/* ========================================= */

/* Pixel art rendering */
.pswp img {
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
}


/* ========================================= */
/* PROJECT PAGE STYLES */
/* ========================================= */

.project-entry {
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 20px;
}

.project-image-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-content {
  flex: 1;
}

/* Hide mobile continue button on desktop */
.mobile-continue-btn {
  display: none;
  margin-top: 15px;
}

/* Mobile: Hide images and adjust layout */
@media (max-width: 768px) {
  
  /* Hide the image container completely on mobile */
  .project-image-container {
    display: none !important;
  }
  
  /* Make content full width */
  .project-entry {
    display: block !important;
  }
  
  /* Show the mobile continue button */
  .mobile-continue-btn {
    display: block;
  }
}