/*
Theme Name:   Site Reboots
Theme URI:    https://sitereboots.com/
Author:       Site Reboots
Description:  Custom block theme for Site Reboots. The palette, typography and
              spacing are locked in theme.json so the design cannot drift —
              editors change words and swap patterns, not colours and fonts.
              No page builder, no bundled libraries: the whole stylesheet is
              this file.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sitereboots
Tags:         blog, one-column, block-patterns, full-site-editing
*/

/* Tokens come from theme.json as --wp--preset--*. These aliases just keep the
   component rules below readable. */
:root{
  --ink:var(--wp--preset--color--ink);
  --ink-2:var(--wp--preset--color--ink-2);
  --ink-3:var(--wp--preset--color--ink-3);
  --paper:var(--wp--preset--color--paper);
  --paper-2:var(--wp--preset--color--paper-2);
  --flame:var(--wp--preset--color--flame);
  --brick:var(--wp--preset--color--brick);
  --rule:var(--wp--preset--color--rule);
  --display:var(--wp--preset--font-family--display);
  --text:var(--wp--preset--font-family--text);
}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:2px}
::selection{background:var(--flame);color:var(--ink)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

.skip-link:focus{
  background:var(--flame);color:var(--ink);font-weight:700;
  padding:.7rem 1.1rem;border:2px solid var(--ink);border-radius:6px;
}

/* ------------------------------------------------------------- bands ----- */
/* A band is a full-bleed colour section. The ink and flame variants flip the
   text colours of everything inside them. */
.sr-band{padding-block:clamp(3.25rem,7vw,5.75rem)}
.sr-band--tight{padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.sr-band--ink{background:var(--ink);color:#C8D2E0}
.sr-band--ink :is(h1,h2,h3,h4,strong){color:var(--paper)}
.sr-band--ink a:not(.wp-block-button__link){color:var(--flame)}
.sr-band--oat{background:var(--paper-2)}
.sr-band--flame{background:var(--flame);color:var(--ink)}
.sr-band--flame :is(h1,h2,h3,strong){color:var(--ink)}
.sr-band--flame a:not(.wp-block-button__link){color:var(--ink)}

/* The scalloped tab strip from the printed business cards. */
.sr-tabstrip{
  height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cpath d='M0 0H24V18a12 12 0 0 1-24 0Z' fill='%2313233A'/%3E%3Cpath d='M24 0H48V18a12 12 0 0 1-24 0Z' fill='%23E8663F'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:auto 100%;
}

.sr-eyebrow{
  display:block;font-family:var(--text);font-size:.8125rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin:0 0 .7rem;
}
.sr-band--ink .sr-eyebrow{color:var(--flame)}
.sr-lede{font-size:var(--wp--preset--font-size--large);line-height:1.5;max-width:60ch}

/* ------------------------------------------------------------- cards ----- */
.sr-card{
  background:#fff;border:2px solid var(--ink);border-radius:6px;
  padding:clamp(1.15rem,2.2vw,1.6rem);position:relative;
  display:flex;flex-direction:column;gap:.8rem;height:100%;
}
.sr-card h3{margin:0}
.sr-card p{font-size:1rem;color:var(--ink-2);margin:0}
a.sr-card{text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
a.sr-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);color:inherit}
.sr-band--ink .sr-card{background:#16263D;border-color:var(--paper);color:#C8D2E0}
.sr-band--ink .sr-card p{color:#C8D2E0}
.sr-band--ink a.sr-card:hover{box-shadow:6px 6px 0 var(--flame)}

/* The price tab rides the card's top edge, straight off the flyer. */
.sr-price{
  position:absolute;top:-14px;right:14px;background:var(--brick);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.25;
  padding:.28rem .75rem;border-radius:999px;white-space:nowrap;
}
.sr-card__head{display:flex;align-items:center;gap:.8rem;padding-right:5rem}
.sr-card__icon{
  width:42px;height:42px;flex:0 0 auto;border-radius:8px;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
}
.sr-band--ink .sr-card__icon{background:var(--flame);color:var(--ink)}
.sr-card__note{display:block;font-size:.88rem;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-top:.12rem}
.sr-card__more{margin-top:auto;padding-top:.35rem;font-weight:700;color:var(--brick);font-size:.96rem}
.sr-band--ink .sr-card__more{color:var(--flame)}

/* Square-bullet list from the print collateral. */
.sr-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.42rem}
.sr-ticks li{display:flex;align-items:flex-start;gap:.65rem;font-size:.98rem;line-height:1.4;font-weight:500;color:var(--ink)}
.sr-ticks li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.5em;background:var(--flame);border-radius:1px}
.sr-band--ink .sr-ticks li{color:var(--paper)}

/* ------------------------------------------------------------- steps ----- */
/* Numbered because this genuinely is a sequence. */
.sr-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:1.25rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:64rem){.sr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.sr-steps{grid-template-columns:minmax(0,1fr)}}
.sr-steps li{counter-increment:step;border-top:3px solid var(--ink);padding-top:.9rem}
.sr-steps li::before{
  content:counter(step);display:block;font-family:var(--display);font-weight:800;
  font-size:2.4rem;line-height:1;color:var(--flame);margin-bottom:.35rem;letter-spacing:-.03em;
}
.sr-steps h3{font-size:1.18rem;margin:0 0 .35rem}
.sr-steps p{font-size:.98rem;margin:0}
.sr-band--ink .sr-steps li{border-top-color:var(--flame)}

/* ------------------------------------------------------------ people ----- */
.sr-person{display:flex;gap:1.1rem;align-items:flex-start}
.sr-person__avatar{
  width:72px;height:72px;flex:0 0 auto;border-radius:6px;border:2px solid var(--paper);
  background:var(--flame);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink);
}
.sr-person__role{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--flame);margin:.2rem 0 .5rem}
.sr-person h3{font-size:1.32rem;margin:0}

/* -------------------------------------------------- the hero demo -------- */
/* One bold interactive moment: the visitor reboots an example site. It is a
   CSS-only checkbox, so it works with JavaScript off. */
.sr-demo__frame{border:2px solid var(--paper);border-radius:10px;overflow:hidden;background:#fff;box-shadow:10px 10px 0 rgba(232,102,63,.9)}
.sr-demo__bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;background:#243553;border-bottom:2px solid var(--paper)}
.sr-demo__dots{display:flex;gap:.3rem;flex:0 0 auto}
.sr-demo__dots i{width:9px;height:9px;border-radius:50%;background:#5A6B86;display:block}
.sr-demo__url{flex:1 1 auto;min-width:0;font-size:.7rem;font-weight:500;color:#AEBACD;background:#16233A;border-radius:3px;padding:.25rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-demo__tag{flex:0 0 auto;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#F2B134;border-radius:3px;padding:.2rem .45rem}
.sr-demo__stage{position:relative;background:#fff;min-height:19.5rem}
.sr-demo__screen{overflow:hidden;transition:opacity .42s ease}
.sr-demo__screen--after{position:absolute;inset:0;opacity:0;visibility:hidden}
.sr-demo__screen--before{position:relative}
.sr-demo__toggle:checked ~ .sr-demo__frame .sr-demo__screen--after{position:relative;opacity:1;visibility:visible}
.sr-demo__toggle:checked ~ .sr-demo__frame .sr-demo__screen--before{position:absolute;inset:0;opacity:0;visibility:hidden}

.sr-old{background:#DCDCDC;font-family:'Times New Roman',Times,serif;color:#000;height:100%}
.sr-old__top{background:#000080;color:#fff;text-align:center;padding:.55rem .5rem;font-size:1.32rem;font-weight:700}
.sr-old__nav{background:#C0C0C0;text-align:center;padding:.3rem;font-size:.76rem;border-bottom:1px solid #808080}
.sr-old__nav a{color:#00E;text-decoration:underline;margin:0 .32rem}
.sr-old__body{padding:.85rem 1rem;text-align:center;font-size:.8rem;line-height:1.45}
.sr-old__title{font-family:'Times New Roman',Times,serif;font-size:.95rem;font-weight:700;margin:0 0 .4rem}
.sr-old__marquee{color:#C00;font-weight:700;font-size:.78rem;margin:.5rem 0}
.sr-old__hours{margin:.6rem auto 0;border-collapse:collapse;font-size:.72rem}
.sr-old__hours td{border:1px solid #808080;padding:.12rem .45rem}
.sr-old__foot{margin-top:.7rem;font-size:.63rem;color:#333}
.sr-old__foot span{display:inline-block;background:#000;color:#0F0;font-family:monospace;padding:0 .3rem;letter-spacing:.08em}

.sr-new{background:var(--paper);height:100%;display:flex;flex-direction:column;color:var(--ink)}
.sr-new__top{background:var(--ink);color:var(--paper);padding:.7rem .95rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sr-new__name{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.1;margin:0}
.sr-new__name span{display:block;font-family:var(--text);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--flame);margin-top:.12rem}
.sr-new__call{background:var(--flame);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.76rem;padding:.4rem .65rem;border-radius:4px;white-space:nowrap}
.sr-new__hero{padding:.95rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:.75rem;align-items:center}
.sr-new__title{font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1.05;margin:0 0 .3rem}
.sr-new__hero p{font-size:.72rem;line-height:1.4;margin:0;color:var(--ink-2)}
.sr-new__shot{aspect-ratio:4/3;border:2px solid var(--ink);border-radius:5px;background:#F2B134;display:grid;place-items:center}
.sr-new__shot svg{width:38%;height:auto;color:var(--ink)}
.sr-new__strip{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;padding:0 .95rem .95rem}
.sr-new__chip{background:#fff;border:2px solid var(--ink);border-radius:5px;padding:.45rem .5rem;text-align:center}
.sr-new__chip b{display:block;font-family:var(--display);font-size:.78rem;color:var(--ink)}
.sr-new__chip span{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}

.sr-demo__controls{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:1.15rem}
.sr-reboot{
  display:inline-flex;align-items:center;gap:.6rem;min-height:50px;padding:.7rem 1.35rem;cursor:pointer;
  background:var(--flame);color:var(--ink);border:2px solid var(--paper);border-radius:6px;
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.sr-reboot:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)}
.sr-reboot__icon{transition:transform .5s ease}
.sr-demo__toggle:checked ~ .sr-demo__controls .sr-reboot__icon{transform:rotate(360deg)}
.sr-demo__toggle:focus-visible ~ .sr-demo__controls .sr-reboot{outline:3px solid var(--paper);outline-offset:3px}
.sr-demo__state{font-size:.9rem;font-weight:600;color:#AEBACD;margin:0}
.sr-demo__state b{color:var(--flame)}
.sr-demo__toggle:checked ~ .sr-demo__controls .when-before,
.sr-demo__toggle ~ .sr-demo__controls .when-after{display:none}
.sr-demo__toggle:checked ~ .sr-demo__controls .when-after{display:inline}

.sr-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- header ---- */
.sr-header{position:sticky;top:0;z-index:100;background:var(--ink)}
.sr-header a{text-decoration:none}
.sr-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.sr-brand svg{width:34px;height:34px;flex:0 0 auto}
.sr-brand__word{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--paper);white-space:nowrap;line-height:1}
.sr-brand__word b{color:var(--flame);font-weight:800}
.sr-header .wp-block-navigation{font-size:.96rem;font-weight:600}
.sr-header .wp-block-navigation a{color:var(--paper)}
.sr-header .wp-block-navigation a:hover{color:var(--flame)}
.sr-header .wp-block-navigation .current-menu-item a{color:var(--flame)}

/* ------------------------------------------------------------- footer ---- */
.sr-footer{background:var(--ink);color:#AEBACD;font-size:.98rem}
.sr-footer a{color:#C8D2E0;text-decoration:none}
.sr-footer a:hover{color:var(--flame);text-decoration:underline}
.sr-footer h2{font-size:.8125rem!important;font-family:var(--text)!important;font-weight:600!important;letter-spacing:.14em;text-transform:uppercase;color:var(--flame)!important;margin:0 0 .9rem}

@media (prefers-reduced-motion:reduce){
  .sr-demo__screen,.sr-reboot,.sr-reboot__icon,a.sr-card{transition:none}
}

@media print{
  .sr-header,.sr-footer,.sr-tabstrip,.sr-demo__controls{display:none!important}
  .sr-band{background:#fff!important;color:#000!important;padding-block:1rem}
}