/* JPGSize — layout and component styles that theme.json cannot express. */

:root { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------------------------------------------------------- header pill */
.jpgs-header { padding-top: 1.25rem; }

.jpgs-pill {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  padding: .55rem .6rem .55rem 1.25rem;
  box-shadow: 0 1px 2px rgba(20, 32, 31, .04), 0 12px 32px -22px rgba(20, 32, 31, .3);
}

.jpgs-brand a,
.jpgs-brand {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  white-space: nowrap;
}
.jpgs-brand a:hover { color: var(--wp--preset--color--teal); }

.jpgs-nav a {
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.jpgs-nav a:hover { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--cream); }
.jpgs-nav .current-menu-item a,
.jpgs-nav .current_page_item a {
  color: var(--wp--preset--color--teal);
  background: var(--wp--preset--color--teal-soft);
}

/* ---------------------------------------------------------- main column */
.jpgs-main { padding-bottom: var(--wp--preset--spacing--50); }
.jpgs-main > * + * { margin-top: 1.25rem; }

.jpgs-main h1 { margin-bottom: .75rem; }
.jpgs-main h2 { margin-top: 2.75rem; margin-bottom: .25rem; }
.jpgs-main h3 { margin-top: 1.75rem; margin-bottom: .25rem; }
.jpgs-main p  { color: #2b3b39; }

/* Lead paragraph */
.is-style-lead,
.jpgs-main .is-style-lead {
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.375rem);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  margin-bottom: 2rem;
}

/* The tool sits in its own breathing room */
.jpgs-tool { margin-block: 2rem; }

/* ---------------------------------------------------------- callout */
.jpgs-callout,
.is-style-callout {
  background: var(--wp--preset--color--teal-soft);
  border-left: 3px solid var(--wp--preset--color--teal);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin-block: 1.75rem;
}
.jpgs-callout p { margin: 0; font-size: 1rem; color: #24413d; }

/* ---------------------------------------------------------- tables */
.wp-block-table { margin-block: 1.75rem; overflow-x: auto; }
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: .9375rem;
}
.wp-block-table th,
.wp-block-table td {
  padding: .75rem .9rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}
.wp-block-table thead th {
  background: var(--wp--preset--color--cream);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #fbfaf8; }

/* ---------------------------------------------------------- lists */
.jpgs-main ul, .jpgs-main ol { padding-left: 1.35rem; }
.jpgs-main li { margin-bottom: .5rem; }
.jpgs-main li::marker { color: var(--wp--preset--color--teal); font-weight: 600; }

/* ---------------------------------------------------------- post meta */
.jpgs-postmeta {
  gap: .75rem;
  color: var(--wp--preset--color--muted);
  margin-bottom: .5rem;
}
.jpgs-postmeta a { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------- archive */
.jpgs-archive__item {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1rem;
}
.jpgs-archive__item h2 { margin-top: .25rem; margin-bottom: .4rem; }
.jpgs-archive__item h2 a { text-decoration: none; }
.jpgs-archive__item h2 a:hover { text-decoration: underline; }
.jpgs-archive__cat a {
  text-decoration: none;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wp--preset--color--teal);
}
.jpgs-archive__item p { color: var(--wp--preset--color--muted); margin-bottom: 0; }

.jpgs-related h3 { margin-top: 1.5rem; margin-bottom: .25rem; }
.jpgs-related h3 a { text-decoration: none; }
.jpgs-related p { color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------- footer */
.jpgs-footer {
  border-top: 1px solid var(--wp--preset--color--line);
  background: transparent;
}
.jpgs-footer__head {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .75rem !important;
  font-weight: 700;
  color: var(--wp--preset--color--muted);
  margin-bottom: .75rem;
}
.jpgs-footer__list { list-style: none; padding-left: 0; }
.jpgs-footer__list li { margin-bottom: .45rem; }
.jpgs-footer__list a {
  text-decoration: none;
  color: var(--wp--preset--color--muted);
}
.jpgs-footer__list a:hover { color: var(--wp--preset--color--teal); text-decoration: underline; }
.jpgs-footer__note {
  color: var(--wp--preset--color--muted);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------- mobile */
@media (max-width: 781px) {
  .jpgs-pill { padding: .5rem .55rem .5rem 1rem; }
  .jpgs-main h2 { margin-top: 2.25rem; }
  .jpgs-footer__cols { gap: 2rem; }
}
@media (max-width: 600px) {
  .wp-block-table table { font-size: .875rem; }
  .wp-block-table th, .wp-block-table td { padding: .6rem .7rem; }
}