/* Add styles here */

/* ===============================
   Resume Theme — Blue–Purple Tech
   Author: Fernando Rosales (with ChatGPT)
   =============================== */

   :root{
    --accent-1:#4F6DFF;
    --accent-2:#6B5BFF;
    --text:#222222;
    --muted:#888888;
    --bg:#FAFAFF;
    --line:#E0E0F0;
  }
  
  *{box-sizing:border-box;}
  
  html,body{
    margin:0;
    padding:0;
    color:var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size:11pt;
    line-height:1.45;
    background:#fff;
  }
  
  .page.container{
    display:flex;
    min-height:100vh;
  }
  
  /* Sidebar */
  .sidebar{
    width:35%;
    background: var(--bg);
    border-right:1px solid var(--line);
    padding:24px 20px;
  }
  
  .sidebar h2{
    font-size:0.95rem;
    margin:16px 0 8px;
    color:var(--accent-1);
    font-weight:700;
    letter-spacing:.4px;
    border-bottom:2px solid var(--line);
    padding-bottom:6px;
  }
  
  .sidebar .compact{
    margin:0;
    padding-left:18px;
  }
  
  .sidebar .compact li{
    margin:4px 0;
  }
  
  .sidebar p, .sidebar li{ color:var(--text); }
  .sidebar .note{ color:var(--muted); font-size:0.9em; }
  
  .brand{
    margin-bottom:10px;
    text-align:left;
  }
  .logo-circle{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff;
    background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
    margin-bottom:10px;
    overflow:hidden;
  }
  .logo-circle img{height:56px; width:56px; object-fit:contain;}
  .name{ font-size:1.25rem; margin:0 0 4px 0; }
  .role{ margin:0; color:var(--muted); font-size:.95rem; }
  
  /* Content */
  .content{
    width:68%;
    padding:28px 28px 40px;
  }
  
  .header-block h1{
    font-size:1.2rem;
    margin:0 0 12px 0;
    color:var(--accent-2);
    border-bottom:3px solid var(--line);
    padding-bottom:8px;
  }
  
  .job{ margin-bottom:18px; }
  .job-head{
    display:flex; flex-direction:column; gap:4px;
  }
  .job-head h2{
    font-size:1.05rem; margin:0;
  }
  .job-head .meta{
    color:var(--muted); font-size:.95rem;
  }
  
  .job p{ margin:.25rem 0 .5rem 0; }
  .job ul{ margin:.25rem 0 .5rem 1rem; }
  .job ul.no-top{ margin-top:0; }
  .skills{ color:#333; }
  
  /* Links */
  a{ color:var(--accent-1); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  
  /* Print */
  @media print{
    html, body{ background:#fff; }
    .page.container{ min-height:auto; }
    .sidebar{ page-break-inside:avoid; }
  }
  
  .about .tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-1);
    margin: 10px 0 10px 0;
    letter-spacing: 0.2px;
  }
  
  .transition {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    margin: 12px 0 20px 0;
    border-left: 3px solid var(--accent-1);
    padding-left: 10px;
  }
  
  .about h1{
    color: var(--accent-2);
    margin: 0 0 8px 0;
    border-bottom: 2px solid var(--line);
    padding-bottom: 6px;
  }
  .about p{
    margin: .25rem 0 0 0;
  }
  
  .closure {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 2px solid var(--line);
  }
  .closure h2 {
    font-size: 1.05rem;
    color: var(--accent-2);
    margin-bottom: 6px;
  }
  .closure p {
    margin: .35rem 0;
    font-style: italic;
    color: var(--text);
  }
  
  /* QR container (hidden on web, shown in print/PDF) */
  .print-only {
    display: none;
  }
  
  :root{
    --qr-card-w: 220px;     /* overall card width */
    --qr-img: 50px;         /* QR square size */
    --qr-gap: 5px;         /* space between text and QR */
    --qr-pad: 0px;          /* inner padding */
    --qr-top: -5px;         /* vertical offset; <0 to straddle header line */
    --qr-right: 0px;        /* right offset from edge */
    --qr-bg: transparent;   /* use 'transparent' or '#fff' if you want a mask */
  }
  
  @media print {

    .page-break + .job {
      margin-top: 40px;
    }
  
    .about { position: relative; }
  
    .about .qr-wrapper.print-only {
      display: block;
      position: absolute;
      top: var(--qr-top);
      right: var(--qr-right);
      z-index: 2;
    }
  
    /* Horizontal layout: text LEFT | QR RIGHT */
    .about .qr-box {
      display: flex;
      align-items: center;            /* vertical centering */
      justify-content: space-between; /* pushes QR to the right */
      gap: var(--qr-gap);
      width: var(--qr-card-w);
      padding: var(--qr-pad);
      background: var(--qr-bg);       /* stays borderless; set to #fff if you want to mask the header rule */
      border: none;                   /* you removed border */
      box-shadow: none;               /* you removed shadow */
      text-align: left;               /* text block aligns naturally */
    }
  
    .about .qr-text p {
      margin: 0;
      line-height: 1.2;
      font-size: 0.8rem;
      text-align: right;
    }
  
    .about .qr-text a {
      color: #000;
      text-decoration: underline;
      font-weight: 600;
      word-break: break-all;
    }
  
    .about .qr-image {
      width: var(--qr-img);
      height: var(--qr-img);
      object-fit: contain;
      filter: grayscale(100%) contrast(120%);
      flex: 0 0 var(--qr-img);
    }

    .page-break {
      page-break-before: always; /* or 'after' */
      break-before: always;      /* modern syntax */
    }
  }