/* Kirkpatrick Tool & Equipment Rental
   One stylesheet for the whole site.

   1. Colors, fonts, and sizes (change them here and they change everywhere)
   2. The basics
   3. The top of every page
   4. Buttons
   5. The home page
   6. Job cards
   7. Equipment and prices
   8. Renting and contact pages
   9. The bottom of every page
   10. Draft notes (removed before launch)
   11. Printing the price list
*/

/* 1. Colors, fonts, and sizes ------------------------------------------- */
:root {
  --page: #F6F3EA;        /* the off-white page */
  --paper: #FFFDF7;       /* cards and tables, a little lighter than the page */
  --ink: #23262A;         /* main text */
  --muted: #565B61;       /* quieter text */
  --rule: #DCD7C9;        /* thin lines */
  --red: #B71F27;         /* from the engine: the call buttons */
  --red-dark: #971820;
  --navy: #1E3F8F;        /* from the engine: links */
  --navy-dark: #152C66;
  --cream: #F7F4EA;
  --highlight: #FFF0BF;   /* a price you jumped to */
  --draft: #FFF6D6;
  --studio-green: #152221;  /* the footer credit: the studio's own green and gold */
  --studio-gold: #C8A35A;

  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1120px;         /* the widest the content gets */
  --gutter: 16px;         /* the space at the sides on a phone */
  --tap: 44px;            /* the smallest comfortable thing to tap */
  --radius: 7px;
}

/* 2. The basics --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding-bottom: 62px;   /* room for the call bar on a phone */
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
}
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0; }
h2 { font-size: clamp(25px, 4.4vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--navy); }
a:hover { color: var(--navy-dark); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.vh {                     /* for screen readers only */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 10px 14px; z-index: 40; }
.skip:focus { left: 8px; }
.page-head { padding: 26px 0 8px; }
.page-head h1 { font-size: clamp(32px, 6vw, 46px); }
.page-head p { max-width: 44em; margin: 10px 0 0; color: var(--muted); font-size: 18px; }
section { scroll-margin-top: 12px; }
.band { padding: 34px 0; border-top: 1px solid var(--rule); }
.band-head { margin-bottom: 18px; }
.band-head p { margin: 6px 0 0; color: var(--muted); }

/* 3. The top of every page ---------------------------------------------- */
.stripe {                 /* the engine's red, white, and blue */
  height: 9px;
  background: linear-gradient(var(--red) 0 3px, var(--cream) 3px 6px, var(--navy) 6px);
}
.site-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 18px; max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 2px;
}
.brand { color: var(--ink); text-decoration: none; line-height: 1.1; padding: 6px 0; }
.brand b { display: block; font: 700 22px/1.1 var(--serif); letter-spacing: .03em; }
.brand span { font: 400 11.5px/1.2 var(--serif); letter-spacing: .1em; color: var(--muted); }
.top-call { font-weight: 700; color: var(--red); text-decoration: none; padding: 10px 0; white-space: nowrap; }
.main-nav { display: flex; flex: 1 1 100%; justify-content: space-between; gap: 2px 10px; order: 3; }
.main-nav a {
  display: block; padding: 10px 2px 7px; line-height: 24px;  /* a comfortable 44px to tap */
  color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--red); }
.main-nav .wide { display: none; }
.home .brand, .home .top-call { display: none; }
.home .site-top { padding-top: 2px; }

@media (min-width: 760px) {
  .main-nav { flex: 0 1 auto; order: 2; gap: 4px 26px; justify-content: center; }
  .main-nav a { font-size: 16px; }
  .main-nav .wide { display: inline; }
  .top-call { order: 3; }
  .home .site-top { justify-content: center; }
}

/* 4. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 11px 24px; border-radius: var(--radius); border: 2px solid transparent;
  font: 700 18px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.btn-call { background: var(--red); color: #fff; }
.btn-call:hover { background: var(--red-dark); color: #fff; }
.btn-plain { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-plain:hover { background: var(--ink); color: #fff; }

/* 5. The home page ------------------------------------------------------ */
.hero { text-align: center; padding-top: 12px; }
.hero h1 { font-size: clamp(36px, 9vw, 66px); line-height: 1.02; letter-spacing: .03em; }
.hero .sub {
  margin: 6px 0 0; color: var(--muted);
  font: 400 clamp(13px, 2.6vw, 20px)/1.25 var(--serif); letter-spacing: .13em;
}
.train { position: relative; max-width: var(--wrap); margin: 2px auto 0; }
.train svg { display: block; width: 100%; height: auto; }
.pause {
  position: absolute; right: 10px; top: 2px; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid #BDB9AD; border-radius: 50%; background: rgba(246, 243, 234, .88);
  color: var(--ink); font-size: 11px; line-height: 1;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px var(--gutter) 0; }
.hero-actions .btn { flex: 1 1 260px; max-width: 340px; }
.hero .lead { max-width: 44em; margin: 16px auto 4px; padding: 0 var(--gutter); font: 400 clamp(18px, 3vw, 23px)/1.35 var(--serif); }
.hero .where { margin: 0 auto 26px; padding: 0 var(--gutter); color: var(--muted); font-size: 16px; }
.more-link { margin: 18px 0 0; font-weight: 600; }

.gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery img.wide { grid-column: span 2; aspect-ratio: 16 / 7; object-position: 50% 60%; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gallery img.wide { aspect-ratio: 2.7 / 1; }  /* lines up with the 4 by 3 photo beside it */
}
.photo-pair { margin-top: 18px; grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.page-photo { margin: 14px 0 22px; }
.page-photo img { width: 100%; border-radius: var(--radius); }

.cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cat { display: block; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.cat:hover { border-color: var(--navy); color: var(--ink); }
.cat b { display: block; font: 700 18px/1.25 var(--serif); }
.cat span { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; line-height: 1.4; }

.how-grid { display: grid; gap: 18px 26px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.how-grid h3 { margin-bottom: 6px; }
.how-grid p { margin: 0; color: var(--muted); }

.visit { display: grid; gap: 22px; align-items: center; }
.visit address { font-style: normal; margin-bottom: 10px; }
.visit .hours-line { margin-bottom: 16px; }
.visit .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.visit figure { margin: 0; }
.visit img { border-radius: var(--radius); border: 1px solid var(--rule); }
figcaption { margin-top: 6px; color: var(--muted); font-size: 14px; }
@media (min-width: 860px) { .visit.has-photo { grid-template-columns: 1fr 1.25fr; gap: 36px; } }

/* 6. Job cards ---------------------------------------------------------- */
.job-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }
.job-tile {
  display: block; padding: 12px 15px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.job-tile:hover { border-color: var(--navy); color: var(--ink); }
.job-tile b { display: block; font: 700 17.5px/1.25 var(--serif); }
.job-tile span { display: block; margin-top: 2px; color: var(--muted); font-size: 14.5px; line-height: 1.35; }

.job-group { padding: 28px 0 8px; border-top: 1px solid var(--rule); }
.job-group > h2 { margin-bottom: 14px; }
.job-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.job {
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  scroll-margin-top: 12px;
}
.job:target { background: var(--highlight); border-color: #C9B26A; }
.job h3 { margin-bottom: 4px; }
.job p { margin: 0 0 8px; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.job ul { margin: 0; padding: 0; list-style: none; }
.job li { padding: 3px 0; font-size: 15.5px; line-height: 1.4; }
.safety {
  margin: 0 0 18px; padding: 12px 16px; background: var(--paper);
  border: 1px solid var(--rule); border-left: 5px solid var(--red); border-radius: var(--radius);
}

/* 7. Equipment and prices ----------------------------------------------- */
.rules { margin: 14px 0 0; padding: 0; list-style: none; }
.rules li { padding: 3px 0; }
.price-tools { padding: 14px 0 4px; }
.price-tools label { display: block; margin-bottom: 5px; font-weight: 600; }
#price-filter {
  width: 100%; max-width: 520px; min-height: 50px; padding: 10px 14px;
  font: 400 17px/1.3 var(--sans); color: var(--ink); background: var(--paper);
  border: 2px solid var(--muted); border-radius: var(--radius);
}
#no-match { margin: 14px 0 0; font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; padding: 0; list-style: none; }
.jump a {
  display: flex; align-items: center; min-height: 38px; padding: 4px 12px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 19px;
  color: var(--ink); font-size: 14.5px; text-decoration: none;
}
.jump a:hover { border-color: var(--navy); color: var(--navy); }
.print-btn { margin-top: 10px; }
.btn-small { min-height: var(--tap); padding: 6px 14px; font-size: 15px; font-weight: 600; }

.price-section { padding-top: 22px; scroll-margin-top: 10px; }
.price-section h2 { font-size: clamp(22px, 3.6vw, 27px); margin-bottom: 8px; }
.prices {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--rule); font-variant-numeric: tabular-nums;
}
.prices th, .prices td { padding: 9px 8px; border-top: 1px solid var(--rule); text-align: right; vertical-align: top; }
.prices thead th { border-top: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.prices th:first-child { text-align: left; }
.prices tbody th { font-weight: 600; line-height: 1.3; }
.prices td { width: 3.6em; white-space: nowrap; }
.prices td.span { white-space: normal; text-align: right; color: var(--muted); }
.prices .none { color: #A9A597; }
.prices small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.prices tr { scroll-margin-top: 10px; }
.prices tr:target th, .prices tr:target td { background: var(--highlight); }
.table-note { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }
.print-only { display: none; }

@media (min-width: 620px) {
  .prices th, .prices td { padding: 10px 12px; }
  .prices td { width: 5.6em; }
  .prices thead th { font-size: 13px; }
}
@media (min-width: 980px) {
  .price-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 42px; align-items: start; }
  .price-side { position: sticky; top: 12px; }
  .jump { display: block; margin: 0; }
  .jump a { min-height: 0; padding: 5px 0; background: none; border: 0; border-radius: 0; font-size: 15.5px; }
}

/* 8. Renting and contact pages ------------------------------------------ */
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.steps li { position: relative; padding: 14px 16px 14px 56px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px;
  background: var(--navy); color: #fff; border-radius: 50%;
  font: 700 15px/30px var(--sans); text-align: center;
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.terms { display: grid; gap: 22px 40px; }
.terms h3 { margin-bottom: 5px; }
.terms p { margin: 0 0 .6em; }
@media (min-width: 800px) { .terms { grid-template-columns: 1fr 1fr; } }
.time-table { width: 100%; max-width: 760px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); }
.time-table th, .time-table td { padding: 10px 12px; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.time-table tr:first-child th, .time-table tr:first-child td { border-top: 0; }
.time-table th { width: 7em; font-family: var(--serif); }

.contact-call { font: 700 clamp(30px, 7vw, 44px)/1.1 var(--sans); margin: 0 0 14px; }
.contact-call a { color: var(--ink); text-decoration: none; }
.hours-table { border-collapse: collapse; margin-bottom: 8px; }
.hours-table th, .hours-table td { padding: 3px 12px 3px 0; text-align: left; font-weight: 400; font-size: 16px; white-space: nowrap; }
.hours-table th { font-weight: 600; }

/* 9. The bottom of every page ------------------------------------------- */
.site-foot { margin-top: 26px; padding: 26px 0 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15.5px; }
.foot-grid { display: grid; gap: 16px 40px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.site-foot b { color: var(--ink); }
.site-foot address { font-style: normal; }
.foot-nav { margin: 0; padding: 0; list-style: none; }
.foot-nav a { display: inline-block; padding: 3px 0; }
.small-print { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.credit {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 7px;
  background: var(--paper); border: 1.5px solid var(--studio-gold); border-radius: 20px;
  color: var(--studio-green); font-size: 14px; font-weight: 600; text-decoration: none;
}
.credit:hover { background: var(--studio-green); color: #E6C983; }
.credit img { width: 22px; height: 22px; }

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: block;
  padding: 15px var(--gutter) calc(15px + env(safe-area-inset-bottom));
  background: var(--red); color: #fff; font-weight: 700; font-size: 18px; line-height: 1.2;
  text-align: center; text-decoration: none; box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
.callbar:hover { background: var(--red-dark); color: #fff; }
.callbar.is-hidden { display: none; }
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .callbar { display: none; }
}

/* 10. Draft notes: delete these and the data-draft attribute before launch */
.draft-note { display: none; }
[data-draft] .draft-note {
  display: block; margin: 10px 0; padding: 8px 12px; background: var(--draft);
  border: 1px dashed #B99E45; border-radius: 5px; color: #5C4A0E; font-size: 14px; line-height: 1.4;
}
.draft-note button { margin: 2px 2px 2px 0; padding: 6px 10px; font: inherit; cursor: pointer; }
.draft-bar { margin: 0; padding: 5px var(--gutter); background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.35; text-align: center; }
.train-switch { margin: -14px auto 26px; padding: 0 var(--gutter); color: var(--muted); font-size: 15px; }
.train-switch button {
  min-height: 36px; margin: 2px; padding: 4px 12px; cursor: pointer; color: var(--ink); font: inherit;
  background: var(--paper); border: 1px solid #BDB9AD; border-radius: 18px;
}

/* 11. Printing the price list ------------------------------------------- */
@media print {
  @page { margin: 0.45in; }
  body { padding: 0; background: #fff; color: #000; font-size: 9.5pt; line-height: 1.25; }
  .stripe, .site-top, .callbar, .price-side, .price-tools, .site-foot, .draft-note, .page-head, .no-print { display: none !important; }
  .print-only { display: block; text-align: center; margin-bottom: 8pt; }
  .print-only .print-name { font: 700 22pt/1.1 var(--serif); letter-spacing: .03em; }
  .print-only p { margin: 2pt 0; }
  .price-layout { display: block; }
  .price-main { column-count: 2; column-gap: 0.3in; }
  .price-section { padding-top: 7pt; break-inside: avoid; }
  .price-section h2 { font-size: 11.5pt; margin-bottom: 2pt; }
  .prices { border: 0; background: none; }
  .prices th, .prices td { padding: 1.5pt 3pt; border-top: 0.5pt solid #999; }
  .prices thead th { font-size: 7.5pt; color: #000; }
  .prices td { width: 3.4em; }
  .prices small { color: #000; font-size: 7.5pt; margin: 0; }
  .prices .none { color: #000; }
  .table-note { color: #000; font-size: 8pt; margin-top: 2pt; }
  a { color: #000; text-decoration: none; }
}