/*
Theme Name: Japan Aviation Images Child
Theme URI: https://japan-aviation-images.com/
Description: Astra child theme. The Browse Images (WooCommerce) shop archive, single product, cart, and checkout flow are left completely untouched. This theme only adds a redesigned HOME page and a Fleet Database (Japanese aircraft registration list) section.
Author: Japan Aviation Images
Template: astra
Version: 1.0.0
Text Domain: jai-child
*/

/* =========================================================
   0. Design tokens (matches the existing site's look & feel)
   - Headings: Belleza / Body: Work Sans (already loaded by the parent theme via Google Fonts)
   - Accent color: coral rgb(255,100,100)
   ========================================================= */
:root{
  --jai-font-heading: "Belleza", sans-serif;
  --jai-font-body: "Work Sans", sans-serif;

  --jai-color-accent: #ff6464;
  --jai-color-accent-dark: #e5473f;
  --jai-color-ink: #1c1c1c;
  --jai-color-body: #393939;
  --jai-color-muted: #7a7a7a;
  --jai-color-bg: #ffffff;
  --jai-color-bg-alt: #f7f6f4;
  --jai-color-bg-dark: #14161a;
  --jai-color-border: #e7e5e1;

  --jai-radius: 4px;
  --jai-shadow: 0 10px 30px rgba(0,0,0,.08);
  --jai-maxw: 1280px;
  --jai-transition: .35s cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   1. Shared utilities
   ========================================================= */
.jai-section{
  padding: 96px 0;
}
.jai-section--tight{ padding: 56px 0; }
.jai-section--alt{ background: var(--jai-color-bg-alt); }
.jai-section--dark{ background: var(--jai-color-bg-dark); color: #f2f2f2; }
.jai-container{
  max-width: var(--jai-maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.jai-eyebrow{
  font-family: var(--jai-font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: var(--jai-color-accent);
  margin: 0 0 10px;
  display: block;
}
.jai-heading{
  font-family: var(--jai-font-heading);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.jai-heading--xl{ font-size: clamp(32px, 4vw, 52px); }
.jai-heading--lg{ font-size: clamp(26px, 3vw, 36px); }
.jai-heading--md{ font-size: clamp(20px, 2.4vw, 26px); }
.jai-sub{
  font-family: var(--jai-font-body);
  color: var(--jai-color-muted);
  font-size: 15px;
  max-width: 640px;
}
.jai-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.jai-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--jai-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--jai-color-ink);
  color: var(--jai-color-ink);
  background: transparent;
  border-radius: var(--jai-radius);
  text-decoration: none;
  transition: var(--jai-transition);
}
.jai-btn:hover{
  background: var(--jai-color-ink);
  color: #fff;
}
.jai-btn--accent{
  border-color: var(--jai-color-accent);
  background: var(--jai-color-accent);
  color:#fff;
}
.jai-btn--accent:hover{
  background: var(--jai-color-accent-dark);
  border-color: var(--jai-color-accent-dark);
  color:#fff;
}
.jai-btn--ghost-light{
  border-color: rgba(255,255,255,.5);
  color:#fff;
}
.jai-btn--ghost-light:hover{
  background:#fff;
  color: var(--jai-color-ink);
}
.jai-pill{
  display:inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,100,100,.12);
  color: var(--jai-color-accent-dark);
}
.jai-link-arrow{
  font-family: var(--jai-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--jai-color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--jai-color-accent);
  padding-bottom: 2px;
}
.jai-link-arrow:after{ content:"→"; margin-left: 6px; }

/* =========================================================
   2. Hero slideshow
   ========================================================= */
.jai-hero{
  position: relative;
  height: 88vh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: #0c0d0f;
}
.jai-hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.4s ease;
  z-index: 1;
}
.jai-hero-slide.is-active{ opacity:1; z-index:2; }
.jai-hero-slide img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.06);
  animation: jaiKenBurns 12s ease forwards;
}
@keyframes jaiKenBurns{ from{ transform: scale(1.06);} to{ transform: scale(1);} }
.jai-hero:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.65) 100%);
  z-index: 3;
}
.jai-hero-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index: 4;
  padding: 0 32px 64px;
  color:#fff;
}
.jai-hero-inner{ max-width: var(--jai-maxw); margin: 0 auto; }
.jai-hero-caption{
  font-family: var(--jai-font-body);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 14px;
}
.jai-hero-title{
  font-family: var(--jai-font-heading);
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.08;
  margin: 0 0 22px;
  max-width: 920px;
}
.jai-hero-actions{ display:flex; gap:14px; flex-wrap: wrap; }
.jai-hero-dots{
  position:absolute; right:32px; bottom:64px; z-index:5;
  display:flex; gap:8px;
}
.jai-hero-dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background: transparent;
  cursor:pointer;
  padding:0;
}
.jai-hero-dots button.is-active{ background:#fff; }
.jai-hero-nav{
  position:absolute; z-index:5; top:50%; transform: translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.2);
  color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: var(--jai-transition);
}
.jai-hero-nav:hover{ background:#fff; color:#111; }
.jai-hero-nav--prev{ left:32px; }
.jai-hero-nav--next{ right:32px; }
@media (max-width: 680px){
  .jai-hero-nav{ display:none; }
  .jai-hero-dots{ right:16px; bottom:24px; }
  .jai-hero-content{ padding: 0 20px 40px; }
}

/* =========================================================
   3. Topic widget
   ========================================================= */
.jai-topic{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  border: 1px solid var(--jai-color-border);
  border-radius: var(--jai-radius);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--jai-shadow);
}
.jai-topic-media{ position:relative; min-height: 340px; }
.jai-topic-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.jai-topic-body{ padding: 40px 44px; display:flex; flex-direction:column; justify-content:center; }
.jai-topic-date{ font-size:12px; color:var(--jai-color-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.jai-topic-title{ font-family: var(--jai-font-heading); font-size: 26px; margin: 0 0 14px; line-height:1.25; }
.jai-topic-excerpt{ color: var(--jai-color-muted); font-size: 15px; line-height:1.8; margin-bottom: 22px; }
@media (max-width: 860px){
  .jai-topic{ grid-template-columns: 1fr; }
  .jai-topic-media{ min-height: 240px; }
  .jai-topic-body{ padding: 28px; }
}

/* =========================================================
   4. Database stats (planespotters-style)
   ========================================================= */
.jai-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.jai-stat{
  padding: 34px 20px;
  text-align:center;
  border-left: 1px solid rgba(255,255,255,.12);
}
.jai-stat:first-child{ border-left: none; }
.jai-stat-num{
  font-family: var(--jai-font-heading);
  font-size: clamp(26px, 3vw, 40px);
  color: var(--jai-color-accent);
  display:block;
}
.jai-stat-label{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 6px;
}
@media (max-width: 700px){
  .jai-stats{ grid-template-columns: repeat(2,1fr); }
  .jai-stat:nth-child(3){ border-left:none; }
}

/* =========================================================
   5. Latest-list tables (Latest Deliveries / New Liveries)
   ========================================================= */
.jai-tabs{ display:flex; gap:8px; margin-bottom: 28px; flex-wrap: wrap; }
.jai-tab{
  font-family: var(--jai-font-body);
  font-size: 13px; font-weight:600; letter-spacing:.04em;
  padding: 10px 18px;
  border: 1px solid var(--jai-color-border);
  border-radius: 999px;
  background:#fff; color: var(--jai-color-muted);
  cursor:pointer;
}
.jai-tab.is-active{ background: var(--jai-color-ink); color:#fff; border-color: var(--jai-color-ink); }

.jai-table-wrap{ overflow-x:auto; border:1px solid var(--jai-color-border); border-radius: var(--jai-radius); background:#fff; }
table.jai-table{ width:100%; border-collapse: collapse; font-family: var(--jai-font-body); font-size: 14px; min-width: 640px; }
table.jai-table thead th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--jai-color-muted); font-weight:600;
  padding: 14px 18px; border-bottom: 1px solid var(--jai-color-border); background: var(--jai-color-bg-alt);
}
table.jai-table tbody td{ padding: 14px 18px; border-bottom: 1px solid var(--jai-color-border); vertical-align: middle; }
table.jai-table tbody tr:last-child td{ border-bottom:none; }
table.jai-table tbody tr:hover{ background: var(--jai-color-bg-alt); }
.jai-reg-cell{ display:flex; align-items:center; gap:12px; }
.jai-reg-thumb{ width:56px; height:38px; border-radius:3px; object-fit:cover; background:#eee; flex-shrink:0; }
.jai-reg-code{ font-weight:700; letter-spacing:.02em; }
.jai-badge-livery{ background: rgba(255,100,100,.12); color:var(--jai-color-accent-dark); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:8px; }
.jai-status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.jai-status-active .jai-status-dot{ background:#3fb56c; }
.jai-status-stored .jai-status-dot{ background:#e0a72f; }
.jai-status-retired .jai-status-dot,
.jai-status-written-off .jai-status-dot{ background:#c74747; }

/* =========================================================
   6. Photo search / quick links (planespotters-style)
   ========================================================= */
.jai-search-box{
  background: var(--jai-color-bg-alt);
  border-radius: var(--jai-radius);
  padding: 40px;
  text-align:center;
}
.jai-search-form{ display:flex; max-width: 640px; margin: 0 auto; gap:0; }
.jai-search-form input[type="search"]{
  flex:1; padding: 16px 20px; border:1px solid var(--jai-color-border); border-right:none;
  border-radius: var(--jai-radius) 0 0 var(--jai-radius);
  font-family: var(--jai-font-body); font-size:15px;
}
.jai-search-form button{
  padding: 0 26px; border:none; background: var(--jai-color-ink); color:#fff;
  border-radius: 0 var(--jai-radius) var(--jai-radius) 0; cursor:pointer;
  font-family: var(--jai-font-body); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:13px;
}
.jai-search-form button:hover{ background: var(--jai-color-accent); }
.jai-quicklinks{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: 22px; }
.jai-quicklinks a{
  font-size:13px; color: var(--jai-color-muted); text-decoration:none;
  border:1px solid var(--jai-color-border); padding:6px 14px; border-radius:999px; background:#fff;
}
.jai-quicklinks a:hover{ border-color: var(--jai-color-accent); color: var(--jai-color-accent-dark); }

/* =========================================================
   7. Fleet Database (registration list / airline & type archives)
   ========================================================= */
.jai-fleet-hero{
  background: var(--jai-color-bg-dark); color:#fff;
  padding: 72px 0 48px;
}
.jai-fleet-hero .jai-heading{ color:#fff; }
.jai-fleet-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-top: 22px; }
.jai-fleet-meta-item{ font-family: var(--jai-font-body); }
.jai-fleet-meta-num{ font-family: var(--jai-font-heading); font-size:28px; color: var(--jai-color-accent); display:block; }
.jai-fleet-meta-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); }

.jai-directory-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.jai-directory-card{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px; border:1px solid var(--jai-color-border); border-radius: var(--jai-radius);
  text-decoration:none; color: var(--jai-color-ink); background:#fff;
  transition: var(--jai-transition);
}
.jai-directory-card:hover{ border-color: var(--jai-color-accent); box-shadow: var(--jai-shadow); transform: translateY(-2px); }
.jai-directory-card-name{ font-weight:600; font-size:14px; }
.jai-directory-card-count{ font-size:12px; color: var(--jai-color-muted); }

.jai-filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding: 18px 20px; background: var(--jai-color-bg-alt); border-radius: var(--jai-radius); margin-bottom: 24px;
}
.jai-filter-bar select, .jai-filter-bar input[type="search"]{
  font-family: var(--jai-font-body); font-size:13px; padding:9px 12px;
  border:1px solid var(--jai-color-border); border-radius: var(--jai-radius); background:#fff;
}

.jai-reg-hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 40px;
  padding: 56px 0;
}
.jai-reg-hero-media img{ width:100%; border-radius: var(--jai-radius); }
.jai-reg-hero-media .jai-noimg{
  width:100%; aspect-ratio: 3/2; background: var(--jai-color-bg-alt);
  display:flex; align-items:center; justify-content:center; color: var(--jai-color-muted); font-size:13px;
  border-radius: var(--jai-radius); border: 1px dashed var(--jai-color-border);
}
.jai-reg-specs{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 24px; }
.jai-reg-spec-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--jai-color-muted); }
.jai-reg-spec-val{ font-family: var(--jai-font-heading); font-size:18px; }
@media (max-width: 860px){
  .jai-reg-hero{ grid-template-columns: 1fr; }
}

/* Recent work grid (photography, planespotters "latest photos" style) */
.jai-photo-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 4px;
}
.jai-photo-card{ position:relative; display:block; overflow:hidden; aspect-ratio: 3/2; background:#111; }
.jai-photo-card img{ width:100%; height:100%; object-fit:cover; transition: var(--jai-transition); }
.jai-photo-card:hover img{ transform: scale(1.06); }
.jai-photo-card-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:#fff; font-size:12px; opacity:0; transition: var(--jai-transition);
}
.jai-photo-card:hover .jai-photo-card-caption{ opacity:1; }

.jai-empty{ padding: 40px; text-align:center; color: var(--jai-color-muted); font-size:14px; }

/* Admin sync page */
.jai-admin-sync .jai-sync-log{
  background:#111; color:#8ee08e; font-family: Consolas, Menlo, monospace; font-size:12px;
  padding: 16px; max-height: 320px; overflow:auto; border-radius:4px;
}