/* ASCII-only comments */
:root {
  --fg: #111;
  --bg: #fff;
  --muted: #555;
  --accent: #0a66c2;
  --maxw: 860px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}

/* Layout wrappers */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }

/* Header: logo, phone, status badge */
header { padding: 1.5rem 1rem 0; }
header .brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
header .brand .call { margin-left: auto; } /* push phone (and subsequent items) to the right */
header img { max-width: 280px; height: auto; }

/* About section sizing */
section#about { font-size: 1.25rem; line-height: 1.6; }
@media (max-width: 640px) {
  section#about { font-size: 1.125rem; }
}

/* Ensure floated mascot doesn’t affect subsequent section */
section#how { clear: both; }

/* Callout boxes and phone headline */
.callout { align-self: start; background: #f4f6f8; border: 1px solid #e5e7eb; padding: 1rem; border-radius: 12px; margin: 1rem 0; }
.call { font-size: 2.35rem; font-weight: 900; }
.call a { text-decoration: none; color: inherit; }
.callout-check {
  color: var(--theme-green, #2b8a3e);
  margin-right: 6px;
  font-size: 1.1em;
  vertical-align: -0.05em;
}


/* Navigation */
nav { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 1rem 0; }
nav ul { display: flex; align-items: center; gap: 1rem; list-style: none; padding: .5rem 0; margin: 0; flex-wrap: wrap; }
nav li.cta { margin-left: auto; } /* Email Us pill and anything after sits on the right */
nav a { text-decoration: none; color: var(--fg); padding: .35rem 0; line-height: 1.2; }
nav a:hover { text-decoration: underline; }
nav a.btn { padding: .35rem .70rem; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; }

/* Social links in nav */
nav li.social a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; color: inherit; text-decoration: none; }
nav li.social a:hover { text-decoration: underline; }
nav .icon { width: 18px; height: 18px; display: block; flex: 0 0 18px; }

/* Main rhythm and headings */
main section { margin: 2rem 0; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.8rem; margin: 0; }
h2 { font-size: 1.4rem; margin-top: 0; }

/* Simple grid utility */
.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* Key/value list (e.g., rates) */
.kv { display: flex; flex-direction: column; gap: .25rem; }
.kv .k { font-weight: 600; color: var(--muted); }

/* Rates tightening */
#rates .kv { margin-bottom: 0.8rem; }
#rates .kv .k { display: block; font-weight: 700; margin-bottom: 0.15rem; line-height: 1.2; }
#rates .kv .v { display: block; margin: 0; line-height: 1.35; }
#rates .kv:last-child { margin-bottom: 0; }

/* Hours table */
.hours { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.hours table { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: .6rem .8rem; border-top: 1px solid #f0f0f0; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 0; }
.hours th { text-align: left; width: 50%; color: var(--muted); font-weight: 600; }
.hours caption { text-align: left; padding: .8rem; font-weight: 600; }
.holiday-hours-diff-highlight { background-color:#D3F8D3; display:inline-block; padding:2px; }

/* Footer */
footer { color: var(--muted); padding: 2rem 1rem; border-top: 1px solid #eee; }
.small { font-size: .95rem; color: var(--muted); }

/* Buttons and a11y helpers */
.btn { display: inline-block; padding: .6rem .9rem; border-radius: 10px; border: 1px solid #e5e7eb; text-decoration: none; }
.btn:focus { outline: 2px solid #aac8ff; outline-offset: 2px; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Mascot placement: float-right wrap */
.mascot-hero { display: block; height: auto; margin: 0.75rem auto 1.25rem; max-width: 46ch; }
.mascot-hero.mascot-float { float: right; width: 38%; max-width: 360px; height: auto; margin: 0 0 1rem 1rem; }
/* Contain float so following sections are unaffected */
.hero::after { content: ""; display: block; clear: both; }

/* Fine print */
.fine-print { border-top: 1px solid #eee; margin: 1.25rem auto 0; padding-top: .75rem; font-size: 0.8125rem; color: #555; }
.fine-print .small { font-size: 0.8125rem; color: #555; }

/* Status badge (2-line, compact) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal; /* allow wrapping in the text block */
}
.status-badge .status-icon svg { width: 18px; height: 18px; display: block; }
.status-badge.open   { background: #0f9d58; color: #fff; } /* green */
.status-badge.closed { background: #db9223; color: #fff; } /* amber */
.status-badge .status-text { display: flex; flex-direction: column; line-height: 1.15; }
.status-badge .t   { font-weight: 800; }
.status-badge .time{ font-weight: 600; }

/* Mobile tweak: let badge drop below when space is tight */
@media (max-width: 640px) {
  .status-badge { order: 3; }
}

/* Mobile: stack and center brand row */
@media (max-width: 640px) {
  header .brand {
    flex-direction: column;
    align-items: center;   /* center logo, phone, badge */
    gap: .5rem;
  }
  header .brand .call {
    margin-left: 0;        /* stop pushing to the right */
    text-align: center;    /* center the number */
    width: 100%;           /* let long numbers wrap nicely if needed */
  }
  header .brand .call a {
    display: inline-block; /* allows centering without full-width block */
  }
  .status-badge { order: 3; } /* badge sits under the phone when narrow */
}

/* Tidy spacing inside the Open/Closed badge */
.status-badge {
  padding: .30rem .60rem .38rem .60rem; /* top, right, bottom, left */
}

.status-badge .status-text {
  line-height: 1.20;       /* a touch more breathing room */
}

.status-badge .time {
  margin-top: .08rem;      /* tiny gap between the two lines */
}

/* On very narrow screens, prevent crowding */
@media (max-width: 380px) {
  .status-badge { padding-right: .70rem; }  /* extra right cushion */
}

/* Open/Closed badge: add bottom-right breathing room */
.status-badge {
  /*          top   right  bottom left  */
  padding:   .32rem .90rem .58rem .64rem;
  border-radius: 9999px; /* keeps the pill shape consistent */
}

.status-badge .status-text {
  line-height: 1.12;   /* slightly taller lines so descenders don't crowd */
}

.status-badge .time {
  margin-top: .10rem;  /* tiny gap between lines */
}

/*
=======================================================================
U S E R   I N F O R M A T I O N   M E S S A G E S   A N D   A L E R T S
=======================================================================
*/

.p1_errorsAndAlerts {
  padding:7px;
  margin: 14px 0;

  background-color: #FEF29B;
  color:            #231F20;
  border: 1px solid #DC661E;

    border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  -webkit-border-top-right-radius: 4px;;
}

.ua {
  border-width: 0px;
  border-left-width: 3.5px;
  border-style: solid;

  line-height:1.4em;
  min-height: 42px;

    border-radius: 0px;
  -moz-border-radius: 0px;
  -khtml-border-radius: 0px;
  -webkit-border-top-right-radius: 0px;;
}

.ua.notice {
  background-color: #F1F7F8;
  color:            #231F20;
  border-color:     #006D8A;
}

.ua.success {
  background-color: #F0F1E9;
  color:            #71774B;
  border-color:     #9BC0A1;
}

.ua.attention, .ua.attention-circle {
  background-color: #FEF8CD;
  color:            #827512;
  border-color:     #DCC61E;
}

.ua.error, .ua.error-minus {
  background-color: #FFB3B3;
  color:            #660000;
  border-color:     red;
}

.ua .fa {
  width: 42px;      /* makes the icon not cause the adjacent text to dance */
  text-align:center;
  float: left;
  font-size: 42px;
  margin-right: 12px;
}

.uaMsgCont {
  display: table-cell;
  vertical-align: middle;
  height:42px;
  *height:42px;
}

.ua.notice .fa {
  color:            #006D8A;
}

.ua.success .fa {
  color:            #9BC0A1;
}

.ua.attention .fa, .ua.attention-circle .fa {
  color:            #DCC61E;
}

.ua.error .fa, .ua.error-minus .fa {
  color:            red;
}

.p1_errorsAndAlerts .close {
  color:#990000;
  font-size:9px;
  float: right;
  margin: 5px 5px 0 0;
}


/* GLOBAL BUTTON STYLES
   Use class="gagg-btn" on <a>, <button>, or <input type="submit">
   anywhere on the site.
*/

.gagg-btn,
.gagg-btn:link,
.gagg-btn:visited {
  background-color: #FAA31A;
  border: 1px solid #e07f0e;
  color: darkslategray;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5em 1.5em;
  border-radius: 4px;          /* pill shape */
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  line-height: 1.4;
  /* Subtle text shadow */
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* Hover / focus state */
.gagg-btn:hover,
.gagg-btn:focus {
  background-color: #fbb13a !important;
  border-color: #f18700;
  color: #ffffff;
  text-decoration: none;
}



/* Holiday-season note in How it works */
#how .holiday-note {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  border: 1px solid #f3d08a;
  background: #fff7e0;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .95rem;
}

#how .holiday-note i {
  margin-top: .15rem;
}

#how .holiday-note p {
  margin: 0;
}