/* ============================================
   SAIYA LOG - Theme: 鉄と記録 (Iron and Record)
   Rugged / Industrial visual skin
   Layered on top of wireframe.css + variables.css
   ============================================ */

/* ============================================
   Phase 1: Typography
   ============================================ */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
}

/* --- Headings: Industrial weight --- */
.section-title {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: var(--border-section);
}

/* --- H1 Stamp Label --- */
.article-content h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.article-content h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: var(--border-section);
}

.article-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

.article-content p {
  line-height: 1.75;
}

/* Profile page headings */
.profile-detail__section h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: var(--border-section);
}

.profile-detail__name {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* --- Monospace for data/meta --- */
.post-card__meta,
.breadcrumb,
.breadcrumb__item a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

/* --- Logo --- */
.site-header__logo {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ============================================
   Phase 2: Borders & Cards
   ============================================ */

/* --- Post Card: thick border + hard shadow hover --- */
.post-card {
  border: var(--border-thick);
  transition: box-shadow var(--transition-snap), transform var(--transition-snap);
}

.post-card:hover {
  box-shadow: var(--shadow-hard);
  transform: translate(-2px, -2px);
}

.post-card__thumb {
  border-bottom: var(--border-thick);
}

.post-card__title {
  font-weight: 700;
}

/* --- Post Card Large: extra emphasis --- */
.post-card--large {
  border: 3px solid var(--color-border);
}

.post-card--large:hover {
  box-shadow: var(--shadow-hard-lg);
  transform: translate(-3px, -3px);
}

.post-card--large .post-card__title {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Product Card --- */
.product-card {
  border: var(--border-thick);
  transition: box-shadow var(--transition-snap), transform var(--transition-snap);
}

.product-card:hover {
  box-shadow: var(--shadow-hard);
  transform: translate(-2px, -2px);
}

.product-card__thumb {
  border-bottom: var(--border-thick);
}

.product-card__name {
  font-weight: 700;
}

/* --- Spacing: reduce density for breathing room --- */
.card-grid {
  gap: 20px;
}

.growth-log__grid {
  gap: 20px;
}

.category-nav__grid {
  gap: 16px;
}

/* --- Section dividers --- */
.section {
  margin-bottom: var(--spacing-section);
  position: relative;
}

/* --- Sidebar widget title --- */
.sidebar__widget-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: var(--border-thick);
}

/* --- Category Nav items --- */
.category-nav__item {
  border: var(--border-thick);
  background: var(--color-surface);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background var(--transition-snap), color var(--transition-snap), box-shadow var(--transition-snap), transform var(--transition-snap);
}

.category-nav__item:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-1px, -1px);
}

/* --- Purpose Nav items --- */
.purpose-nav__item {
  border: var(--border-thick);
  background: var(--color-surface);
  font-weight: 700;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.purpose-nav__item:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* --- Pagination --- */
.pagination__item {
  border: var(--border-thick);
  font-family: var(--font-mono);
  font-weight: 700;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.pagination__item:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

.pagination__item.is-current {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}


/* ============================================
   Phase 3: Header, Hero, Nav
   ============================================ */

/* --- Header: thick bottom border --- */
.site-header {
  border-bottom: var(--border-thick);
}

/* --- Desktop nav: bold links --- */
.desktop-nav .global-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

.desktop-nav .global-nav a:hover,
.desktop-nav .global-nav a.is-current {
  border-bottom: 3px solid var(--color-primary);
}

/* --- Mobile nav: bold links --- */
.mobile-menu .global-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-menu .global-nav a.is-current {
  border-bottom: 3px solid var(--color-primary);
}

/* --- Hero: industrial frame (white base) --- */
.hero {
  border-top: var(--border-hero);
  border-bottom: var(--border-hero);
}

.placeholder--hero {
  min-height: 40vh;
  background: var(--color-bg);
  color: var(--color-primary);
  border: none;
}

/* Hero text styling */
.hero .placeholder--hero span:first-child {
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
}


/* ============================================
   Phase 4: Buttons & Interactive Elements
   ============================================ */

/* --- CTA Box --- */
.cta-box {
  border: 3px solid var(--color-primary);
}

.cta-box__text {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- CTA Button: industrial --- */
.cta-box__button {
  border: var(--border-thick);
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.cta-box__button:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* --- Contact Form: industrial inputs --- */
.contact-form__group input,
.contact-form__group textarea {
  border: var(--border-thick);
  transition: box-shadow var(--transition-snap);
}

.contact-form__group input:focus,
.contact-form__group textarea:focus {
  outline: none;
  box-shadow: var(--shadow-hard-sm);
}

.contact-form__submit {
  border: var(--border-thick);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.contact-form__submit:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* --- Store Categories: stamp tabs --- */
.store-categories__item {
  border: var(--border-thick);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.store-categories__item:hover,
.store-categories__item.is-active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

/* --- SNS Links: industrial --- */
.sns-links a {
  border: var(--border-thick);
  font-weight: 600;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.sns-links a:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* --- Link More: industrial arrow --- */
.link-more {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: var(--border-thick);
  display: inline-block;
  padding: 10px 24px;
  margin-top: 16px;
  transition: background var(--transition-snap), color var(--transition-snap);
}

.link-more:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* --- Widget search input --- */
.widget-search input {
  border: var(--border-thick);
}

.widget-search input:focus {
  outline: none;
  box-shadow: var(--shadow-hard-sm);
}

/* --- Widget list --- */
.widget-list li {
  border-bottom: 1px solid var(--color-border-light);
}

.widget-list a {
  font-weight: 500;
}


/* ============================================
   Phase 5: Growth Log - Data Dashboard
   ============================================ */

.growth-log__card {
  border: var(--border-thick);
  background: var(--color-surface);
  transition: box-shadow var(--transition-snap), transform var(--transition-snap);
}

.growth-log__card:hover {
  box-shadow: var(--shadow-hard);
  transform: translate(-2px, -2px);
}

.growth-log__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Data placeholder: monospace gauge style */
.growth-log__card .placeholder {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}


/* ============================================
   Phase 6: Article Page
   ============================================ */

/* --- Article Summary: heavy frame + stamp label --- */
.article-summary {
  border: var(--border-thick);
  background: var(--color-surface);
}

.article-summary__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-primary);
  color: var(--color-bg);
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
}

/* --- Article AD: dashed industrial border --- */
.article-ad {
  border: 2px dashed var(--color-primary);
}

.article-ad__label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.article-ad__name {
  font-family: var(--font-heading);
  font-weight: 800;
}

/* --- Comparison Box: industrial table --- */
.comparison-box {
  border: var(--border-thick);
}

.comparison-box__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.comparison-box__item {
  border: var(--border-thick);
  background: var(--color-surface);
  font-family: var(--font-mono);
}

.comparison-box__item:nth-child(even) {
  background: var(--color-bg);
}

.comparison-box__item strong {
  font-family: var(--font-heading);
}

/* --- Internal Link: thick left border --- */
.internal-link {
  border-left: 6px solid var(--color-primary);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.internal-link__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.internal-link__title {
  font-weight: 700;
}

/* --- Author Box: industrial frame --- */
.author-box {
  border: var(--border-thick);
}

.author-box__name {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Store Section --- */
.store-future {
  border: 2px dashed var(--color-primary);
}

.store-future__text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.store-disclaimer {
  border-top: var(--border-thick);
  font-family: var(--font-mono);
}

/* --- Stream Page --- */
.stream-status {
  border: var(--border-thick);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 700;
}

.stream-status p {
  color: var(--color-bg);
}

.stream-status p:last-child {
  color: rgba(255, 255, 255, 0.6);
}

.stream-status__label {
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
}

.stream-schedule__item {
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-body);
}

.stream-schedule__item:nth-child(even) {
  background: var(--color-surface);
}

.stream-schedule__item strong {
  font-family: var(--font-heading);
  font-weight: 800;
}

/* --- Video Section --- */
.video-section .placeholder--video {
  border: var(--border-thick);
}

.video-section__title {
  font-weight: 700;
}

/* --- Profile Intro --- */
.profile-intro__name {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-intro__tags {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* --- Footer: industrial --- */
.site-footer {
  border-top: var(--border-thick);
}

.site-footer__nav a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.site-footer__copy {
  font-family: var(--font-mono);
}


/* ============================================
   Phase 7: Responsive Adjustments
   ============================================ */

/* --- Mobile: reduce shadow size --- */
@media (max-width: 767px) {
  .post-card:hover {
    box-shadow: var(--shadow-hard-sm);
    transform: translate(-1px, -1px);
  }

  .product-card:hover {
    box-shadow: var(--shadow-hard-sm);
    transform: translate(-1px, -1px);
  }

  .growth-log__card:hover {
    box-shadow: var(--shadow-hard-sm);
    transform: translate(-1px, -1px);
  }

  .category-nav__item:hover {
    box-shadow: none;
    transform: none;
  }

  .post-card--large:hover {
    box-shadow: var(--shadow-hard);
    transform: translate(-2px, -2px);
  }

  /* Tighter section spacing on mobile */
  .section {
    margin-bottom: 40px;
  }

  /* link-more full width on mobile */
  .link-more {
    display: block;
    text-align: center;
  }
}

/* --- Tablet+ --- */
@media (min-width: 768px) {
  .section {
    margin-bottom: var(--spacing-section);
  }
}

/* --- Desktop+ --- */
@media (min-width: 1024px) {
  .placeholder--hero {
    min-height: 40vh;
  }

  /* Sidebar border separator */
  .layout-with-sidebar__sidebar {
    border-left: 1px solid var(--color-border);
    padding-left: 32px;
  }
}