/* Křesťanské společenství Jičín — faithful to wt_churchy (Warp) "blue" style.
   Header/menu blue #3699d0, dark top bar & footer #1a1a1a, original texture tiles. */

/* UI-tuning: unified modern typeface (Inter, variable) across the whole site.
   Self-hosted woff2; latin + latin-ext so Czech diacritics render in Inter too. */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --blue:#3699d0; --blue-d:#2d8bbf; --blue-dd:#236d95;
  --heading:#283642;   /* unified heading color, harmonised with body text */
  --dark:#1a1a1a; --dark2:#222;
  --ink:#444; --muted:#888; --line:#e2e2e2; --bg:#fafafa; --paper:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Always reserve the vertical scrollbar so short and tall pages stay centered
   (no horizontal shift of the fixed background when switching pages). */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
  font:400 16px/1.65 var(--font);
  color:#394150;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:#dfe7ec url('../img/back/back_image_3_sky.jpg') no-repeat top center fixed;
  background-size:cover;   /* sky+wheat crop, always fills the page (no gaps zoomed out) */
}
a{color:var(--blue-dd);text-decoration:none}
a:hover{color:var(--blue);text-decoration:underline}
img{max-width:100%;height:auto}

.container{max-width:1000px;margin:0 auto;padding:0 16px}

/* ---- Centered page column on the photographic background (like live) ---- */
.page{max-width:980px;margin:0 auto;box-shadow:0 0 30px rgba(0,0,0,.22)}
@media(max-width:1010px){.page{max-width:100%;box-shadow:none}}

/* ---- Header band (blue) with logo left + icons right ---- */
.topbar{background:#3699d0 url('../img/style/logo_back.png') repeat;
  display:flex;align-items:center;justify-content:space-between;
  min-height:104px;padding:10px 26px}
.brand img{display:block;max-height:76px}
.topicons{display:flex;align-items:center;gap:12px}
.topicons a{display:inline-flex;align-items:center}
.topicons img{max-height:46px;width:auto}
.topicons .fb{background:#3b5998;border-radius:4px;padding:6px;line-height:0}

/* ---- Menu bar (blue texture) ---- */
nav.main{background:#3699d0 url('../img/style/menu_back.png') repeat-x;border-top:1px solid rgba(255,255,255,.25);box-shadow:inset 0 -2px 4px rgba(0,0,0,.15);padding:0 14px}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav.main a{
  display:block;color:#fff;padding:15px 20px;font-family:var(--font);
  font-size:17px;font-weight:500;letter-spacing:.2px;line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.25)
}
nav.main a:hover,nav.main a.active{background:rgba(0,0,0,.18);text-decoration:none}

/* ---- Mobile carousel menu (shown only on small screens) ---- */
.mnav{display:none;position:relative;background:#3699d0 url('../img/style/menu_back.png') repeat-x}
/* Arrows overlay the strip (no layout reflow when toggled) and fade gracefully. */
.mnav-arw{position:absolute;top:0;bottom:0;width:52px;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:3;
  display:flex;align-items:center;padding:0 10px;opacity:1;transition:opacity .28s ease}
.mnav-arw.l{left:0;justify-content:flex-start;background:linear-gradient(90deg,#2f8cc4 58%,rgba(47,140,196,0))}
.mnav-arw.r{right:0;justify-content:flex-end;background:linear-gradient(270deg,#2f8cc4 58%,rgba(47,140,196,0))}
.mnav-arw.is-hidden{opacity:0;pointer-events:none}
.mnav-strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mnav-strip::-webkit-scrollbar{display:none}
.mnav-strip a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center;color:#fff;font-family:var(--font);
  font-size:17px;font-weight:500;padding:15px 18px;text-decoration:none;border-right:1px solid rgba(255,255,255,.15);
  text-shadow:0 1px 1px rgba(0,0,0,.25);background:rgba(0,0,0,.20);box-shadow:inset 0 -3px 0 #fff}
.mnav-strip a.active{background:none;box-shadow:none}

/* ---- Layout: single white panel holding content + sidebar (like live) ---- */
.layout{display:flex;gap:34px;align-items:flex-start;
  background:var(--paper);padding:30px 34px}
main.content{flex:1 1 auto;min-width:0}
aside.sidebar{flex:0 0 250px;width:250px}
@media(max-width:820px){
  .layout{flex-direction:column;padding:22px 20px;gap:24px}
  aside.sidebar{width:100%;flex-basis:auto}
  .topbar{padding:10px 18px}
  .brand img{max-height:60px}
  .topicons img{max-height:38px}
  .topicons .fb svg{width:20px;height:20px}
  nav.main{display:none}        /* desktop menu hidden on mobile */
  .mnav{display:block}          /* carousel menu shown on mobile */
}
@media(max-width:430px){
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .brand img{max-height:52px}
  .layout{padding:18px 16px}
  .content h1{font-size:24px}
}

/* ---- Headings / content ---- */
h1,h2,h3,h4,h5{font-family:var(--font);font-weight:600;color:var(--heading);line-height:1.25;letter-spacing:-.01em;overflow-wrap:break-word;word-break:break-word}

/* Keep embedded media (maps, videos, images) within the column on small screens
   so they can't force horizontal overflow and "cut off" headings. */
.content,.content .body{overflow-wrap:break-word}
.content img,.content iframe,.content video,.content embed,.content object{max-width:100%}
.content iframe{width:100%;border:0;aspect-ratio:16/9;height:auto}
.content table{max-width:100%}
.content h1{font-size:27px;font-weight:700;margin:.1em 0 .6em;color:var(--heading)}
.content h2{font-size:23px;border-bottom:1px solid var(--line);padding-bottom:7px;margin-top:1.3em;color:var(--heading)}
.content h3{font-size:19px;color:var(--heading)}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
hr.dotted{border-top:1px dotted #bbb}
.page-title{margin-top:0}
.content .body a{color:var(--blue-d)}

/* ---- Person card (e.g. kazatel on Kdo jsme) ---- */
.person{display:flex;align-items:center;gap:22px;margin:16px 0;
  border:1px solid var(--line);border-radius:8px;padding:16px 20px;background:#fafcfe}
.person img{flex:0 0 auto;width:150px;height:auto;border-radius:6px;display:block}
.person .who .role{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7a8794}
.person .who .name{font-size:21px;font-weight:600;color:var(--heading);margin-top:2px}
@media(max-width:430px){.person{flex-direction:column;text-align:center;gap:12px}}

/* ---- Sermon list ---- */
.sermon{border-bottom:1px solid var(--line);padding:16px 0}
.sermon:last-child{border-bottom:none}
.sermon .meta{color:#5b6573;font-size:15px;font-weight:500;margin-bottom:5px}
.sermon h3{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--heading)}
.sermon h3 .speaker{color:var(--muted);font-size:14px;font-weight:400}
.sermon audio{width:100%;margin:6px 0 8px;height:38px}
.sermon .dl{display:inline-block;font-size:15px;padding:8px 0}
.sermon .dl:before{content:"⬇ "}

/* ---- News ---- */
.news-item{border-bottom:1px solid var(--line);padding:14px 0}
.news-item:last-child{border-bottom:none}
.news-item .date{color:#5b6573;font-size:15px;font-weight:500}
.news-item h2{border:none;margin:.2em 0;font-size:21px}
.excerpt{color:#555}

/* ---- Pagination ---- */
.pager{display:flex;gap:8px;justify-content:center;margin:24px 0 6px;flex-wrap:wrap}
.pager a,.pager span{padding:10px 15px;min-width:44px;text-align:center;border:1px solid var(--line);background:#fff;border-radius:3px}
.pager .cur{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---- Sidebar widgets (text heading + blue underline, like live) ---- */
.widget{background:none;border:none;margin-bottom:26px}
.widget h4{margin:0 0 14px;color:var(--heading);font-size:17px;font-weight:600;padding:0 0 8px;
  border-bottom:2px solid var(--blue);text-transform:none;letter-spacing:0}
.widget .body{padding:0;font-weight:600}   /* bold sidebar text, site-wide */
.widget .body img{border-radius:2px}
.widget .service-time{font-size:19px;font-weight:600;color:var(--heading);margin:0 0 4px;font-family:var(--font)}
.widget .service-place{color:#5b6573;font-size:15px;line-height:1.5;margin:0 0 12px}
.widget .recent{list-style:none;margin:0;padding:0}
.widget .recent li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.widget .recent li:last-child{border-bottom:none}
.widget .recent .d{color:#6b7480;display:block;font-size:14px;margin-top:2px}

/* ---- Footer ---- */
footer.site{background:#1a1a1a url('../img/style/footer_back.png') repeat;color:#b9b9b9;padding:26px 34px;font-size:14px}
footer.site a{color:#7fc3e8}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap}
footer.site h5{color:#fff;margin:0 0 12px;font-size:16px;font-weight:600;padding-bottom:8px;border-bottom:2px solid var(--blue)}
footer.site .copyright{margin-top:18px;color:#7a7a7a;font-size:12px}

/* ---- Forms / admin ---- */
.btn{display:inline-block;background:var(--blue);color:#fff;border:none;padding:9px 18px;border-radius:3px;cursor:pointer;font-size:15px}
.btn:hover{background:var(--blue-d);color:#fff;text-decoration:none}
.btn.sec{background:#777}.btn.sec:hover{background:#555}
.btn.danger{background:#a33}.btn.danger:hover{background:#822}
.adminbar{background:#1a1a1a;color:#fff;padding:8px 0;font-size:14px}
.adminbar a{color:#7fc3e8;margin-right:14px}
.form-row{margin:0 0 14px}
.form-row label{display:block;font-weight:bold;margin-bottom:4px;color:#444}
.form-row input[type=text],.form-row input[type=date],.form-row input[type=password],
.form-row input[type=file],.form-row textarea,.form-row select{
  width:100%;padding:9px;border:1px solid #ccc;border-radius:3px;font:inherit
}
.form-row textarea{min-height:240px;font-family:monospace;font-size:13px}
table.admin{width:100%;border-collapse:collapse}
table.admin th,table.admin td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.admin th{background:#eef6fc}
.flash{padding:11px 15px;border-radius:3px;margin-bottom:16px}
.flash.ok{background:#e1f0fa;border:1px solid #9ccae8;color:#1c5476}
.flash.err{background:#f6dede;border:1px solid #e0a9a9;color:#7a2222}
.muted{color:var(--muted)}

/* ---------------- Pro členy (members section) ---------------- */
.m-userbar{font-size:14px;color:var(--muted);margin:0 0 14px}
.m-userbar .m-role{color:var(--blue-dd)}
.m-admintools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:#f3f8fc;border:1px solid #d7e7f3;border-radius:5px;padding:12px 14px;margin:0 0 22px}
.m-admintools-label{font-weight:600;color:var(--heading);margin-right:4px}
.m-section{font-size:20px;margin:6px 0 12px}

.m-list{list-style:none;margin:0;padding:0}
.m-list li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding:12px 0}
.m-item-main{display:flex;flex-direction:column;min-width:0}
.m-title{font-size:17px;font-weight:600}
.m-upd{font-size:13px;color:var(--muted)}
.m-row-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.m-row-tools form{display:inline;margin:0}
.m-row-tools button{background:#eef2f5;border:1px solid #cfd9e1;border-radius:3px;
  padding:3px 9px;cursor:pointer;font-size:14px;color:#445}
.m-row-tools button:hover:not([disabled]){background:#e0e8ee}
.m-row-tools button[disabled]{opacity:.4;cursor:default}
.m-row-tools .m-del{color:#a33;border-color:#e0bcbc;background:#fbf0f0}
.m-back{margin-top:24px}

/* member article body */
.m-article table.m-table{border-collapse:collapse;width:100%;margin:1.1em 0}
.m-article table.m-table td,.m-article table.m-table th{border:1px solid #cdd7df;padding:7px 11px;text-align:left}
.m-article table.m-table th{background:#eef6fc;color:var(--heading)}

/* admin form box */
.m-box{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:18px;margin-bottom:24px}

/* block editor */
.m-blocks{margin:6px 0}
.m-block{position:relative;border:1px solid #dbe3ea;border-radius:6px;
  padding:14px 14px 12px;margin:12px 0;background:#fafcfe}
.m-ctrls{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.m-ctrls button{background:#eef2f5;border:1px solid #cfd9e1;border-radius:3px;
  width:26px;height:26px;line-height:1;cursor:pointer;color:#556;font-size:14px}
.m-ctrls button:hover{background:#e0e8ee}
.m-block .m-h-text,.m-block .m-t-text{width:100%;box-sizing:border-box;margin-top:8px;
  border:1px solid #cfd9e1;border-radius:4px;padding:8px 10px;font-family:var(--font);font-size:15px}
.m-block .m-h-text{font-weight:600}
.m-block .m-t-text{font-family:var(--font);min-height:180px;max-width:100%;resize:vertical}
.m-block .m-h-level{padding:5px 8px;border:1px solid #cfd9e1;border-radius:4px}
.m-th{display:block;margin:4px 0 10px;font-size:14px;color:#556}
.m-tbl-wrap{overflow-x:auto}
.m-tbl-edit{border-collapse:collapse}
.m-tbl-edit td{border:1px solid #cdd7df;padding:0}
.m-tbl-edit input{border:0;padding:7px 9px;width:130px;font-family:var(--font);font-size:14px;background:transparent}
.m-tbl-edit input:focus{outline:2px solid var(--blue);outline-offset:-2px}
.m-tbl-tools{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.m-tbl-tools button{background:#eef2f5;border:1px solid #cfd9e1;border-radius:3px;
  padding:4px 10px;cursor:pointer;font-size:13px;color:#445}
.m-tbl-tools button:hover{background:#e0e8ee}
.m-addbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.m-addbar button{background:#eaf4fb;border:1px solid #bcdcf0;color:var(--blue-dd);
  border-radius:4px;padding:7px 14px;cursor:pointer;font-size:14px;font-weight:600}
.m-addbar button:hover{background:#dcecf8}

/* ---------------- Sermon audio player ---------------- */
.audioplayer{margin:6px 0 4px}
.audioplayer audio{width:100%}            /* native fallback (no JS) */
.ap-ui{display:flex;align-items:center;gap:12px;background:#f3f8fc;border:1px solid #d7e7f3;
  border-radius:6px;padding:8px 12px}
.ap-play{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  background:var(--blue);position:relative}
.ap-play:hover{background:var(--blue-d)}
.ap-play::before{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.is-playing .ap-play::before{border:none;width:11px;height:12px;left:50%;
  border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
.ap-bar{flex:1 1 auto;position:relative;height:7px;border-radius:4px;background:#cfe0ee;cursor:pointer}
.ap-bar:focus{outline:2px solid var(--blue);outline-offset:3px}
.ap-buf{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:#bcd3e6;width:0}
.ap-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--blue);width:0}
.ap-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid var(--blue);transform:translate(-50%,-50%);left:0;pointer-events:none}
.ap-time{flex:0 0 auto;font-size:13px;color:var(--heading);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (max-width:560px){
  .ap-ui{gap:9px;padding:7px 10px}
  .ap-play{width:34px;height:34px}
  .ap-time{font-size:12px}
}