// Joomla Cassiopeia gyermek-sablon; a forrás egyben érvényes CSS.
// A színek egy helyen módosíthatók. A betűkészletet a Joomla sablonstílusa kezeli.
:root {
  --gubas-paper: #f5f0e6;
  --gubas-brown: #432d23;
  --gubas-wine: #772e35;
  --gubas-sand: #d1b994;
  --gubas-green: #384638;
  --link-color: #772e35;
  --link-color-rgb: 119, 46, 53;
  --link-hover-color: #512028;
  --link-hover-color-rgb: 81, 32, 40;
}
body { background: var(--gubas-paper); color: var(--gubas-brown); }
.container-header { background: var(--gubas-paper); background-image: none; box-shadow: 0 1px 0 rgba(67,45,35,.14); }
.container-header .navbar-brand a, .container-header .site-description, .container-header .mod-menu > li > a, .container-header .mod-menu > li > span { color: var(--gubas-brown); }
.container-header .navbar-brand a { font-family: var(--cassiopeia-font-family-headings, Georgia, serif); }
.container-header .mod-menu > li > a:hover { color: var(--gubas-wine); }
.container-header .navbar-toggler { color: var(--gubas-brown); border-color: var(--gubas-brown); }
.container-footer { background: var(--gubas-brown); background-image: none; color: var(--gubas-paper); }
.container-footer a { color: var(--gubas-paper); }
.btn-primary { background-color: var(--gubas-wine); border-color: var(--gubas-wine); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: #512028; border-color: #512028; color: #fff; }
:focus-visible { outline: 3px solid #a94b53; outline-offset: 3px; }
.gubas-hero { background-color: var(--gubas-brown); background-image: linear-gradient(90deg, rgba(25,19,16,.85), rgba(25,19,16,.14)), url('../images/gubas-nyitokep.png'); background-size: cover; background-position: center; color: #fff; padding: clamp(4rem, 10vw, 8rem) max(1.5rem, calc((100vw - 72rem) / 2)); }
.gubas-hero h1, .gubas-hero h2 { color: #fff; max-width: 15ch; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.gubas-hero p { max-width: 36rem; font-size: 1.1rem; }
.gubas-hero a:not(.btn) { color: #fff; }
.blog-items .blog-item { background: #fffaf2; border: 1px solid #e1d7c8; padding: 1rem; }
.blog-items .blog-item img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } }

/* Cassiopeia mod_custom banner elrendezés, top-a pozíció. */
.container-top-a .banner-overlay {
  min-height: clamp(24rem, 48vw, 38rem);
  padding: clamp(2rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-position: center;
  background-size: cover;
  box-shadow: inset 1200px 0 900px -700px rgba(35, 24, 20, .88);
  color: #fff;
}
.container-top-a .banner-overlay h1,
.container-top-a .banner-overlay h2 {
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.12;
}
.container-top-a .banner-overlay p { max-width: 38rem; font-size: 1.1rem; }
.container-top-a .banner-overlay a:not(.btn) { color: #fff; }
@media (max-width: 600px) {
  .container-top-a .banner-overlay { min-height: 28rem; background-position: 65% center; box-shadow: inset 700px 0 500px -400px rgba(35, 24, 20, .9); }
}