/* =====================================================
   MISWIMS — DepEd Standard Letterhead Typography
   Per the DepEd Service Marks and Visual Identity Manual
   (DO No. 31, s. 2019)

   Official fonts:
     • Republic of the Philippines   → Old English Text MT
     • Department of Education       → Old English Text MT
     • Region & Division offices     → Trajan Pro
     • Body / address                → EB Garamond (Times-like serif)

   Apply via class:
     .deped-letterhead .deped-republic
     .deped-letterhead .deped-department
     .deped-letterhead .deped-region
     .deped-letterhead .deped-division
     .deped-letterhead .deped-school
     .deped-letterhead .deped-address
   ===================================================== */

/* CSS variables: change in :root to retheme everything */
:root {
  /* Official: Old English Text MT (Republic + Department lines) */
  --deped-font-blackletter: 'Old English Text MT', 'OldEnglishTextMT',
                            'Engravers Old English BT', 'UnifrakturMaguntia', serif;

  /* Official: Trajan Pro (Region + Division offices). Cinzel is the closest
     free Google Fonts substitute for systems without Trajan Pro installed. */
  --deped-font-trajan:      'Trajan Pro', 'Trajan Pro 3', 'Trajan',
                            'Cinzel', 'Cormorant SC', Georgia, serif;

  /* Body / address text */
  --deped-font-body:        'EB Garamond', 'Times New Roman', Times, serif;

  --deped-color-primary:    #000;
  --deped-color-muted:      #333;
  --deped-letterhead-max:   720px;
  --deped-divider:          1.5px solid #000;
}

/* ---- @font-face: Old English Text MT (bundled in /fonts) ----
   The official font used by DepEd for "Republic of the Philippines" and
   "Department of Education". Loaded directly from /fonts so every user
   (regardless of OS) sees the genuine typeface. */
@font-face {
  font-family: 'Old English Text MT';
  src: local('Old English Text MT'),
       local('OldEnglishTextMT'),
       url('../fonts/oldenglishtextmt.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Old English Text MT';
  src: local('Old English Text MT'),
       local('OldEnglishTextMT'),
       url('../fonts/oldenglishtextmt.ttf') format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

/* ---- @font-face: Trajan Pro (bundled in /fonts) ----
   The official font used by DepEd for Region & Division office lines. */
@font-face {
  font-family: 'Trajan Pro';
  src: local('Trajan Pro'),
       local('TrajanPro-Regular'),
       url('../fonts/TrajanPro-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Trajan Pro';
  src: local('Trajan Pro Bold'),
       local('TrajanPro-Bold'),
       url('../fonts/Trajan%20Pro%20Bold.ttf') format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

/* Outer container */
.deped-letterhead {
  font-family: var(--deped-font-body);
  color: var(--deped-color-primary);
  text-align: center;
  line-height: 1.25;
  padding: 1.25rem 1rem 0.75rem;
  max-width: var(--deped-letterhead-max);
  margin: 0 auto;
}

/* Logos row */
.deped-letterhead .deped-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.deped-letterhead .deped-logo {
  width: 80px; height: 80px; object-fit: contain; flex-shrink: 0;
}
.deped-letterhead .deped-logos > .deped-text { flex: 1 1 auto; }

/* ---- Typography hierarchy (each line is a reusable CLASS) ----
   Officially specified font per DO No. 31, s. 2019 in comments. */

/* Old English Text MT — non-bold for the Republic line */
.deped-republic {
  font-family: var(--deped-font-blackletter);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.3px;
  line-height: 1.1;
  margin: 0;
}

/* Old English Text MT — BOLD for the Department line */
.deped-department {
  font-family: var(--deped-font-blackletter);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0.5px;
  margin: 0.15rem 0 0.35rem;
}

/* Trajan Pro — Region (bold caps) */
.deped-region {
  font-family: var(--deped-font-trajan);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0;
}

/* Trajan Pro — Division (regular caps) */
.deped-division {
  font-family: var(--deped-font-trajan);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0.05rem 0 0;
  color: var(--deped-color-muted);
}

/* Trajan Pro — School name (bold caps, slightly larger) */
.deped-school {
  font-family: var(--deped-font-trajan);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin: 0.45rem 0 0.05rem;
}

/* Garamond italic — School address (informational, smallest line) */
.deped-address {
  font-family: var(--deped-font-body);
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 400;
  color: var(--deped-color-muted);
  margin: 0;
}

/* Double-line divider under the letterhead */
.deped-letterhead .deped-divider {
  border: none;
  border-top: var(--deped-divider);
  border-bottom: var(--deped-divider);
  height: 3px;
  margin: 0.65rem 0 0;
}

/* Document title (after the letterhead) */
.deped-document-title {
  font-family: var(--deped-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  margin: 1.25rem 0 0.25rem;
}
.deped-document-subtitle {
  font-family: var(--deped-font-body);
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--deped-color-muted);
  margin: 0 0 1rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .deped-letterhead { padding: 1rem 0.5rem 0.5rem; }
  .deped-letterhead .deped-logo { width: 56px; height: 56px; }
  .deped-republic   { font-size: 1.1rem; }
  .deped-department { font-size: 1.7rem; letter-spacing: 0.3px; }
  .deped-region     { font-size: 0.78rem; letter-spacing: 1px; }
  .deped-division   { font-size: 0.7rem; letter-spacing: 0.8px; }
  .deped-school     { font-size: 0.95rem; letter-spacing: 1.1px; }
  .deped-address    { font-size: 0.72rem; }
  .deped-document-title    { font-size: 1.05rem; }
  .deped-document-subtitle { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .deped-letterhead .deped-logos { gap: 0.5rem; }
  .deped-letterhead .deped-logo { width: 44px; height: 44px; }
  .deped-republic   { font-size: 0.95rem; }
  .deped-department { font-size: 1.4rem; }
  .deped-region     { font-size: 0.7rem; }
  .deped-school     { font-size: 0.85rem; }
}

/* ---------- PRINT ---------- */
@media print {
  .deped-letterhead {
    padding-top: 0;
    max-width: 100%;
    color: #000 !important;
  }
  .deped-letterhead .deped-logo { width: 70px; height: 70px; }
  .deped-republic   { font-size: 14pt; }
  .deped-department { font-size: 22pt; }
  .deped-region     { font-size: 10pt; }
  .deped-division   { font-size: 9pt; }
  .deped-school     { font-size: 11pt; }
  .deped-address    { font-size: 8pt; }
  .deped-divider    { height: 2px; }
}

/* ---------- DARK MODE ---------- */
body.dark-mode .deped-letterhead,
body.dark-mode .deped-document-title,
body.dark-mode .deped-document-subtitle {
  color: #f8f9fc;
}
body.dark-mode .deped-division,
body.dark-mode .deped-address,
body.dark-mode .deped-document-subtitle { color: #d1d3e2; }
body.dark-mode .deped-letterhead .deped-divider { border-color: #f8f9fc; }