/*
Theme Name: Watarutakeyama
Theme URI: https://watarutakeyama.net/
Author: Wataru Takeyama
Author URI: https://watarutakeyama.net/
Description: Watarutakeyama is the original child theme for watarutakeyama.net. Built on top of the Flex Multi Business parent theme with a custom dark, modern-digital design (indigo blue, cream, brass gold). Bilingual ready (English / Japanese) via Polylang or compatible plugins.
Version: 0.2.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Template: flex-multi-business
Text Domain: watarutakeyama
Tags: blog, portfolio, news, custom-background, custom-logo, custom-menu, featured-images, one-column, two-columns, right-sidebar, left-sidebar, grid-layout, custom-header, flexible-header, footer-widgets, full-width-template, editor-style, theme-options, threaded-comments, translation-ready

Based on Flex Magazine by flextheme (https://www.flextheme.net/), GPL v2 or later.
Underscores https://underscores.me/, (C) 2012-2022 Automattic, Inc.
*/

/* =========================================================
   Design tokens — Watarutakeyama palette
   ========================================================= */
:root {
    --wt-bg:           #0A0A0A;   /* near-black backdrop, lets indigo pop  */
    --wt-bg-elevated:  #111315;   /* slightly lifted surface              */
    --wt-indigo:       #264348;   /* main brand color (deep petrol)       */
    --wt-indigo-soft:  #1B2F33;   /* darker variant for sections          */
    --wt-cream:        #F5F1E8;   /* primary readable text                */
    --wt-cream-muted:  rgba(245, 241, 232, 0.65);
    --wt-cream-faint:  rgba(245, 241, 232, 0.35);
    --wt-brass:        #B08D57;   /* CTA / links / highlights             */
    --wt-brass-hover:  #CFA774;   /* lighter brass on hover               */
    --wt-ink:          #1A1A1A;   /* alt surface / shadow                 */
    --wt-border:       rgba(245, 241, 232, 0.12);
    --wt-border-strong:rgba(245, 241, 232, 0.24);

    /* Parent theme uses this variable in many rules — point it to brass */
    --primary-theme-color: var(--wt-brass) !important;
}

/* =========================================================
   Base typography
   ========================================================= */
body {
    background-color: var(--wt-bg) !important;
    color: var(--wt-cream);
    font-family: "Inter", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    color: var(--wt-cream);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { color: var(--wt-cream); }

a {
    color: var(--wt-brass);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:active, a:focus {
    color: var(--wt-brass-hover);
    text-decoration: none;
}

::selection { background: var(--wt-brass); color: var(--wt-bg); }

/* =========================================================
   Layout / surfaces
   ========================================================= */
#page, .site-wrapper {
    background-color: var(--wt-bg);
}

.site-main, main {
    background-color: var(--wt-bg);
}

.container, .container-fluid {
    color: var(--wt-cream);
}

hr, .wp-block-separator {
    border-color: var(--wt-border);
    background-color: var(--wt-border);
}

/* =========================================================
   Header
   ========================================================= */
.header-two,
.header-two.affix {
    background: var(--wt-ink) !important;
    border-bottom: 1px solid var(--wt-border);
    box-shadow: 0 1px 0 rgba(176, 141, 87, 0.08);
}

.site-title a,
.site-title a:hover {
    color: var(--wt-cream) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.site-description {
    color: var(--wt-cream-muted) !important;
}

.main-navbar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

#primary-menu .menu-item a.nav-link,
#page #primary-menu a.nav-link,
#page #primary-menu li:hover a.nav-link,
#page #primary-menu li {
    color: var(--wt-cream) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
}

#primary-menu .menu-item:hover .nav-link,
#primary-menu .current-menu-item a,
.main-navigation .menu .children .page_item:hover > a,
.main-navigation .menu .dropdown-menu .menu-item:hover > a {
    color: var(--wt-brass) !important;
}

/* =========================================================
   Buttons & CTAs
   ========================================================= */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.ac-btn,
.wp-block-button__link,
.read-more a {
    background-color: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
    border: 1px solid var(--wt-brass) !important;
    border-radius: 4px;
    padding: 12px 24px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.ac-btn:hover,
.wp-block-button__link:hover,
.read-more a:hover {
    background-color: transparent !important;
    color: var(--wt-brass) !important;
    border-color: var(--wt-brass) !important;
}

.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--wt-brass) !important;
    border: 1px solid var(--wt-brass) !important;
}
.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
}

/* =========================================================
   Forms / inputs
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
    background-color: var(--wt-bg-elevated) !important;
    color: var(--wt-cream) !important;
    border: 1px solid var(--wt-border) !important;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--wt-brass) !important;
    box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.2);
}
::placeholder { color: var(--wt-cream-faint); }

/* =========================================================
   Search forms (carried-over selectors)
   ========================================================= */
.search .search-form,
.widget-area .search-form {
    box-shadow: none;
}
.search .search-form input.search-field,
.widget-area #Search input.search-field,
.widget-area .search-form input.search-field {
    background-color: var(--wt-bg-elevated) !important;
    border: 1px solid var(--wt-border) !important;
    border-radius: 4px;
    color: var(--wt-cream) !important;
}
.widget_block .wp-block-search .wp-block-search__button,
.page-content .search-form .search-submit,
.widget_search .search-form .search-submit,
.search-form .search-submit {
    background-color: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
}

/* =========================================================
   Articles & posts
   ========================================================= */
article {
    background-color: var(--wt-bg);
}
article .entry-title a,
.site-main .blog-detail h4 {
    color: var(--wt-cream);
}
article .entry-title a:hover,
.site-main .blog-detail h4:hover {
    color: var(--wt-brass);
}

.post-meta,
.post-meta li,
.post-meta li i,
.post-meta li a {
    color: var(--wt-cream-muted) !important;
}
.post-meta li::after {
    background: var(--wt-cream-faint) !important;
}

.blog-2 .post-meta {
    background: var(--wt-indigo);
}

.box-image .single-page-img:after { opacity: 0.5; }
.box-image .single-page-img,
.box-image .single-page-img:after { height: 400px; }

/* =========================================================
   Pagination
   ========================================================= */
.pagination .page-numbers,
.pagination .current {
    background: transparent;
    color: var(--wt-cream);
    border: 1px solid var(--wt-border-strong);
    padding: 8px 14px;
    margin: 0 3px;
}
.pagination .page-numbers:hover,
.pagination .current {
    background: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
    border-color: var(--wt-brass) !important;
}

/* =========================================================
   Sidebar / widgets
   ========================================================= */
.widget {
    background-color: var(--wt-bg-elevated);
    border: 1px solid var(--wt-border);
    border-radius: 6px;
    padding: 24px;
    color: var(--wt-cream);
}
.widget-title,
.widget h2 {
    color: var(--wt-cream);
    border-bottom: 1px solid var(--wt-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.widget a { color: var(--wt-brass); }
.widget a:hover { color: var(--wt-brass-hover); }

.widget_block .wp-block-tag-cloud a,
.widget_tag_cloud .tagcloud a {
    color: var(--wt-cream-muted);
    border: 1px solid var(--wt-border);
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 4px 6px 0;
    display: inline-block;
    font-size: 13px !important;
}
.widget_block .wp-block-tag-cloud a:hover,
.widget_tag_cloud .tagcloud a:hover {
    background-color: var(--wt-brass) !important;
    border-color: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
}

.wp-block-calendar .wp-calendar-table tbody tr td#today,
.widget_calendar .calendar_wrap .wp-calendar-table tbody tr td#today {
    background-color: var(--wt-brass) !important;
    color: var(--wt-bg);
}

/* =========================================================
   Footer
   ========================================================= */
.foot-top,
.footer-one,
footer {
    background-color: var(--wt-ink) !important;
    color: var(--wt-cream);
    border-top: 1px solid var(--wt-border);
}
footer a {
    color: var(--wt-cream-muted);
}
footer a:hover {
    color: var(--wt-brass);
}
.footer-copyright,
.footer-copyright a {
    color: var(--wt-cream-faint);
}
.footer-copyright a:hover {
    color: var(--wt-brass);
}

/* =========================================================
   Comments
   ========================================================= */
.comments-area .comments-title,
#comments .comments-title {
    color: var(--wt-cream);
    word-break: break-word;
}
.comments-area .comment-form-comment textarea {
    background-color: var(--wt-bg-elevated) !important;
    color: var(--wt-cream) !important;
    border: 1px solid var(--wt-border) !important;
}
.comments-area .comment-form-comment textarea:focus,
.comments-area .comment-form-comment textarea:hover {
    border-color: var(--wt-brass) !important;
}
.comments-area .form-submit .submit {
    background: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
}
.comment-respond input#submit:focus {
    border: 1px solid var(--wt-brass);
}
.single-post .comment-list { margin-left: 0; }

/* =========================================================
   Misc inherited patches
   ========================================================= */
.wp-caption { max-width: 100%; margin-bottom: 1em; }
.wp-caption-text,
.gallery-caption {
    font-size: 14px;
    color: var(--wt-cream-muted);
    text-align: center;
}
.bypostauthor { font-weight: bold; }

.page-header h1,
.post-content a,
.wp-block-latest-comments__comment-link {
    word-break: break-word;
}

.main-navbar { background: transparent; border-radius: 0; box-shadow: none; }

/* =========================================================
   Block editor goodness
   ========================================================= */
.wp-block-quote,
blockquote {
    border-left: 3px solid var(--wt-brass);
    padding: 8px 0 8px 20px;
    color: var(--wt-cream);
    font-style: italic;
    background: transparent;
}

code, pre, .wp-block-code {
    background-color: var(--wt-bg-elevated);
    color: var(--wt-cream);
    border: 1px solid var(--wt-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: "JetBrains Mono", "Menlo", monospace;
    font-size: 0.9em;
}
.wp-block-code { padding: 16px; display: block; }

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--wt-cream);
}
table th, table td {
    border: 1px solid var(--wt-border);
    padding: 10px 12px;
    text-align: left;
}
table th { background: var(--wt-bg-elevated); color: var(--wt-cream); }

/* =========================================================
   Language switcher (Polylang / generic)
   ========================================================= */
.wt-lang-switcher {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 16px;
}
.wt-lang-switcher a {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--wt-cream-muted);
    border: 1px solid var(--wt-border);
    letter-spacing: 0.06em;
}
.wt-lang-switcher a:hover {
    color: var(--wt-brass);
    border-color: var(--wt-brass);
}
.wt-lang-switcher a.is-current {
    background: var(--wt-brass);
    border-color: var(--wt-brass);
    color: var(--wt-bg);
}

/* =========================================================
   Accessibility
   ========================================================= */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--wt-brass);
    color: var(--wt-bg);
    padding: 8px 16px;
    z-index: 10000;
}
.skip-link.screen-reader-text:focus {
    left: 16px;
    top: 16px;
}

:focus-visible {
    outline: 2px solid var(--wt-brass);
    outline-offset: 2px;
}

/* =========================================================
   WooCommerce (kept lightweight; styled in case enabled)
   ========================================================= */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type=submit].button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--wt-brass) !important;
    color: var(--wt-bg) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current { color: var(--wt-bg) !important; }
.woocommerce nav.woocommerce-pagination ul li a { color: var(--wt-cream) !important; }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }
    .wt-lang-switcher { margin-left: 8px; }
}