/* Pocakfürdő brand on Bootstrap 5 (colours and type from the old pocakfurdo.hu).
   Bootstrap contexts carry the brand: primary = blue buttons and links,
   success = green subpage titles, info = pale blue section background,
   light = paler blue section background. */
:root {
  --bs-primary: #2da0ce;
  --bs-primary-rgb: 45, 160, 206;
  --bs-success: #88bf3b;
  --bs-success-rgb: 136, 191, 59;
  --bs-info-rgb: 234, 246, 250;
  --bs-light-rgb: 237, 245, 252;
  --bs-body-color: #555;
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-link-color: #2da0ce;
  --bs-link-color-rgb: 45, 160, 206;
  --bs-link-hover-color: #0a75a0;
  --bs-link-hover-color-rgb: 10, 117, 160;
  --bs-border-radius: 6px;
  --pf-sky: #b7d6f2;
}

h1, .h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 500; }
h2, .h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; }
h3, .h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 500; }
h4, .h4 { font-size: 1.5rem; font-weight: 400; }
h1, h2, h3, h4 { color: #555; }
.text-success { color: #88bf3b !important; }
.lead, .pf-main p { line-height: 1.43; }

/* header: sky band, logo left, pill menu right */
.pf-header { background: var(--pf-sky); }
.pf-header .navbar { min-height: 110px; }
.pf-header .navbar-brand img { max-width: 100%; height: auto; }
.pf-menu > li > a {
  display: block; padding: 8px 20px 10px; margin: 2px 0 2px 8px;
  border-radius: 30px; color: #fff; font-weight: 700; text-decoration: none;
  transition: background-color .5s, color .5s;
}
.pf-menu > li > a:hover { background: #2d9fcd; color: #fff; }
.pf-menu > li.selected > a, .pf-menu > li.ancestor > a { background: #fff; color: #777; }
.pf-toggler { color: #fff; border-color: #fff; font-weight: 700; }

/* buttons: rounded, uppercase, blue */
.btn { border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: .6rem 1.75rem; }
.btn-primary { --bs-btn-bg: #2da0ce; --bs-btn-border-color: #58b5da; --bs-btn-hover-bg: #0a75a0;
  --bs-btn-hover-border-color: #0a75a0; --bs-btn-active-bg: #0a75a0; --bs-btn-active-border-color: #0a75a0; border-width: 2px; }

/* Vertical rhythm. Bootstrap's reboot gives headings no top margin and rows
   no vertical gutter, so blocks built from plugins sat flush against each
   other. Values follow the old site: 20-30px section padding, air between
   headings, text, images and columns. */
.pf-main { padding: 10px 0 30px; }
.pf-main > .container, .pf-main > .container-fluid, .pf-main > .container-full { padding-top: 30px; padding-bottom: 30px; }
.pf-main > [class*="container"][class*="bg-"] > .container { padding-top: 0; padding-bottom: 0; }
.pf-main h1, .pf-main h2, .pf-main h3, .pf-main h4, .pf-main h5 { margin-top: 1.5rem; margin-bottom: .9rem; line-height: 1.3; }
.pf-main h4, .pf-main h5 { margin-top: 1rem; }
.pf-main .container > h1:first-child, .pf-main .container > h2:first-child, .pf-main .container > h3:first-child,
.pf-main [class*="col"] > h3:first-child, .pf-main [class*="col"] > h4:first-child, .pf-main [class*="col"] > h5:first-child { margin-top: 0; }
.pf-main p, .pf-main ul, .pf-main ol { margin-bottom: 1rem; }
.pf-main li { margin-bottom: .4rem; }
.pf-main .row { --bs-gutter-x: 2rem; --bs-gutter-y: 1.75rem; margin-bottom: 1.5rem; }
.pf-main img { max-width: 100%; height: auto; margin-bottom: 1rem; }
.pf-main figure img, .pf-main .img-fluid { border-radius: 6px; }
.pf-main .embed { margin: 1.5rem 0; }
.pf-main blockquote { border-left: 4px solid var(--pf-sky); padding: .5rem 0 .5rem 1.25rem; margin: 1rem 0; font-size: 1.1rem; }
.pf-main blockquote footer, .pf-main .blockquote-footer { margin-top: .5rem; }
.pf-main .accordion { margin: 1rem 0 2rem; }
.pf-main .accordion-button { font-size: 1.1rem; font-weight: 500; }
.pf-main .btn { margin: .75rem 0 .5rem; }

/* footer: sky band, white text */
.pf-footer { background: var(--pf-sky); color: #fff; padding: 20px 0; margin-top: 20px; }
.pf-footer h4 { color: #fff; font-size: 1rem; font-weight: 700; }
.pf-footer a { color: #fff; }
.pf-footer p { margin-bottom: .5rem; }

@media (max-width: 767.98px) {
  .pf-menu > li > a { margin-left: 0; }
  .pf-header .navbar-brand img { width: 160px; }
}