/*
Theme Name: トータルカーファッション Y's
Theme URI: https://example.com/
Author: Y's
Author URI: https://example.com/
Description: 糸島市のカーコーティング・ディテイリング／板金・車検専門店「トータルカーファッション Y's」のオリジナルクラシックテーマ。新着情報（投稿）と施工事例（カスタム投稿 WORKS）を管理画面から更新できます。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ys
*/

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body { margin: 0; background: #000000; color: #f4f4f6; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: inherit; }
::selection { background: #05a3ed; color: #000; }
input::placeholder, textarea::placeholder { color: #5c5c63; }

/* ===== Header / nav ===== */
.ys-yh a { transition: color .18s; }
@media (max-width:1040px){ [data-desktop-nav]{ display:none !important; } [data-top-burger]{ display:flex !important; } }
@media (max-width:680px){ [data-drawer]{ width:86% !important; } [data-hdr-logo]{ height:42px !important; } }
@media (max-width:430px){ [data-hdr-cta]{ display:none !important; } [data-hdr-logo]{ height:38px !important; } }

/* Floating scroll burger */
[data-burger]{ transition: opacity .3s ease, transform .3s ease; opacity:0; transform:translateY(-12px); pointer-events:none; }
body.ys-scrolled [data-burger]{ opacity:1; transform:translateY(0); pointer-events:auto; }
body.ys-menu-open [data-burger]{ opacity:0 !important; transform:translateY(-12px) !important; pointer-events:none !important; }

/* Drawer + backdrop */
[data-drawer]{ transition: transform .44s cubic-bezier(.46,.03,.18,1); transform: translateX(100%); }
[data-backdrop]{ transition: opacity .35s ease; opacity:0; pointer-events:none; }
body.ys-menu-open [data-drawer]{ transform: translateX(0%); }
body.ys-menu-open [data-backdrop]{ opacity:1; pointer-events:auto; }
body.ys-menu-open{ overflow:hidden; }

/* ===== Hero ===== */
@media (max-width:760px){ [data-hero-side]{ display:none !important; } }
[data-hero-slide]{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
[data-hero-slide].is-active{ opacity:1; }
[data-hero-dot]{ border:none; padding:0; cursor:pointer; height:6px; border-radius:999px; transition:all .35s ease; width:8px; background:rgba(255,255,255,0.5); }
[data-hero-dot].is-active{ width:30px; background:#05a3ed; }

/* ===== Service grids ===== */
[data-svc-grid]{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:880px){ [data-svc-grid]{ grid-template-columns:repeat(3,1fr); } }
[data-reason-grid]{ display:grid; grid-template-columns:1fr; gap:2px; }
@media (min-width:880px){ [data-reason-grid]{ grid-template-columns:repeat(3,1fr); } }
[data-svc]{ scroll-margin-top: 88px; }
@media (min-width:760px){ [data-svc][id="film"],[data-svc][id="wrapping"],[data-svc][id="cleaning"],[data-svc][id="sticker"],[data-svc][id="dent"],[data-svc][id="glass"],[data-svc][id="light"],[data-svc][id="bodycare"]{ min-height:340px; } }
/* Stack service rows as heading -> text -> photo on mobile/tablet */
@media (max-width:1040px){ [data-svc]{ flex-direction:column !important; min-height:0 !important; } [data-svc] > *{ flex:none !important; } [data-svc] > [data-zoom]{ order:2 !important; width:100% !important; border-left:0 !important; } }

/* ===== Works ===== */
[data-ba]{ --ba: 50%; }
[data-ba-after]{ clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
[data-ba-line]{ left: var(--ba); }
[data-ba-handle]{ left: var(--ba); }
[data-work].is-hidden{ display:none; }

/* WordPress core alignment / caption helpers */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Pagination */
.page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; margin:0 4px 8px 0; border:1px solid rgba(255,255,255,0.18); border-radius:3px; color:#cfcfd4; text-decoration:none; font-family:'Oswald',sans-serif; font-size:14px; transition:all .15s; }
.page-numbers.current{ background:#05a3ed; border-color:#05a3ed; color:#001018; font-weight:700; }
a.page-numbers:hover{ border-color:#05a3ed; color:#fff; }
.page-numbers.dots{ border-color:transparent; }

/* Post content (single news / works) */
.ys-entry-content{ font-size:15px; line-height:2; color:#c8c8cd; }
.ys-entry-content h2{ font-size:clamp(20px,3vw,26px); font-weight:700; color:#fff; margin:36px 0 14px; line-height:1.4; }
.ys-entry-content h3{ font-size:18px; font-weight:700; color:#fff; margin:28px 0 12px; }
.ys-entry-content p{ margin:0 0 18px; }
.ys-entry-content a{ color:#05a3ed; }
.ys-entry-content img{ border-radius:4px; height:auto; }
.ys-entry-content ul, .ys-entry-content ol{ margin:0 0 18px; padding-left:1.4em; }
.ys-entry-content li{ margin:0 0 8px; }
.ys-entry-content blockquote{ margin:0 0 18px; padding:12px 20px; border-left:3px solid #05a3ed; background:#101013; color:#b6b6bc; }

/* ===== Mobile / tablet fixed action bar ===== */
[data-mobile-bar]{ display:none !important; }
[data-mobile-bar-spacer]{ height:0; }
@media (max-width:1024px){
  [data-mobile-bar]{ display:block !important; }
  [data-mobile-bar-spacer]{ height:66px; }
  [data-float-cta]{ display:none !important; }
  [data-hero-cta]{ display:none !important; }
  [data-hero-hours]{ display:none !important; }
}


/* ===== Mobile typography (<=640px) ===== */
[data-hero-br]{ display:none; }
@media (max-width:640px){
  p{ font-size:13px !important; line-height:1.85 !important; }
  h1{ font-size:24px !important; line-height:1.34 !important; }
  [data-hero-title]{ font-size:37px !important; line-height:1.28 !important; }
  [data-hero-br]{ display:inline !important; }
  h3{ font-size:16px !important; }
  [data-foot-lead]{ max-width:100% !important; }
  [data-svc-name]{ font-size:12px !important; letter-spacing:0 !important; white-space:nowrap !important; }
  [data-svc-grid] a > div:last-child{ padding:11px 9px !important; gap:4px !important; }
  [data-svc-grid] a svg{ width:6px !important; height:11px !important; }
}

/* ===== Works teaser — mobile carousel ===== */
[data-works-teaser]{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
[data-works-nav]{ display:none; }
@media (max-width:600px){
  [data-works-teaser]{ display:flex; grid-template-columns:none; gap:0 !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  [data-works-teaser]::-webkit-scrollbar{ display:none; }
  [data-works-teaser] > *{ flex:0 0 100%; scroll-snap-align:center; }
  [data-works-nav]{ display:flex !important; }
}

/* ===== Contact band CTA — mobile ===== */
@media (max-width:600px){
  [data-contact-cta]{ gap:10px !important; }
  [data-contact-cta] [data-cta]{ flex:1 1 0 !important; min-width:0 !important; display:flex !important; align-items:center; justify-content:center; font-size:12px !important; padding:14px 6px !important; white-space:nowrap; }
  [data-contact-cta] a[href^="tel:"]{ flex:1 1 100% !important; order:3; border:none !important; padding:6px 0 !important; font-size:20px !important; }
}


/* ===== CTA hover sweep ===== */
[data-cta]{ background-repeat:no-repeat; }
@media (hover:hover){
  [data-cta]:hover{ background-position:100% 0 !important; }
  [data-cta="mail"]:hover{ color:#fff !important; }
  [data-cta="line"]:hover{ color:#000 !important; }
}


/* ===== Card image zoom ===== */
[data-zoom]{ transition:transform .6s cubic-bezier(.2,.6,.2,1); will-change:transform; }
a:hover [data-zoom],[data-svc]:hover [data-zoom]{ transform:scale(1.08); }
@media (prefers-reduced-motion:reduce){ [data-zoom]{ transition:none; } }

/* Disable zoom on the Car Detailing page */
.page-template-template-car-detailing [data-zoom]{ transform:none !important; transition:none !important; }

/* ===== Instagram photo grid ===== */
.ys-ig-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ys-ig-item{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:#101013; }
.ys-ig-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.ys-ig-item .ys-ig-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0); opacity:0; transition:opacity .3s ease, background .3s ease; }
@media (hover:hover){
  .ys-ig-item:hover img{ transform:scale(1.06); }
  .ys-ig-item:hover .ys-ig-ov{ opacity:1; background:rgba(0,0,0,0.32); }
}
@media (max-width:1024px){ .ys-ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .ys-ig-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* ===== Car Detailing — equal-height service rows (PC only) ===== */
@media (min-width:1025px){
  .ys-svc-row{ min-height:380px; }
}