/* Modernized paws.css — mobile-first, variables, accessibility, reduced-motion */
:root{
  --bg-page: #5280C5;
  --page-text: #003366;
  --panel-bg: #F0F0F0;
  --header-bg: #000066;
  --muted: #AEC3E3;
  --accent: #3262A3;
  --white: #FFF;
  --card-bg: #EAEAEA;
  --form-bg: #f1ecdf;
  --error: #e66262;
  --success: #9fd2a1;
  --radius: 4px;
  --gap: 1rem;
  --max-content-width: 1200px;
  --type-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --type-serif: Georgia, "Times New Roman", serif;
}

/* Box-sizing and base */
html { box-sizing: border-box; font-family: var(--type-ui); color: var(--page-text); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*,*::before,*::after{ box-sizing: inherit; }
body { margin: 0; line-height: 1.4; }

/* Container */
#wrapper{
  background: var(--panel-bg);
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0;
}

/* Header */
header{
  background-color: var(--header-bg);
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  font-family: var(--type-serif);
  padding: 1rem;
  text-align: center;
}
header a{ color: inherit; text-decoration: none; }
h1{
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin: .25rem 0;
  text-shadow: 3px 3px 3px #ccc;
  animation: fadein 5s ease-out forwards;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  h1 { animation: none; }
  * { transition: none !important; animation: none !important; }
}

/* Navigation */
nav{ text-align:center; }
nav ul{
  display:flex;
  flex-direction:column;
  gap: .25rem;
  font-size: 1.1rem;
  list-style:none;
  margin:0;
  padding:0;
}
nav li{
  border-bottom: 1px solid var(--muted);
  padding: .5rem 0;
}
nav a{ color: var(--header-bg); text-decoration:none; }
nav a:hover, nav a:focus{ color: var(--accent); outline-offset: 3px; }

/* Main content */
main{
  background: var(--white);
  border: 1px solid var(--muted);
  padding: 1rem 2rem;
  overflow:auto;
}
section{
  background: var(--card-bg);
  margin: 0 0 1rem 0;
  padding: 0;
}
section h3{
  background: var(--muted);
  margin: 0;
  padding: .25rem;
  font-size: 1.05rem;
}
section p{ padding: .25rem; }

/* Text styles */
dt{ color: var(--bg-page); font-size: 1.05em; font-family: var(--type-serif); font-weight:700; }
.category{ color:#5380C5; font-family: var(--type-serif); font-weight:700; }
.address{ clear:left; }

/* Desktop/mobile visibility using utility classes */
.show-mobile{ display:inline; }
.show-desktop{ display:none; }

/* Tables */
table{ margin:1rem; border:2px solid #000033; border-collapse:collapse; width:auto; }
td,th{ padding:.5rem; border:1px solid #000033; }

/* Forms */
form{ display:flex; flex-direction:column; gap:.5rem; padding-left:1rem; width:100%; max-width:900px; }
input,textarea,select{ margin:0; font:inherit; }
.input-row{ margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.input-row label{ color:#75726c; }
.input-field{ width:100%; padding:.6rem; border-radius:4px; border:1px solid #e0dfdf; box-sizing:border-box; }
.span-field{ font-family: Arial, sans-serif; font-size: .875rem; }
.btn-submit{
  padding:.6rem 1.25rem; background:#9e9a91; border:1px solid #8c8880; color:#fff; font-size:1rem; border-radius:4px; cursor:pointer;
}
.btn-submit:focus{ outline:3px solid rgba(0,0,0,.15); outline-offset:2px; }

/* Messages */
.errorMessage{ background-color:var(--error); border:1px solid #AA4502; padding:.5rem .75rem; color:#fff; border-radius:4px; }
.successMessage{ background-color:var(--success); border:1px solid #91bf93; padding:.5rem .75rem; color:#3d503d; border-radius:4px; font-size:.95rem; cursor:pointer; }

/* Form container */
.form-container{ background:var(--form-bg); border:1px solid #e2ddd2; padding:1.25rem; border-radius:var(--radius); }

/* Collapsible (FAQ) — keep button semantics in HTML */
.collapsible{
  display:block;
  width:100%;
  background-color: var(--header-bg);
  color:#fff;
  cursor:pointer;
  padding: .75rem 1rem;
  border:none;
  text-align:left;
  font-size:1rem;
  border-radius:2px;
}
.collapsible:hover,.collapsible:focus{ background-color:#555; outline:3px solid rgba(255,255,255,.12); outline-offset:2px; }
.collapsible::after{ content:"\02795"; font-size:13px; float:right; margin-left:5px; }
.collapsible[aria-expanded="true"]::after{ content:"\2796"; }
.content{ padding:0 1rem; max-height:0; overflow:hidden; transition:max-height .2s ease-out; background:#f1f1f1; }

/* Footer */
footer{ background:var(--muted); font-size:.85rem; font-style:italic; padding:1rem; text-align:center; }

/* Animations */
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }

/* Responsive breakpoints */
@media (min-width:500px){
  nav ul{ flex-direction:row; justify-content:space-around; font-size:1.25rem; }
  nav li{ border-bottom:none; }
  h1{ font-size: clamp(2rem, 4.5vw, 3.2rem); }
  .show-mobile{ display:none; }
  .show-desktop{ display:inline; }
  form{ display:grid; grid-template-columns: 6em 1fr; grid-gap:1rem; align-items:start; width:90%; }
  input[type="submit"], .btn-submit{ grid-column: 2 / 3; justify-self:start; width:auto; }
  label{ text-align:right; }
}

/* Desktop grid layout */
@media (min-width:1024px){
  @supports(display:grid){
    #wrapper{ display:grid; grid-template-columns: 180px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "nav main" "footer footer"; gap:var(--gap); }
    header{ grid-area: header; }
    nav{ grid-area: nav; align-self:start; }
    main{ grid-area: main; }
    footer{ grid-area: footer; }
    nav ul{ flex-direction:column; font-weight:600; font-size:1.1rem; padding-top: .5rem; }
    section{ min-width: 0; } /* prevent overflow in grid */
  }
}