/* =============================================================================
   main.css — Awesome theme (Křesťané Praha)
   Converted from SCSS sources. No build pipeline required.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   base/_base.scss
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; border-radius: 2px; }

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

html { font-size: 62.5%; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; object-fit: contain; display: block; }
audio { width: 100%; max-width: 30rem; }

.toolbar .toolbar-icon::before { width: 2rem; }
.toolbar .toolbar-icon { font-size: 1.3rem; margin: 0; }

@media only screen and (min-width: 36em) {
  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before { width: 2rem; }
}

.toolbar .toolbar-toggle-orientation button { width: 3.9rem; height: 3.9rem; }

.dialog-off-canvas-main-canvas { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; }
.toolbar-horizontal .dialog-off-canvas-main-canvas,
.toolbar-vertical .dialog-off-canvas-main-canvas { min-height: calc(100vh - 39px); }
.toolbar-horizontal.toolbar-tray-open .dialog-off-canvas-main-canvas { min-height: calc(100vh - 79px); }

.back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(0, 48, 95, 0.75); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .15s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: #00305f; }

/* Feed icon — orange RSS dot + label, only color changes on hover. */
a.feed-icon { display: inline-flex; align-items: center; gap: .5rem; color: #f0a500; line-height: 1.2; font-size: 1.4rem; font-weight: 600; }
a.feed-icon:hover { color: #c97f00; }
a.feed-icon:visited { color: #f0a500; }
a.feed-icon svg { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
a.feed-icon .feed-icon__label { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
   base/_text.scss
   --------------------------------------------------------------------------- */

body { font-family: 'Helvetica neue', Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 16px; color: #000; }

h1 { font-size: 1.9em; color: #000; margin: 0 0 1.5rem 0; font-weight: 500; line-height: 1.2; }
h2 { font-size: 1.5em; font-weight: 500; margin: 20px 0 10px 0; }
h3 { font-size: 1.4em; font-weight: 400; margin: 0 0 10px 0; }
p { font-size: 16px; color: #000; margin: 0 0 15px; }
ul { padding: 0; list-style-type: none; }

.text-formatted ul,
.field--type-text-long ul,
.field--type-text-with-summary ul,
.body-text ul { list-style-type: disc; padding-left: 2em; margin-bottom: 1em; }

.text-formatted ul li,
.field--type-text-long ul li,
.field--type-text-with-summary ul li,
.body-text ul li { margin-bottom: .25em; }

.text-formatted ol,
.field--type-text-long ol,
.field--type-text-with-summary ol,
.body-text ol { list-style-type: decimal; padding-left: 2em; margin-bottom: 1em; }

.text-formatted ol li,
.field--type-text-long ol li,
.field--type-text-with-summary ol li,
.body-text ol li { margin-bottom: .25em; }

a { text-decoration: none; color: #00305f; transition: opacity .15s, color .15s, background .15s; }
a:visited { color: inherit; }
a:hover,
a:focus-visible { color: #005fcc; }
/* Buttons / styled chrome handle their own hover, suppress the generic one. */
.read-more-btn:hover,
.header-nav > .main-menu__li > a:hover,
.blog-archive__year-btn:hover,
.blog-archive__month-btn:hover,
.sidebar-menu__item a:hover { color: #00305f; }
.back-to-top:hover { color: #fff; }

@media only screen and (max-width: 850px) { h1 { font-size: 1.6em; } }
.block-page-title-block h1 { font-size: 1.9em; margin: 0 0 1.5rem; font-weight: 500; }

.viewsreference--view-title { font-size: 1.5em; font-weight: 500; margin: 20px 0 10px 0; }
.izaacs-field-menu ul li { font-size: 1.2em; margin-bottom: 5px; }
.blog-article .title p { font-style: italic; margin: 12px 0 30px 0; }

/* ---------------------------------------------------------------------------
   component/_announcement-banner.scss
   --------------------------------------------------------------------------- */

.announcement-banner { background: #fff3cd; border-top: 2px solid #f0a500; border-bottom: 2px solid #f0a500; padding: 1rem 1.5rem; margin-bottom: 2rem; }
.announcement-banner__inner { display: flex; align-items: flex-start; justify-content: center; gap: 1rem; }
.announcement-banner .views-row { width: 100%; text-align: center; }
/* Region below header — full viewport width by default; blocks placed
   here can constrain themselves further if needed. */
.below-header { width: 100%; }
.below-header > * + * { margin-top: 1rem; }
.hero-above-layout { margin-bottom: 2rem; }
.hero-above-layout .myslider,
.hero-above-layout > .main-container { max-width: none; padding: 0; margin: 0; }
.announcement-banner .views-field-title { font-size: 1.8rem; font-weight: 700; color: #7a4f00; margin-bottom: .3rem; }
.announcement-banner .views-field-body { font-size: 1.5rem; color: #5a3a00; }

/* ---------------------------------------------------------------------------
   component/_latest-videos.scss
   --------------------------------------------------------------------------- */

/* Shared "card" framing for the main content blocks (page body, view
   listings) — soft border + layered shadow so each block reads as a
   contained surface. Page title and the announcement banner keep their
   own specific styling and are excluded. */
.page-layout__content > #block-awesome-content,
.page-layout__content > [id^="block-awesome-views-block-"] { border: 1px solid #e6e6e6; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); padding: 2rem 2.5rem; background: #fff; margin-bottom: 2rem; width: 100%; box-sizing: border-box; }

/* Video block on the homepage uses Drupal's responsive-grid Views style. */
#block-awesome-views-block-video-sermon-block-2 { width: 100%; }
#block-awesome-views-block-video-sermon-block-2 .content-grid { display: block; }
#block-awesome-views-block-video-sermon-block-2 .views-view-responsive-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem !important; }
#block-awesome-views-block-video-sermon-block-2 .views-view-responsive-grid__item,
#block-awesome-views-block-video-sermon-block-2 .views-view-responsive-grid__item-inner { width: 100%; min-width: 0; }
#block-awesome-views-block-video-sermon-block-2 .video-item { width: 100%; }
#block-awesome-views-block-video-sermon-block-2 .video-item .video .field--type-oembed,
#block-awesome-views-block-video-sermon-block-2 .video-item .video .field--name-field-video,
#block-awesome-views-block-video-sermon-block-2 .video-item .video > div { width: 100%; }
#block-awesome-views-block-video-sermon-block-2 .video-item .video iframe { display: block; width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; min-height: unset; max-width: none; border: none; }
#block-awesome-views-block-video-sermon-block-2 .video-item .headline { margin: 1rem 0 0; font-weight: 600; font-size: 1.6rem; }
/* Legacy class-based fallback (kept in case other places still use it). */
.latest-videos-block .view-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.latest-videos-block .video-item .video iframe { display: block; width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; border: none; }

@media only screen and (max-width: 600px) {
  #block-awesome-views-block-video-sermon-block-2 .views-view-responsive-grid { grid-template-columns: 1fr !important; }
  .latest-videos-block .view-content { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   component/_audio-kazani-exposed-form.scss
   component/_audio-view.scss
   component/_bible-view.scss
   component/_resources-view.scss
   Shared exposed form filter styles (merged)
   --------------------------------------------------------------------------- */

.audio-kazani-exposed-form,
.audio-view .views-exposed-form,
.view-bible .views-exposed-form,
.resources-view .views-exposed-form { gap: 2rem; display: flex; flex-wrap: wrap; margin-bottom: 4rem; }

.audio-kazani-exposed-form > div,
.audio-view .views-exposed-form > div,
.view-bible .views-exposed-form > div,
.resources-view .views-exposed-form > div { display: grid; }

.audio-kazani-exposed-form #edit-actions,
.audio-view #edit-actions,
.view-bible #edit-actions,
.resources-view #edit-actions { display: block; margin-top: 3rem; }

.audio-kazani-exposed-form #edit-actions input,
.audio-view #edit-actions input,
.view-bible #edit-actions input,
.resources-view #edit-actions input { background: url('../images/button.png') repeat-x left top transparent; border: 1px solid #ccc; cursor: pointer; margin: 0 5px 0 0; padding: 5px 11px; border-radius: 6px; font-size: 1em; font-family: Arial, Helvetica, sans-serif; }

/* bible-view extra table styles */
.view-bible table { border-collapse: collapse; }
.view-bible table tbody tr:nth-child(odd) { background-color: #f5f5f5; }
.view-bible table tbody tr { border-right: 1px solid #eee; }
.view-bible table tbody tr td { padding: 1rem; }
.view-bible table tbody tr .views-field-field-sermon-outline a { display: flex; align-items: center; gap: 1rem; }
.view-bible table tbody tr .views-field-field-sermon-outline a::before { content: ""; background-image: url('../images/application-pdf.png'); display: block; width: 2rem; height: 2rem; background-repeat: no-repeat; }

/* ---------------------------------------------------------------------------
   component/_blog-article.scss
   --------------------------------------------------------------------------- */

.blog-article h2 a { font-size: 2.8rem; }
.blog-article .outline { display: flex; gap: 1.5rem; align-items: center; position: relative; margin-left: 2rem; }
.blog-article .outline::before { content: ""; display: block; background-image: url('../images/application-pdf.png'); width: 2rem; height: 2rem; background-repeat: no-repeat; left: -2rem; position: absolute; }
.blog-article .video iframe { width: 100%; min-height: 50rem; }
.blog-article .body-text .izzacs-field-tesser-image { margin-left: 0; float: left; }
.blog-article-teaser4 img { float: right; margin: 0 0 1rem 2rem; }

/* ---------------------------------------------------------------------------
   component/_breadcrumb.scss
   --------------------------------------------------------------------------- */

/* Inline breadcrumb (block-awesome-breadcrumb) — Drupal core wraps the
   trail in a plain <ol>; render as a horizontal list with » separators. */
#block-awesome-breadcrumb { font-size: 1.4rem; color: #666; margin-bottom: 1rem; }
#block-awesome-breadcrumb nav { display: block; }
#block-awesome-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
#block-awesome-breadcrumb li { list-style: none; padding: 0; margin: 0; }
#block-awesome-breadcrumb li:not(:last-child)::after { content: "»"; margin-left: .4rem; color: #999; }
#block-awesome-breadcrumb a { color: #00305f; text-decoration: none; }
#block-awesome-breadcrumb a:hover { text-decoration: underline; }
/* Legacy in-content breadcrumb (rendered inside templates as
   <div class="breadcrumb">) — same inline treatment. */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb ol li { list-style: none; }
.breadcrumb ol li:not(:last-child)::after { content: "»"; margin-left: .4rem; }

/* ---------------------------------------------------------------------------
   component/_contact.scss
   --------------------------------------------------------------------------- */

.contact { padding: .5rem 3rem; }
.contact .two-col-text { gap: 22rem; border-top: 1px solid #000; display: flex; padding-top: 2rem; margin-bottom: 5rem; }
.contact .map { margin-bottom: 5rem; }

@media only screen and (max-width: 800px) {
  .contact { padding: .5rem 1rem; }
  .contact .two-col-text { flex-flow: column; gap: 2rem; }
}

/* ---------------------------------------------------------------------------
   component/_double-line-text.scss
   --------------------------------------------------------------------------- */

.double-line-text,
#block-awesome-hp-announcement { display: flex; align-items: center; justify-content: center; text-align: center; border-top: 4px double #000; border-bottom: 4px double #000; padding: 1.2rem 2rem; margin-top: 4rem; margin-bottom: 4rem; }
.double-line-text p,
#block-awesome-hp-announcement p { margin: 10px 0; }

/* ---------------------------------------------------------------------------
   component/_double-line-wysiwyg.scss
   --------------------------------------------------------------------------- */

.formatted-text-long hr::before,
.side-links hr::before { content: ""; height: 1px; display: block; margin: auto; border-bottom: 1px solid #000; border-top: 1px solid #000; margin-bottom: 1rem; }

/* ---------------------------------------------------------------------------
   component/_formatted-text-long.scss
   --------------------------------------------------------------------------- */

.formatted-text-long table tbody tr td { border-bottom: none; margin: 0; padding: 5px 7px; text-align: left; vertical-align: middle; }

/* ---------------------------------------------------------------------------
   component/_header.scss
   --------------------------------------------------------------------------- */

header { position: relative; }
.header-section { position: relative; }
.header-logo { display: flex; align-items: center; gap: 1.5rem; padding: 3.5rem 0 3rem; }
.header-logo .home-logo img { max-width: 70px; height: auto; }
/* Site name: identical look on front (h1) and subpages (p.site-name). */
.header-logo .header_text h1,
.header-logo .header_text .site-name { margin: 0 0 5px; font-size: 5.4rem; font-weight: 700; line-height: 1.1; color: #00305f; }
.header-logo .header_text h1 a,
.header-logo .header_text .site-name a,
.header-logo .header_text h1 a:visited,
.header-logo .header_text .site-name a:visited,
.header-logo .header_text h1 a:hover,
.header-logo .header_text .site-name a:hover,
.header-logo .header_text h1 a:active,
.header-logo .header_text .site-name a:active { text-decoration: none; color: #00305f; }
.header-logo .header_text h2,
.header-logo .header_text .site-slogan { margin: 0 0 0 3px; font-size: 2rem; font-weight: 400; line-height: 1.4; color: #00305f; }
/* Sticky to viewport — `position: fixed` (sticky inside the deep header
   tree never reached the viewport scroll context). The strip itself spans
   full width; the inner row is centred with the same max-width as
   .main-container so menu items don't fly off to the edges. */
.header__navigation { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.header__navigation-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 2rem; max-width: 128rem; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; }
.header__navigation .header-nav { flex: 1 1 auto; }
.header__navigation .header-search { flex: 0 0 auto; align-self: center; margin-top: 0; }
/* Compensate for the now-removed-from-flow nav strip + any admin toolbar
   above it. --admin-toolbar-offset is measured live by awesome.js
   (Drupal.behaviors.awesomeAdminToolbarOffset). Static fallback values
   keep the layout reasonable before JS runs. */
body { padding-top: calc(var(--site-nav-height, 8.4rem) + var(--admin-toolbar-offset, 0px)); }
.header__navigation { top: var(--admin-toolbar-offset, 0px); }

/* Pre-JS fallback for known body classes (otherwise nav flashes under the
   admin bar before JS measures the real offset). */
body.toolbar-horizontal,
body.gin--horizontal-toolbar { --admin-toolbar-offset: 60px; }
body.toolbar-horizontal.toolbar-tray-open { --admin-toolbar-offset: 100px; }
body.toolbar-vertical,
body.gin--vertical-toolbar { --admin-toolbar-offset: 39px; }

@media only screen and (max-width: 850px) {
  .header-logo { padding-right: 5rem; }
  .header-logo .home-logo img { max-width: 55px; }
  .header-logo .header_text h1,
  .header-logo .header_text .site-name { font-size: 3.4rem; }
  .header-logo .header_text h2,
  .header-logo .header_text .site-slogan { font-size: 1.4rem; }
  .header__navigation { flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; }
  .header__navigation .header-search { padding: 1rem 1.5rem; border-bottom: 1px solid #b7d5f3; background: #d9ecff; }
}

/* ---------------------------------------------------------------------------
   component/_izzacs-field-view.scss
   (removed .izzacs-view grid — template no longer uses the class)
   --------------------------------------------------------------------------- */

/* Sidebar nav lists — blog-archive accordion (year → month → article) and
   odkazy (flat external link list). Same colour palette as the main menu. */
.blog-archive,
.sidebar-menu { font-size: 1.5rem; margin: 0; padding: 0; list-style: none; }
.blog-archive__year,
.blog-archive__month,
.sidebar-menu__item { display: block; list-style: none; }

/* Year + month buttons + flat sidebar-menu links share a row look. */
.blog-archive__year-btn,
.blog-archive__month-btn,
.sidebar-menu__item a { display: flex; align-items: center; gap: .4rem; width: 100%; padding: 1rem 1.4rem; background: #d9ecff; border: 1px solid #b7d5f3; border-bottom: none; color: #00305f; text-decoration: none; font-weight: 600; font-size: 1.5rem; line-height: 1.2; box-sizing: border-box; cursor: pointer; text-align: left; }
.sidebar-menu__item:last-child a,
.blog-archive > .blog-archive__year:last-child > .blog-archive__year-btn { border-bottom: 1px solid #b7d5f3; }
.blog-archive__year-btn:hover,
.blog-archive__month-btn:hover,
.sidebar-menu__item a:hover { background: #b5d8fa; }
.sidebar-menu__item a:visited { color: #00305f; }
.blog-archive__year.is-active > .blog-archive__year-btn { background: #9fcbf5; }
.blog-archive__count { color: #5a7da6; font-size: 0.85em; margin-left: auto; font-weight: 400; }

/* Chevron rotates when expanded. */
.blog-archive__chevron { width: 0; height: 0; margin-left: .4rem; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .15s; flex-shrink: 0; }
.blog-archive__year-btn[aria-expanded="true"] .blog-archive__chevron,
.blog-archive__month-btn[aria-expanded="true"] .blog-archive__chevron { transform: rotate(180deg); }

/* Months indented inside a year. */
.blog-archive__months { padding: 0; margin: 0; background: #f4f9ff; border: 1px solid #b7d5f3; border-top: none; }
.blog-archive__year:last-child > .blog-archive__months { border-bottom: 1px solid #b7d5f3; }
.blog-archive__month-btn { padding-left: 2.4rem; background: transparent; border: none; border-top: 1px solid #d6e6f4; border-bottom: none; font-size: 1.4rem; font-weight: 500; }
.blog-archive__month:first-child .blog-archive__month-btn { border-top: none; }

/* Articles — plain list inside an open month. */
.blog-archive__articles { list-style: none; margin: 0; padding: .4rem 0 .6rem; background: #fafcff; border-top: 1px solid #d6e6f4; }
.blog-archive__article { padding: 0; margin: 0; }
.blog-archive__article a { display: block; padding: .35rem 1.4rem .35rem 3.2rem; color: #00305f; text-decoration: none; font-size: 1.3rem; line-height: 1.35; font-weight: 400; }
.blog-archive__article a:hover { background: #eaf4ff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   component/_latest-sermon-item.scss
   --------------------------------------------------------------------------- */

.latest-sermon--item a { font-size: 1.9rem; display: block; margin-bottom: 0.8rem; line-height: 1.4; }

.most-view-today h2,
.latest-sermon h2 { margin-bottom: 1.2rem; }

.most-view-today a { display: block; margin-bottom: 0.8rem; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   component/_menu.scss
   --------------------------------------------------------------------------- */

/* Top-level nav — single line, no wrap */
.header-nav { display: flex; flex-wrap: nowrap; gap: 1px; margin: 0; padding: 0; list-style: none; }
.header-nav > .main-menu__li { list-style: none; position: relative; flex: 0 0 auto; }

/* %menu-link expanded for each extending selector */
.header-nav > .main-menu__li > a { text-decoration: none; color: #00305f; background: #d9ecff; border: 1px solid #b7d5f3; display: flex; align-items: center; font-size: 1.6rem; border-radius: 0; padding: 2rem 1.8rem; white-space: nowrap; height: 100%; box-sizing: border-box; }
.header-nav > .main-menu__li > a:hover { background: #b5d8fa; }
.header-nav > .main-menu__li > a.active { background: #9fcbf5; font-weight: bold; }

.header-nav > .main-menu__li.has-dropdown:hover > .dropdown { display: flex; flex-direction: column; }

/* Level-2 dropdown */
.dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 100; padding: 0; list-style: none; min-width: 22rem; }
.dropdown > .main-menu__li { list-style: none; position: relative; }
.dropdown > .main-menu__li > a { text-decoration: none; color: #00305f; background: #d9ecff; border: 1px solid #b7d5f3; display: block; font-size: 1.7rem; border-top: none; padding: 1.1rem 1.8rem; white-space: nowrap; }
.dropdown > .main-menu__li > a:hover { background: #b5d8fa; }
.dropdown > .main-menu__li > a.active { background: #9fcbf5; font-weight: bold; }
.dropdown > .main-menu__li.has-dropdown:hover > .sub-dropdown,
.sub-dropdown > .main-menu__li.has-dropdown:hover > .sub-dropdown { display: flex; flex-direction: column; }

/* Level-3 sub-dropdown */
.sub-dropdown { display: none; position: absolute; top: 0; left: 100%; z-index: 101; padding: 0; list-style: none; min-width: 22rem; }
.sub-dropdown > .main-menu__li { list-style: none; }
.sub-dropdown > .main-menu__li > a { text-decoration: none; color: #00305f; background: #d9ecff; border: 1px solid #b7d5f3; display: block; font-size: 1.6rem; border-top: none; padding: 1.1rem 1.8rem; white-space: nowrap; }
.sub-dropdown > .main-menu__li > a:hover { background: #b5d8fa; }
.sub-dropdown > .main-menu__li > a.active { background: #9fcbf5; font-weight: bold; }

/* Dropdown toggle button (hidden on desktop) */
.dropdown-toggle { display: none; }

/* Hamburger (hidden on desktop) */
.hamburger { display: none; }

/* Mobile */
@media only screen and (max-width: 850px) {
  .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: absolute; bottom: 0; right: 1.5rem; padding: 1rem; background: none; border: none; appearance: none; -webkit-appearance: none; z-index: 200; min-height: 4.4rem; gap: 5px; }
  .bar { display: block; width: 2.4rem; height: 3px; background-color: #00305f; border-radius: 2px; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform-origin: center; }
  .hamburger.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.is-active .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .header-nav { display: none; flex-direction: column; gap: 0; margin-top: 0.5rem; margin-bottom: 1rem; position: relative; z-index: 100; }
  .header-nav.is-active { display: flex; }
  .header-nav > .main-menu__li > a { border-radius: 0; font-size: 1.7rem; padding: 1.2rem 1.6rem; }

  .has-dropdown { display: flex; flex-wrap: wrap; position: static; }
  .has-dropdown > a { flex: 1 1 0; border-right: none; }
  .has-dropdown > .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #d9ecff; border: 1px solid #b7d5f3; border-left: none; cursor: pointer; padding: 0 1.4rem; color: #00305f; font-size: 1rem; transition: background 0.15s, transform 0.2s; }
  .has-dropdown > .dropdown-toggle:hover { background: #b5d8fa; }
  .has-dropdown.is-open > .dropdown-toggle { transform: rotate(180deg); transform-origin: center; }
  .has-dropdown.is-open > .dropdown,
  .has-dropdown.is-open > .sub-dropdown { display: flex; flex-direction: column; position: static; flex-basis: 100%; min-width: 0; border-left: 4px solid #b7d5f3; }
  .has-dropdown.is-open > .dropdown > .main-menu__li > a,
  .has-dropdown.is-open > .sub-dropdown > .main-menu__li > a { white-space: normal; padding-left: 2.4rem; font-size: 1.6rem; border-top: none; }
}

/* ---------------------------------------------------------------------------
   component/_most-popular-item.scss
   --------------------------------------------------------------------------- */

.most-popular--item a { font-size: 1.2em; }

/* ---------------------------------------------------------------------------
   component/_pager.scss
   --------------------------------------------------------------------------- */

.pager { margin: 4rem 0; }
.pager .pager__items { display: flex; justify-content: center; gap: 1rem; }
.pager .pager__items a { font-size: 1.9rem; }

/* ---------------------------------------------------------------------------
   component/_photoswipe.scss
   --------------------------------------------------------------------------- */

.gallery-box { padding: 3rem; }
.gallery-box .slick-arrow::before { color: #00c853; }
.gallery-box .slick-arrow::after { color: #00c853; }
.gallery-box .photoswipe { margin-bottom: 1rem; }
.gallery-box .photoswipe img { margin: auto; }
.gallery-box .slider-nav .slick-list .slick-track { display: flex; gap: 1rem; }

/* ---------------------------------------------------------------------------
   component/_search.scss
   --------------------------------------------------------------------------- */

.header-search h2 { display: none; }
.header-search .audio-kazani-exposed-form { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; margin-bottom: 0 !important; align-items: center; }
.header-search .audio-kazani-exposed-form > div { display: contents !important; }
.header-search .audio-kazani-exposed-form .form-actions { margin: 0 !important; }

.header-search input[type="text"],
.header-search .form-text { padding: 0.55rem 1rem; border: 1px solid #b7d5f3; border-right: none; border-radius: 4px 0 0 4px; background: #fff; font-size: 1.5rem; line-height: 1.4; color: #00305f; width: 18rem; outline: none; box-sizing: border-box; height: auto; transition: border-color 0.2s, width 0.2s; }
.header-search input[type="text"]:focus,
.header-search .form-text:focus { border-color: #00305f; width: 22rem; }

.header-search input[type="submit"],
.header-search .form-submit { padding: 0.55rem 1.4rem; border: 1px solid #b7d5f3; border-radius: 0 4px 4px 0; background: #d9ecff; color: #00305f; font-size: 1.4rem; line-height: 1.4; cursor: pointer; white-space: nowrap; height: auto; transition: background 0.15s; }
.header-search input[type="submit"]:hover,
.header-search .form-submit:hover { background: #b5d8fa; }

@media only screen and (max-width: 850px) {
  .header-search .audio-kazani-exposed-form { width: 100%; }
  .header-search input[type="text"],
  .header-search .form-text { flex: 1 1 auto; width: auto; }
  .header-search input[type="text"]:focus,
  .header-search .form-text:focus { width: auto; }
  .header-search input[type="submit"],
  .header-search .form-submit { flex-shrink: 0; }
}

/* Search result items */
.search-result-item { padding: 1.4rem 0; border-bottom: 1px solid #eee; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item__title { font-size: 1.8rem; font-weight: 700; margin: 0 0 0.4rem; }
.search-result-item__title a { color: #00305f; text-decoration: none; }
.search-result-item__title a:hover { text-decoration: underline; color: #005fcc; }
.search-result-item__meta { font-size: 1.3rem; color: #888; margin: 0; display: flex; gap: 1rem; }
.search-result-item__type { font-style: italic; }

.views-element-container > .shadow-box > h2:first-of-type { margin-top: 0; }

/* Standalone search page */
.shadow-box .search .audio-kazani-exposed-form,
.main-container > .shadow-box .search .audio-kazani-exposed-form { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; margin-bottom: 2rem !important; align-items: flex-start; }
.shadow-box .search .audio-kazani-exposed-form > div,
.main-container > .shadow-box .search .audio-kazani-exposed-form > div { display: block !important; }
.shadow-box .search .audio-kazani-exposed-form .form-actions,
.main-container > .shadow-box .search .audio-kazani-exposed-form .form-actions { margin: 0 !important; }

.shadow-box .search .form-text,
.main-container > .shadow-box .search .form-text { background-color: #fafafa; border: 1px solid #ccc; padding: 0.6rem 1rem; border-radius: 4px; max-width: 40rem; width: 100%; font-size: 1.6rem; line-height: 1.4; box-sizing: border-box; }

.shadow-box .search #edit-actions input,
.main-container > .shadow-box .search #edit-actions input { border: 1px solid #b7d5f3; border-radius: 4px; cursor: pointer; padding: 0.6rem 1.6rem; background: #d9ecff; color: #00305f; font-size: 1.5rem; line-height: 1.4; }
.shadow-box .search #edit-actions input:hover,
.main-container > .shadow-box .search #edit-actions input:hover { background: #b5d8fa; }

/* ---------------------------------------------------------------------------
   component/_sermon-video.scss
   --------------------------------------------------------------------------- */

.sermon-video .video iframe { width: 100%; min-height: 550px; }

/* ---------------------------------------------------------------------------
   component/_sidebar.scss
   --------------------------------------------------------------------------- */

/* CSS grid (instead of flex) so the content column is always exactly
   1fr (remaining viewport width minus the fixed sidebar) regardless of
   how few rows the inner view returned. */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; align-items: start; gap: 4rem; width: 100%; }
.page-layout__content { min-width: 0; width: 100%; }
.page-layout__sidebar { padding: 2rem 0; box-sizing: border-box; min-width: 0; }
/* Remove duplicated .main-container nesting from the header block content */
header .main-container .main-container { padding: 0; max-width: none; }
/* Hide blocks whose rendered body is effectively empty (preprocess flags
   them with .is-empty). Without this the system_main_block on the
   homepage stub node renders as an empty bordered card. */
.is-empty { display: none !important; }
.page-layout__sidebar > .block,
.page-layout__sidebar > div { margin-bottom: 3rem; }
.block__title,
h2.block__title,
.page-layout__sidebar nav[aria-labelledby] > h2 { font-size: 2.2rem; font-weight: 700; color: #00305f; border-bottom: 2px solid #b7d5f3; padding-bottom: 0.6rem; margin: 0 0 1.4rem; line-height: 1.2; }

.page-layout__sidebar .fb-page,
.page-layout__sidebar .fb-page-plugin,
.page-layout__sidebar iframe[src*="facebook.com"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
.page-layout__sidebar .fb-page-plugin { overflow: hidden; }

.page-layout__sidebar .most-popular-item,
.page-layout__sidebar .latest-sermon-item { border-bottom: 1px solid #eee; padding: 0.3rem 0; }
.page-layout__sidebar .most-popular-item a,
.page-layout__sidebar .latest-sermon-item a,
.page-layout__sidebar .latest-sermon--item a,
.page-layout__sidebar .views-row,
.page-layout__sidebar .views-field { margin-bottom: 0; }
.page-layout__sidebar .latest-sermon--item a { margin-bottom: 0.3rem; }
.page-layout__sidebar .most-popular-item:last-child,
.page-layout__sidebar .latest-sermon-item:last-child { border-bottom: none; }

.page-layout__sidebar .side-links h3 { font-size: 1.5rem; font-weight: 700; color: #00305f; margin: 0 0 0.8rem; }
.page-layout__sidebar .side-links a { color: #00305f; text-decoration: none; display: block; padding: 0.3rem 0; }
.page-layout__sidebar .side-links a:hover { text-decoration: underline; color: #005fcc; }
.page-layout__sidebar .side-links img { max-width: 100%; height: auto; display: block; margin-top: 1rem; }

@media only screen and (max-width: 900px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); }
  .page-layout__sidebar { width: 100%; padding: 1rem 1.5rem; border-top: 2px solid #b7d5f3; }
}

/* ---------------------------------------------------------------------------
   component/_slideshow.scss
   --------------------------------------------------------------------------- */

.myslider img { cursor: default; width: 100%; }
.myslider .slick__arrow { display: none; }

/* ---------------------------------------------------------------------------
   component/_social-box.scss
   --------------------------------------------------------------------------- */

/* Legacy social/share box — kept for full-node templates that still use it. */
.link-box { display: flex; flex-flow: column; gap: 1rem; min-width: 0; overflow: hidden; }
.link-box .first-flex { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.link-box .first-flex .share_save { display: none; }
.link-box .second-flex { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.link-box .second-flex .googleplus a { display: flex; gap: 1rem; text-decoration: none; max-width: 100%; background-color: #edeef0; padding: .5rem; border-radius: 6px; font-size: 13px; color: #000; }
.link-box .second-flex .googleplus img { max-width: 17px; }
.link-box .second-flex span { max-width: 7rem; }

/* Teaser "Číst dál" button — right-aligned inside the teaser, before the
   border so the line sits beneath the whole teaser. */
.teaser-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.read-more-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem 1.6rem; background: #d9ecff; border: 1px solid #b7d5f3; border-radius: 4px; color: #00305f; font-size: 1.4rem; font-weight: 600; text-decoration: none; line-height: 1; transition: background .15s; }
.read-more-btn:visited { color: #00305f; background: #d9ecff; }
.read-more-btn:hover,
.read-more-btn:focus-visible { color: #00305f; background: #b5d8fa; text-decoration: none; }
.read-more-btn span { transition: transform .15s; }
.read-more-btn:hover span { transform: translateX(3px); }
#a2apage { max-width: 100vw; overflow: hidden; }

/* ---------------------------------------------------------------------------
   component/_swipper.scss
   --------------------------------------------------------------------------- */

.swiper-slide img { width: 100%; }
.banner-slide { position: relative; display: block; text-decoration: none; }
.banner-slide__caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem; font-weight: 600; padding: .8rem 1.5rem; text-align: center; }

/* ---------------------------------------------------------------------------
   component/_text-map.scss
   --------------------------------------------------------------------------- */

.text-map { margin-bottom: 4rem; }
.text-map .map img { margin: auto; }

/* ---------------------------------------------------------------------------
   component/_video-teaser-2.scss
   --------------------------------------------------------------------------- */

.content-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.content-grid .views-row .video-item .headline { margin-bottom: 3rem; }
.content-grid .views-row .video-item .video iframe { width: 100%; min-height: 320px; }

@media only screen and (max-width: 700px) { .content-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   component/_views-table.scss
   --------------------------------------------------------------------------- */

/* Tabulka pro stranku zdroje 6col */
.resources-table > div:nth-child(odd) { background-color: #f5f5f5; }
.resources-table .views-table tr { display: grid; grid-template-columns: repeat(6, 1fr); }

/* Tabulka pro stranky novy zakon, stary atd. 5col */
.views-table-5col tr { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; align-items: center; }
.views-table-5col .audio { width: 100%; }
.views-table-5col .date { text-align: right; max-width: 12rem; }
.views-table-5col .outline { display: flex; gap: 1.5rem; align-items: center; position: relative; }
.views-table-5col .outline::before { content: ""; display: block; background-image: url('../images/application-pdf.png'); width: 2rem; height: 2rem; background-repeat: no-repeat; left: -2rem; position: absolute; }

/* Klasicka tabulka 4col */
.content-table > div:nth-child(odd) { background-color: #f5f5f5; }

.views-table { margin-top: 4rem; border-collapse: collapse; width: 100%; }
.views-table tr { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; }
.views-table td { padding: 1rem; }
.views-table .audio { min-width: 20rem; }
.views-table .bible-book { max-width: 13rem; }
.views-table .outline { display: flex; gap: 1.5rem; align-items: center; position: relative; }
.views-table .outline::before { content: ""; display: block; background-image: url('../images/application-pdf.png'); width: 2rem; height: 2rem; background-repeat: no-repeat; left: -2rem; position: absolute; }
.views-table .date { text-align: right; max-width: 12rem; }
.views-table .year { text-align: right; max-width: 12rem; }
.views-table .video p iframe { max-width: 18rem; max-height: 8rem; }

@media only screen and (max-width: 800px) {
  .resources-table .views-table tr { grid-template-columns: repeat(3, 1fr); }
  .views-table-5col tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .content-table .views-table { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 400px) {
  .resources-table .views-table tr { grid-template-columns: repeat(1, 1fr); }
  .views-table-5col tr { display: grid; grid-template-columns: repeat(1, 1fr); }
  .content-table .views-table { grid-template-columns: repeat(1, 1fr); }
}

/* ---------------------------------------------------------------------------
   layout/_layout.scss
   --------------------------------------------------------------------------- */

.container,
.container-wide { max-width: 142rem; padding-inline: 2rem; margin: 0 auto; box-sizing: content-box; }
.main-container { width: 100%; max-width: 128rem; margin: 0 auto; padding: 1rem 1.5rem; box-sizing: border-box; }
.container-large { max-width: 128rem; margin: auto; }
.container-medium { max-width: 130rem; margin: auto; }
.container-small { max-width: 100rem; margin: auto; }
.container-mobile { max-width: 90rem; margin: auto; }
.full-width-container { max-width: 144rem; width: 100%; margin: auto; }
.main-box { width: 70%; padding: 2rem; }
/* .shadow-box — visually neutral. The actual card framing now lives on
   #block-awesome-content (and the placed view blocks). The class is still
   present in many node/view templates as a passthrough wrapper, but no
   longer paints its own border, padding, or shadow. */
.shadow-box { min-width: 0; }
.full-width-box { border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,.9); padding: 2rem; }

@media only screen and (max-width: 1400px) { .main-container { max-width: 130rem; } }
@media only screen and (max-width: 1100px) { .main-container { max-width: 100rem; padding: 1rem 2rem; } }
@media only screen and (max-width: 800px) { .main-container { max-width: 100%; padding: 1rem 1.5rem; } .main-box { width: 100%; padding: 0; } }

/* ---------------------------------------------------------------------------
   node/_blog-article-teaser.scss
   --------------------------------------------------------------------------- */

/* Each teaser is wrapped in <div class="views-row"><article class="blog-
   article-teaser">, so :last-child on .blog-article-teaser would always
   match (it's the only child of views-row) and the divider would never
   show. Apply the divider to every teaser unconditionally; the views-row
   :last-child suppresses the bottom-most one only. */
.blog-article,
.blog-article-teaser { margin-bottom: 6rem; padding-bottom: 5rem; border-bottom: 2px solid #d6d6d6; }
.views-row:last-child > .blog-article-teaser { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.blog-article .title h2,
.blog-article-teaser .title h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }
.blog-article .body-text,
.blog-article-teaser .body-text { overflow: hidden; }
.blog-article-teaser .body-text img,
.blog-article-teaser .izzacs-field-tesser-image img { width: 32rem !important; height: 20rem !important; max-width: none !important; object-fit: cover; float: left; margin: 0 2rem 1rem 0; }
.blog-article .body-image img,
.blog-article-teaser .body-image img { float: right; max-width: 32rem; margin-left: 1rem; margin-bottom: .5rem; }

@media only screen and (max-width: 600px) {
  .blog-article-teaser .body-text img,
  .blog-article-teaser .izzacs-field-tesser-image img { float: none; width: 100% !important; height: auto !important; margin: 0 0 1rem; }
  .blog-article .body-image img,
  .blog-article-teaser .body-image img { float: none; max-width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   node/_sermon-mp3-full.scss
   --------------------------------------------------------------------------- */

.sermon-mp3-full .audio { margin-bottom: 1rem; }
.sermon-mp3-full .body-text { display: flex; gap: 2rem; margin-bottom: 6rem; }
.sermon-mp3-full .body-text .text { max-width: 75%; }
.sermon-mp3-full .body-text .text h3 { margin: 0; }
.sermon-mp3-full .outline { display: flex; }
.sermon-mp3-full .outline p { font-weight: 600; }

@media only screen and (max-width: 600px) {
  .sermon-mp3-full .body-text { flex-direction: column; }
  .sermon-mp3-full .body-text .text { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   node/_sermon-mp3-teaser.scss
   --------------------------------------------------------------------------- */

.sermon-mp3-teaser { margin-bottom: 7rem; padding-bottom: 6rem; border-bottom: 2px solid #d6d6d6; }
.sermon-mp3-teaser .title h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }
.views-row:last-child > .sermon-mp3-teaser { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.sermon-mp3-teaser .audio { margin-bottom: 1rem; }
.sermon-mp3-teaser .body-text { overflow: hidden; }
/* Uniform teaser thumbnails — force the same width AND aspect ratio
   regardless of source image dimensions, so the article list reads as
   a consistent grid. object-fit crops without distortion. */
.sermon-mp3-teaser .body-text img { float: left !important; width: 24rem !important; height: 16rem !important; max-width: none !important; object-fit: cover; margin: 0 2rem 1rem 0 !important; }

@media only screen and (max-width: 600px) { .sermon-mp3-teaser .body-text img { float: none !important; width: 100% !important; height: auto !important; max-width: 100% !important; margin-right: 0 !important; } }

/* ---------------------------------------------------------------------------
   node/_sermon-text-full.scss
   --------------------------------------------------------------------------- */

.sermon-text-full .title h2 { font-size: 3.2rem; }
.sermon-text-full .title h2 a { color: #000; text-decoration: none; }
.bible_book a { font-size: 1.9rem; }
.preacher a { text-decoration: none; font-size: 1.9rem; }

/* ---------------------------------------------------------------------------
   node/_sermon-video--resources-teaser.scss
   node/_sermon-video-full.scss (deduplicated)
   --------------------------------------------------------------------------- */

.sermon-video .video p iframe { width: 100%; min-height: 450px; }