/*
 * ISJ Custom Theme CSS
 * Innovative Solutions Journal — OJS Theme Override
 *
 * Architecture:
 *   - This file is loaded AFTER the default OJS/PKP stylesheet.
 *   - All rules here override or extend defaults. Nothing is duplicated.
 *   - Organised in layers: Tokens → Base → Components → Pages
 *   - All tokens derived from docs/DESIGN_GUIDE.MD
 *
 * Tasks completed:
 *   Task 1: Typography Foundation (design tokens + base styles)
 *   Task 2: Header & Navigation
 *   Task 3: Journal Identity Block
 */

/* ==========================================================================
   TASK 1 — TYPOGRAPHY FOUNDATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1  Google Fonts
   --------------------------------------------------------------------------
   Inter — Single typeface per DESIGN_GUIDE.MD. All weights used across
           the system. Fallback: system-ui.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

/* --------------------------------------------------------------------------
   1.2  Design Tokens (CSS Custom Properties)
   All values across the theme must reference these variables.
   Never hardcode a value that is represented here.
   -------------------------------------------------------------------------- */
:root {
  /* -- Colour Palette — DESIGN_GUIDE.MD §Colour System ---------------------
     Green communicates growth, knowledge, innovation — not decoration.
     White is the dominant colour. Green is intentional and restrained.
  */
  --color-primary: #2e7d32;
  /* ISJ Green — primary brand            */
  --color-primary-dark: #1b5e20;
  /* Dark green — hover / pressed         */
  --color-primary-light: #66bb6a;
  /* Light green — accents (use sparingly)*/
  --color-primary-bg: #f1f8f1;
  /* Very faint green — section tints     */

  --color-bg: #fafafa;
  /* Page background                      */
  --color-surface: #ffffff;
  /* Cards, panels, header                */
  --color-surface-alt: #f3f4f6;
  /* Alternate surface (gray)             */
  --color-border: #e5e7eb;
  /* Borders, dividers                    */
  --color-border-hover: #d1d5db;
  /* Hovered borders                      */

  --color-text-primary: #1f2937;
  /* Body text                            */
  --color-text-secondary: #6b7280;
  /* Supporting / secondary text          */
  --color-text-muted: #9ca3af;
  /* Timestamps, metadata, captions       */
  --color-white: #ffffff;

  --color-warning: #f59e0b;
  --color-error: #dc2626;

  /* -- Typography ------------------------------------------------------------
     Hierarchy: Geist (Display, Headings), Inter (Body, Metadata, Navigation)
  */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;

  /* Redesigned Fluid Scale */
  --text-display: clamp(3rem, 5vw, 5rem); /* Hero headings */
  --text-display-sm: clamp(2rem, 3.5vw, 3rem); /* Page titles */

  --text-h1: clamp(2rem, 3vw, 2.75rem);
  --text-h2: clamp(1.5rem, 2.5vw, 2.25rem); /* Section headings */
  --text-h3: clamp(1.25rem, 2vw, 1.75rem); /* Component / Card titles */
  --text-h4: clamp(1.125rem, 1.5vw, 1.25rem);

  --text-lg: clamp(1.125rem, 1.5vw, 1.25rem); /* Editorial leads */
  --text-md: 1.125rem; /* 18px */
  --text-base: 1rem; /* 16px - Body copy */
  --text-sm: 0.875rem; /* 14px - Navigation */
  --text-xs: 0.75rem; /* 12px - Metadata */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --leading-loose: 1.8;

  /* Typography tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;

  /* -- Spacing Scale -------------------------------------------------------
     Multiples of 4px. Generous whitespace per guide.
  */
  --space-1: 0.25rem;
  /*  4px */
  --space-2: 0.5rem;
  /*  8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */

  /* -- Layout — DESIGN_GUIDE.MD §Layout ------------------------------------*/
  --container-max: 1280px;
  /* Maximum Width per guide                  */
  --content-max: 760px;
  /* Reading Width per guide                  */

  /* -- Borders & Radius ----------------------------------------------------*/
  --border-color: var(--color-border);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* -- Transitions — DESIGN_GUIDE.MD §Motion (150–250ms) ------------------*/
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1.3  Base Typography
   Override OJS defaults on foundational elements only.
   -------------------------------------------------------------------------- */

/* Body */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Headings — scale from DESIGN_GUIDE.MD */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  margin-top: 0;
  margin-bottom: var(--space-5);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   1.4  Utility — Container
   A single layout utility class for consistent page-width centering.
   -------------------------------------------------------------------------- */
.isj-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* --------------------------------------------------------------------------
   1.5 OJS Structural Resets
   Strip out default OJS page-frame constraints (borders, shadows, max-width)
   to allow bespoke, full-width edge-to-edge section layouts.
   -------------------------------------------------------------------------- */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_head,
.pkp_structure_footerWrapper,
.pkp_structure_footer {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Sticky Footer Core Logic
   Ensures short pages don't leave the footer floating in the middle
   -------------------------------------------------------------------------- */
.pkp_structure_page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.pkp_structure_content {
  flex-grow: 1 !important;
}

/* Ensure the content area does not act as a flex container if OJS tries to make it one */
.pkp_structure_content {
  display: block !important;
}

/* 
 * The default OJS theme uses pseudo-elements to draw decorative borders
 * (such as the vertical line separating the main content from the sidebar).
 * We must destroy these to prevent orphaned lines on the right side.
 */
.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_head::before,
.pkp_structure_head::after,
.pkp_structure_footerWrapper::before,
.pkp_structure_footerWrapper::after,
.pkp_structure_footer::before,
.pkp_structure_footer::after {
  display: none !important;
  content: none !important;
}

/* --------------------------------------------------------------------------
   1.5  Contextual Reading Environments (.prose, .entry-content)
   -------------------------------------------------------------------------- */
.isj-prose p,
.entry_details p,
.obj_article_details p,
.page p {
  max-width: var(--content-max);
}

/* --------------------------------------------------------------------------
   1.6 System Brand Purge
   Remove default PKP/OJS footer branding to maintain bespoke SaaS aesthetic.
   -------------------------------------------------------------------------- */
.pkp_brand_footer {
  display: none !important;
}