/*
Theme Name: NeoTribe
Theme URI: https://neotribe.jp/column/
Description: NeoTribe column (WordPress) theme. Shares the header / footer markup, CSS and JS with the EC-CUBE shop (neotribe.jp).
Author: DeltaTRIBE
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: neotribe
*/

/* Tokens (--nt-*) and the header / footer / drawer styles come from the shared neotribe.css (EC-CUBE). */

body.nt-wp {
  margin: 0;
  font-family: var(--nt-font);
  color: var(--nt-text);
  background: var(--nt-bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.nt-wp a { color: inherit; }
/* Content images only. :where() keeps the specificity at (0,0,1) so the shared header / footer / drawer
   logo sizes (neotribe.css) are never overridden: the logo SVG has a viewBox but no intrinsic width/height,
   so "height: auto" would collapse it to zero width inside the header's flex row. */
:where(body.nt-wp) img { max-width: 100%; height: auto; }
body.nt-wp .nt-header__logo img { height: 44px; width: auto; max-width: none; }
body.nt-wp .nt-footer__logo img { height: 44px; width: auto; max-width: none; }
body.nt-wp .nt-drawer__head img { height: 36px; width: auto; max-width: none; }
@media (max-width: 760px) { body.nt-wp .nt-header__logo img { height: 36px; } }
body.nt-wp :focus-visible { outline: 2px solid var(--nt-accent); outline-offset: 2px; }
.nt-muted { color: var(--nt-muted); }

/* ---- layout ---- */
.nt-col-wrap {
  max-width: calc(var(--nt-max) + var(--nt-gutter) * 2);
  margin: 0 auto; padding-left: var(--nt-gutter); padding-right: var(--nt-gutter); box-sizing: border-box;
}
.nt-col-section { padding-top: 56px; padding-bottom: 96px; }
.nt-kicker {
  display: block; margin-bottom: 16px; font-size: 13px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: var(--nt-accent);
}
.nt-col-h1 { margin: 0 0 24px; font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.nt-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; letter-spacing: .02em; border-radius: 6px; text-decoration: none;
}
.nt-tag--accent { background: #6b3008; color: var(--nt-accent-tint); }
.nt-btn-link, .nt-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: var(--nt-radius); cursor: pointer;
}
.nt-btn-link { color: var(--nt-text); background: var(--nt-accent); border: 1px solid var(--nt-accent); }
.nt-btn-link:hover { background: var(--nt-accent-hover); border-color: var(--nt-accent-hover); color: #fff; }
.nt-btn-ghost { color: var(--nt-accent-hover); background: transparent; border: 1px solid transparent; padding: 0 16px; }
.nt-btn-ghost:hover { background: var(--nt-accent-tint); }

/* ---- column list ---- */
.nt-col-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.nt-chip { padding: 6px 12px; font-size: 13px; line-height: 1.4; border-radius: 6px; background: #3f424d; color: #f3f5fe; text-decoration: none; }
.nt-chip:hover { background: #595d6c; color: #fff; }
.nt-chip.is-current { background: #6b3008; color: var(--nt-accent-tint); }
.nt-col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16.8px; }
.nt-col-card { display: flex; flex-direction: column; overflow: hidden; background: var(--nt-surface); border-radius: var(--nt-radius); text-decoration: none; color: var(--nt-text); }
.nt-col-card:hover { box-shadow: var(--nt-shadow-md); }
.nt-col-card__img { aspect-ratio: 16 / 9; background: var(--nt-dark); overflow: hidden; }
.nt-col-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-col-card__body { display: flex; flex-direction: column; gap: 8.4px; padding: 16.8px; }
.nt-col-card__meta { display: flex; gap: 8.4px; align-items: center; }
.nt-col-card__meta time { font-size: 12px; color: var(--nt-muted); font-feature-settings: "tnum" 1; }
.nt-col-card__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; }

/* pager (the_posts_pagination) */
.nt-col-pager { margin-top: 40px; }
.nt-col-pager .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.nt-col-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px;
  font-size: 14px; color: var(--nt-accent-hover); border: 1px solid transparent; border-radius: var(--nt-radius); text-decoration: none;
}
.nt-col-pager a.page-numbers:hover { background: var(--nt-accent-tint); }
.nt-col-pager .page-numbers.current { border-color: var(--nt-accent); background: var(--nt-accent-tint); color: #9d470b; font-weight: 500; }
.nt-col-pager .page-numbers.dots { color: var(--nt-muted); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.nt-col-empty { padding: 24px; background: var(--nt-surface); border-radius: var(--nt-radius); }

/* search form */
.nt-search { display: flex; gap: 12px; max-width: 480px; margin-top: 12px; }
.nt-search input[type="search"] {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 1px solid #d9dbe0; border-radius: var(--nt-radius);
}
.nt-search input[type="search"]:focus { border-color: var(--nt-accent); outline: none; box-shadow: 0 0 0 2px rgba(232, 113, 26, .25); }

/* ---- article ---- */
.nt-article__head { max-width: 760px; }
.nt-col-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--nt-muted); }
.nt-article__meta { display: flex; gap: 12px; align-items: center; margin: 24px 0 16px; }
.nt-article__meta time { font-size: 13px; color: var(--nt-muted); font-feature-settings: "tnum" 1; }
.nt-article__title { margin: 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.nt-article__lead { margin: 16px 0 0; font-size: 15px; line-height: 1.8; color: var(--nt-muted); }
/* design-spec token names -> this theme's tokens (scoped here; the shared neotribe.css is not touched) */
.nt-article { --nt-accent-700: var(--nt-accent-strong); --radius-md: var(--nt-radius); --radius-lg: 14px; }
/* hero: first thing in the main column, so the side column's top edge lines up with it */
.nt-article__hero { aspect-ratio: 16 / 9; margin: 0 0 32px; overflow: hidden; border-radius: var(--radius-lg); background: var(--nt-dark); }
.nt-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.nt-article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 5vw, 80px); align-items: start; margin-top: 32px; }
.nt-article__side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 85px; }
.nt-author { display: flex; gap: 12px; align-items: center; padding: 16.8px; background: var(--nt-surface); border-radius: var(--nt-radius); }
.nt-author__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nt-dark); color: var(--nt-accent-light); font-weight: 500; }
.nt-author__label { font-size: 12px; color: var(--nt-muted); }
.nt-author__name { font-size: 14px; font-weight: 500; }
.nt-side-title { margin-bottom: 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nt-muted); }
.nt-related { display: flex; flex-direction: column; gap: 12px; }
.nt-related__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; }
.nt-related__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--nt-dark); }
.nt-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-related__date { display: block; font-size: 11px; color: var(--nt-muted); font-feature-settings: "tnum" 1; }
.nt-related__title { display: block; font-size: 13px; line-height: 1.5; font-weight: 500; }

/* body text of posts / pages */
.nt-entry { max-width: 720px; font-size: 15.5px; line-height: 1.95; color: rgba(31, 33, 36, .9); overflow-wrap: anywhere; }
.nt-entry > *:first-child { margin-top: 0; }
.nt-entry h2 {
  position: relative; margin: 40px 0 16px; padding-bottom: 10px; font-size: 22px; font-weight: 500; line-height: 1.5;
  color: var(--nt-text); border-bottom: 1px solid var(--nt-divider); scroll-margin-top: 96px; /* sticky header is 65px */
}
.nt-entry h2::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--nt-accent); }
.nt-entry .nt-article__hero + h2, .nt-entry .nt-toc + h2 { margin-top: 0; }
.nt-entry h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--nt-text); }
.nt-entry h4 { margin: 24px 0 8px; font-size: 16px; font-weight: 500; }
.nt-entry p { margin: 0 0 24px; }
.nt-entry ul, .nt-entry ol { margin: 0 0 24px; padding-left: 1.4em; }
.nt-entry li { margin: 0 0 6px; }
.nt-entry a { color: var(--nt-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.nt-entry img { border-radius: var(--nt-radius); }
.nt-entry figure { margin: 0 0 24px; }
.nt-entry figcaption { margin-top: 6px; font-size: 12px; color: var(--nt-muted); }
.nt-entry blockquote {
  margin: 0 0 24px; padding: 16px 20px; font-size: 14px; background: var(--nt-surface);
  border-left: 3px solid var(--nt-accent); border-radius: 0 var(--nt-radius) var(--nt-radius) 0;
}
.nt-entry blockquote p:last-child { margin-bottom: 0; }
.nt-entry table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 14px; }
.nt-entry th, .nt-entry td { padding: 10px 12px; border-bottom: 1px solid var(--nt-line); text-align: left; }
.nt-entry__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* table of contents (built by nt_build_toc_content() in functions.php) */
.nt-toc {
  margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--nt-accent-700); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--nt-surface) 60%, transparent);
}
.nt-toc__title { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--nt-accent); }
.nt-entry .nt-toc ol { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 2; color: inherit; }
.nt-entry .nt-toc li { margin: 0; }
.nt-entry .nt-toc a { color: inherit; text-decoration: none; }
.nt-entry .nt-toc a:hover { color: var(--nt-accent); }
.nt-entry__pages { font-size: 14px; }

/* ---- contact ---- */
.nt-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.nt-contact__lead { margin: 0 0 28px; font-size: 14px; line-height: 1.8; color: var(--nt-muted); }
.nt-contact__side { display: flex; flex-direction: column; gap: 16px; }
.nt-contact__tel { padding: 28px; background: var(--nt-dark); color: var(--nt-on-dark); border-radius: 14px; }
.nt-contact__telLabel { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nt-accent-light); }
.nt-contact__telNo { display: block; margin: 8px 0 4px; font-size: 28px; font-weight: 500; color: var(--nt-on-dark); text-decoration: none; font-feature-settings: "tnum" 1; }
.nt-contact__telNote { font-size: 13px; line-height: 1.8; color: var(--nt-on-dark-muted); }
.nt-panel { padding: 16.8px; background: var(--nt-surface); border-radius: var(--nt-radius); }
.nt-panel__kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--nt-accent); }
.nt-panel p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; }

/* form plugins (MW WP Form / Contact Form 7 / generic) */
.nt-contact__form { max-width: none; font-size: 14px; line-height: 1.7; }
.nt-contact__form input[type="text"], .nt-contact__form input[type="email"], .nt-contact__form input[type="tel"],
.nt-contact__form input[type="url"], .nt-contact__form input[type="number"], .nt-contact__form input[type="date"],
.nt-contact__form select, .nt-contact__form textarea {
  width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--nt-text);
  background: var(--nt-bg); border: 1px solid #d9dbe0; border-radius: var(--nt-radius);
}
.nt-contact__form textarea { min-height: 150px; padding: 10px 12px; }
.nt-contact__form input:focus, .nt-contact__form select:focus, .nt-contact__form textarea:focus {
  border-color: var(--nt-accent); outline: none; box-shadow: 0 0 0 2px rgba(232, 113, 26, .25);
}
.nt-contact__form table, .nt-contact__form tbody, .nt-contact__form tr, .nt-contact__form th, .nt-contact__form td { display: block; width: 100%; border: 0; padding: 0; }
.nt-contact__form tr { margin: 0 0 16px; }
.nt-contact__form th { margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.nt-contact__form input[type="submit"], .nt-contact__form button[type="submit"], .nt-contact__form .wpcf7-submit {
  min-height: 48px; padding: 0 40px; font: inherit; font-size: 15px; font-weight: 500; color: var(--nt-text);
  background: var(--nt-accent); border: 1px solid var(--nt-accent); border-radius: var(--nt-radius); cursor: pointer;
}
.nt-contact__form input[type="submit"]:hover, .nt-contact__form button[type="submit"]:hover { background: var(--nt-accent-hover); border-color: var(--nt-accent-hover); color: #fff; }
.nt-contact__form input[name="submitBack"], .nt-contact__form button[name="submitBack"] { background: transparent; border-color: #d9dbe0; }
.nt-contact__form .error, .nt-contact__form .wpcf7-not-valid-tip { color: #b42318; font-size: 13px; }

/* ---- 404 ---- */
.nt-404 { max-width: calc(760px + var(--nt-gutter) * 2); margin-left: 0; }
.nt-404__code { font-size: clamp(72px, 12vw, 140px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--nt-line); }
.nt-404 .nt-col-h1 { margin-top: 16px; }
.nt-404__message { margin: 0; max-width: 48ch; font-size: 15px; line-height: 1.8; color: var(--nt-muted); }
.nt-404 .nt-search { margin-top: 28px; }
.nt-404__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* WordPress core alignment helpers */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-block-image img { max-width: 100%; height: auto; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .nt-col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nt-article__grid, .nt-contact { grid-template-columns: minmax(0, 1fr); }
  .nt-article__side { position: static; }
}
@media (max-width: 760px) {
  .nt-col-wrap { padding-left: 16px; padding-right: 16px; }
  .nt-col-section { padding-top: 32px; padding-bottom: 56px; }
  .nt-col-h1 { font-size: 24px; }
  .nt-col-grid { grid-template-columns: minmax(0, 1fr); }
  .alignleft, .alignright { float: none; margin: 0 0 16px; }
}

/* chips / tags that are links: keep the light text (the generic link colour rule must not win) */
body.nt-wp a.nt-chip, body.nt-wp a.nt-chip:hover { color: #fff; }
body.nt-wp a.nt-chip.is-current { color: var(--nt-accent-tint); }
body.nt-wp a.nt-tag--accent, body.nt-wp a.nt-tag--accent:hover { color: var(--nt-accent-tint); }