/* styles.css — Patrick Heese- Resume */
:root{
  --max: 8.8in;
  --fg: #111;
  --muted:#666;
  --rule:#000;
  --pad: 1.0rem;
  --hang: .30in;
  --righthang: .33in;
  --when-right: 1.10in;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: Calibri, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color:var(--fg);
  background:#fff;
}

header, main, footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad);
}

/* Header underline */
header{
  padding-top: 1.0rem;
  padding-bottom: .14rem;
  position: relative;
}
header::after{
  content: "";
  position: absolute;
  left: calc(var(--pad) - .10rem);
  right: var(--when-right);
  bottom: 0;
  height: 1px;
  background: var(--rule);
}

/* Headings */
h1{ font-size: 18pt; margin: 0 0 .25rem; text-decoration: none; }
h2{
  font-size: 12pt;
  letter-spacing:.02em;
  text-transform: uppercase;
  margin: 0 0 .28rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
}
h3{ font-size: 11pt; margin: .05rem 0 .05rem; text-decoration: none; font-weight: 400; }
.school{ font-weight: 700; }

/* Contact row */
.contact{
  margin: 0; padding: 0; list-style: none;
  display:flex; flex-wrap:wrap; gap:.3rem 0;
  color:var(--muted);
  font-size: 10pt;
}
.contact li{ list-style:none; }
.contact li + li::before{ content: "\00a0|\00a0"; color: #111; opacity: .9; margin: 0; }
.contact a { color:#111; text-decoration: none; }

/* Sections */
.section{ margin-top: .56rem; }
.section:first-of-type{ margin-top: .20rem; }
p{ margin:.08rem 0 .30rem; }

/* Lists */
main ul{ margin: .08rem 0 .30rem 0; padding-left: var(--hang); list-style: disc outside; }
main li{ margin: 0 0 .12rem; }

/* Roles + dates */
.role{ margin:.30rem 0; }
.role h3{ position: relative; padding-right: 2.2in; }
.role .when{ position: absolute; top: 0; right: var(--when-right); color:#111; font-size:10.5pt; font-weight:400; white-space: nowrap; }

.role .where{ font-weight: 400; }
.title-job{ font-weight: 700; }
.title-company{ font-style: italic; }
.title-location{ font-weight: 400; }
.sep{ font-weight: 400; }

/* Two-column blocks */
.twocol{ display:grid; grid-template-columns: 3.7in 3.7in; column-gap: .1in; align-items:start; }
.twocol > ul:first-child{ padding-left: var(--hang); }
.twocol > ul:last-child { padding-left: var(--righthang); }
.twocol li{ break-inside: avoid; }
.force-break{ display: inline; }

/* Certifications */
.certs .twocol{ padding-left: 0; }
.certs ul{ list-style: disc outside; }
.certs ul:first-child{ padding-left: var(--hang); }
.certs ul:last-child{ padding-left: var(--righthang); }
.certs li{ margin-bottom:.10rem; }

/* Footer */
footer{
  margin-top: .36rem;
  padding-top: .50rem;
  color:var(--muted);
  font-size:10.5pt;
  display:flex; justify-content:space-between; align-items:center; gap: .75rem;
  flex-wrap: wrap;
  position: relative;
  border-top: none;
  padding-right: var(--when-right);
}
footer::before{
  content: "";
  position: absolute;
  left: calc(var(--pad) - .10rem);
  right: var(--when-right);
  top: 0;
  height: 1px;
  background: var(--rule);
}
button{padding:.35rem .6rem; border:1px solid #ccc; border-radius:.4rem; background:#fafafa; cursor:pointer;}

/* Responsive fallback */
@media (max-width: 8.1in){
  .twocol{ grid-template-columns: 1fr; column-gap: 0; }
  .twocol > ul:last-child{ padding-left: var(--hang); }
}

/* Mobile (phones & small tablets) */
@media screen and (max-width: 820px){
  /* Readable base size on phones */
  html, body { font-size: 16px; }

  /* Tighter outer padding so content fits comfortably */
  header, main, footer { padding-left: .85rem; padding-right: .85rem; }

  /* Two columns -> single column */
  .twocol{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .twocol > ul:first-child,
  .twocol > ul:last-child{
    padding-left: var(--hang);   /* keep bullets aligned */
  }

  /* Role header: stack the date under the title to avoid overflow */
  .role h3{ padding-right: 0; }
  .role .when{
    position: static;
    display: block;
    margin-top: .1rem;
    text-align: left;
    white-space: normal;
  }

  /* Contact row: allow natural wrap and exact separators */
  .contact{ gap: .3rem 0; white-space: normal; }
  .contact li + li::before{
    content: "\00a0|\00a0"; /* one NBSP on each side of | */
    margin: 0;
  }

  /* Bullet and paragraph spacing a hair tighter on narrow screens */
  main ul{ margin: .06rem 0 .22rem 0; }
  main li{ margin: 0 0 .08rem; }
  p{ margin: .06rem 0 .22rem; }
  .section{ margin-top: .46rem; }
  h2{ margin-bottom: .22rem; }

  /* Header underline reaches the content edge on mobile too */
  header{ padding-left: .85rem; padding-right: .85rem; position: relative; }
  header::after{
    left: .85rem;              /* matches header padding-left */
    right: .85rem;             /* keeps the rule centered */
  }
}

/* Ultra-narrow phones */
@media screen and (max-width: 480px){
  html, body { font-size: 15px; }      /* slight step down to prevent wraps */
  .section{ margin-top: .42rem; }
  h1{ font-size: 20px; }
  h2{ font-size: 12px; }
  h3{ font-size: 14px; }
  /* Slightly reduce left indent so bullets don't feel cramped */
  main ul{ padding-left: 1.1rem; }
}

/* Print settings */
@media print{
  @page{ size: 8.5in 11in; margin: 0.5in; }
  body{ font-size: 11pt; line-height:1.15; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Header: flush with columns in print */
  header{ padding-left: 0; padding-right: 0; padding-top: 0.85rem; padding-bottom: 0.13rem; position: relative; }
  /* Hairline underline for crisp print, full width */
  header::after{
    content:"";
    position:absolute;
    left:0 !important;
    right:0 !important;
    bottom:0;
    height:0 !important;
    background:none !important;
    border-bottom:0.6pt solid var(--rule);
  }

  /* Main: zero side padding so 3.7 + 0.1 + 3.7 fits exactly */
  main{ padding-left: 0 !important; padding-right: 0 !important; }

  /* Dates flush-right, titles protected */
  .role h3{ position: relative !important; padding-right: 0 !important; min-height: 1.1em !important; }
  .role .when{ position: absolute !important; top: 0 !important; right: 0 !important; text-align: right !important; }

  /* Tighten spacing to keep to one page */
  .section{ margin-top: 0.56rem !important; }
  .section:first-of-type{ margin-top: .18rem !important; }
  h2{ margin-bottom: .3rem !important; }
  p{ margin: .04rem 0 .16rem !important; orphans:3; widows:3; }
  main ul{ margin: .04rem 0 .16rem 0 !important; }
  main li{ margin: 0 0 .08rem !important; orphans:3; widows:3; }
  .role{ margin: .28rem 0 !important; }

  /* Exact two-column widths and slightly tighter gap */
  .twocol{ grid-template-columns: 3.7in 3.7in !important; column-gap: .08in !important; }

  /* Keep Education together */
  [aria-labelledby="education"]{ page-break-inside: avoid !important; }

  /* Keep sections/roles/bullets from splitting across pages */
  .section,
  .role,
  .twocol li{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Hide footer in print; links inherit black/no underline */
  footer{ display:none !important; }
  a{ color:inherit; text-decoration:inherit; }
}