/*
Theme Name: Bridgefield Guild Theme
Version: 1.1
Text Domain: bridgefield-guild
*/

:root{
  --bg: #0f1724;
  --card: #0b1220;
  --text: #e6eef8;
  --muted: #9fb0c8;
  --accent: #6C8AF5;
  --glass: rgba(255,255,255,0.04);
  --radius: 12px;
  --max-width: 1140px;
  --gap: 24px;
  --transition: 200ms ease;
  --shadow: 0 6px 20px rgba(2,6,23,0.6);
  --accent-gradient: linear-gradient(135deg,var(--accent),#7c6cff 60%);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,138,255,0.08), transparent 10%),
              radial-gradient(900px 500px at 90% 90%, rgba(124,227,154,0.04), transparent 10%),
              var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  padding-bottom:40px;
}

.container{max-width:var(--max-width);margin:0 auto;padding:48px 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(5,8,15,0.6), rgba(5,8,15,0.25));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text)}
.logo .brand{font-weight:700;font-size:20px} /* ブランド名を大きめに */
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px;border-radius:8px;transition:var(--transition)}
.nav-list a:hover{color:var(--text);background:var(--glass)}

.nav-toggle{display:none;background:none;border:0;padding:8px;border-radius:8px;color:var(--muted)}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:var(--text);position:relative}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text);transition:var(--transition)}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}

/* Hero */
.hero{padding:64px 0 96px}
.hero-inner{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.hero-content{flex:1;min-width:280px}
.hero-visual{flex:1;min-width:260px;display:flex;justify-content:center;align-items:center}
.hero h1{font-size:clamp(30px,5vw,48px);margin:0 0 12px;font-weight:700}
.lead{color:var(--muted);margin:0 0 12px;font-size:1.05rem}
.hero-sub{color:var(--muted);margin:12px 0 18px;font-size:1.03rem;max-width:720px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer;transition:var(--transition);border:1px solid transparent}
.btn-primary{background:var(--accent-gradient);color:white;box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--text);border-color:rgba(255,255,255,0.06)}
.btn:hover{transform:translateY(-3px);opacity:0.98}

/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-top:1px solid rgba(255,255,255,0.02)}
.section-title{font-family:"Merriweather", serif;font-size:1.6rem;margin:0 0 8px}
.section-sub{color:var(--muted);margin:0 0 28px}

/* Cards & grids */
.grid{display:grid;gap:var(--gap)}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 8px}
.works-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* About layout */
.about-inner{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.about-text{flex:1;min-width:260px}
.about-cta{flex:0.9;min-width:260px;background:var(--glass);padding:22px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.about-subtitle{font-size:1.1rem;margin-top:18px;margin-bottom:8px;font-weight:700}
.muted-quote{color:var(--muted);font-style:normal;margin-bottom:12px}
.vision-ul{list-style-type:disc;margin-left:18px;color:var(--text);margin-bottom:18px}
.vision-ul li{margin-bottom:8px}

/* Form */
.contact-form{background:transparent;padding:18px;border-radius:12px}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.form-grid label{display:flex;flex-direction:column;font-size:0.95rem;color:var(--muted)}
.form-grid label.full{grid-column:1/-1}
input,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);outline:none}
input:focus,textarea:focus{box-shadow:0 6px 18px rgba(108,138,245,0.12);border-color:var(--accent)}
.form-actions{margin-top:12px;display:flex;gap:12px;align-items:center}
.form-note{color:var(--muted);font-size:0.9rem;margin-top:8px}
.required{color:#ff9b9b;margin-left:6px;font-weight:600}

/* Footer */
.site-footer{margin-top:48px;padding:28px 0;border-top:1px solid rgba(255,255,255,0.03)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-nav{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.footer-nav a{color:var(--muted);text-decoration:none}

/* footer contact */
.footer-contact{color:var(--muted);margin:8px 0;font-size:0.95rem}
.footer-contact a{color:var(--text);text-decoration:underline}

/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse}
  .form-grid{grid-template-columns:1fr}
  .about-inner{flex-direction:column}
  .nav-list{position:fixed;top:72px;right:12px;background:linear-gradient(180deg, rgba(4,6,12,0.98), rgba(6,8,14,0.98));padding:14px;border-radius:12px;flex-direction:column;min-width:220px;display:none;box-shadow:var(--shadow)}
  .nav-list.show{display:flex}
  .nav-toggle{display:inline-flex}
  .nav-list a{padding:10px 14px}
  .header-inner{gap:12px}
}

/* small polish */
a:focus{outline:3px solid rgba(108,138,245,0.18);outline-offset:3px}

/* ヒーロー画像を切らずに全体表示（縦横比を保って縮小） */
.hero-visual {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b1220; /* 余白の背景色（画像の周りに余白ができるため） */
  border-radius: 12px;
}

/* 画像を画面に収めつつアスペクト比を保つ（切り抜かない） */
.hero-photo {
  width: 100%;
  height: auto;         /* デフォルトでアスペクト比を維持 */
  max-width: 100%;
  display: block;
  object-fit: contain;  /* ← 切らずに縮小して表示する */
  object-position: center center;
}

/* モバイル調整：高さをほどよく制限してテキストとのバランスを確保 */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; gap: 12px; }
  .hero-visual {
    max-height: 44vh;   /* 画像の高さ上限（必要なら 36vh〜48vh を調整） */
  }
  .hero-photo {
    max-height: 44vh;
    width: auto;        /* 幅は自動で縦横比を維持 */
    height: auto;
  }

  /* テキストが画像と離れすぎないよう微調整 */
  .hero-content { margin-top: 0; margin-bottom: 8px; padding-left:16px; padding-right:16px; }
  .hero h1 { font-size: clamp(18px,6vw,28px); line-height:1.2; }
}
/* ヘッダーのロゴを画面左端に寄せる（安全版） */
.site-header .container {
  position: relative; /* ヘッダー内での絶対配置の基点に */
}

/* ロゴを絶対配置して左端に */
.site-header .logo {
  position: absolute;
  left: 16px;          /* 左端からの余白（好みで 8px〜24px に調整） */
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ロゴ画像サイズの調整（必要に応じて変更） */
.site-header .logo img,
.site-header .logo svg {
  height: 56px;        /* デスクトップ向けロゴ高さ */
  width: auto;
  display: block;
}

/* ナビが左端と被らないようにナビ側に左マージンを作る */
.header-inner .main-nav {
  margin-left: 160px;  /* ロゴの幅 + 余白に合わせて調整（例: 160px） */
}

/* モバイルでは絶対位置を解除して従来のフローに戻す（はみ出し対策）*/
@media (max-width: 900px) {
  .site-header .logo {
    position: relative;
    left: 0;
    transform: none;
    height: auto;
    margin-right: 12px;
  }
  .site-header .logo img,
  .site-header .logo svg {
    height: 40px;       /* モバイル向けロゴ高さ */
  }
  .header-inner .main-nav {
    margin-left: 0;
  }
}