/*
 * Gyümölcsoltó Boldogasszony Plébánia: the old "church-10templates.com" look on top of Cassiopeia (Joomla 5).
 * Installed as media/templates/site/cassiopeia/css/user.css; Cassiopeia loads it automatically.
 * Images come from the old template, copied to media/templates/site/cassiopeia/images/regi/.
 * Colours, sizes and fonts are taken from the old templates/church-10templates.com/css/template.css.
 */

:root {
  --plb-dark: #260600;      /* page background, text on the paper */
  --plb-cream: #FEEFC6;     /* table heads, pagination, form fields */
  --plb-gold: #FFD57E;      /* links on the dark background */
  --plb-wheat: #f5deb3;     /* sidebar headings */
  --plb-red: #a91c02;       /* links on the paper */
  --plb-border: #570909;    /* dotted borders */
  --plb-button: #998675;
  --cassiopeia-color-primary: #260600;
  --cassiopeia-color-hover: #260600;
  --cassiopeia-color-link: #a91c02;
  --cassiopeia-font-family-body: "Times New Roman", Times, serif;
  --cassiopeia-font-family-headings: "Times New Roman", Times, serif;
  --cassiopeia-font-weight-headings: 400;
}

/* Page: dark brown with the two textured strips at the top.
   html gets the dark colour too, so nothing ever shows white at the edges. */
html {
  background-color: var(--plb-dark);
}
body.site {
  background: url("../images/regi/topbgg.png") repeat-x top,
              url("../images/regi/bottomgg.png") repeat-x top,
              var(--plb-dark);
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

/* 980 px wide like the old site: 4 grid columns of 233 px plus 3 gaps of 1em.
   The left column gets 1 column (old: 230 px), the content 3 (old: 735 px).
   Phones keep Cassiopeia's single column. */
@media (min-width: 992px) {
  .wrapper-static .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 14.5625rem)) [main-end] minmax(0, 1fr) [full-end];
  }
  .wrapper-static .container-header .grid-child,
  .wrapper-static .container-footer .grid-child {
    max-width: 980px;
  }
}

/* Header and footer: no coloured gradient, the page background shows through */
.container-header,
.container-footer {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

/* Title and address on the left, the decorative image on the right */
.container-header .grid-child:has(> .navbar-brand) {
  background: url("../images/regi/banner-right.png") no-repeat right center / auto 100px;
  min-height: 120px;
  align-items: center;
}
.container-header .navbar-brand {
  text-align: center;
  font-size: 30px;
}
.container-header .brand-logo,
.container-header .brand-logo:hover {
  color: #fff;
  font-weight: normal;
  text-decoration: none;
}
.container-header .site-description {
  font-size: 20px;
  text-align: center;
}
@media (min-width: 992px) {
  .container-header .navbar-brand {
    margin-left: 155px;
  }
}
/* Phones: the parish name wraps instead of running off the screen
   (Bootstrap keeps the site title on one line by default) */
@media (max-width: 991.98px) {
  .container-header .navbar-brand {
    width: 100%;
    margin: 0;
    font-size: 24px;
    white-space: normal;
  }
  .container-header .site-description {
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .container-header .grid-child:has(> .navbar-brand) {
    background: none;
  }
}

/* Top menu bar on the old-paper strip, search box on the right */
.container-header .container-nav {
  background: url("../images/regi/old-paper-menu-bg.png") no-repeat center / 100% 100%;
  padding: 12px 20px;
  align-items: center;
  flex-wrap: wrap;
}
.container-header .container-nav .mod-menu {
  color: var(--plb-dark);
}
/* Cassiopeia sets the menu font size on each item, so the size goes here */
.container-header .container-nav .metismenu.mod-menu .metismenu-item {
  font-size: 23px;
  line-height: 1.2;
  padding: .2em 0;
}
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > span,
.container-header .container-nav .metismenu > li > button {
  color: var(--plb-dark);
  font-weight: bold;
}
@media (min-width: 992px) {
  .container-header .container-nav .mod-menu > li,
  .container-header .container-nav .mod-menu > li + li {
    margin: 0 30px;
  }
}
.container-header .container-nav .navbar-toggler {
  color: var(--plb-dark);
  border-color: var(--plb-dark);
}

/* Phones and narrow windows: the top menu always shows (no ☰ button),
   items side by side, wrapping onto a second row when needed */
@media (max-width: 991.98px) {
  .container-header .container-nav .navbar-toggler {
    display: none;
  }
  .container-header .container-nav .navbar-collapse.collapse:not(.show) {
    display: block;
  }
  .container-header .container-nav .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .container-header .container-nav .metismenu.mod-menu .metismenu-item {
    font-size: 18px;
    margin: 0 10px;
  }
  /* Search box centred under the menu, clear of the torn paper edge */
  .container-header .container-nav {
    padding-bottom: 22px;
  }
  .container-header .container-nav .container-search {
    margin: 6px auto 0;
  }
}

/* Search: a plain white field on the right, no visible label */
.container-header .container-search {
  margin-left: auto;
}
.container-header .container-search .form-control {
  flex: 0 0 170px;
  width: 170px;
  padding: 2px 5px;
  border: 1px solid #767676;
  border-radius: 2px;
  background: #fff;
  color: #000;
  font-size: 15px;
}

/* Form fields and buttons */
.site .form-control,
.site input[type="text"],
.site input[type="email"],
.site input[type="password"],
.site textarea {
  border: 2px dotted var(--plb-border);
  border-radius: 0;
  background: var(--plb-cream);
  color: #013F56;
}
.site .btn-primary,
.site button[type="submit"],
.site input[type="submit"] {
  background: var(--plb-button);
  border: none;
  border-radius: 0;
  color: var(--plb-dark);
  font-weight: bold;
}

/* Left column: gold menu links on the dark background, no white module boxes */
.container-sidebar-left .card {
  --card-bg: transparent;
  background: transparent;
  border: 0;
  color: #fff;
}
.container-sidebar-left .card-header {
  background: url("../images/regi/h3bg.png") left bottom no-repeat;
  border: 0;
  padding: 0 0 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-style: italic;
  color: var(--plb-wheat);
  text-shadow: 1px 1px 1px #fff;
}
.container-sidebar-left .card-body {
  padding: 0 0 10px;
}
.container-sidebar-left .mod-menu,
.container-sidebar-left .mod-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
}
.container-sidebar-left .mod-menu li {
  display: block;
  padding: 0;
}
.container-sidebar-left .mod-menu a {
  display: block;
  padding: 0 0 0 20px;
  color: var(--plb-gold);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.7em;
  text-decoration: none;
}
.container-sidebar-left .mod-menu a:hover {
  color: #fff;
  text-decoration: underline;
}
.container-sidebar-left .mod-menu li.current > a,
.container-sidebar-left .mod-menu li.active > a {
  color: #fff;
  text-decoration: none;
}
.container-sidebar-left .mod-menu .mod-menu__sub {
  margin-left: 30px;
}
/* Facebook boxes: Facebook's compact page header is about 70 px tall,
   so the frames are cut to that height instead of leaving an empty gap */
.container-sidebar-left iframe[src*="facebook.com/plugins/page.php"] {
  height: 72px;
  margin-bottom: 10px;
}

/* Content on the parchment: dark brown text, red underlined links */
.container-component {
  background: url("../images/regi/old-pap-text2.jpg");
  color: var(--plb-dark);
  padding: 0 10px 20px;
}
.container-component a {
  color: var(--plb-red);
  font-weight: bold;
  text-decoration: underline;
}
.container-component a:hover {
  color: var(--plb-dark);
}
/* Pictures, videos and long links never wider than the screen */
.container-component {
  overflow-wrap: break-word;
}
.container-component img,
.container-component iframe,
.container-component video {
  max-width: 100%;
}
.container-component img {
  height: auto;
}
.container-component h1,
.container-component h2,
.container-component h3,
.container-component h4,
.container-component h5,
.container-component h6 {
  color: var(--plb-dark);
  font-weight: normal;
  margin: 0;
  padding: 0.5em 0;
}
.container-component h1 { font-size: 34px; }
.container-component h2 { font-size: 30px; }
.container-component h3 { font-size: 26px; }
.container-component h4 { font-size: 20px; }
.container-component h5 { font-size: 16px; }
.container-component h6 { font-size: 14px; }
/* Article title on article pages: Joomla 5 uses h1 (h2 with a page heading); the old site
   showed it as a bold 30 px h2. Titles in blog lists stay normal weight, as before. */
.container-component .item-page .page-header h1,
.container-component .item-page .page-header h2,
.container-component .item-page h2 {
  font-size: 30px;
  font-weight: bold;
  padding-top: 10px;
}
/* No extra space above the content (Cassiopeia adds 1em between blocks) */
.site .container-component > * {
  margin-top: 0;
}
/* The old site had no space between paragraphs; articles use empty lines instead */
.container-component p {
  margin: 0;
}
.container-component p,
.container-component li {
  line-height: 1.4em;
}
/* Lists without bullets and indented 20 px, as on the old site */
.container-component ul,
.container-component ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container-component .item-page li {
  padding-left: 20px;
}

/* Article images float left, as on the old site */
.item-page img,
.category-desc img {
  float: left;
  margin: 0 10px 10px 0;
}
.item-page::after,
.category-desc::after,
.blog-item::after {
  content: "";
  display: block;
  clear: both;
}

/* Blog pages in one column, as on the old site: its template had no CSS for Joomla's
   2-column setting, so articles always appeared one below the other */
.site .blog-items[class*="columns-"] {
  grid-template-columns: 1fr;
}
.site .blog-items[class*="masonry-"] {
  column-count: 1;
}
.site .blog-items[class*="masonry-"] .blog-item {
  display: flex;
}

/* Tables */
.container-component table {
  width: 100%;
}
.container-component table th {
  background: var(--plb-cream);
  text-align: left;
  padding: 5px;
}
.container-component table td {
  padding: 5px;
  border-bottom: 1px solid #999;
}

/* Small article details (date, category), without the "Részletek" heading, as on the old site */
.container-component .article-info {
  font-size: 11px;
  color: var(--plb-dark);
}
.article-info-term {
  display: none;
}

/* Page numbers and previous/next */
.container-component .pagination .page-link,
.container-component .pagenavigation .btn {
  background: var(--plb-cream);
  border: 1px dotted var(--plb-border);
  border-radius: 0;
  color: var(--plb-dark);
  margin-right: 10px;
}
.container-component .pagination .active .page-link {
  background: var(--plb-button);
  color: #fff;
}

/* Footer text, if modules are ever added there */
.container-footer {
  color: #fff;
}
.container-footer a {
  color: var(--plb-gold);
}