/* ============================================================
   Brāļu draudze (bdm.lv) — static rebuild in the style of the
   original Joomla "allrounder-j1.6" template.
   Deep-red header, lamb emblem, 3-column layout, red pill boxes,
   textured reddish-brown background.
   ============================================================ */

:root{
  --red:#b11e1e;            /* signature deep red */
  --red-dark:#7d1111;
  --red-light:#cf3b2a;
  --maroon:#8e1b17;         /* tagline / breadcrumb text */
  --page-bg:#8a3a2c;        /* reddish-brown textured backdrop */
  --panel:#ffffff;          /* content + sidebar card white */
  --panel-edge:#d9cfc6;
  --ink:#2b2a27;
  --muted:#6b675f;
  --link:#8a2b22;
  --link-hover:#b11e1e;
  --list-line:#e7e0d7;
  --serif:Georgia,"Times New Roman","Noto Serif",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.6;
  /* reddish-brown textured background */
  background-color:var(--page-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'><path d='M0 20h80M0 40h80M0 60h80'/></g><g fill='rgba(255,255,255,0.02)'><circle cx='10' cy='10' r='1'/><circle cx='50' cy='30' r='1'/><circle cx='30' cy='55' r='1'/><circle cx='70' cy='70' r='1'/></g></svg>"),
    linear-gradient(180deg,#8a3a2c 0%,#7e3127 60%,#73291f 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}

.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:20}

/* -------- overall centered shell -------- */
.shell{max-width:1200px;margin:0 auto;padding:0 10px}

/* ============================================================
   HEADER — tall deep-red gradient banner with emblem + psalm
   ============================================================ */
header.site{
  margin-top:8px;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}
.banner{
  position:relative;
  min-height:160px;
  padding:18px 26px;
  display:flex;
  align-items:center;
  gap:26px;
  color:#fff;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #c42a22 0%, #b11e1e 45%, #981616 100%);
  border:1px solid #6d0f0f;
  border-bottom:0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25);
}
.banner .emblem{
  flex:0 0 auto;
  width:138px;height:138px;
}
.banner .emblem img{display:block;width:100%;height:100%}
.banner .psalm{
  font-style:italic;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.4;
  font-size:1.6rem;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.banner .psalm .ref{
  display:block;
  font-size:1.35rem;
  margin-top:.1em;
}

/* -------- tagline strip (maroon, right aligned) -------- */
.tagline-wrap{
  background:#f1ece6;
  border-left:1px solid var(--panel-edge);
  border-right:1px solid var(--panel-edge);
  padding:14px 26px 10px;
  text-align:right;
}
.tagline-wrap .tagline{
  color:var(--maroon);
  font-weight:700;
  font-size:1.35rem;
  line-height:1.2;
}
.tagline-wrap .url{
  display:block;
  color:var(--maroon);
  font-style:italic;
  font-weight:700;
  font-size:1.15rem;
  margin-top:.15em;
}

/* ============================================================
   MENU BAR — thin horizontal
   ============================================================ */
nav.menu{
  background:linear-gradient(180deg,#fbfbfb,#ececec);
  border:1px solid var(--panel-edge);
  border-top:1px solid #fff;
}
nav.menu ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;
}
nav.menu li{border-right:1px solid #ddd3c9}
nav.menu a{
  display:block;
  padding:10px 20px;
  color:#4a4a4a;
  font-size:.98rem;
  text-decoration:none;
}
nav.menu a:hover{background:#e3dbd1;color:#111;text-decoration:none}
nav.menu a[aria-current="page"]{
  background:#e3dbd1;color:#111;font-weight:700;
}

/* ============================================================
   THREE-COLUMN BODY
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 200px;
  gap:12px;
  padding:16px 0 24px;
  background:#efe9e2;
  border-left:1px solid var(--panel-edge);
  border-right:1px solid var(--panel-edge);
  border-bottom:1px solid var(--panel-edge);
}
.col{padding:0 10px}
.col-main{padding:0 6px}

/* -------- red "pill" section header boxes -------- */
.box{margin:0 0 20px}
.box-head{
  position:relative;
  background:linear-gradient(180deg,#c42a22,#a81a1a);
  color:#fff;
  font-weight:700;
  font-size:1.05rem;
  text-align:center;
  padding:9px 12px;
  border-radius:7px 7px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
/* little folded corner like the original */
.box-head::after{
  content:"";
  position:absolute;
  right:10px;bottom:-7px;
  border-width:7px 7px 0 0;
  border-style:solid;
  border-color:#7d1111 transparent transparent transparent;
}
.box-body{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-top:0;
  border-radius:0 0 7px 7px;
  padding:4px 14px 6px;
}
.box-body ul{margin:0;padding:0;list-style:none}
.box-body li{border-bottom:1px solid var(--list-line)}
.box-body li:last-child{border-bottom:0}
.box-body li a{
  display:block;
  padding:9px 2px;
  color:#333;
  font-size:.98rem;
}
.box-body li a:hover{color:var(--red);text-decoration:none}
.box-body .plain{
  padding:9px 0;
  margin:0 -6px;
  font-size:.76rem;  /* = the original module's 12.16px; lets the IBAN fit on one line */
  color:#333;
  line-height:1.5;
}
.box-body .plain strong{color:#222}

/* ============================================================
   CENTER CONTENT PANEL
   ============================================================ */
.content{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:7px;
  padding:14px 26px 30px;
  min-height:400px;
}
.breadcrumb{
  text-align:right;
  color:var(--maroon);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px dotted #c9b8b0;
  padding-bottom:6px;
  margin-bottom:14px;
}
.content h1.page-title,
.content .page-title{
  font-size:1.7rem;
  line-height:1.2;
  color:#333;
  margin:.2em 0 .5em;
  font-weight:700;
}
.content .page-title::before{
  content:"\201C";
  display:inline-block;
  color:var(--red);
  font-size:1.1em;
  margin-right:.15em;
  vertical-align:-.1em;
}
.content .lead{
  font-style:italic;
  color:var(--muted);
  font-size:1.02rem;
  margin:0 0 1.4em;
}
.content h2.group{
  font-size:1.3rem;
  color:var(--red);
  margin:1.8em 0 .5em;
  padding-bottom:.25em;
  border-bottom:2px solid #efe2d9;
}
.content article.entry{margin:1.2em 0 1.6em}
.content article.entry > h3{
  font-size:1.15rem;
  color:#3a2320;
  margin:1em 0 .4em;
}
.content article.entry h2{font-size:1.15rem;color:#3a2320;margin:1.1em 0 .4em}
.content article.entry h4{font-size:1.05rem;color:#3a2320;margin:1em 0 .3em}
.content p{margin:.7em 0}
.content blockquote{
  margin:1em 0;padding:.4em 1.1em;
  border-left:3px solid #efd9cf;color:var(--muted);
}
.content hr.rule{border:0;border-top:1px solid #e7ddd3;margin:1.8em 0}
.content em{color:#5a4038}

/* cards on the home page kept but reskinned to fit */
.content .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin:1.3em 0 1.6em;
}
.content .card{
  display:block;
  background:#fbf7f2;
  border:1px solid var(--panel-edge);
  border-radius:6px;
  padding:14px 16px;
  color:var(--ink);
}
.content .card:hover{
  border-color:var(--red);
  box-shadow:0 3px 10px rgba(120,40,30,.12);
  text-decoration:none;
}
.content .card h3{margin:0 0 .25em;color:var(--red);font-size:1.05rem}
.content .card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}

/* in-page table of contents */
.content .toc{
  background:#fbf7f2;
  border:1px solid var(--panel-edge);
  border-radius:6px;
  padding:12px 18px;margin:0 0 1.6em;
}
.content .toc strong{
  display:block;margin-bottom:.3em;color:var(--red);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
}
.content .toc ul{margin:0;padding-left:1.1em}
.content .toc li{margin:.15em 0}

.content .img-missing{
  color:var(--muted);font-style:italic;font-size:.88rem;
  background:#f3e9e3;border-radius:5px;padding:.5em .8em;margin:1em 0;
  text-align:center;
}
.content .file-missing{color:var(--muted);font-style:italic}

/* ============================================================
   CONTENT IMAGES — framed figures matching the original site
   (the old bdm.lv framed its feature images with a thin border)
   ============================================================ */
.content figure.figure{
  margin:1.3em auto 1.5em;
  max-width:100%;
  text-align:center;
}
.content figure.figure img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  /* thin bevelled frame like the original */
  padding:5px;
  background:#fff;
  border:1px solid #cdbfb4;
  box-shadow:0 1px 4px rgba(90,40,30,.18);
  border-radius:2px;
}
.content figure.figure figcaption{
  margin-top:.5em;
  color:var(--muted);
  font-style:italic;
  font-size:.9rem;
  line-height:1.4;
}
/* feature image — centred, a touch larger (home painting, portraits) */
.content figure.figure.feature img{max-width:min(460px,100%)}
/* book covers sit a little smaller */
.content figure.figure.cover img{max-width:min(300px,100%)}
/* float a figure beside text on wide screens */
.content figure.figure.right{
  float:right;clear:right;
  max-width:300px;
  margin:.3em 0 1em 1.4em;
}
.content figure.figure.left{
  float:left;clear:left;
  max-width:300px;
  margin:.3em 1.4em 1em 0;
}
@media (max-width:560px){
  .content figure.figure.right,
  .content figure.figure.left{
    float:none;max-width:100%;margin:1.3em auto 1.5em;
  }
  .content figure.figure.feature img{max-width:100%}
}

/* long unbreakable strings (IBAN, "______" form lines, URLs) must wrap,
   never widen the page */
.content,.box-body{overflow-wrap:anywhere}

/* simple static photo gallery (replaces the old Joomla vsig plugin) */
.content .gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  margin:1.3em 0 1.5em;
}
.content .gallery a{display:block}
.content .gallery img{
  display:block;width:100%;height:auto;
  padding:4px;background:#fff;
  border:1px solid #cdbfb4;
  box-shadow:0 1px 4px rgba(90,40,30,.18);
  border-radius:2px;
}

/* embedded external page (old Joomla "wrapper" menu item) */
.content iframe.wrapper{display:block;width:100%;height:500px;border:0;margin:.5em 0 1em}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  background:linear-gradient(180deg,#4a4a4a,#2e2e2e);
  color:#d8d2c8;
  border-radius:0 0 8px 8px;
  margin-bottom:22px;
  border:1px solid #222;
}
.foot{
  max-width:1200px;margin:0 auto;
  padding:16px 26px;
  font-size:.85rem;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.foot a{color:#f0d8c8}
.foot .top{color:#bbb}

/* ============================================================
   RESPONSIVE — collapse to single column
   ============================================================ */
@media (max-width:900px){
  .layout{
    grid-template-columns:minmax(0,1fr);
  }
  /* center content first, then sidebars below */
  .col-main{order:-1}
  .content{min-height:0}
  .banner{min-height:0;flex-wrap:wrap;gap:16px;padding:16px}
  .banner .psalm{font-size:1.3rem}
  .banner .psalm .ref{font-size:1.1rem}
}
@media (max-width:560px){
  body{font-size:15px}
  .banner .emblem{width:96px;height:96px}
  .banner .psalm{font-size:1.1rem}
  .banner .psalm .ref{font-size:1rem}
  .tagline-wrap{text-align:center}
  .tagline-wrap .tagline{font-size:1.1rem}
  .tagline-wrap .url{font-size:.95rem}
  nav.menu a{padding:10px 14px}
  .content{padding:12px 16px 24px}
  .content .page-title{font-size:1.4rem}
  .foot{justify-content:center;text-align:center}
}