/*
Theme Name: MedPharm
Theme URI: https://example.com/medpharm
Author: MedPharm Team
Description: A medical pharmacology knowledge base WordPress theme. Features a hierarchical custom post type (Pharmacology > Cardiodrugs > Calcium Channel Blockers > Drug), a two-column academic article layout, structured tables, references, and a right-column media panel — matching a clinical reference design.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medpharm
Tags: medical, pharmacology, custom-post-type, education, two-column, responsive
*/

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
    --primary:       #1e40af;
    --primary-dark:  #1e3a8a;
    --primary-light: #3b82f6;
    --accent:        #0284c7;
    --accent-light:  #38bdf8;
    --teal:          #0d9488;
    --white:         #ffffff;
    --off-white:     #f8fafc;
    --light-gray:    #f1f5f9;
    --border:        #e2e8f0;
    --border-dark:   #cbd5e1;
    --text-dark:     #0f172a;
    --text-body:     #334155;
    --text-muted:    #64748b;
    --text-light:    #94a3b8;
    --link:          #1d4ed8;
    --link-hover:    #1e40af;
    --table-head:    #f1f5f9;
    --table-stripe:  #f8fafc;
    --danger:        #dc2626;
    --warning:       #d97706;
    --success:       #059669;
    --shadow-xs:     0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.1);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.08);
    --radius:        6px;
    --radius-sm:     4px;
    --radius-lg:     10px;
    --transition:    0.2s ease;
    --font-heading:  'Inter', system-ui, -apple-system, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
    --font-size-xs:  0.75rem;
    --font-size-sm:  0.875rem;
    --font-size-base:1rem;
    --font-size-lg:  1.125rem;
    --font-size-xl:  1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --container:     1280px;
    --header-h:      56px;
    --col-left:      68%;
    --col-right:     30%;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--text-body);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; transition: color var(--transition); }
a:hover { color: var(--link-hover); }
ul, ol { list-style: none; }

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.25;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
p { margin-bottom: 0.85rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--text-dark); }

/* =============================================
   LAYOUT
   ============================================= */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1.4;
}
.btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.btn-accent { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn-accent:hover { background: #0369a1; border-color: #0369a1; color: var(--white); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); }
.btn-teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-teal:hover { background: #0f766e; color: var(--white); }
.btn-sm { padding: 0.35rem 0.85rem; font-size: var(--font-size-xs); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); }
.btn-block { width: 100%; justify-content: center; }

/* =============================================
   BADGES
   ============================================= */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
}
.badge-primary { background: #dbeafe; color: var(--primary); }
.badge-teal    { background: #ccfbf1; color: var(--teal); }
.badge-orange  { background: #fef3c7; color: var(--warning); }
.badge-red     { background: #fee2e2; color: var(--danger); }
.badge-gray    { background: var(--light-gray); color: var(--text-muted); }

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    flex-wrap: wrap;
    padding: 0.75rem 0;
}
.breadcrumb a { color: var(--link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border-dark); font-size: 0.8rem; }
.breadcrumb .current { color: var(--text-body); }

/* =============================================
   TABLES (Global)
   ============================================= */
.wp-content table,
.pharm-content table,
.entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.wp-content table th,
.pharm-content table th,
.entry-table th {
    background: var(--table-head);
    color: var(--text-dark);
    font-weight: 700;
    padding: 0.6rem 0.85rem;
    text-align: left;
    border-bottom: 2px solid var(--border-dark);
    border-right: 1px solid var(--border);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wp-content table th:last-child,
.pharm-content table th:last-child,
.entry-table th:last-child { border-right: none; }
.wp-content table td,
.pharm-content table td,
.entry-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-body);
    line-height: 1.55;
}
.wp-content table td:last-child,
.pharm-content table td:last-child,
.entry-table td:last-child { border-right: none; }
.wp-content table tr:last-child td,
.pharm-content table tr:last-child td,
.entry-table tr:last-child td { border-bottom: none; }
.wp-content table tbody tr:nth-child(even),
.pharm-content table tbody tr:nth-child(even) { background: var(--table-stripe); }

/* =============================================
   WP CORE CLASSES
   ============================================= */
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter{ margin: 0 auto 1rem; display: block; }