/* ==========================================================================
   The Permit Guys – site-wide styles (new design system)
   Loaded after Bootstrap 5.3 by layouts/site.blade.php.

   1. Design tokens
   2. Bootstrap overrides
   3. Base
   4. Layout helpers
   5. Buttons
   6. Forms
   7. Utility bar
   8. Header + mobile menu
   9. Footer
   ========================================================================== */

/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Brand */
  --pg-navy: #171B3B;
  --pg-navy-900: #10132B;
  --pg-blue: #135E86;
  --pg-cyan: #49C3E5;
  --pg-cyan-100: #D7F1FA;
  --pg-sky-50: #F3FAFD;
  --pg-green: #1D7A43;
  --pg-red: #B42318;

  /* Text */
  --pg-ink: #171B3B;
  --pg-text: #3D4462;
  --pg-muted: #4A5068;
  --pg-quote: #2B3150;
  --pg-on-dark: #D5DAEA;
  --pg-on-dark-muted: #C2C8DC;
  --pg-on-dark-faint: #9AA2BF;

  /* Lines */
  --pg-line: #E3EAF1;
  --pg-line-sky: #CDE9F4;
  --pg-line-sky-2: #D7EEF7;
  --pg-line-input: #C9D3DE;
  --pg-line-navy: #343B66;
  --pg-line-chip: #3A4170;

  /* Type */
  --pg-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pg-font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;

  /* Shape */
  --pg-radius-sm: 12px;
  --pg-radius-md: 16px;
  --pg-radius-lg: 20px;
  --pg-radius-xl: 24px;
  --pg-radius-pill: 999px;
  --pg-shadow-card: 0 10px 40px rgba(23, 27, 59, 0.08);

  /* Layout. Content is 1200px wide on desktop; the gutter sits outside it. */
  --pg-content: 1200px;
  --pg-gutter: 16px;
  --pg-section-y: 44px;
}

@media (min-width: 768px) {
  :root {
    --pg-gutter: 24px;
    --pg-section-y: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --pg-section-y: 96px;
    --pg-radius-lg: 24px;
  }
}

/* 2. Bootstrap overrides -------------------------------------------------- */
:root {
  --bs-body-font-family: var(--pg-font-body);
  --bs-body-color: var(--pg-ink);
  --bs-body-bg: #ffffff;
  --bs-body-line-height: normal; /* the designs use the browser default, not Bootstrap's 1.5 */
  --bs-heading-color: inherit;
  --bs-link-color: var(--pg-blue);
  --bs-link-color-rgb: 19, 94, 134;
  --bs-link-hover-color: var(--pg-navy);
  --bs-link-hover-color-rgb: 23, 27, 59;
  --bs-border-color: var(--pg-line);
  --bs-primary: var(--pg-navy);
  --bs-primary-rgb: 23, 27, 59;
  --bs-focus-ring-color: rgba(73, 195, 229, 0.45);
}

/* 3. Base ----------------------------------------------------------------- */
body {
  font-family: var(--pg-font-body);
  color: var(--pg-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .pg-display {
  font-family: var(--pg-font-display);
  font-weight: 800;
  margin: 0;
}

img { max-width: 100%; height: auto; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--pg-cyan);
  outline-offset: 2px;
}

.pg-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: var(--pg-radius-sm);
  background: var(--pg-navy);
  color: #fff;
  font-weight: 700;
}
.pg-skip-link:focus { top: 8px; color: #fff; }

/* 4. Layout helpers ------------------------------------------------------- */
.pg-container {
  width: 100%;
  max-width: calc(var(--pg-content) + 2 * var(--pg-gutter));
  margin-inline: auto;
  padding-inline: var(--pg-gutter);
}

.pg-section { padding-block: var(--pg-section-y); }
.pg-bg-sky { background: var(--pg-sky-50); }
.pg-bg-navy { background: var(--pg-navy); color: #fff; }

.pg-eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-blue);
}

/* Fluid sizes run from the mobile design (390px wide) to the desktop design (1200px+). */
.pg-h1 {
  font-size: clamp(38px, 27.4px + 2.716vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.pg-h2 {
  font-size: clamp(30px, 23.26px + 1.728vw, 44px);
  line-height: 1.12;
}

.pg-lead {
  font-size: clamp(17px, 15.56px + 0.37vw, 20px);
  line-height: 1.55;
  color: var(--pg-text);
}

.pg-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  margin-bottom: 22px;
}

@media (min-width: 768px) {
  .pg-eyebrow { font-size: 14px; }
  .pg-h1 { line-height: 1.04; }
  .pg-h2 { line-height: 1.1; letter-spacing: -0.01em; }
  .pg-section-head { gap: 12px; margin-bottom: 40px; }
}

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--pg-font-body);
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 16px;
  --bs-btn-padding-x: 20px;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--pg-radius-pill);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(73, 195, 229, 0.45);
  --bs-btn-padding-y: 0;
  --bs-btn-line-height: normal;
  --pg-btn-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pg-btn-height);
}

.btn-lg {
  --bs-btn-font-size: 17px;
  --bs-btn-padding-x: 28px;
  --bs-btn-border-radius: var(--pg-radius-pill);
  --pg-btn-height: 54px;
  gap: 10px;
}

/* Filled buttons have no border in the design; outlined ones add their 2px border
   on top of the button height, so they sit 4px taller. */
.btn-primary,
.btn-accent { --bs-btn-border-width: 0; }
.btn-outline-primary { min-height: calc(var(--pg-btn-height) + 4px); }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pg-navy);
  --bs-btn-border-color: var(--pg-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #262B57;
  --bs-btn-hover-border-color: #262B57;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pg-navy-900);
  --bs-btn-active-border-color: var(--pg-navy-900);
  --bs-btn-disabled-bg: var(--pg-navy);
  --bs-btn-disabled-border-color: var(--pg-navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--pg-navy);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--pg-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pg-navy);
  --bs-btn-hover-border-color: var(--pg-navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pg-navy-900);
  --bs-btn-active-border-color: var(--pg-navy-900);
}

/* Cyan button for dark backgrounds */
.btn-accent {
  --bs-btn-color: var(--pg-navy);
  --bs-btn-bg: var(--pg-cyan);
  --bs-btn-border-color: var(--pg-cyan);
  --bs-btn-hover-color: var(--pg-navy);
  --bs-btn-hover-bg: #6FD0EC;
  --bs-btn-hover-border-color: #6FD0EC;
  --bs-btn-active-color: var(--pg-navy);
  --bs-btn-active-bg: #34B3D8;
  --bs-btn-active-border-color: #34B3D8;
  --bs-btn-font-weight: 800;
}

.btn svg { flex: none; }

/* 6. Forms ---------------------------------------------------------------- */
.form-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: 50px;
  border: 1.5px solid var(--pg-line-input);
  border-radius: var(--pg-radius-sm);
  padding-inline: 14px;
  font-size: 16px;
  color: var(--pg-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pg-cyan);
  box-shadow: 0 0 0 0.25rem rgba(73, 195, 229, 0.25);
}

.invalid-feedback { font-size: 14px; color: var(--pg-red); }
.form-control.is-invalid { border-color: var(--pg-red); }

/* 7. Utility bar ---------------------------------------------------------- */
.pg-utility {
  background: var(--pg-navy);
  color: #fff;
  font-size: 14px;
}

.pg-utility__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
}

.pg-utility__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}

.pg-utility a,
.pg-utility__item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #fff;
}

.pg-utility a:hover { color: var(--pg-cyan); }
.pg-utility__phone { font-weight: 600; }
.pg-utility__hours { color: var(--pg-on-dark); }
.pg-utility svg { color: var(--pg-cyan); }

/* 8. Header + mobile menu ------------------------------------------------- */
.pg-header {
  background: #fff;
  border-bottom: 1px solid var(--pg-line);
  position: relative;
  z-index: 1020;
}

.pg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 10px;
}

/* The banner logo is wide (862×157), so size it by width and let it shrink on small phones. */
.pg-header__logo { flex: 0 1 auto; min-width: 0; }

.pg-header__logo img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

.pg-nav {
  display: none;
  gap: 6px 28px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

.pg-nav a { color: var(--pg-ink); }
.pg-nav a:hover { color: var(--pg-blue); }

.pg-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pg-header__desktop-only { display: none !important; }

.pg-menu-toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pg-radius-sm);
  background: var(--pg-sky-50);
  color: var(--pg-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-cyan);
  color: var(--pg-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.pg-header .dropdown-menu {
  --bs-dropdown-border-color: var(--pg-line);
  --bs-dropdown-border-radius: var(--pg-radius-md);
  --bs-dropdown-link-active-bg: var(--pg-sky-50);
  --bs-dropdown-link-active-color: var(--pg-ink);
  --bs-dropdown-link-hover-bg: var(--pg-sky-50);
  --bs-dropdown-item-padding-y: 8px;
  box-shadow: var(--pg-shadow-card);
  padding: 8px;
  min-width: 260px;
}

.pg-header .dropdown-item {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
}

/* Mobile menu (Bootstrap offcanvas) */
.pg-offcanvas {
  --bs-offcanvas-width: min(340px, 88vw);
  font-family: var(--pg-font-body);
}

.pg-offcanvas .offcanvas-header { border-bottom: 1px solid var(--pg-line); }
.pg-offcanvas .offcanvas-body { display: flex; flex-direction: column; gap: 24px; }

.pg-offcanvas__nav {
  display: flex;
  flex-direction: column;
}

.pg-offcanvas__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-bottom: 1px solid var(--pg-line);
  color: var(--pg-ink);
  font-weight: 600;
  font-size: 17px;
}

.pg-offcanvas__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-muted);
  margin-bottom: 4px;
}

.pg-offcanvas__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--pg-text);
}

.pg-offcanvas__contact a { color: var(--pg-ink); font-weight: 600; }

.pg-nav a,
.pg-header .btn { white-space: nowrap; }

.pg-header .pg-header__mobile-only.btn { --bs-btn-padding-x: 16px; --bs-btn-font-size: 15px; }
.pg-header .btn-outline-primary.pg-header__desktop-only { --bs-btn-padding-x: 18px; }

@media (min-width: 768px) {
  .pg-header__logo img { width: 240px; }
}

/* Full nav needs ~1150px; below that the menu button is used. */
@media (min-width: 1200px) {
  .pg-header__inner { padding-block: 14px; }
  .pg-header__logo img { width: 270px; }
  .pg-nav { display: flex; }
  .pg-header__actions { gap: 12px; }
  .pg-header__desktop-only { display: inline-flex !important; }
  .pg-header__mobile-only { display: none !important; }
}

/* 9. Footer --------------------------------------------------------------- */
.pg-footer {
  background: var(--pg-navy-900);
  color: var(--pg-on-dark-muted);
  font-size: 15px;
}

/* Phones: one column of contact details. Tablet+: one row of brand, links, copyright. */
.pg-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 32px;
}

.pg-footer__brand { display: flex; gap: 20px; align-items: center; }
.pg-footer__brand img { display: block; width: 220px; max-width: 100%; height: auto; align-self: flex-start; }
.pg-footer__tagline { display: none; max-width: 280px; line-height: 1.5; }

.pg-footer__contact { display: contents; }
.pg-footer__nav { display: none; }

.pg-footer a { color: #fff; }
.pg-footer a:hover { color: var(--pg-cyan); }

.pg-footer__copy { font-size: 13px; color: var(--pg-on-dark-faint); }
.pg-footer__copy-full { display: none; }

@media (min-width: 768px) {
  .pg-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: center;
    padding-block: 48px;
  }
  .pg-footer__brand img { width: 260px; }
  .pg-footer__tagline { display: block; }
  .pg-footer__contact { display: none; }
  .pg-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .pg-footer__copy { font-size: 15px; color: inherit; }
  .pg-footer__copy-full { display: inline; }
}