/*
Theme Name: Taves
Theme URI: https://example.com/taves
Author: Your Name
Description: A custom Bootstrap-based portfolio theme with a muted black-and-white design. Shows Projects in a responsive grid with modals and a retractable sidebar.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taves
Tags: portfolio, bootstrap, responsive, black-and-white, two-columns, modal
*/

/* Basic Colors and Typography */
body {
    background: #ffffff;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin-bottom: 0.5em;
  }
  p {
    margin-bottom: 1em;
  }
  a {
    color: #000000;
    text-decoration: none;
    /* border-bottom: 1px dotted #000; */
  }
  a:hover, a:focus {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #000;
  }
  
  /* Header and Navigation */
  .site-header {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #ffffff;
  }

  .site-branding a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    text-decoration: none;
  }

.site-branding-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

  .offcanvas {
    background: #ffffff; /* Sidebar background */
  }
  .offcanvas .offcanvas-title {
    font-size: 1.25rem;
    font-family: Georgia, serif;
  }
  .offcanvas-body .nav a {
    color: #000;
    padding: 0.25rem 0;
  }
  .offcanvas-body .nav a:hover, .offcanvas-body .nav a:focus {
    text-decoration: underline;
  }
  
  /* Project Grid and Tiles */
  .project-tile {
    position: relative;
    background: #f8f9fa; /* light gray background for tiles (visible if no thumbnail) */
  }
  .project-tile img {
    width: 100%;
    height: auto;
    display: block;
  }
  .project-tile .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .project-tile .overlay h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #ffffff;
  }
  .project-tile:hover .overlay,
  .project-tile:focus-within .overlay {
    opacity: 1;
  }
  
  /* Modal Content */
  .modal-body {
    /* ensure modal text uses default body styles */
    color: #333;
  }
  .modal-body img {
    max-width: 100%;
    height: auto;
  }
  /* Centered modal title text (inherits font from heading styles) */
  .modal-title {
    font-family: Georgia, serif;
  }
  
  /* Footer */
  .site-footer {
    background: #f8f9fa;
    color: #555555;
  }
  .site-footer p {
    margin: 0;
  }
  .site-avatar {
  width: 40px;          /* adjust size to taste */
  height: 40px;
  object-fit: cover;    /* preserve aspect ratio */
  border-radius: 50%;   /* force perfect circle */
}

figure a {
    text-decoration: none !important;  
    border-bottom: none !important; 
}

/* ────────────────────────────────────────────────
   Off-canvas sidebar polish (mobile hamburger menu)
   ──────────────────────────────────────────────── */

/* 1. Panel chrome */
.offcanvas-start {
  background:#fafafa;           /* subtle warm grey instead of pure white */
  border-right:1px solid #eee;  /* faint separator from main canvas */
}

/* 2. UL reset (remove bullets & padding) */
.offcanvas-body .nav {
  list-style:none;
  margin:0;
  padding:0;
}

/* 3. Link baseline */
.offcanvas-body .nav a {
  display:block;                /* full-width tap target */
  padding:.6rem 0;
  font-size:1.05rem;
  text-decoration:none;         /* kill underline */
  border-bottom:none;           /* kill second underline */
  color:#000;
  transition:background .15s ease, text-decoration-color .15s ease;
}

/* 4. Hover / focus state — single underline + subtle bg */
.offcanvas-body .nav a:hover,
.offcanvas-body .nav a:focus {
  background:rgba(0,0,0,.05);   /* 5 % grey highlight */
  text-decoration:underline;    /* single underline only */
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

/* 5. Make current page visually distinct */
.offcanvas-body .nav .current-menu-item > a {
  font-weight:600;              /* bold current link */
  text-decoration:underline;
  text-decoration-thickness:2px;
}

/* 6. Optional: add breathing-room top/bottom */
.offcanvas-body {
  padding-top:2rem;
  padding-bottom:2rem;
}