/* ================================================
   cookandcoin.com — Cute & Airy Design v1
   Coral #FF7B6B · Mint #6DC4B4 · Lemon #FFD54F
   Cream #FFF5EC · Warm Brown #3D2B1F
   ================================================ */

:root {
    --cc-coral:  #FF7B6B;
    --cc-mint:   #6DC4B4;
    --cc-lemon:  #FFD54F;
    --cc-cream:  #FFF5EC;
    --cc-brown:  #3D2B1F;
    --cc-muted:  #9B7B6A;
    --cc-border: #FFE0CC;
    --cc-white:  #FFFFFF;
    --cc-rad:    14px;
    --cc-rad-sm: 8px;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--cc-cream) !important;
    color: var(--cc-brown) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif !important;
    color: var(--cc-brown) !important;
    font-weight: 700 !important;
}

/* ── Header ── */
#masthead, .site-header, .ast-site-header-wrap,
.ast-primary-header-bar, .ast-header-html-inside {
    background: var(--cc-coral) !important;
    box-shadow: 0 2px 16px rgba(255,123,107,0.22) !important;
    border-bottom: none !important;
}

.site-title a, .ast-logo-title-inline a,
.custom-logo-link img { color: #fff !important; }
.site-title a {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.ast-nav-menu > li > a, .main-navigation ul li a {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}
.ast-nav-menu > li > a:hover,
.main-navigation ul li a:hover {
    color: var(--cc-lemon) !important;
}

/* ── Hero ── */
.cc-hero {
    background: linear-gradient(135deg, #FF8C7C 0%, #FFB347 100%);
    padding: 52px 24px 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cc-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40'%3E%3Cpath fill='%23FFF5EC' d='M0,20 C240,40 480,0 720,20 C960,40 1200,0 1440,20 L1440,40 L0,40 Z'/%3E%3C/svg%3E") no-repeat bottom / cover;
}
.cc-hero-inner { position: relative; z-index: 1; }
.cc-hero-emoji {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 6px;
}
.cc-hero-ttl {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: clamp(1.5rem, 4vw, 2.1rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cc-hero-sub {
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.85 !important;
}

/* ── Section label ── */
.cc-section-label {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--cc-brown);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Cards ── */
article.type-post, .ast-article-post, .post-card {
    background: var(--cc-white) !important;
    border-radius: var(--cc-rad) !important;
    border: 2px solid var(--cc-border) !important;
    box-shadow: 0 3px 14px rgba(255,123,107,0.07) !important;
    overflow: hidden !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
article.type-post:hover, .ast-article-post:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(255,123,107,0.14) !important;
}

.entry-title {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}
.entry-title a {
    color: var(--cc-brown) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.entry-title a:hover { color: var(--cc-coral) !important; }

/* Category pill */
.cat-links a, .entry-meta .cat-links a {
    background: var(--cc-lemon) !important;
    color: var(--cc-brown) !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
}

/* Thumbnail radius */
.ast-article-post .ast-thumb img,
article.type-post .wp-post-image {
    border-radius: var(--cc-rad-sm) var(--cc-rad-sm) 0 0 !important;
}

/* ── Sidebar widgets ── */
#secondary .widget, .ast-sidebar-wrap .widget,
.widget-area .widget, aside .widget {
    background: var(--cc-white) !important;
    border-radius: var(--cc-rad) !important;
    border: 2px solid var(--cc-border) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
}
.widgettitle, .widget-title {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--cc-coral) !important;
    padding-bottom: 10px !important;
    border-bottom: 2px dashed var(--cc-border) !important;
    margin-bottom: 14px !important;
}

/* ── CTA Box ── */
.cc-cta {
    background: linear-gradient(135deg, var(--cc-coral), #FF9A3C);
    border-radius: var(--cc-rad);
    padding: 26px 18px;
    text-align: center;
    margin-bottom: 22px;
}
.cc-cta-emoji { font-size: 2rem; margin-bottom: 8px; display: block; }
.cc-cta-title {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
}
.cc-cta-body {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.85;
    margin-bottom: 16px;
}
.cc-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--cc-coral) !important;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 9px 22px;
    border-radius: 30px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.cc-cta-btn:hover { transform: translateY(-2px); color: var(--cc-coral) !important; }

/* ── Single post ── */
.single .entry-content {
    line-height: 1.95;
    font-size: 0.95rem;
}
.single .entry-content h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    color: var(--cc-coral) !important;
    border-left: 5px solid var(--cc-coral) !important;
    padding-left: 12px !important;
    margin: 42px 0 18px !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    background: none !important;
}
.single .entry-content h3 {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    color: var(--cc-mint) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 32px 0 12px !important;
    border-bottom: 2px dotted var(--cc-border) !important;
    padding-bottom: 6px !important;
    background: none !important;
}
.single .entry-content blockquote {
    background: #FFF9F0 !important;
    border-left: 5px solid var(--cc-lemon) !important;
    border-radius: 0 var(--cc-rad-sm) var(--cc-rad-sm) 0 !important;
    padding: 16px 20px !important;
    font-style: normal !important;
    border-top: none !important; border-right: none !important; border-bottom: none !important;
}

/* ── Footer ── */
.site-footer, #colophon, .ast-footer-html {
    background: var(--cc-brown) !important;
    border-top: 3px solid var(--cc-coral) !important;
    color: rgba(255,255,255,0.52) !important;
    text-align: center !important;
    padding: 24px 20px !important;
    font-size: 0.82rem !important;
}
.site-footer a, #colophon a { color: var(--cc-lemon) !important; text-decoration: none !important; }

/* ── Back to top ── */
.cc-backtop {
    position: fixed;
    bottom: 28px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cc-coral);
    color: #fff !important;
    text-align: center;
    line-height: 44px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(255,123,107,0.4);
    z-index: 9999;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.cc-backtop.show { opacity: 1; pointer-events: auto; }
.cc-backtop:hover { transform: translateY(-3px); color: #fff !important; }

/* ── Reading progress ── */
.cc-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-coral), var(--cc-lemon));
    width: 0;
    z-index: 99999;
    transition: width 0.1s linear;
}