/* ==========================================================================
   SENTHUR TRADING COMPANY - MASTER STYLESHEET
   Reconstructed to match the original brand system (colors, type, layout).
   ========================================================================== */

/* --- 1. GLOBAL VARIABLES (BRAND GUIDELINES) --- */
:root {
    /* Primary Colors */
    --trust-indigo: #1A365D;
    --clinical-white: #FFFFFF;

    /* Secondary / Accent Colors */
    --senthur-crimson: #D9381E;
    --cosmetic-rose: #F4DEE5;

    /* Supporting neutrals */
    --ink: #2d3748;
    --muted: #4a5568;
    --line: #eaeaea;
    --panel: #f8fafc;

    /* Typography */
    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Inter', sans-serif;

    /* UI Variables */
    --box-shadow: 0 4px 20px rgba(26, 54, 93, 0.08);
    --border-radius: 6px;
    --transition: all 0.3s ease;

    /* Layout */
    --container-max: 1200px;
    --gutter: 24px;
}

/* --- 2. BASE RESET & LAYOUT --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-secondary);
    color: var(--trust-indigo);
    background-color: var(--clinical-white);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
    font-family: var(--font-primary);
    color: var(--trust-indigo);
    line-height: 1.2;
    font-weight: 700;
}

p { color: var(--ink); }

a { color: var(--trust-indigo); }

img { max-width: 100%; height: auto; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.text-center { text-align: center; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--senthur-crimson);
    margin-bottom: 14px;
    display: block;
}

/* --- 3. CARDS --- */
.card {
    background: var(--clinical-white);
    padding: 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.card + .card { margin-top: 28px; }

/* --- 4. BUTTONS --- */
.btn-primary,
.btn-outline {
    display: inline-block;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 26px;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--senthur-crimson);
    color: var(--clinical-white);
    border-color: var(--senthur-crimson);
}
.btn-primary:hover { opacity: 0.9; }

.btn-outline {
    background-color: transparent;
    color: var(--trust-indigo);
    border-color: var(--trust-indigo);
}
.btn-outline:hover {
    background-color: var(--trust-indigo);
    color: var(--clinical-white);
}

/* --- 5. HEADER / NAV --- */
.site-header {
    background-color: var(--clinical-white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.logo img { height: 55px; width: auto; display: block; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    font-weight: 500;
    font-size: 0.95rem;
}

.main-nav a {
    color: var(--trust-indigo);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.main-nav a:hover { opacity: 0.65; }
.main-nav a.active { color: var(--senthur-crimson); }

.main-nav .nav-cta,
.main-nav .nav-cta.active { color: var(--clinical-white); }

/* --- 6. HERO / BRAND TEXTURE SECTIONS --- */
.bg-brand-texture {
    background-color: var(--trust-indigo);
    background-image: url('../images/Brand_Pattern_Texture.webp');
    background-repeat: repeat;
    color: var(--clinical-white);
}

.bg-brand-texture h1,
.bg-brand-texture h2,
.bg-brand-texture h3,
.bg-brand-texture p {
    color: var(--clinical-white);
}

.hero {
    text-align: center;
    border-bottom: 5px solid var(--senthur-crimson);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; }
.hero .subtitle {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* --- 7. FORMS --- */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--trust-indigo);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    font-family: var(--font-secondary);
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid #cbd5e0;
    border-radius: var(--border-radius);
    background: var(--clinical-white);
    color: var(--ink);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--trust-indigo);
}

.form-group textarea { min-height: 130px; resize: vertical; }

.form-note {
    background: #e6f4ea;
    border-left: 4px solid #2e7d32;
    color: #1b5e20;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
}

/* --- 8. DATA TABLES --- */
table.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
table.data-table th,
table.data-table td {
    padding: 12px;
    border: 1px solid #edf2f7;
    text-align: left;
}
table.data-table th {
    background: var(--panel);
    color: var(--trust-indigo);
    font-weight: 600;
}

/* --- 9. FOOTER --- */
.site-footer { padding-top: 64px; padding-bottom: 24px; margin-top: 0; }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-tagline {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--clinical-white);
}

.footer-brand p { color: #cbd5e0; max-width: 420px; }

.footer-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: var(--clinical-white);
    margin-bottom: 16px;
    font-family: var(--font-secondary);
    font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    color: #cbd5e0;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--clinical-white); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
}
.footer-bottom p { color: #cbd5e0; font-size: 0.85rem; }

/* --- 10. RESPONSIVE --- */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .header-inner { flex-direction: column; gap: 14px; }
    .main-nav { flex-wrap: wrap; justify-content: center; gap: 16px 20px; }

    .section-padding { padding-top: 56px; padding-bottom: 56px; }
    .hero h1 { font-size: 2.1rem; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 32px; }

    /* Make buttons full width for easier tapping on mobile */
    .btn-primary, .btn-outline { display: block; width: 100%; text-align: center; margin-top: 10px; }
    .main-nav .nav-cta { width: auto; display: inline-block; margin-top: 0; }

    /* Responsive Data Tables */
    table.data-table { display: block; overflow-x: auto; white-space: nowrap; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { text-align: center; }
    .footer-brand p { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   ACCESSIBILITY FIX - Hero (bg-brand-texture) readability
   The Brand_Pattern_Texture.png is a light/opaque image that was covering the
   navy background, making white headings and dark subtitles hard to read.
   1) Blend the texture into the navy so the intended dark hero is restored.
   2) Recolor hero subtitles that use the dark inline color (#4a5568) to light.
   ========================================================================== */
.bg-brand-texture {
    background-blend-mode: multiply;
}
.bg-brand-texture p[style*="4a5568"] {
    color: #e2e8f0 !important;
}

/* ==========================================================================
   11. COMPONENTS ADDED IN THE SEO / PORTAL UPDATE
   ========================================================================== */

/* Hero CTA row */
.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* Button variants */
.btn-on-dark { border-color: #fff; color: #fff; background: transparent; }
.btn-on-dark:hover { background: #fff; color: var(--trust-indigo); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* Images */
.rounded-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    object-fit: cover;
}

/* Section intro block */
.section-intro { max-width: 760px; margin: 0 auto 48px; text-align: center; }

/* 4-up grid */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Feature cards */
.feature-card { text-align: left; }
.feature-card .feature-img {
    width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: var(--border-radius); display: block;
}

/* Category cards */
.category-card {
    display: block; background: var(--clinical-white);
    border-radius: var(--border-radius); overflow: hidden;
    box-shadow: var(--box-shadow); text-decoration: none; transition: var(--transition);
}
a.category-card:hover { transform: translateY(-3px); }
.category-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.category-label { display: block; padding: 14px 16px 4px; font-weight: 700; color: var(--trust-indigo); font-family: var(--font-primary); }
.category-desc { padding: 0 16px 16px; margin: 0; color: var(--muted); font-size: 0.9rem; }
.category-card.static { cursor: default; }

/* Check lists & step lists */
.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--senthur-crimson); font-weight: 700; }
.check-list-dark li { color: #e2e8f0; }
.check-list-dark li::before { color: #fff; }
.step-list { padding-left: 20px; }
.step-list li { margin-bottom: 10px; }

/* Alerts */
.alert { padding: 14px 18px; border-radius: var(--border-radius); margin-bottom: 22px; font-size: 0.95rem; }
.alert-success { background: #e6f4ea; border-left: 4px solid #2e7d32; color: #1b5e20; }
.alert-error   { background: #fde8e6; border-left: 4px solid #c0392b; color: #7d1c12; }
.alert-info    { background: #e7eef7; border-left: 4px solid var(--trust-indigo); color: #1a365d; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 2000; padding: 20px;
    background: rgba(26, 54, 93, 0.55);
    display: flex; align-items: center; justify-content: center;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
    background: #fff; border-radius: var(--border-radius); padding: 32px;
    max-width: 460px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Portal login */
.portal-login-card { border-top: 4px solid var(--senthur-crimson); }
.portal-actions { display: flex; gap: 14px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* Dashboard */
.dashboard-header { padding-top: 48px; padding-bottom: 48px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kpi-tile { background: #fff; border-radius: var(--border-radius); padding: 22px; box-shadow: var(--box-shadow); border-top: 3px solid var(--trust-indigo); }
.kpi-value { font-family: var(--font-primary); font-size: 1.8rem; font-weight: 700; color: var(--trust-indigo); }
.kpi-label { font-weight: 600; margin-top: 4px; }
.kpi-note { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }

/* Status badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge-green  { background: #e6f4ea; color: #1b5e20; }
.badge-blue   { background: #e3f0fb; color: #1665b3; }
.badge-amber  { background: #fdf0d5; color: #8a5a00; }
.badge-indigo { background: #e7eaf7; color: #33418c; }
.badge-grey   { background: #edf0f4; color: #4a5568; }

/* Document list */
.doc-list { list-style: none; padding: 0; }
.doc-list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #edf2f7; flex-wrap: wrap; }
.doc-list li:last-child { border-bottom: 0; }
.doc-name { flex: 1; min-width: 180px; }
.doc-date { color: var(--muted); font-size: 0.85rem; }

/* Graceful image placeholder (shown when a photo file is missing) */
.img-placeholder {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--panel); color: var(--muted);
    border: 1px dashed #cbd5e0; border-radius: var(--border-radius);
    padding: 16px; font-size: 0.85rem; width: 100%; min-height: 120px;
}
.img-placeholder span { max-width: 85%; }

/* Footer additions */
.footer-nap { margin-top: 16px; font-size: 0.9rem; }
.footer-nap p { color: #cbd5e0; margin-bottom: 4px; }
.footer-nap a { color: #fff; }
.footer-directories { padding-top: 4px; padding-bottom: 28px; }
.footer-directories h4 {
    color: #fff; text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 0.8rem; margin-bottom: 14px; font-family: var(--font-secondary); font-weight: 600;
}
.directory-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.directory-links a {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e2e8f0; padding: 8px 14px; border-radius: 999px;
    text-decoration: none; font-size: 0.85rem; transition: var(--transition);
}
.directory-links a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.dir-ico { color: var(--senthur-crimson); font-size: 0.7rem; }
.footer-legal { font-size: 0.8rem; color: #a0aec0 !important; margin-top: 4px; }

/* Responsive for the new grids */
@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-4 { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; }
}