/* ============================================================
   Orchestra — Preset Layout System
   Body class driven layout overrides for STORK19

   Note: Many of these rules overlap with PHP template logic
   (presets/{preset}/*.php). The CSS rules serve as fallback
   when templates fall through to STORK19 defaults.
   ============================================================ */

/* === 14. Global Layout === */
/* Override STORK19 CSS variables for widths */
:root {
  --oc-content-width: 728px;
  --oc-wrap-width: 1166px;
}
/* Feed --oc-* into STORK19's own variables */
body[class*="oc-"] {
  --stk-wrap-width: var(--oc-wrap-width) !important;
  --stk-main-width: var(--oc-content-width) !important;
}

/* === Background Color === */
html, body {
  background: var(--oc-color-bg) !important;
}
#content,
#inner-content,
#main {
  background: var(--oc-color-bg-content) !important;
}
.wrap,
#inner-content.wrap {
  max-width: var(--oc-wrap-width) !important;
}
#main {
  max-width: var(--oc-content-width);
}

/* ============================================================
   1. Header
   ============================================================ */

/* --- Minimal --- */
.oc-header-minimal #header.stk_header {
  padding: 6px 0;
}
.oc-header-minimal .site__logo {
  font-size: .85em;
}
.oc-header-minimal .site_description {
  display: none;
}

/* --- Overlay --- */
.oc-header-overlay #header.stk_header {
  position: absolute;
  width: 100%;
  z-index: 100;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Position: static --- */
.oc-header-pos-static #header.stk_header {
  position: relative !important;
}

/* --- Position: sticky --- */
.oc-header-pos-sticky #header.stk_header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* --- Width: wide --- */
.oc-header-w-wide #header .inner-header.wrap {
  max-width: var(--oc-wrap-width, 1166px) !important;
}

/* --- Width: full --- */
.oc-header-w-full #header .inner-header.wrap {
  max-width: 100% !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ============================================================
   2. Navigation
   ============================================================ */

/* Hidden */
.oc-nav-hidden .stk_g_nav,
.oc-nav-hidden #g_nav {
  display: none !important;
}

/* Alignment */
.oc-nav-align-center .ul__g_nav {
  justify-content: center;
}
.oc-nav-align-right .ul__g_nav {
  justify-content: flex-end;
}
.oc-nav-align-left .ul__g_nav {
  justify-content: flex-start;
}

/* ============================================================
   4. Archive / Post List
   ============================================================ */

/* STORK19 uses .archives-list.card-list with .post-list articles */
@media (min-width: 768px) {
  .oc-archive-2col .archives-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5em !important;
  }
  .oc-archive-2col .archives-list > article.post-list {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  .oc-archive-3col .archives-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.2em !important;
  }
  .oc-archive-3col .archives-list > article.post-list {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* 1 column: override any default grid */
  .oc-archive-1col .archives-list {
    display: block !important;
  }
}

/* Hide elements — STORK19 uses .description, .time__date, .cat-name / .osusume-label */
.oc-hide-excerpt .archives-list .description,
.oc-hide-excerpt .archives-list .entry-excerpt,
.oc-hide-excerpt .archives-list .archive_description {
  display: none !important;
}

.oc-hide-date .archives-list .time__date,
.oc-hide-date .archives-list .entry-meta .time__date {
  display: none !important;
}

.oc-hide-category .archives-list .cat-name,
.oc-hide-category .archives-list .osusume-label,
.oc-hide-category .archives-list .category-label {
  display: none !important;
}

/* ============================================================
   5. Single Post
   ============================================================ */

/* Wide layout — no sidebar, wider content */
.single.oc-single-wide #inner-content.wrap {
  max-width: 980px !important;
}
.single.oc-single-wide #main {
  width: 100% !important;
  max-width: none !important;
}
.single.oc-single-wide #sidebar1 {
  display: none !important;
}

/* Full layout — no sidebar, centered content */
.single.oc-single-full #inner-content.wrap {
  max-width: 100% !important;
}
.single.oc-single-full #main {
  width: 100% !important;
  max-width: var(--oc-content-width, 780px) !important;
  margin: 0 auto !important;
}
.single.oc-single-full #sidebar1 {
  display: none !important;
}

/* Hide elements */
.oc-hide-thumbnail .post-main-thumb,
.oc-hide-thumbnail .eyecatch.of-cover,
.oc-hide-thumbnail .eyecatch-image-wrap {
  display: none !important;
}

.oc-hide-author .author-profile,
.oc-hide-author [class*="profile-wrap"],
.oc-hide-author .about-author {
  display: none !important;
}

.oc-hide-single-sns .sns-btn-wrap,
.oc-hide-single-sns .stk-sns-btn {
  display: none !important;
}

.oc-hide-related #related_post,
.oc-hide-related .yarpp-related,
.oc-hide-related .related-posts,
.oc-hide-related [class*="related-entry"] {
  display: none !important;
}

/* ============================================================
   6. Sidebar
   ============================================================ */

/* Sidebar is always displayed — each preset has its own custom sidebar.php */

/* Left sidebar — reverse order */
.oc-sidebar-left #inner-content.wrap {
  display: flex !important;
  flex-direction: row-reverse !important;
}

/* Right sidebar — ensure standard order */
.oc-sidebar-right #inner-content.wrap {
  display: flex !important;
  flex-direction: row !important;
}

/* ============================================================
   7. Footer
   ============================================================ */

/* Minimal footer */
.oc-footer-minimal #footer.footer {
  padding: 1em 0;
}
.oc-footer-minimal #inner-footer .widget {
  display: none;
}
.oc-footer-minimal #footer-bottom {
  border-top: none;
}

/* Wide footer */
.oc-footer-wide #inner-footer {
  max-width: 100% !important;
  padding: 2em 3em;
}

/* Widget columns */
.oc-footer-w0col #inner-footer > .widget {
  display: none !important;
}

@media (min-width: 768px) {
  .oc-footer-w1col #inner-footer {
    display: block;
  }
  .oc-footer-w1col #inner-footer > .widget {
    width: 100%;
  }
  .oc-footer-w2col #inner-footer {
    display: flex;
    flex-wrap: wrap;
  }
  .oc-footer-w2col #inner-footer > .widget {
    width: 48%;
  }
  .oc-footer-w3col #inner-footer {
    display: flex;
    flex-wrap: wrap;
  }
  .oc-footer-w3col #inner-footer > .widget {
    width: 31%;
  }
}

/* Hide footer elements */
.oc-hide-footer-sns #footer .sns-wrap,
.oc-hide-footer-sns #footer .footer-sns,
.oc-hide-footer-sns #footer [class*="sns-link"] {
  display: none !important;
}
.oc-hide-footer-nav #footer .footer-links,
.oc-hide-footer-nav #footer .footer-nav,
.oc-hide-footer-nav #footer-bottom nav {
  display: none !important;
}

/* ============================================================
   8. Block Decoration
   ============================================================ */

:root {
  --oc-block-cbox-radius: 4px;
  --oc-block-btn-radius: 3px;
  --oc-block-supplement-radius: 4px;
}

.wp-block-stk-plugin-cbox,
.wp-block-stk-plugin-cbox-notitle {
  border-radius: var(--oc-block-cbox-radius) !important;
}
.stk-richbtn,
.stk_btn,
.wp-block-button .wp-block-button__link {
  border-radius: var(--oc-block-btn-radius) !important;
}
.wp-block-stk-plugin-supplement {
  border-radius: var(--oc-block-supplement-radius) !important;
}

/* Balloon styles */
.oc-balloon-square .wp-block-stk-plugin-balloon .balloon-content {
  border-radius: 4px !important;
}
.oc-balloon-flat .wp-block-stk-plugin-balloon .balloon-content {
  border-radius: 0 !important;
  border-width: 0 0 2px 0 !important;
  box-shadow: none !important;
}
.oc-balloon-round .wp-block-stk-plugin-balloon .balloon-content {
  border-radius: 20px !important;
}

/* ============================================================
   9. Fixed Page
   ============================================================ */

.page.oc-page-wide #inner-content.wrap {
  max-width: 980px !important;
}
.page.oc-page-wide #main {
  width: 100% !important;
}
.page.oc-page-wide #sidebar1 {
  display: none !important;
}

.page.oc-page-full #inner-content.wrap {
  max-width: 100% !important;
}
.page.oc-page-full #main {
  width: 100% !important;
  max-width: var(--oc-content-width, 780px) !important;
  margin: 0 auto !important;
}
.page.oc-page-full #sidebar1 {
  display: none !important;
}

/* ============================================================
   10. Breadcrumb
   ============================================================ */

.oc-breadcrumb-hidden #breadcrumb {
  display: none !important;
}
.oc-breadcrumb-minimal #breadcrumb {
  font-size: 0.75em;
  opacity: 0.6;
  padding: 0.3em 0;
}
.oc-breadcrumb-minimal #breadcrumb .breadcrumb__ul {
  padding: 0;
  background: none;
}

/* ============================================================
   11. Pagination
   ============================================================ */

/* Simple: only show prev/next, hide page numbers */
.oc-pagination-simple nav.pagination .page-numbers:not(.prev):not(.next):not(.current) {
  display: none;
}
.oc-pagination-simple nav.pagination {
  display: flex;
  justify-content: space-between;
}

/* ============================================================
   12. SNS Share Button
   ============================================================ */

/* Icon only */
.oc-sns-icon-only .sns-btn-wrap .text,
.oc-sns-icon-only .stk-sns-btn .text,
.oc-sns-icon-only .sns-btn-wrap span:not(.icon) {
  display: none !important;
}

/* Hidden */
.oc-sns-hidden .sns-btn-wrap,
.oc-sns-hidden .stk-sns-btn {
  display: none !important;
}

/* Position: bottom only */
.oc-sns-pos-bottom-only .article-header .sns-btn-wrap,
.oc-sns-pos-bottom-only .entry-header .sns-btn-wrap {
  display: none !important;
}

/* Position: top only */
.oc-sns-pos-top-only .article-footer .sns-btn-wrap,
.oc-sns-pos-top-only .singlefoot .sns-btn-wrap,
.oc-sns-pos-top-only #singlefoot .sns-btn-wrap {
  display: none !important;
}

/* ============================================================
   13. Comments
   ============================================================ */

.oc-comment-hidden section#comments,
.oc-comment-hidden #respond {
  display: none !important;
}

.oc-comment-minimal section#comments {
  border: none;
  padding: 1em 0;
}
.oc-comment-minimal .commentlist {
  font-size: 0.9em;
}
.oc-comment-minimal .comment-form label {
  font-size: 0.85em;
}