/*
Theme Name: Seinen
Description: 一般社団法人神奈川県建築士会青年委員会公式テーマ
Version: 1.0
Author: Seinen Committee
*/

/* Theme styles will be imported from the original CSS files */

	/* http://kanagawa-kentikusikai-seinen.jp/wp-admin/
ユーザー名	kentikusikai-seinen
パスワード	kentikusikai1# */

/* --- Unified Typography System --- */
:root {
  /* Typography Scale (1.25 modular scale - Golden ratio inspired) */
  --font-size-xs: 0.8rem;     /* 12.8px - small text, captions */
  --font-size-sm: 1rem;       /* 16px - body text, baseline */
  --font-size-md: 1.25rem;    /* 20px - large body, lead text */
  --font-size-lg: 1.563rem;   /* 25px - h5/h6, small headings */
  --font-size-xl: 1.953rem;   /* 31.25px - h4, card titles */
  --font-size-2xl: 2.441rem;  /* 39px - h3, section headings */
  --font-size-3xl: 3.052rem;  /* 48.8px - h2, page headings */
  --font-size-4xl: 3.815rem;  /* 61px - h1, main titles */
  --font-size-5xl: 4.768rem;  /* 76.3px - hero titles, display */
  --font-size-6xl: 5.96rem;   /* 95.4px - extra large display */
  
  /* Line Heights - Optimized for Japanese text */
  --line-height-tight: 1.2;    /* headings, large text */
  --line-height-snug: 1.4;     /* UI elements, buttons */
  --line-height-base: 1.6;     /* navigation, labels */
  --line-height-relaxed: 1.8;  /* body content, articles */
  --line-height-loose: 2.0;    /* special content, quotes */
  
  /* Spacing Scale - Based on 8px grid */
  --space-xs: 0.5rem;    /* 8px - tight spacing */
  --space-sm: 1rem;      /* 16px - standard spacing */
  --space-md: 1.5rem;    /* 24px - comfortable spacing */
  --space-lg: 2rem;      /* 32px - section spacing */
  --space-xl: 3rem;      /* 48px - large section spacing */
  --space-2xl: 4rem;     /* 64px - hero spacing */
  --space-3xl: 6rem;     /* 96px - page spacing */
  
  /* Font Weights - Japanese font optimized */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Letter Spacing - Subtle for Japanese */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;
  --letter-spacing-wider: 0.05em;
}

/* Global Typography Reset & Base Styles */
* {
  font-feature-settings: "palt" 1; /* Japanese proportional spacing */
}

body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-normal);
}

/* Unified Heading System */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: #333;
  margin: 0;
}

h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--font-size-3xl);
  margin: var(--space-xl) 0 var(--space-md) 0;
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: var(--space-lg) 0 var(--space-sm) 0;
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: var(--space-lg) 0 var(--space-sm) 0;
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-md) 0 var(--space-xs) 0;
}

h6 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-md) 0 var(--space-xs) 0;
  color: #666;
}

/* Paragraph and Text Elements */
p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
  color: #444;
}

p.lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-medium);
  color: #333;
}

p.small {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: #666;
}

/* Hero Typography */
.hero-title, .page-hero-title, .about-hero-title {
  font-size: var(--font-size-5xl) !important;
  font-weight: var(--font-weight-black) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  color: var(--white) !important;
}

.hero-subtitle, .page-hero-description, .hero-description {
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-base) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--white) !important;
}

/* Hero Content Override */
.hero-content, .hero-content p, .page-hero-content, .page-hero-content p {
  color: var(--white) !important;
}

.hero-content .accent, .page-hero-content .accent {
  color: var(--accent-yellow) !important;
}

/* About Page Hero Override */
.about-hero-description {
  color: var(--white) !important;
}

/* Footer Override */
.footer, .footer p, .footer-section, .footer-section p, .footer-bottom, .footer-bottom p {
  color: var(--white) !important;
}

.footer-section h3 {
  color: var(--accent-yellow) !important;
}

.footer-section a {
  color: var(--white) !important;
}

.footer-section a:hover {
  color: var(--accent-yellow) !important;
}

/* Section Titles */
.section-title, .section-title-center {
  font-size: var(--font-size-3xl) !important;
  font-weight: var(--font-weight-black) !important;
  line-height: var(--line-height-tight) !important;
  margin-bottom: var(--space-lg) !important;
}

.section-subtitle {
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-base) !important;
  font-weight: var(--font-weight-normal) !important;
  margin-bottom: var(--space-xl) !important;
  color: #666;
}

/* Lists */
ul, ol {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

/* Links */
a {
  color: #1256a9;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #f5b82e;
}

/* Utility: controlled responsive line breaks */
.br-sm { display: none; }
.nowrap { white-space: nowrap; }
@media (max-width: 768px) { .br-sm { display: inline; } }

/* External link icon (Font Awesome) */
.external-link-icon {
  margin-left: 0.35em;
  font-size: 0.85em;
  opacity: 0.75;
  transition: opacity .2s ease;
}

a.external-link:hover .external-link-icon { opacity: 1; }

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-6xl: 4.5rem;
    --font-size-5xl: 3.5rem;
    --font-size-4xl: 2.8rem;
    --font-size-3xl: 2.2rem;
    --font-size-2xl: 1.8rem;
    --font-size-xl: 1.5rem;
    --font-size-lg: 1.3rem;
    --space-3xl: 4rem;
    --space-2xl: 3rem;
    --space-xl: 2rem;
  }
  
  body {
    font-size: 0.9rem;
    line-height: var(--line-height-relaxed);
  }

  /* Hero mobile polish: centered, curated breaks */
  .hero .hero-content { text-align: center; max-width: 28rem; margin: 0 auto; }
  .hero .hero-subtitle { margin-bottom: 0.35rem; line-height: 1.3; }
  .hero .hero-title { margin-bottom: var(--space-sm); line-height: 1.1; }
  .hero .hero-description { margin-top: var(--space-xs); }
  /* Hide uncontrolled BRs on small screens; keep only .br-sm */
  .hero .hero-description br:not(.br-sm) { display: none; }
}

@media (max-width: 480px) {
  :root {
    --font-size-6xl: 3.5rem;
    --font-size-5xl: 2.8rem;
    --font-size-4xl: 2.2rem;
    --font-size-3xl: 1.8rem;
    --font-size-2xl: 1.5rem;
    --font-size-xl: 1.3rem;
    --font-size-lg: 1.2rem;
    --space-3xl: 3rem;
    --space-2xl: 2rem;
    --space-xl: 1.5rem;
  }
  
  body {
    font-size: 0.85rem;
  }
  
  p {
    margin-bottom: var(--space-sm);
  }
}

/* --- Responsive Navigation --- */
@media (max-width: 768px) {
    .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* ヘッダーの直下に配置 */
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 10px 0;
        z-index: 1000;
    }

    .nav.active {
        display: flex !important;
    }

    .nav li {
        text-align: center;
        margin: 0;
    }

    .nav a {
        padding: 15px 20px;
        display: block;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav li:last-child a {
        border-bottom: none;
    }

    .mobile-menu {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        color: inherit;
    }

    .mobile-menu.active {
        color: #007acc;
    }

    /* Global responsive image fixes */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Container responsiveness */
    .container {
        padding: 0 15px;
    }

    /* Button responsiveness */
    .btn, .button, [class*="btn-"] {
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    /* Section padding adjustments */
    .section {
        padding: 40px 0;
    }

    /* Grid adjustments */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    .section {
        padding: 30px 0;
    }
}

/* --- Executive Section (幹事紹介) --- */
.executive-section {
  padding: var(--space-3xl) 0;
}

.executive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.executive-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  display: grid;
  grid-template-columns: 340px 1fr; /* photo | text (smaller) */
  grid-auto-rows: auto;
  gap: 0;
}

.executive-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);
}

.executive-photo {
  grid-column: 1;
  grid-row: 1 / -1; /* span all text rows */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fafafa, #f3f3f3);
  border-right: 1px solid #eee;
  position: relative;
  overflow: hidden;
}

.executive-photo img {
  width: 100%;
  height: auto;
  max-height: 360px; /* smaller max height while preserving ratio */
  object-fit: contain; /* keep original aspect ratio without cropping */
  display: block;
}

/* subtle shine effect */
.executive-photo::after {
  content: "";
  position: absolute;
  top: 0; left: -150%; bottom: 0; width: 50%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 40%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 60%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
}

.executive-card:hover .executive-photo::after {
  animation: executiveShine 1.2s ease forwards;
}

@keyframes executiveShine {
  0% { left: -150%; }
  100% { left: 150%; }
}

.executive-meta {
  grid-column: 2;
  padding: var(--space-md) var(--space-lg) 0 var(--space-lg); /* tighter top/bottom */
}

.executive-role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f5b82e; /* fallback for var */
  color: #111;
  margin-bottom: var(--space-sm);
}

.executive-name {
  font-size: var(--font-size-xl);
  margin: 0 0 0.35rem 0; /* reduce gap to text */
}

.executive-quote {
  /* now inside .executive-meta; inherit side padding */
  padding: 0;
  margin: 0.2rem 0 0.6rem 0; /* tuck under name */
  color: #444;
}

/* first quote in a card should tuck up under the name */
.executive-card .executive-quote:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

.executive-more {
  margin-top: var(--space-sm);
  text-align: center;
}

.executive-link {
  font-size: 0.9rem;
  color: #666;
  border-bottom: 1px dashed #bbb;
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.executive-link:hover {
  color: #1256a9;
  border-bottom-color: #1256a9;
}

/* Desktop sizing tweaks */
@media (min-width: 1025px) {
  .executive-card { grid-template-columns: 360px 1fr; }
}

/* Tablet and below: single column stack */
@media (max-width: 1024px) {
  .executive-card { grid-template-columns: 1fr; }
  .executive-photo { grid-row: auto; border-right: none; border-bottom: 1px solid #eee; }
  .executive-meta { grid-column: auto; }
}

@media (max-width: 640px) {
  .executive-meta { padding-top: var(--space-md); }
}

/* --- Greeting Page --- */
.greeting-hero {
  padding: var(--space-2xl) 0 var(--space-lg) 0; /* tighter vertical rhythm */
}

.greeting-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr; /* photo | text */
  gap: var(--space-lg);
  align-items: center;
}

.greeting-photo {
  background: linear-gradient(180deg, #fafafa, #f3f3f3);
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  padding: var(--space-sm);
  position: relative;
  overflow: hidden;
}

.greeting-photo img {
  width: 100%;
  height: auto;           /* preserve aspect ratio */
  max-height: 520px;      /* slightly smaller for better balance */
  object-fit: contain;    /* never crop; keep full background in view */
  display: block;
}

/* subtle shine on hover */
.greeting-photo::after {
  content: "";
  position: absolute;
  top: 0; left: -150%; bottom: 0; width: 50%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 42%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 58%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.greeting-photo:hover::after { animation: greetingShine 1.2s ease forwards; }
@keyframes greetingShine { 0% { left: -150%; } 100% { left: 150%; } }

.greeting-intro { padding: var(--space-md) 0; }

.greeting-title { margin-bottom: var(--space-xs); }

.greeting-lead { font-size: var(--font-size-md); margin-bottom: var(--space-sm); }

.greeting-meta { color: #555; }
.greeting-role { font-size: 0.95rem; margin-bottom: 0.25rem; }
.greeting-name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }

.greeting-body-section { padding: var(--space-2xl) 0 var(--space-3xl) 0; }
.greeting-body { max-width: 820px; margin: 0 auto; }
.greeting-body p { font-size: var(--font-size-sm); }
.greeting-signature { margin-top: var(--space-lg); font-weight: var(--font-weight-medium); color: #333; text-align: right; }

@media (max-width: 1024px) {
  .greeting-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .greeting-lead { font-size: 1.05rem; }
}

/* Centered hero heading and eyebrow */
.greeting-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.greeting-eyebrow {
  display: inline-block; margin-bottom: 6px; padding: 4px 10px; border-radius: 999px;
  background: #f5b82e; color: #111; font-size: 0.85rem; letter-spacing: .05em; font-weight: 600;
}
.greeting-title { margin-bottom: var(--space-xs); }
.greeting-lead { font-size: 1.05rem; margin-bottom: 0; color: #555; }

/* New portrait section */
.greeting-portrait-section { padding: 0 0 var(--space-2xl) 0; }
.greeting-portrait-card {
  max-width: 1040px; margin: 0 auto; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fafafa, #f3f3f3);
  border: 1px solid #eee; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  padding: var(--space-sm);
}
.greeting-portrait-card img { width: 100%; height: auto; object-fit: contain; display: block; }
.greeting-portrait-card::after { content: ""; position: absolute; top: 0; left: -150%; bottom: 0; width: 50%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 42%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 58%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); pointer-events: none; }
.greeting-portrait-card:hover::after { animation: greetingShine 1.2s ease forwards; }
@keyframes greetingShine { 0% { left: -150%; } 100% { left: 150%; } }

/* --- About Page Polish --- */
.about-page .mission-section { padding: var(--space-2xl) 0; }
.about-page .mission-content {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-page .mission-image { max-width: 560px; }
.about-page .mission-image img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}
.about-page .mission-title { margin-bottom: var(--space-sm); }

.about-page .objectives-section { padding: var(--space-2xl) 0; }
.about-page .objectives-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr); /* 3 on first row, 2 on second */
}
.about-page .objective-card {
  background: #fff; border: 1px solid #eee; border-radius: 14px;
  padding: var(--space-lg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-page .objective-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.10); }
.about-page .objective-title { margin-bottom: var(--space-xs); }

.about-page-image-fullwidth {
  width: 100%; height: auto; display: block;
  max-width: 1100px; margin: var(--space-xl) auto; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.about-page-image-inline {
  width: 100%; height: auto; display: block;
  max-width: 520px;
  border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.07);
  margin: var(--space-lg) auto; /* center within grid cell */
}

.about-page .activities-section { padding: var(--space-2xl) 0 var(--space-3xl) 0; }
.about-page .activities-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); }
.about-page .activity-category.full-width { grid-column: 1 / -1; }
.about-page .activity-category-title { margin-bottom: var(--space-sm); }
.about-page .lecture-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.about-page .lecture-tags span { background: #f6f6f6; border: 1px solid #eee; border-radius: 999px; padding: 6px 12px; font-size: 0.9rem; }

@media (max-width: 1024px) {
  .about-page .mission-content { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-page .activities-layout { grid-template-columns: 1fr; }
  .about-page .objectives-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .about-page .objectives-grid { gap: var(--space-md); }
  .about-page .objective-card { padding: var(--space-md); }
  .about-page .objectives-grid { grid-template-columns: 1fr; }
}


/* --- General Polish: Focus & Small-screen spacing --- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid #1256a9;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  h1 { margin-bottom: var(--space-md); }
  h2 { margin: var(--space-lg) 0 var(--space-sm) 0; }
  .section-title, .section-title-center { margin-bottom: var(--space-md) !important; }
}