/* ====== Base ====== */
:root{
  --jtae-green:#2e7d32;
  --jtae-green-dark:#1b5e20;
  --jtae-red:#b22222;
  --jtae-yellow:#ffd54f;
  --jtae-grey-100:#f7f7f7;
  --jtae-grey-200:#f0f0f0;
  --jtae-grey-300:#e5e5e5;
  --jtae-text:#333;
}
.jtae-container{max-width:1200px;margin:0 auto;padding:0 16px;}
.jtae-section{padding:64px 0;background:#fff;}
.jtae-section-alt{background:var(--jtae-grey-100);}
.jtae-section-head{text-align:center;margin-bottom:28px}
.jtae-section-head h2{font-size:2rem;color:var(--jtae-green);margin:0 0 8px}
.jtae-section-head p{color:#555;margin:0}

/* Buttons */
.jtae-btn{display:inline-block;border-radius:8px;padding:10px 16px;font-weight:600;text-decoration:none;transition:transform .08s ease, box-shadow .2s ease}
.jtae-btn-primary{background:var(--jtae-green);color:#fff}
.jtae-btn-primary:hover{background:var(--jtae-green-dark)}
.jtae-btn-outline{border:2px solid var(--jtae-green);color:var(--jtae-green);background:transparent}
.jtae-btn-outline:hover{background:var(--jtae-green);color:#fff}
.jtae-btn-accent{background:var(--jtae-yellow);color:#222}
.jtae-btn-accent:hover{filter:brightness(0.95)}
.jtae-cta-row{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* Links, small text */
.jtae-link{color:var(--jtae-green);font-weight:600;text-decoration:none}
.jtae-link:hover{text-decoration:underline}
.jtae-meta{color:#777;font-size:.9rem}
.jtae-small{font-size:.9rem;color:#666}

/* ====== Hero Slider ====== */
.jtae-hero-slider{position:relative;height:56vh;min-height:380px;overflow:hidden}
.jtae-slide{position:absolute;inset:0;background-size:cover;background-position:center;display:none}
.jtae-slide.jtae-active{display:block;animation:jtaeFade .8s ease}
@keyframes jtaeFade{from{opacity:.3;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}

.jtae-caption{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);background:rgba(0,0,0,.45);color:#fff;padding:18px 22px;border-radius:12px;max-width:900px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.jtae-caption h1{margin:0 0 6px;font-size:1.9rem;line-height:1.25}
.jtae-caption p{margin:0}
.jtae-slide-prev,.jtae-slide-next{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.35);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:22px}
.jtae-slide-prev:hover,.jtae-slide-next:hover{background:rgba(0,0,0,.55)}
.jtae-slide-prev{left:12px}
.jtae-slide-next{right:12px}

/* ====== Stats ====== */
.jtae-stats{background:var(--jtae-grey-200);padding:28px 0}
.jtae-stats .jtae-container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jtae-stat{background:#fff;border:1px solid var(--jtae-grey-300);border-radius:12px;padding:18px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.jtae-stat-num{font-size:2rem;color:var(--jtae-green);font-weight:800}
.jtae-stat-label{color:#555}

/* ====== CFP ====== */
.jtae-cfp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jtae-cfp-card{background:#fff;border-left:6px solid var(--jtae-red);border-radius:10px;padding:18px;box-shadow:0 4px 14px rgba(0,0,0,.06);min-height:120px}
.jtae-cfp-card h3{margin:.2rem 0 .4rem;color:#222}

/* ====== Latest Articles ====== */
.jtae-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jtae-card{background:#fff;border:1px solid var(--jtae-grey-300);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:8px}
.jtae-card h3{margin:0;font-size:1.1rem}
.jtae-card p{margin:0}
.jtae-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.08)}

/* ====== Testimonials ====== */
.jtae-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jtae-testimonial{background:#fff;border:1px solid var(--jtae-grey-300);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.jtae-testimonial blockquote{margin:0 0 10px;font-style:italic;color:#333}
.jtae-testimonial figcaption{color:#666;font-weight:600}

/* ====== Newsletter ====== */
.jtae-newsletter{display:flex;gap:10px;justify-content:center;margin-top:8px}
.jtae-newsletter input{width:min(460px,90%);border:1px solid var(--jtae-grey-300);border-radius:8px;padding:12px;font-size:1rem}
.jtae-newsletter input:focus{outline:2px solid var(--jtae-green);border-color:var(--jtae-green)}

/* Accessibility helpers */
.jtae-sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ====== Footer (custom, optional) ====== */
.jtae-footer{background:#111;color:#e8e8e8;padding:40px 0 0}
.jtae-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.jtae-footer h4{margin:.2rem 0 8px;color:#fff}
.jtae-list{list-style:none;padding:0;margin:0}
.jtae-list li{margin:6px 0}
.jtae-list a{color:#ddd;text-decoration:none}
.jtae-list a:hover{color:var(--jtae-yellow)}
.jtae-footer-bottom{margin-top:20px;border-top:1px solid #222}
.jtae-footer-bottom p{text-align:center;color:#aaa;margin:12px 0}

/* ====== Responsive ====== */
@media (max-width:1080px){
  .jtae-stats .jtae-container{grid-template-columns:repeat(2,1fr)}
  .jtae-cfp-grid{grid-template-columns:1fr 1fr}
  .jtae-cards{grid-template-columns:1fr 1fr}
  .jtae-testimonials{grid-template-columns:1fr 1fr}
  .jtae-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .jtae-hero-slider{height:46vh}
  .jtae-caption{bottom:10%;padding:14px 16px}
  .jtae-caption h1{font-size:1.4rem}
  .jtae-stats .jtae-container{grid-template-columns:1fr}
  .jtae-cfp-grid,.jtae-cards,.jtae-testimonials{grid-template-columns:1fr}
  .jtae-footer-grid{grid-template-columns:1fr}
}

/* ===== (Optional) Hide OJS default footer if you prefer the custom one ===== */

.pkp_brand_footer {
    display: none !important;
}

.pkp_structure_head,
.pkp_navigation_primary,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user-wrapper,
.pkp_navigation_user,
.pkp_navigation_user > li {
  background-color: #FFFFFF !important; 
}

.pkp_site_name a {
  color: #ffff00 !important;
  font-weight: bold;
  text-transform: uppercase;
}

.pkp_navigation_primary a {
  color: #000000 !important;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_user a:hover {
  color: #000000 !important;
}

.pkp_navigation_user a {
  color: #000000 !important;
}

.pkp_navigation_primary .current a {
  background-color: #000000 !important;
  color: #ffff00 !important;
}


/* ===== Brand + base ===== */
#umu-jtae-home{
  --umu-red:#C62828; --umu-gold:#F9A825; --umu-black:#111; --umu-white:#fff; --agro-green:#2E7D32;
  --muted:#6b7280; --bg:#fafafa; --card:#fff; --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.08); --maxw:1200px;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",Arial,sans-serif; color:var(--umu-black); background:var(--bg);
}


/*logo */
/* Make header logo crisp and not too tall */
.pkp_site_name .is_img img {
  max-height: 58px;   /* tweak to 52–64px to taste */
  width: auto;
}
/* If the text title still appears next to the image, hide it */
.pkp_site_name .is_text { display: none !important; }

/* Slight breathing room around the header area */
.pkp_structure_head,
.pkp_navigation_primary_wrapper {
  padding-top: 8px;
  padding-bottom: 6px;
}

/*logo   */


/* ===== JTAE palette (muted, on-brand) ===== */
:root{
  --jtae-green:#2e7d32;        /* primary */
  --jtae-green-2:#2a7f62;      /* your guide green */
  --jtae-amber:#ffd54f;        /* yellow accent */
  --jtae-amber-2:#f9a825;      /* your guide amber */
  --jtae-red:#b22222;          /* subtle accent if needed */
  --jtae-grey-50:#fafafa;
  --jtae-grey-100:#f5f5f5;
  --jtae-grey-200:#eeeeee;
  --jtae-grey-300:#e0e0e0;
  --jtae-text:#333;
  --jtae-shadow:0 6px 22px rgba(0,0,0,.08);
}

/* ===== Main Container ===== */
.editorial-team-container{
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 64px;
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--jtae-text);
}

/* ===== Title ===== */
.section-title{
  text-align:center;
  color:var(--jtae-green-2);
  font-size:2.4rem;
  margin-bottom:46px;
  position:relative;
  font-weight:700;
  letter-spacing:.3px;
}
.section-title::after{
  content:'';
  display:block;
  width:92px;
  height:4px;
  background:var(--jtae-amber-2);
  margin:14px auto 0;
  border-radius:2px;
}

/* ===== Grid: list of cards (each card holds 2 editors) ===== */
.team-grid{
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ===== Card ===== */
.editor-card{
  display:flex;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--jtae-shadow);
  padding:24px;
  gap:24px;
  border:1px solid var(--jtae-grey-300);
  position:relative;
}
.editor-card::before{
  /* soft top accent */
  content:'';
  position:absolute;
  left:18px; right:18px; top:0;
  height:5px;
  background:linear-gradient(90deg,var(--jtae-green) 0%, var(--jtae-amber) 50%, var(--jtae-green) 100%);
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
.editor-card--single{ max-width:820px; margin:0 auto; }

/* ===== Each editor profile (half card) ===== */
.editor-profile{
  display:flex;
  flex:1;
  gap:18px;
  align-items:flex-start;
  min-width:0; /* text truncation safety */
  padding-top:6px;
}

/* ===== Circular portrait (uniform) ===== */
.editor-image{
  width:120px; min-width:120px; height:120px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  background:var(--jtae-grey-100);
  display:flex; align-items:center; justify-content:center;
}
.editor-image img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ===== Text block ===== */
.editor-info{ flex:1; }
.editor-info h3{
  color:var(--jtae-green-2);
  font-size:1.22rem;
  margin:0 0 4px;
  line-height:1.25;
  font-weight:800;
}
.editor-title{
  color:var(--jtae-green);
  font-weight:700;
  font-size:.95rem;
  margin-bottom:6px;
  display:inline-block;
  padding:4px 10px;
  background:rgba(46,125,50,.10);
  border-radius:6px;
  border:1px solid rgba(46,125,50,.25);
}
.editor-title--amber{
  background:rgba(249,168,37,.12);
  color:#d18d1a;
  border-color:rgba(249,168,37,.35);
}
.editor-title--grey{
  background:#f0f0f0;
  color:#555;
  border-color:#e0e0e0;
}

.editor-qualification{
  color:#666;
  font-size:.92rem;
  margin-bottom:8px;
}
.editor-bio{
  color:#4a4a4a;
  line-height:1.6;
  font-size:.95rem;
  margin:0;
}

/* ===== Role-based color hook (optional) ===== */
.editor-in-chief .editor-title{
  background:rgba(249,168,37,.18);
  color:#b37810;
  border-color:rgba(249,168,37,.40);
}
.associate-editor .editor-title{
  background:rgba(42,127,98,.10);
  color:#2a7f62;
  border-color:rgba(42,127,98,.28);
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .editor-card{ flex-direction:column; }
  .editor-card::before{ left:12px; right:12px; }
  .editor-card--single{ max-width:none; }
}
@media (max-width:600px){
  .editor-image{ width:100px; min-width:100px; height:100px; }
  .section-title{ font-size:2rem; }
}