/* Shared visual layer for the public pages and the online editors. */
:root {
  color-scheme: light;
  --paper: #f5f0e7;
  --surface: #fffdf9;
  --ink: #302c29;
  --muted: #6d655e;
  --accent: #793d3b;
  --accent-dark: #622f30;
  --line: #ded3c4;
  --gold: #b29461;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  min-height: 100%;
  background-color: #e8dbc0;
  background-image:
    radial-gradient(ellipse at 14% 8%, rgba(255, 251, 231, .7) 0, rgba(255, 251, 231, 0) 42%),
    radial-gradient(ellipse at 86% 24%, rgba(130, 83, 45, .1) 0, rgba(130, 83, 45, 0) 45%),
    radial-gradient(ellipse at 40% 84%, rgba(124, 79, 42, .08) 0, rgba(124, 79, 42, 0) 48%),
    repeating-linear-gradient(0deg, rgba(104, 68, 38, .025) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #eee2c9, #e4d2b3 52%, #eddcc2);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
body { min-height: 100%; background: transparent !important; }
body { margin: 0; color: var(--ink); font: 16px/1.6 Georgia, 'Times New Roman', serif; overflow-x: hidden; }
#container { min-height: 100vh; height: auto; margin: 0; display: flex; flex-direction: column; }
#page-top { padding: 0; background: linear-gradient(rgba(244, 229, 195, .88), rgba(225, 197, 145, .9)), url('style/images/parchment-texture-cc0.jpg') center / 440px auto repeat; border-bottom: 1px solid #b7935e; box-shadow: 0 3px 16px rgba(69, 43, 31, .12); }
#header-wrapper, #header { width: 100%; min-width: 0; height: auto; background: none; }
#header { max-width: 1600px; min-height: 92px; padding: 17px clamp(18px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
#logo, #menu-wrapper { position: static; float: none; }
#logo { flex: 0 0 auto; }
#logo img { display: block; width: min(330px, 100%); height: auto; max-height: 65px; object-fit: contain; object-position: left center; }
#menu-wrapper { display: none; }
.ddsmoothmenu { font: 600 14px/1.3 Arial, Helvetica, sans-serif; text-shadow: none; }
.ddsmoothmenu ul li { margin-left: 20px; padding-left: 0; }
.ddsmoothmenu ul li a, .ddsmoothmenu ul li a:visited { color: var(--ink); text-shadow: none; }
.ddsmoothmenu ul li a:hover, .ddsmoothmenu ul li a.selected { color: var(--accent); }
.ddsmoothmenu ul li ul { padding-top: 18px; border: 0; filter: drop-shadow(0 8px 18px rgba(44, 30, 21, .14)); }
.ddsmoothmenu ul li ul li { background: var(--surface); border-color: var(--line); }
.ddsmoothmenu ul li ul li a { width: 215px; padding: 10px 14px; line-height: 1.35; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; font: 20px/1.25 'Ponomar Unicode TT', Georgia, 'Times New Roman', serif; }
.site-nav > a, .site-nav > details > summary { display: block; padding: 11px 3px; color: #793d3b; white-space: nowrap; }
.site-nav > a:hover, .site-nav > details > summary:hover { color: var(--accent); text-decoration: none; }
.site-nav details { position: relative; }
.site-nav summary { list-style: none; cursor: pointer; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.site-nav details[open] summary::after { margin-bottom: 0; transform: rotate(225deg); }
.site-nav-submenu { position: absolute; z-index: 1100; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 285px; max-height: 72vh; overflow-y: auto; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 15px 34px rgba(44, 30, 21, .2); }
.site-nav-submenu a { display: block; padding: 10px 12px; color: var(--ink); border-radius: 5px; }
.site-nav-submenu a:hover { background: #f7f1e8; text-decoration: none; }

@font-face { font-family: 'Hirmos Ucs'; src: url('Slavonic/fonts/HirmUcs8.ttf') format('truetype'); font-display: swap; }

#wrapper { width: min(100% - 40px, 1480px); max-width: 1480px; margin: 28px auto 50px; padding: 0; line-height: 1.6; }
#wrapper[style] { width: min(100% - 40px, 1480px) !important; }
.home-hero { width: min(100% - 40px, 1448px); margin: 28px auto 0; padding: clamp(28px, 4vw, 54px); display: flex; justify-content: space-between; gap: 30px; align-items: center; background: linear-gradient(115deg, #fffdf9, #f1e8db); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 12px 34px rgba(66, 43, 31, .06); }
.home-hero-copy { max-width: 730px; }
.home-hero .home-eyebrow { margin: 0 0 12px; color: var(--accent); font: 700 12px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.home-hero h1 { margin: 0 0 16px; }
.home-hero-copy > p:not(.home-eyebrow) { margin-bottom: 22px; color: var(--muted); font-size: 18px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 18px; border-radius: 7px; font: 700 14px/1.3 Arial, Helvetica, sans-serif; text-align: center; }
.home-action-primary { background: var(--accent); color: #fff; }
.home-action-primary:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.home-action-secondary { color: var(--accent); border: 1px solid var(--accent); }
.home-action-secondary:hover { background: #f7ece9; text-decoration: none; }
.home-hero-mark { color: rgba(121, 61, 59, .22); font: 190px/1 'Ponomar Unicode TT', Georgia, serif; }
body > #container > .site-columns { width: min(100% - 40px, 1480px) !important; margin: 28px auto 50px; }
.site-columns { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 16px 0; }
.site-columns > tbody > tr > td { vertical-align: top; min-width: 0; }
.site-columns > tbody > tr > .side-column { width: 22% !important; }
.site-columns > tbody > tr > .main-column { width: 56% !important; }
.home-columns #wrapper { width: 100% !important; margin: 0; }
.content, #slv-container { min-width: 0; }
.content { padding: clamp(22px, 3vw, 42px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(66, 43, 31, .06); }
.content .MsoNormal { line-height: 1.75; text-align: left; }
.home-columns .ucs8 { font-family: 'Hirmos Ucs', serif !important; font-size: 24px; font-synthesis: none; line-height: 1.4; }
h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', serif; color: var(--accent-dark); }
h1 { font-size: clamp(29px, 3vw, 40px); line-height: 1.2; }
h2 { font-size: clamp(25px, 2.4vw, 34px); line-height: 1.25; }
h3 { font-size: 22px; }
p { line-height: 1.7; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

.hints { position: relative; padding: 12px 0; border: 1px solid #b99b6e; border-radius: 4px; overflow: visible; background: linear-gradient(rgba(253, 247, 229, .74), rgba(245, 232, 204, .78)), url('style/images/parchment-texture-cc0.jpg') center / 440px auto repeat; box-shadow: 0 9px 24px rgba(66, 43, 31, .16), inset 0 0 22px rgba(114, 77, 42, .12); }
.hints::before, .hints::after { content: ''; position: absolute; z-index: 2; left: -5px; right: -5px; height: 14px; pointer-events: none; background: linear-gradient(to bottom, #c9a971, #f2e2bc 42%, #a67b48); border: 1px solid rgba(105, 70, 40, .48); border-radius: 50%; box-shadow: 0 2px 3px rgba(67, 42, 24, .22); }
.hints::before { top: -7px; }
.hints::after { bottom: -7px; transform: rotate(180deg); }
.hints > * { position: relative; z-index: 1; }
.accordion-header { padding: 18px 19px; color: var(--accent-dark); font: 700 17px/1.35 Georgia, 'Times New Roman', serif; border-bottom: 1px solid rgba(129, 92, 55, .32); background: rgba(255, 251, 235, .42); }
.accordion { border: 0; }
.accordion h3 { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); padding: 13px 35px 13px 17px; font: 600 14px/1.4 Arial, Helvetica, sans-serif; position: relative; }
.accordion h3::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; font-weight: 400; }
.accordion h3.active::after { content: '-'; }
.accordion h3:hover, .accordion h3.active { background: rgba(255, 249, 229, .58); }
.accordion h3 a { color: inherit; }
.accordion > div { background: rgba(255, 250, 235, .34); border: 0; border-bottom: 1px solid rgba(129, 92, 55, .28); padding: 14px 17px 18px; color: var(--muted); text-align: left; font: 14px/1.6 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.accordion div a { color: var(--accent); }

.editor-status { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 16px 18px !important; padding: 11px 15px; background: #eee5d8; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: 14px/1.4 Arial, Helvetica, sans-serif; }
.editor-status .demoitem { color: var(--ink); margin: 0; }
.editor-status progress { width: 110px; accent-color: var(--accent); }
.editor-status button { min-height: 38px; padding: 7px 14px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: #fff; font: 600 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.editor-status button:hover { background: var(--accent-dark); }
.editor-columns .main-column { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 12px 34px rgba(66, 43, 31, .06); }
.editor-columns #slv-container { width: 100%; }
.editor-columns .slv { width: 100%; min-height: 440px; }
.editor-columns .mce-tinymce { max-width: 100%; }
.editor-columns .main-column > p { margin: 16px 3px 4px; color: var(--muted); font-size: 14px; }

.push { display: none; }
#footer-wrapper { height: auto; margin-top: auto; padding: 0; }
#footer { min-width: 0; height: auto; background: #eae0d2; border-top: 1px solid var(--line); }
#footer-content { width: min(100% - 40px, 1480px); height: auto; min-height: 66px; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#copyright, #socials { float: none; position: static; }
#copyright p { color: var(--muted); font: 12px/1.5 Arial, Helvetica, sans-serif; }
#socials img { max-width: none; }

@media (max-width: 1100px) {
  .site-columns { border-spacing: 10px 0; }
  .site-columns > tbody > tr > .side-column { width: 24% !important; }
  .site-columns > tbody > tr > .main-column { width: 52% !important; }
  .accordion h3 { font-size: 13px; }
}

@media (max-width: 1050px) {
  #header { min-height: 70px; padding: 12px 16px; gap: 14px; }
  #logo img { width: min(230px, 55vw); max-height: 52px; }
  #wrapper, #wrapper[style], body > #container > .site-columns { width: calc(100% - 24px) !important; margin: 16px auto 32px; }
  .home-hero { width: calc(100% - 24px); margin-top: 16px; padding: 26px 20px; }
  .home-hero-mark { display: none; }
  .home-hero-copy > p:not(.home-eyebrow) { font-size: 16px; }
  .home-actions a { width: 100%; }
  .site-columns, .site-columns > tbody, .site-columns > tbody > tr { display: block; width: 100%; }
  .site-columns > tbody > tr { display: flex; flex-direction: column; gap: 14px; }
  .site-columns > tbody > tr > td, .site-columns > tbody > tr > .side-column, .site-columns > tbody > tr > .main-column { display: block; width: 100% !important; }
  .site-columns > tbody > tr > .main-column { order: -1; }
  .content { padding: 22px 18px; }
  .editor-status { margin: 0 0 14px !important; }
  .editor-columns .main-column { padding: 8px; }
  .editor-columns .mce-tinymce { width: 100% !important; }
  .editor-columns .mce-edit-area iframe { height: 52vh !important; min-height: 330px; }
  .editor-columns .mce-statusbar { max-width: 100%; }
  .mce-window { max-width: calc(100vw - 20px) !important; }
  .mce-window .mce-container-body { max-width: 100%; overflow: auto; }
  .mce-charmap { display: block; max-width: calc(100vw - 65px); overflow-x: auto; }
  #footer-content { width: calc(100% - 32px); flex-wrap: wrap; }
  #socials { display: none; }
}

@media (max-width: 700px) {
  #header { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; justify-content: space-between; gap: 4px 9px; margin: 0; border-top: 1px solid var(--line); }
  .site-nav > a, .site-nav > details > summary { padding: 10px 0 2px; font-size: 16px; }
  .site-nav-submenu { width: min(285px, calc(100vw - 32px)); }
}

@media (max-width: 420px) {
  .site-nav { gap: 4px 6px; }
  .editor-status progress { width: 75px; }
  .content { padding: 18px 14px; }
}