/*
Theme Name: Sacred Classic
Description: WordPress theme preserving Sacred's original wine header, manga artwork and page layouts, with responsive navigation.
Version: 1.0.0
Text Domain: sacred-classic
*/
html { scroll-behavior: smooth; }
body { margin:0; }
.header_content,.subheader_illustration,.container,.footer_content { max-width:960px; width:calc(100% - 40px); }
.page-title { margin:0; padding:18px 0 22px; font:48px/1.2 'Comic Sans MS',cursive; color:#fff; }
.category_illustration { width:auto; max-width:100%; }
#nav { max-width:none; }
#nav > ul { display:flex; align-items:center; gap:0; }
#nav a { display:block; }
#nav li:focus-within > ul,#nav li.submenu-open > ul { display:block; }
#nav li { position:relative; }
.menu-toggle,.submenu-toggle { display:none; }
.webs-main-sidebar-none .content_main { width:100%; padding-top:30px; }
main article { display:flow-root; }
img { max-width:100%; height:auto; }
iframe { max-width:100%; }
iframe[src*="youtube"] { aspect-ratio:4/3; height:auto; width: min(806px,100%); }
.skip-link { position:absolute; top:-100px; left:12px; z-index:10000; padding:12px; background:white; }
.skip-link:focus { top:8px; }
.legacy-content,.empty-page { padding:30px 0; line-height:1.7; }
.legacy-content table { max-width:100%; }
.legacy-content h3 { font-size:26px; margin:20px 0; }
.sacred-form { max-width:620px; margin:24px auto; padding:24px; border-radius:6px; background:#eee; text-align:left; }
.sacred-form label { display:block; margin:14px 0; color:#333; font:15px/1.5 Arial,sans-serif; }
.sacred-form input,.sacred-form textarea { box-sizing:border-box; width:100%; border:1px solid #bbb; padding:10px; background:#fff; color:#222; font:16px/1.5 Arial,sans-serif; }
.sacred-form button { background:#a81742; color:#fff; border:0; padding:12px 22px; cursor:pointer; font-size:16px; }
.sacred-notice { padding:15px; border-left:4px solid #a81742; background:#f7f0f2; }
.sacred-hp { position:absolute; left:-10000px; }
.footer_content { box-sizing:content-box; padding:20px 10px; }
.footer p { margin-bottom:10px; }
@media(max-width:760px) {
  .header_content,.subheader_illustration,.container,.footer_content { width:calc(100% - 32px); padding-left:0; padding-right:0; }
  header.header,.header_content { height:auto; min-height:64px; }
  .menu-toggle { display:block; margin-left:auto; padding:18px 12px; border:0; color:white; background:transparent; font-size:18px; cursor:pointer; }
  #nav { float:none; display:none; margin:0; padding-bottom:12px; }
  #nav.is-open { display:block; }
  #nav > ul { display:block; }
  #nav li,#nav > ul > li { float:none; display:block; width:auto; margin:0; }
  #nav > ul > li > a,#nav > ul > li:first-child.webs-home > a { background:none; text-indent:0; width:auto; height:auto; padding:13px 12px; margin:0; color:#eee; font-size:14px; }
  #nav > ul > li:first-child.webs-home.active > a:after { display:none; }
  #nav > ul > li > ul,#nav > ul > li > ul > li > ul,#nav li ul li ul { position:static; width:auto; min-width:0; padding:0 12px; margin:0; background:#292929; box-shadow:none; }
  #nav li ul li { width:auto; }
  #nav li ul li a { color:#ddd; padding:12px; }
  #nav li:hover > ul { display:none; }
  #nav li.submenu-open > ul { display:block; }
  .submenu-toggle { display:block; position:absolute; right:0; top:0; width:44px; height:42px; border:0; background:transparent; color:white; font-size:22px; }
  .page-title { font-size:36px; }
  .webs-col { float:none!important; width:100%!important; margin-left:0!important; margin-right:0!important; }
  .webs-row { display:block!important; }
  .webs-container,.webs-frame,.webs-frame-container,.webs-image-crop { max-width:100%!important; box-sizing:border-box; }
  .webs-image-crop { height:auto!important; }
  div.webs-frame { display:block; width:fit-content; }
  [class*="webs-image-wrapper"] { max-width:100%!important; height:auto!important; }
  .webs-image-crop img { position:static!important; max-width:100%!important; height:auto!important; }
  .w-buckets { display:flex!important; flex-direction:column; gap:20px; }
  .w-buckets > * { width:100%!important; float:none!important; margin:0!important; }
  .webs-title,.webs-text { overflow-wrap:anywhere; }
  .webs-spacer { max-height:36px; }
  .sacred-form { padding:18px; }
  .legacy-content { overflow-x:auto; }
}