/* DPTME "WOW" Stylesheet
   Purpose: Modern, elegant academic-journal style inspired by top medical journals (APTA-like)
   How to use: Save as dptme-wow-stylesheet.css and include in your site theme (e.g., OJS custom CSS or <link> in site header).
   Notes: Adjust brand colors and font URLs as needed. Logo centering handled below.
*/

/* ---------- Imports ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root{
  /* Brand palette - tweak these to match DPTME / SmartPhysio colors */
  --brand-900: #0b3d91; /* Deep navy */
  --brand-700: #1657c8;
  --brand-500: #2b7bea;
  --accent: #e76f51; /* warm accent */
  --muted: #6b7280;
  --bg: #ffffff;
  --surface: #fbfdff;
  --card: #ffffff;
  --glass: rgba(11,61,145,0.06);
  --text: #0f1724;
  --lead: #334155;
  --radius: 12px;
  --max-width: 1100px;
}

/* ---------- Global Reset & Base ---------- */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg) 0%, #f7fbff 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.58;
}

.container{
  width:calc(100% - 40px);
  max-width:var(--max-width);
  margin:40px auto;
}

a{color:var(--brand-700);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Header ---------- */
.site-header{
  background:transparent;
  padding:18px 0 8px;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Center the logo - target typical class names used by many themes */
.site-logo, .header-logo, .site-title img, .logo img{
  display:block !important;
  margin:0 auto !important; /* center horizontally */
  height:72px; /* adjust as needed */
  width:auto;
  max-width:320px;
}

/* for cases where logo is inside a link or div */
.site-logo a, .header-logo a{display:block;text-align:center}

/* Navigation - subtle, slim */
.main-nav{
  display:flex;gap:18px;align-items:center;justify-content:center;
  font-weight:600;font-size:0.95rem;color:var(--lead)
}
.main-nav a{padding:8px 12px;border-radius:8px}
.main-nav a:hover{background:var(--glass)}

/* ---------- Hero / Masthead ---------- */
.masthead{
  background:linear-gradient(180deg, rgba(43,123,234,0.06), transparent 40%);
  border-radius:18px; padding:34px; margin-top:18px; display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.masthead .title{
  flex:1 1 480px;
}
.masthead h1{
  font-family:'Merriweather', serif; font-size:2.15rem;margin:0;color:var(--brand-900);line-height:1.06;
}
.masthead p.lead{font-size:1.05rem;color:var(--lead);margin-top:10px}

.masthead .meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn-primary{background:var(--brand-700);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid rgba(11,61,145,0.08);padding:10px 14px;border-radius:10px}

/* ---------- Two-column layout ---------- */
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;margin-top:28px}

/* Main article list */
.article-card{background:var(--card);border-radius:14px;box-shadow:0 6px 20px rgba(12,40,100,0.06);padding:20px}
.article-card + .article-card{margin-top:18px}
.article-card h3{margin:0;font-size:1.15rem;color:var(--brand-900);font-weight:700}
.article-card .meta{color:var(--muted);font-size:0.875rem;margin-top:8px}
.article-card p.excerpt{color:var(--lead);margin-top:12px}

/* Featured article style */
.featured{display:flex;gap:20px;padding:22px;background:linear-gradient(90deg, rgba(43,123,234,0.04), rgba(231,111,81,0.02));border-radius:16px}
.featured img{width:320px;height:200px;object-fit:cover;border-radius:10px}
.featured .content h2{font-family:'Merriweather',serif;font-size:1.6rem;margin:0}

/* Sidebar */
.sidebar{position:relative}
.widget{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(12,40,100,0.04);margin-bottom:18px}
.widget h4{margin:0;font-size:1rem;color:var(--brand-900)}
.widget .list{margin-top:10px}
.widget .list a{display:block;padding:8px 6px;border-radius:8px}

/* ---------- Article page ---------- */
.article-body{background:var(--card);padding:28px;border-radius:14px;box-shadow:0 10px 30px rgba(12,40,100,0.04)}
.article-body h1{font-family:'Merriweather',serif;font-size:2rem;margin-top:0;color:var(--brand-900)}
.article-body h2{font-size:1.2rem;margin-top:22px;color:var(--brand-700)}
.article-body p{color:var(--lead);font-size:1rem}
.article-meta{display:flex;gap:12px;color:var(--muted);font-size:0.9rem}
.article-fig{margin:18px 0;border-radius:10px;overflow:hidden}
.article-fig img{width:100%;height:auto;display:block}

/* Reference box */
.refs{background:#f8fafc;border-left:4px solid var(--brand-700);padding:12px 16px;border-radius:8px;margin-top:20px}
.refs li{margin-bottom:8px}

/* ---------- Typography utilities ---------- */
.lead-text{font-size:1.05rem;color:var(--lead)}
.kicker{font-weight:700;text-transform:uppercase;color:var(--brand-700);font-size:0.8rem;letter-spacing:0.06em}
.small{font-size:0.85rem;color:var(--muted)}

/* ---------- Lists of issues / archive ---------- */
.issue-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px,1fr));gap:16px}
.issue-card{padding:14px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 18px rgba(12,40,100,0.03)}
.issue-card h5{margin:0}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-block;padding:8px 14px;border-radius:10px;font-weight:600}
.input, textarea, select{width:100%;padding:10px;border-radius:10px;border:1px solid #e6eefc;background:#fff}
label{font-weight:600;font-size:0.9rem}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px;padding:28px 0;background:transparent;border-top:1px solid rgba(11,61,145,0.04)}
.site-footer .container{display:flex;gap:20px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:12px}
.footer-credits{font-size:0.9rem;color:var(--muted)}

/* ---------- Accessibility & print ---------- */
a:focus{outline:3px solid rgba(43,123,234,0.14);outline-offset:2px}
@media print{.site-header,.main-nav,.sidebar,.site-footer{display:none}.container{width:100%;margin:0}}

/* ---------- Responsive adjustments ---------- */
@media (max-width:980px){
  .content-grid{grid-template-columns:1fr}
  .masthead{padding:18px}
  .featured img{display:none}
}
@media (max-width:520px){
  .masthead h1{font-size:1.35rem}
  .site-logo, .header-logo, .logo img{height:54px}
}

/* ---------- OJS-specific helper classes (common selectors) ---------- */
/* If using Open Journal Systems, you may need to target these classes */
.headerLogo img{display:block;margin:0 auto;}
#pageHeader .logo img{display:block;margin:0 auto}
#siteTitle{display:block;text-align:center}

/* ---------- Fine-tuning: table, code, blockquote ---------- */
table{width:100%;border-collapse:collapse;margin:12px 0}
thead th{background:linear-gradient(90deg,var(--brand-700),var(--brand-500));color:#fff;padding:10px;border-radius:6px}
td,th{padding:10px;border:1px solid #eef6ff}
code{background:#f5f7fb;padding:2px 6px;border-radius:6px;font-family:monospace}
blockquote{border-left:4px solid var(--brand-700);padding:8px 14px;color:var(--lead);background:#fbfdff;border-radius:6px}

/* ---------- Small interactions ---------- */
.card-hover{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(11,61,145,0.08)}

/* ---------- End of stylesheet ---------- */