/* .css for https://www.cbeaume.com */
/* To be imported by cbeaume2026.css */
/* Author: Cédric Beaume */
/* Date: 2026 */


/* ==== Mobile Website ==== */

@media (max-width: 850px) { /* mobile layout for screens narrower than 850px */

  /* Website Initialization */
  body {
    padding: var(--space-1); /* smaller padding */
  }
  
  /* Headings, Paragraph, Hyperlinks and Images */
  h2 {
    margin-bottom: var(--space-2); /* smaller margin */
  }
    
  h3 {
    margin-top: var(--space-3); /* smaller margin */
    padding-left: var(--space-1); /* smaller padding */
  }

  /* Header */
  #top {
    height: 120px; /* smaller header */
  }
    
  /* Layout */
  #layout {
    display: block; /* single-column layout */
  }

  /* Sidebar */
  #sidebar {
    width: 100%;
    padding: 0;
    background: none;
  }
  
  #sidebar nav {
    display: none;
    padding: var(--space-2) var(--space-3);
    margin: var(--space-4) 0 0 0;
    background: var(--secondary-background);
    border-top: 1px solid var(--mobile-sidebar-border);
    border-bottom: 1px solid var(--mobile-sidebar-border);
  }

  #menu-toggle:checked ~ #layout #sidebar nav { /* if menu checked... */
    display: block; /* ... reveals sidebar */
  }
  
  .portrait {
    max-width: 200px; /* smaller portrait */
    margin: 0 auto;
  }
  
  .portrait-image {
    transform: translateY(var(--portrait-overlap-mobile));
    margin-bottom: var(--portrait-overlap-mobile);
  }

  /* Content */
  #content {
    padding: var(--space-3); /* smaller padding */
  }
  
  /* Hamburger System */
  #hamburger {
    display: flex;
    align-items: center; /* vertical alignment */
    gap: var(--space-1);
    position: absolute;
    top: calc(100% + var(--space-0)); /* just below header */
    left: 0;
    background: none;
    padding: var(--space-1) var(--space-3);
    font-weight: bold;
    font-size: var(--font-size-hamburger);
    color: var(--nav-link-color);
    cursor: pointer;
    z-index: 15;
    transition: opacity 0.2s ease;
  }

  #hamburger:hover {
    opacity: 0.75;
  }
  
  .cv-row {
    grid-template-columns: 1fr;
    gap: var(--space-0);
  }

  .cv-row,
  .cv-communication .cv-row,
  .cv-teaching .cv-row {
    grid-template-columns: 1fr;
  }

  .cv-label {
    text-align: left;
  }
  
  .circuits-grid { grid-template-columns: 1fr; }
  
  .research-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; 
  }
  
  .figure-right {
    float: none;
    width: 100%;
    margin: 1.5rem auto;
  }
  
}