/* assets/css/site.css
 * ------------------------------------------------------------
 * Public-facing site design. Colors, fonts, and component styles are
 * taken as-is from ijarmrt-homepage-edit.html (the design the client
 * supplied) so the look is not changed — only made reusable/dynamic.
 * ------------------------------------------------------------ */
* { margin:0; padding:0; box-sizing:border-box; }
body { background-color:#fcf9f7; font-family:'Source Sans Pro',sans-serif; color:#2f3e46; line-height:1.6; }
h1,h2,h3,h4,h5,.heading-font { font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-0.02em; }
.accent-italic { font-family:'Playfair Display',serif; font-style:italic; font-weight:500; color:#52796f; }
a { text-decoration:none; }

.top-bar { background:#2f3e46; color:#cad2c5; font-size:0.85rem; padding:0.45rem 0; }
.top-bar a { color:#cad2c5; }
.top-bar a:hover { color:#fff; }
.top-bar .badge-issn { background:rgba(255,255,255,0.08); border-radius:20px; padding:0.15rem 0.8rem; }

.navbar-beauty { background-color:rgba(255,255,255,0.97); backdrop-filter:blur(10px); border-bottom:1px solid rgba(82,121,111,0.2); padding:0.8rem 0; box-shadow:0 4px 20px rgba(0,0,0,0.03); }
.navbar-beauty .navbar-brand { font-family:'Playfair Display',serif; font-weight:700; color:#2f3e46; font-size:1.6rem; letter-spacing:-0.5px; }
.navbar-beauty .navbar-brand i { color:#84a98c; }
.navbar-beauty .nav-link { color:#2f3e46; font-weight:400; margin:0 0.15rem; padding:0.5rem 0.9rem !important; border-radius:30px; transition:0.2s; font-size:0.95rem; }
.navbar-beauty .nav-link:hover, .navbar-beauty .nav-link.active { background-color:#d63a2f; color:#fff; }
.navbar-beauty .nav-link.nav-bookstore { background-color:#d63a2f; color:#fff; font-weight:600; }
.navbar-beauty .nav-link.nav-bookstore:hover { background-color:#a82a20; color:#fff; }
.btn-submit-nav { background-color:#d63a2f; border:none; color:#fff; border-radius:40px; padding:0.5rem 1.8rem; font-weight:600; transition:0.2s; white-space:nowrap; }
.btn-submit-nav:hover { background-color:#a82a20; color:#fff; }

/* ---- journal toolbar: open access / peer reviewed badges + article search ---- */
.journal-toolbar { background:#f4f2ee; border-bottom:1px solid rgba(47,62,70,0.08); padding:0.7rem 0; }
.badge-pill-oa, .badge-pill-peer { display:inline-flex; align-items:center; gap:0.4rem; font-weight:700; font-size:0.8rem; color:#2f3e46; }
.badge-pill-oa i, .badge-pill-peer i { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; color:#fff; font-size:0.7rem; }
.badge-pill-oa i { background:#d63a2f; }
.badge-pill-peer i { background:#2f3e46; }
.journal-search-form { display:flex; align-items:center; background:#fff; border-radius:40px; padding:0.25rem 0.25rem 0.25rem 1.1rem; flex:1 1 260px; max-width:340px; border:1px solid rgba(47,62,70,0.1); }
.journal-search-form input[type="search"] { border:none; outline:none; background:transparent; flex:1; font-size:0.9rem; }
.journal-search-form button { border:none; background:#d63a2f; color:#fff; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.journal-search-form button:hover { background:#a82a20; }

.hero-beauty { background:linear-gradient(145deg,#f2e9e4 0%,#e9f0ef 100%); padding:4.5rem 0 4rem; position:relative; overflow:hidden; }
.hero-beauty::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(132,169,140,0.12) 0%,transparent 70%); top:-220px; right:-220px; border-radius:50%; }
.hero-beauty::after { content:''; position:absolute; width:420px; height:420px; background:radial-gradient(circle,rgba(82,121,111,0.08) 0%,transparent 70%); bottom:-140px; left:-140px; border-radius:50%; }
.hero-content { position:relative; z-index:2; }
.hero-badge { display:inline-block; background-color:#d63a2f; color:#fff; padding:0.4rem 1.4rem; border-radius:40px; font-size:0.85rem; font-weight:600; letter-spacing:0.4px; margin-bottom:1.3rem; }
.hero-title { font-size:2.6rem; font-weight:700; color:#2f3e46; line-height:1.18; }
.hero-title span { color:#52796f; font-style:italic; }
.hero-subtitle { font-size:1.1rem; color:#3f5e55; max-width:640px; margin-top:1rem; }
.btn-hero { background-color:#d63a2f; border:none; color:#fff; padding:0.85rem 2.4rem; border-radius:50px; font-weight:600; font-size:1.02rem; box-shadow:0 8px 20px rgba(214,58,47,0.3); transition:0.2s; }
.btn-hero:hover { background-color:#a82a20; color:#fff; transform:translateY(-2px); }
.btn-hero-outline { border:2px solid #d63a2f; color:#d63a2f; padding:0.8rem 2.2rem; border-radius:50px; font-weight:600; font-size:1.02rem; background:transparent; transition:0.2s; }
.btn-hero-outline:hover { background:#d63a2f; color:#fff; }
.hero-facts { margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1.2rem; }
.hero-fact { background:#fff; border-radius:14px; padding:0.9rem 1.3rem; box-shadow:0 8px 20px -8px rgba(47,62,70,0.12); min-width:150px; }
.hero-fact .label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.6px; color:#84a98c; font-weight:700; }
.hero-fact .value { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:600; color:#2f3e46; }

.hero-visual { position:relative; z-index:2; }
.hero-orb { background:#fff; border-radius:28px; box-shadow:0 20px 50px -15px rgba(47,62,70,0.2); padding:2rem; }
.hero-orb .ring { width:100%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 200deg,#84a98c,#52796f,#cad2c5,#84a98c); display:flex; align-items:center; justify-content:center; }
.hero-orb .ring-inner { width:78%; height:78%; border-radius:50%; background:#fcf9f7; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem; }
.hero-orb .ring-inner i { font-size:2.2rem; color:#52796f; margin-bottom:0.5rem; }

.section-eyebrow { color:#84a98c; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; font-size:0.78rem; word-break:break-word; }
.section-eyebrow .eyebrow-name { font-weight:900; color:#2f3e46; }
.section-divider { width:70px; height:4px; background:#84a98c; margin:1.1rem auto 2.3rem; border-radius:2px; }
.section-divider.left { margin:1.1rem 0 2.3rem; }
section h2, .container > h2 { text-align:center; }

.card-elegant { background:#fff; border-radius:20px; padding:2rem; box-shadow:0 10px 30px -10px rgba(47,62,70,0.1); border:1px solid rgba(132,169,140,0.2); transition:0.2s; height:100%; }
.card-elegant:hover { transform:translateY(-4px); box-shadow:0 16px 36px -12px rgba(47,62,70,0.18); }
.icon-circle { width:56px; height:56px; border-radius:16px; background:#eef3ee; color:#52796f; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.1rem; }

.scope-chip { display:inline-flex; align-items:center; gap:0.5rem; background:#fff; border:1px solid rgba(132,169,140,0.35); color:#2f3e46; padding:0.55rem 1.1rem; border-radius:30px; font-size:0.9rem; font-weight:600; margin:0.3rem 0.3rem 0.3rem 0; }
.scope-chip i { color:#52796f; }

.process-step { text-align:center; padding:0 0.5rem; }
.process-num { width:56px; height:56px; border-radius:50%; background:#52796f; color:#fff; font-family:'Playfair Display',serif; font-weight:700; font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }

.quote-card { background:#fff; border-radius:20px; padding:1.8rem; box-shadow:0 10px 30px -10px rgba(47,62,70,0.1); border:1px solid rgba(132,169,140,0.2); height:100%; }
.quote-stars { color:#e9a23b; font-size:0.9rem; }

.accordion-elegant .accordion-item { border:none; border-radius:16px !important; overflow:hidden; margin-bottom:0.9rem; box-shadow:0 6px 20px -10px rgba(47,62,70,0.15); }
.accordion-elegant .accordion-button { font-family:'Playfair Display',serif; font-weight:600; color:#2f3e46; background:#fff; }
.accordion-elegant .accordion-button:not(.collapsed) { background:#eef3ee; color:#2f3e46; box-shadow:none; }
.accordion-elegant .accordion-button:focus { box-shadow:none; }

.cta-banner { background:linear-gradient(135deg,#2f3e46 0%,#3f5e55 100%); color:#fff; border-radius:28px; padding:3rem 2.5rem; text-align:center; }
.cta-banner h2 { color:#fff; }
.btn-cta { background:#d63a2f; color:#fff; padding:0.9rem 2.6rem; border-radius:50px; font-weight:700; font-size:1.05rem; transition:0.2s; }
.btn-cta:hover { background:#a82a20; color:#fff; }

.indexing-strip { background:#eef3ee; border-radius:20px; padding:2rem; }
.indexing-strip .idx-item { text-align:center; font-family:'Playfair Display',serif; font-weight:700; color:#3f5e55; font-size:1.1rem; }

.footer-beauty { background:#2f3e46; color:#cad2c5; padding:4rem 0 1.5rem; margin-top:4rem; }
.footer-head { color:#e8a33d; font-family:'Playfair Display',serif; font-weight:600; margin:0 0 1.1rem; text-transform:uppercase; letter-spacing:0.5px; font-size:0.9rem; line-height:1.3; }
.footer-brand { color:#e8a33d; }
.footer-links { list-style:none; margin:0; padding:0; font-size:0.875rem; }
.footer-links li { margin-bottom:0.7rem; line-height:1.4; }
.footer-links li:last-child { margin-bottom:0; }
.footer-links a { color:#cad2c5; }
.footer-links a:hover { color:#84a98c; }
.footer-newsletter input { border-radius:30px 0 0 30px; border:none; }
.footer-newsletter button { border-radius:0 30px 30px 0; background:#d63a2f; color:#fff; border:none; font-weight:600; padding:0 1.1rem; }
.visitor-counter-box { display:inline-flex; align-items:center; justify-content:center; width:30px; height:36px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:6px; font-family:monospace; font-weight:700; color:#84a98c; }
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.1); color:#cad2c5; }
.social-icon:hover { background:#52796f; color:#fff; }

/* ---- footer grid: 5 equal columns, all starting on the same top line ---- */
.footer-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:2rem; align-items:start; }
.footer-grid-4 { grid-template-columns:repeat(4, 1fr); }
.footer-col p { margin:0 0 0.7rem; line-height:1.4; font-size:0.875rem; }
.footer-col p:last-child { margin-bottom:0; }
.footer-col a { color:#cad2c5; }
.footer-col a:hover { color:#84a98c; }
@media (max-width:991px) {
  .footer-grid, .footer-grid-4 { grid-template-columns:repeat(3, 1fr); row-gap:2.5rem; }
}
@media (max-width:767px) {
  .footer-grid, .footer-grid-4 { grid-template-columns:1fr 1fr; row-gap:2.2rem; }
}
@media (max-width:575px) {
  .footer-grid, .footer-grid-4 { grid-template-columns:1fr; row-gap:2rem; }
}

/* ---- important links widget (sidebar-style card) ---- */
.important-links-list { list-style:none; margin:0; padding:0; }
.important-links-list li { border-bottom:1px dashed rgba(132,169,140,0.35); }
.important-links-list li:last-child { border-bottom:none; }
.important-links-list a { display:flex; justify-content:space-between; align-items:center; padding:0.65rem 0; color:#2f3e46; text-decoration:none; font-weight:500; }
.important-links-list a:hover { color:#52796f; }
.important-links-list a i { color:#84a98c; }

/* ---- book store "Our Services" icon timeline ---- */
.services-strip { display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; padding-top:1rem; }
.services-strip::before { content:''; position:absolute; top:calc(1rem + 54px); left:0; right:0; height:1px; background:rgba(47,62,70,0.15); z-index:0; }
.service-step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-decoration:none; color:#2f3e46; flex:1 1 120px; min-width:100px; }
.service-icon { font-size:2rem; color:#c1440e; }
.service-step .dot { width:12px; height:12px; border-radius:50%; background:#1d4ed8; border:3px solid #fff; box-shadow:0 0 0 1px rgba(29,78,216,0.3); }
.service-step .label { font-weight:600; font-size:0.85rem; }
.service-step:hover .label { color:#52796f; }

.whatsapp-pill { background-color:#25D366; color:#fff !important; padding:0.4rem 1.2rem; border-radius:40px; font-weight:600; transition:0.2s; display:inline-flex; align-items:center; gap:0.4rem; }
.whatsapp-pill:hover { background-color:#1ebe5a; color:#fff !important; }

/* ---- page-header used on inner pages (about, guidelines, etc.) ---- */
.page-header-beauty { background:linear-gradient(145deg,#f2e9e4 0%,#e9f0ef 100%); padding:3rem 0 2.5rem; text-align:center; }
.page-header-beauty h1 { font-size:2.1rem; color:#2f3e46; }
.page-body { max-width:860px; margin:0 auto; }
.policy-content { white-space:pre-line; }

/* ---- book store cards ---- */
.book-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px -10px rgba(47,62,70,0.1); border:1px solid rgba(132,169,140,0.2); height:100%; display:flex; flex-direction:column; }
.book-card img { width:100%; aspect-ratio:3/4; object-fit:cover; background:#eef3ee; }
.book-card .body { padding:1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.book-card .price { font-weight:700; color:#52796f; font-family:'Playfair Display',serif; }
.book-card .price s { color:#9aa5a1; font-weight:400; margin-right:6px; }

.form-elegant label { font-weight:600; font-size:0.9rem; color:#2f3e46; }
.form-elegant .form-control, .form-elegant .form-select { border-radius:10px; border:1px solid rgba(82,121,111,0.3); padding:0.6rem 0.9rem; }
.form-elegant .form-control:focus, .form-elegant .form-select:focus { border-color:#52796f; box-shadow:0 0 0 0.2rem rgba(82,121,111,0.15); }
.author-row { border:1px dashed rgba(82,121,111,0.4); border-radius:14px; padding:1rem; margin-bottom:1rem; position:relative; }

/* ---- hero sliding images (right side of the Welcome banner) ---- */
.hero-slider { background:#fff; border-radius:28px; box-shadow:0 20px 50px -15px rgba(47,62,70,0.25); padding:1.4rem; }
.hero-slider .carousel-inner { border-radius:18px; overflow:hidden; }
/* IMPORTANT: never set `display` here — Bootstrap's carousel relies on
   display:none/block on .carousel-item to hide the inactive slides and
   animate the active one. An earlier version of this rule set
   `display:flex` on every .carousel-item (active or not), which overrode
   that and made every slide show stacked at once instead of sliding. */
.hero-slider .carousel-item { position: relative; height:420px; background:#f4f2ee; }
.hero-slider .carousel-item img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.hero-slider > img { width:100%; height:420px; object-fit:contain; background:#f4f2ee; border-radius:18px; display:block; }
.hero-slider .carousel-caption { background:rgba(47,62,70,0.55); border-radius:12px; left:1rem; right:1rem; bottom:1rem; padding:0.6rem 1rem; }
.hero-slider .carousel-indicators { margin-bottom:0.6rem; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width:12%; opacity:0; transition:0.2s; }
.hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next { opacity:0.9; }

/* ---- Journal Overview stat cards ---- */
.stat-card { background:#fff; border-radius:20px; padding:1.8rem 1.2rem; text-align:center; box-shadow:0 10px 30px -10px rgba(47,62,70,0.1); border:1px solid rgba(132,169,140,0.2); height:100%; }
.stat-card .stat-emoji { font-size:1.8rem; margin-bottom:0.6rem; }
.stat-card .stat-value { font-family:'Playfair Display',serif; font-weight:700; font-size:1.4rem; color:#2f3e46; }
.stat-card .stat-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.6px; color:#84a98c; font-weight:700; margin-top:0.2rem; }

/* ---- announcement strip (Subject Includes section) ---- */
.announcement-strip { background:#eef3ee; border-left:4px solid #52796f; border-radius:10px; padding:0.8rem 1.2rem; font-weight:600; color:#2f3e46; display:inline-block; }

/* ---- Our Strengths / Information Pages panel ---- */
.strength-panel { background:#fff; border-radius:20px; padding:2rem; box-shadow:0 10px 30px -10px rgba(47,62,70,0.1); border:1px solid rgba(132,169,140,0.2); height:100%; }
.strength-panel h3 { font-size:1.15rem; margin-bottom:1rem; }
.strength-list { list-style:none; }
.strength-list li { padding:0.65rem 0; border-bottom:1px dashed rgba(132,169,140,0.35); display:flex; align-items:center; gap:0.6rem; }
.strength-list li:last-child { border-bottom:none; }
.strength-list a { color:#2f3e46; font-weight:500; }
.strength-list a:hover { color:#52796f; }
.strength-list i { color:#52796f; }

@media (max-width:768px){
  .hero-title{ font-size:2rem; }
  .top-bar .d-flex{ flex-wrap:wrap; gap:0.4rem; }
  .hero-slider .carousel-item { height:280px; }
  .hero-slider > img { height:280px; }
}