/*
Theme Name:  Sawagakki
Theme URI:   https://sawagakki.local
Version:     1.0.23
Description: Custom classic WordPress theme for さわ楽器. Hero slider and pre-footer configurable via Customizer.
Author:      Raimund Vogtenhuber
Author URI:  https://vogtenhuber.com
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sawagakki
*/

/* ===========================
   CSS Custom Properties
   =========================== */

:root {
    --color-primary:   #00acc6;
    --color-secondary: #2e6da4;
    --color-dark:      #1A202C;
    --color-mid:       #4A5568;
    --color-light:     #EDF2F7;
    --color-bg:        #f3f4f5;
    --color-white:     #ffffff;

    --slider-height-desktop: 500px;
    --slider-height-mobile:  260px;

    --max-width: 1200px;
    --content-padding: 1.5rem;

    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* ===========================
   Reset / Base
   =========================== */

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

body {
    margin:      0;
    font-family: var(--font-base);
    font-size:   1rem;
    line-height: 1.7;
    color:       var(--color-dark);
    background:  var(--color-white);
}

img { max-width: 100%; height: auto; }

a { color: var(--color-primary); }
a:hover { color: var(--color-secondary); }

/* ===========================
   Layout
   =========================== */

#wrapper {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.site-content {
    flex:       1;
    max-width:  var(--max-width);
    margin:     0 auto;
    padding:    2rem var(--content-padding);
    width:      100%;
}

/* ===========================
   Site Header
   =========================== */

#site-header {
    background: var(--color-white);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    max-width:   var(--max-width);
    margin:      0 auto;
    padding:     0 var(--content-padding);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         1rem;
    min-height:  64px;
}

.site-branding { display: flex; align-items: center; gap: 0.75rem; }

.site-title {
    font-size:   1.2rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.2;
}
.site-title a { text-decoration: none; color: var(--color-dark); }
.site-title a:hover { color: var(--color-primary); }

.site-logo,
.site-logo a { display: flex; align-items: center; }
.site-logo img { height: 48px; width: auto; display: block; }

/* ===========================
   Navigation
   =========================== */

#primary-navigation { display: flex; align-items: center; }

.primary-menu {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    gap:         0;
}

.primary-menu > li {
    position: relative;
}

.primary-menu > li > a {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         0 1rem;
    min-height:      64px;
    justify-content: center;
    text-decoration: none;
    color:           var(--color-dark);
    font-size:       1rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    transition:      color 0.2s, background 0.2s;
    white-space:     nowrap;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
    color:      var(--color-primary);
    background: rgba(0, 172, 198, 0.06);
}

/* Sub-menu */
.primary-menu .sub-menu {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0;
    background: var(--color-white);
    border:     1px solid #e2e8f0;
    border-top: 2px solid var(--color-primary);
    min-width:  180px;
    list-style: none;
    margin:     0;
    padding:    0.5rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index:    200;
}

.primary-menu li:hover > .sub-menu { display: block; }

.primary-menu .sub-menu li a {
    display:         block;
    padding:         0.5rem 1.2rem;
    text-decoration: none;
    color:           var(--color-dark);
    font-size:       0.875rem;
    white-space:     nowrap;
    transition:      background 0.15s;
}
.primary-menu .sub-menu li a:hover { background: var(--color-light); color: var(--color-primary); }

/* Nav English description */
.global-nav-description {
    display:     block;
    font-size:   0.62rem;
    font-weight: 400;
    opacity:     0.65;
    line-height: 1.2;
    margin-top:  0.1rem;
    letter-spacing: 0.02em;
}

/* Mobile nav toggle */
.nav-toggle {
    display:         none;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0.5rem 0.75rem;
    color:           var(--color-dark);
    line-height:     0;
    align-self:      center;
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }

    body { font-size: 0.9rem; }
    h1, .entry-title { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.15rem; }

    #primary-navigation {
        display:    none;
        position:   absolute;
        top:        64px;
        left:       0;
        right:      0;
        background: var(--color-white);
        border-bottom: 1px solid #e2e8f0;
        padding:    0.5rem 0 1rem;
        z-index:    200;
    }
    #primary-navigation.open { display: block; }

    .primary-menu { flex-direction: column; gap: 0; }
    .primary-menu > li > a { min-height: 44px; padding: 0.5rem 1.5rem; flex-direction: row; gap: 0.5rem; justify-content: flex-start; }
    .global-nav-description { margin-top: 0; }
    .primary-menu .sub-menu { position: static; border: none; border-left: 3px solid var(--color-primary); margin: 0 1.5rem; box-shadow: none; display: block; }
    .primary-menu .sub-menu li a { padding: 0.4rem 1rem; }
}

/* ===========================
   Hero Slider
   =========================== */

.sawagakki-slider {
    position:   relative;
    width:      100%;
    overflow:   hidden;
    background: #000;
}

.sawagakki-slide {
    display:             none;
    width:               100%;
    height:              var(--slider-height-desktop);
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    position:            relative;
    animation:           sawagakki-fade 0.8s ease-in-out;
}

.sawagakki-slide.active { display: block; }

@keyframes sawagakki-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 768px) {
    .sawagakki-slide { height: var(--slider-height-mobile); }
}

/* Slide text overlay */
.sawagakki-slide-text {
    position:  absolute;
    bottom:    15%;
    padding:   1rem 2rem;
    max-width: 60%;
}
.sawagakki-slide-text.text-left   { left: 5%; }
.sawagakki-slide-text.text-right  { right: 5%; text-align: right; }
.sawagakki-slide-text.text-center {
    left:      50%;
    transform: translateX(-50%);
    text-align: center;
    max-width:  80%;
}

.sawagakki-slide-text h2 {
    font-size:      2.2rem;
    font-weight:    300;
    margin:         0 0 0.75rem;
    line-height:    1.5;
    letter-spacing: 0.06em;
    text-shadow:    0 1px 6px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .sawagakki-slide-text h2 { font-size: 1.2rem; }
    .sawagakki-slide-text    { bottom: 10%; padding: 0.5rem 1rem; max-width: 80%; }
}

.sawagakki-slide-btn {
    display:         inline-block;
    padding:         0.5rem 1.5rem;
    background:      var(--color-primary);
    color:           #fff;
    border-radius:   3px;
    text-decoration: none;
    font-size:       0.9rem;
    margin-top:      0.5rem;
    transition:      background 0.2s;
}
.sawagakki-slide-btn:hover { background: var(--color-secondary); color: #fff; }

/* Prev / Next buttons */
.sawagakki-slider-prev,
.sawagakki-slider-next {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    background: rgba(0,0,0,0.35);
    color:      #fff;
    border:     none;
    cursor:     pointer;
    font-size:  1.5rem;
    padding:    0.6rem 1rem;
    z-index:    10;
    line-height: 1;
    transition: background 0.2s;
}
.sawagakki-slider-prev { left: 0; }
.sawagakki-slider-next { right: 0; }
.sawagakki-slider-prev:hover,
.sawagakki-slider-next:hover { background: rgba(0,0,0,0.6); }

/* Dots */
.sawagakki-slider-dots {
    position:  absolute;
    bottom:    1rem;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       0.5rem;
    z-index:   10;
}
.sawagakki-dot {
    width:        12px;
    height:       12px;
    border-radius: 50%;
    background:   rgba(255,255,255,0.5);
    cursor:       pointer;
    border:       2px solid rgba(255,255,255,0.8);
    transition:   background 0.2s;
}
.sawagakki-dot.active { background: #fff; }

/* ===========================
   Page Content
   =========================== */

/* Regular pages: full width of site-content container */
.site-content .entry-content {
    max-width: none;
}

/* Front page: blocks control their own width */
.front-page-main {
    width:    100%;
    overflow: hidden;
}

.front-page-main .entry-content {
    max-width: none;
    margin:    0;
    padding:   0;
}

/* Normal blocks: centered with max-width */
.front-page-main .entry-content > * {
    max-width:    var(--max-width);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--content-padding);
    padding-right: var(--content-padding);
    box-sizing:    border-box;
}

/* Frontpage: gray cover block — contained, rounded top corners */
.front-page-main .entry-content > .wp-block-cover.alignfull {
    border-radius: 8px 8px 0 0;
    overflow:      hidden;
}

/* Frontpage: second image row — spacing after cover block */
.front-page-main .wp-block-cover.alignfull + .wp-block-group {
    padding-top:    2.5rem;
    padding-bottom: 2.5rem;
}

/* Headings: lighter, more elegant */
h1, h2, h3, h4 {
    font-weight:    300;
    line-height:    1.4;
    letter-spacing: 0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; font-weight: 400; }

.entry-content h1,
.entry-content h2,
.entry-content h3 { line-height: 1.4; }

/* ===========================
   Footer Widgets (Google Maps)
   =========================== */

.sawagakki-footer-widgets {
    padding:    2.5rem var(--content-padding);
    background: #f5f5f5;
}
.sawagakki-footer-widgets .widget {
    max-width:     var(--max-width);
    margin:        0 auto;
    background:    var(--color-white);
    border:        1px solid #e2e8f0;
    border-radius: 8px;
    overflow:      hidden;
    box-shadow:    0 1px 4px rgba(0,0,0,0.06);
}
.sawagakki-footer-widgets .widget-title {
    margin:      0;
    padding:     0.9rem 1.5rem;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--color-mid);
    border-bottom: 1px solid #e2e8f0;
    background:  var(--color-light);
}
.sawagakki-footer-widgets iframe {
    width:   100%;
    height:  400px;
    display: block;
    border:  0;
}
@media (max-width: 768px) {
    .sawagakki-footer-widgets iframe { height: 280px; }
}

/* ===========================
   Pre-footer: Contact + Logos
   =========================== */

.sawagakki-prefooter {
    background: var(--color-bg);
    padding:    2rem 0;
}
.sawagakki-prefooter-inner {
    max-width:   var(--max-width);
    margin:      0 auto;
    padding:     0 var(--content-padding);
    display:     flex;
    align-items: center;
    gap:         2rem;
    flex-wrap:   wrap;
}
.sawagakki-prefooter-contact { flex: 1; min-width: 260px; }
.sawagakki-prefooter-contact .catch  { font-size: 1rem; margin-bottom: 0.4rem; }
.sawagakki-prefooter-contact .tel {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--color-primary);
    margin:      0.2rem 0;
}
.sawagakki-prefooter-contact .tel i { margin-right: 0.3em; }
.sawagakki-prefooter-contact .hours {
    font-size: 0.85rem;
    color:     var(--color-mid);
    margin:    0.25rem 0 0.8rem;
}
.sawagakki-prefooter-contact .btn-contact {
    display:         inline-block;
    padding:         0.6rem 1.5rem;
    background:      var(--color-primary);
    color:           #fff;
    border-radius:   4px;
    text-decoration: none;
    font-weight:     600;
    transition:      filter 0.2s;
}
.sawagakki-prefooter-contact .btn-contact:hover { filter: brightness(0.88); color: #fff; }

.sawagakki-prefooter-logo1 { display: flex; align-items: center; }
.sawagakki-prefooter-logo1 img { width: 130px; height: auto; }
.sawagakki-prefooter-logos { display: flex; align-items: center; }
.sawagakki-prefooter-logos img { width: 110px; height: auto; }

/* ===========================
   Site Footer
   =========================== */

#site-footer {
    background: #2d3748;
    color:      rgba(255,255,255,0.6);
    padding:    1rem 0;
    text-align: center;
    font-size:  0.8rem;
}

/* ===========================
   Footer Credit
   =========================== */

.sawagakki-theme-credit {
    text-align:  center;
    padding:     0.4rem;
    font-size:   0.75rem;
    background:  #1A202C;
    color:       rgba(255,255,255,0.5);
}
.sawagakki-theme-credit a { color: inherit; text-decoration: none; }
.sawagakki-theme-credit a:hover { text-decoration: underline; }

/* ===========================
   VK Blocks CSS Compatibility Layer
   =========================== */

.vk_block-margin-0--margin-top    { margin-top:    0 !important; }
.vk_block-margin-0--margin-bottom { margin-bottom: 0 !important; }
.vk_block-margin-xxs--margin-top    { margin-top:    0.25rem; }
.vk_block-margin-xxs--margin-bottom { margin-bottom: 0.25rem; }
.vk_block-margin-xs--margin-top    { margin-top:    0.5rem; }
.vk_block-margin-xs--margin-bottom { margin-bottom: 0.5rem; }
.vk_block-margin-sm--margin-top    { margin-top:    1rem; }
.vk_block-margin-sm--margin-bottom { margin-bottom: 1rem; }
.vk_block-margin-md--margin-top    { margin-top:    2rem; }
.vk_block-margin-md--margin-bottom { margin-bottom: 2rem; }
.vk_block-margin-lg--margin-top    { margin-top:    4rem; }
.vk_block-margin-lg--margin-bottom { margin-bottom: 4rem; }
.vk_block-margin-lg--height        { height: 4rem; display: block; }

.vk_spacer-display-pc,
.vk_spacer-display-tablet,
.vk_spacer-display-mobile { display: block; }

.is-style-vk-heading-plain {
    border:     none !important;
    padding:    0 !important;
    background: none !important;
    box-shadow: none !important;
}

.is-style-vk-image-rounded img { border-radius: 50%; object-fit: cover; }

.wp-block-columns.vk-cols--grid { flex-wrap: wrap; }
@media (min-width: 782px) {
    .wp-block-columns.vk-cols--reverse { flex-direction: row-reverse; }
}

.vk_button { margin: 0.5rem 0; }
.vk_button-align-block  { display: block; }
.vk_button-align-center { text-align: center; }

.vk_button_link {
    display:         inline-block;
    padding:         0.65rem 1.5rem;
    border-radius:   4px;
    text-decoration: none;
    font-weight:     600;
    cursor:          pointer;
    transition:      filter 0.2s;
    color:           #fff;
}
.vk_button_link:hover { filter: brightness(0.88); color: #fff; }

.vk_button-align-block .vk_button_link,
.vk_button_link.btn-block {
    display:    block;
    text-align: center;
    width:      100%;
    box-sizing: border-box;
}

.has-vk-color-primary-background-color {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}
.has-vk-color-primary-color { color: var(--color-primary) !important; }
.vk_button_link_after { margin-left: 0.4em; }

.wp-block-vk-blocks-slider:not(:has(.swiper-slide)) { display: none; }

/* --- child-page-index: pill links (legacy / no thumbnail) --- */
.vk-child-page-index:not(.vk-child-page-index--cards) {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.75rem;
    list-style: none;
    padding:    0;
    margin:     1.5rem 0;
}
.vk-child-page-index:not(.vk-child-page-index--cards) li a {
    display:         inline-block;
    padding:         0.6rem 1.4rem;
    background:      var(--color-light);
    border-radius:   4px;
    text-decoration: none;
    color:           var(--color-dark);
    font-weight:     600;
    transition:      background 0.2s, color 0.2s;
}
.vk-child-page-index:not(.vk-child-page-index--cards) li a:hover { background: var(--color-primary); color: #fff; }

/* --- child-page-index: card grid with thumbnail --- */
.vk-child-page-index--cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin:                1.5rem 0;
}
@media (max-width: 768px) {
    .vk-child-page-index--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .vk-child-page-index--cards { grid-template-columns: 1fr; }
}
.vk-child-page-card {
    display:         flex;
    flex-direction:  column;
    background:      var(--color-white);
    border:          1px solid #c8d5e0;
    border-radius:   8px;
    overflow:        hidden;
    text-decoration: none;
    color:           var(--color-dark);
    transition:      box-shadow 0.2s, transform 0.2s;
}
.vk-child-page-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform:  translateY(-2px);
}
.vk-child-page-card__thumb { display: block; }
.vk-child-page-card__thumb img {
    width:      100%;
    height:     160px;
    object-fit: cover;
    display:    block;
}
.vk-child-page-card__title {
    padding:     0.75rem 1rem;
    font-weight: 600;
    font-size:   0.95rem;
    line-height: 1.4;
}

/* --- Post card grid (index.php) --- */
.post-card-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin:                2rem 0;
    max-width:             var(--max-width);
    padding:               0 var(--content-padding);
}
@media (max-width: 768px) {
    .post-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .post-card-grid { grid-template-columns: 1fr; }
}
.post-card {
    display:         flex;
    flex-direction:  column;
    background:      var(--color-white);
    border:          1px solid #c8d5e0;
    border-radius:   8px;
    overflow:        hidden;
    transition:      box-shadow 0.2s, transform 0.2s;
}
.post-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform:  translateY(-2px);
}
.post-card__thumb { display: block; }
.post-card__thumb {
    height:           220px;
    background-color: var(--color-light);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;
    flex-shrink:      0;
}
.post-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}
.post-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        1rem 1.25rem 1.25rem;
    gap:            0.4rem;
}
.post-card__date {
    font-size:  0.8rem;
    color:      var(--color-mid);
}
.post-card__title {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.4;
}
.post-card__title a {
    color:           var(--color-dark);
    text-decoration: none;
}
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt {
    font-size:   0.875rem;
    color:       var(--color-mid);
    line-height: 1.6;
    flex:        1;
    margin:      0;
}
.post-card__more {
    margin-top:  auto;
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--color-primary);
    text-decoration: none;
}
.post-card__more:hover { text-decoration: underline; }
.post-pagination { margin: 2rem 0; text-align: center; }

/* --- Single post: featured image --- */
.entry-thumbnail {
    margin:    0 auto 2rem;
    max-width: 720px;
    text-align: center;
}
.entry-thumbnail img {
    width:         100%;
    height:        auto;
    border-radius: 6px;
    display:       block;
}

/* ===========================
   Contact Page
   =========================== */

.page-id-19 .entry-content > p,
.page-id-19 .entry-content > .wp-block-contact-form-7-contact-form-selector,
.page-id-19 .entry-content > .vk-contact-section {
    background:    var(--color-light);
    border:        1px solid #e2e8f0;
    border-radius: 8px;
    padding:       2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow:    0 1px 4px rgba(0,0,0,0.05);
}

.page-id-19 .entry-content > p { display: none; } /* hide stray empty paras */

.page-id-19 .entry-content > p:has(strong) {
    display:       block;
    background:    var(--color-light);
    border-left:   4px solid var(--color-primary);
    border-top:    none;
    border-right:  none;
    border-bottom: none;
    border-radius: 0 8px 8px 0;
    padding:       1rem 1.5rem;
    margin-bottom: 0.5rem;
    box-shadow:    none;
    font-size:     1.1rem;
}

/* CF7 form element spacing */
.wpcf7 form p,
.wpcf7 form label { display: block; margin-bottom: 1.2rem; line-height: 1.5; }

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea,
.wpcf7 form select {
    width:         100%;
    padding:       0.65rem 0.9rem;
    border:        1px solid #cbd5e0;
    border-radius: 5px;
    font-size:     1rem;
    font-family:   var(--font-base);
    color:         var(--color-dark);
    background:    var(--color-white);
    transition:    border-color 0.2s, box-shadow 0.2s;
    margin-top:    0.3rem;
}

.wpcf7 form input[type="text"]:focus,
.wpcf7 form input[type="email"]:focus,
.wpcf7 form input[type="tel"]:focus,
.wpcf7 form textarea:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(0, 172, 198, 0.15);
    outline:      none;
    background:   #fff;
}

.wpcf7 form textarea { min-height: 140px; resize: vertical; }

.wpcf7-submit,
.wpcf7 input[type="submit"] {
    display:         inline-block;
    padding:         0.75rem 2.5rem;
    background:      var(--color-primary);
    color:           #fff;
    border:          none;
    border-radius:   5px;
    font-size:       1rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background 0.2s, transform 0.1s;
    margin-top:      0.5rem;
}
.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover { background: var(--color-secondary); }
.wpcf7-submit:active { transform: translateY(1px); }

.wpcf7-not-valid-tip { color: #e53e3e; font-size: 0.85rem; margin-top: 0.2rem; }
.wpcf7-response-output { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 5px; font-size: 0.9rem; }
.wpcf7-response-output.wpcf7-mail-sent-ok { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
.wpcf7-response-output.wpcf7-validation-errors { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; }

/* VK contact-section fallback */
.vk-contact-section { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.vk-contact-section .vk-cs-info { flex: 1; min-width: 200px; }
.vk-contact-section .vk-cs-tel  { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); margin: 0.3rem 0; }
.vk-contact-section .vk-cs-hours { font-size: 0.9rem; color: var(--color-mid); }

/* ===========================
   Skip Link (Accessibility)
   =========================== */

.skip-link {
    position:  absolute;
    left:      -9999px;
    top:       0;
    z-index:   999;
    padding:   0.5rem 1rem;
    background: var(--color-primary);
    color:     #fff;
}
.skip-link:focus { left: 0; }