/**
 * ProwessApps Framework V4
 * Unified responsive interface stylesheet
 *
 * Organization:
 *  01. Design tokens
 *  02. Reset and document defaults
 *  03. Accessibility
 *  04. Header and primary navigation
 *  05. Page shell and responsive grid
 *  06. Tutorial typography and lesson header
 *  07. Breadcrumb and table of contents
 *  08. Educational content components
 *  09. Code examples and output
 *  10. Tables
 *  11. Quiz, forms, users and comments
 *  12. Advertisement and footer
 *  13. Device-specific media queries
 *  14. Interaction and accessibility preferences
 *  15. Print
 *
 * Bootstrap 5 remains the layout foundation. All custom classes use pa-.
 */

/* ========================================================================== 
   01. DESIGN TOKENS
   Edit shared colours, dimensions, shadows and motion values here.
   ========================================================================== */
:root {
  color-scheme: light;
  --pa-primary: #1769e0;
  --pa-primary-hover: #0f55bd;
  --pa-primary-soft: #eaf3ff;
  --pa-navy: #132f4c;
  --pa-text: #243447;
  --pa-muted: #657789;
  --pa-border: #dde5ed;
  --pa-border-strong: #c7d2dc;
  --pa-surface: #ffffff;
  --pa-surface-soft: #f4f7fa;
  --pa-surface-raised: #ffffff;
  --pa-success: #16845b;
  --pa-success-soft: #eaf8f1;
  --pa-warning: #a96500;
  --pa-warning-soft: #fff6df;
  --pa-danger: #c93647;
  --pa-danger-soft: #fff0f2;
  --pa-info: #087da4;
  --pa-info-soft: #eaf8fc;
  --pa-code: #0f1720;
  --pa-code-header: #1b2a38;
  --pa-focus: rgba(23, 105, 224, 0.40);
  --pa-radius-xs: 0.4rem;
  --pa-radius-sm: 0.65rem;
  --pa-radius: 0.9rem;
  --pa-radius-lg: 1.2rem;
  --pa-radius-xl: 1.6rem;
  --pa-shadow-xs: 0 1px 3px rgba(19, 47, 76, 0.06);
  --pa-shadow-sm: 0 0.35rem 1rem rgba(19, 47, 76, 0.08);
  --pa-shadow: 0 0.8rem 2.2rem rgba(19, 47, 76, 0.12);
  --pa-shadow-mobile: 0 -0.2rem 1.3rem rgba(19, 47, 76, 0.10);
  --pa-header-height: 4.25rem;
  --pa-content-width: 80rem;
  --pa-reading-width: 74ch;
  --pa-touch-target: 2.75rem;
  --pa-transition-fast: 140ms ease;
  --pa-transition: 220ms ease;
}

/* ========================================================================== 
   02. RESET AND DOCUMENT DEFAULTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent rogue elements like AdSense iframes or images from breaking the layout */
img,
video,
iframe,
ins.adsbygoogle {
  max-width: 100%;
}

.pa-ad-slot {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  min-width: 320px;
  /* overflow-x: clip on html clips the VIEWPORT — this is the correct level.
     Using 'clip' instead of 'hidden' ensures it DOES NOT create a scroll container.
     This prevents the page from jumping to the top when Bootstrap opens the mobile menu! */
  overflow-x: clip;
  scroll-padding-top: calc(var(--pa-header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  /* DO NOT set overflow-x on body — it breaks position:sticky on the header
     in Safari. Horizontal overflow is handled by html (viewport level)
     and .pa-page-body (content level) below. */
  max-width: 100%;
  color: var(--pa-text);
  background:
    radial-gradient(circle at top right,
      rgba(23, 105, 224, 0.06),
      transparent 28rem),
    var(--pa-surface-soft);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Clip horizontal scroll on the content wrapper — NOT on body or html.
   Since the sticky header is a sibling of this div (not a child), sticky
   positioning works correctly on iOS Safari, Chrome and all modern browsers. */
.pa-page-body {
  flex: 1 0 auto;
  overflow-x: hidden;
  min-width: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--pa-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--pa-transition-fast), background-color var(--pa-transition-fast);
}

a:hover {
  color: var(--pa-primary-hover);
  text-decoration-thickness: 0.12em;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

pre {
  max-width: 100%;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

code,
kbd,
samp,
pre {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

::selection {
  color: var(--pa-navy);
  background: #cfe3ff;
}

/* ========================================================================== 
   03. ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 3px;
}

.pa-skip-link {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  left: max(0.5rem, env(safe-area-inset-left));
  z-index: 2000;
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--pa-navy);
  border-radius: var(--pa-radius-sm);
  box-shadow: var(--pa-shadow);
  transform: translateY(-180%);
  transition: transform var(--pa-transition-fast);
}

.pa-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

.pa-visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ========================================================================== 
   05. PAGE SHELL AND RESPONSIVE GRID
   ========================================================================== */
.pa-page-shell {
  width: 100%;
  max-width: var(--pa-content-width);
  margin-inline: auto;
}

.pa-content-card {
  min-width: 0;
  background: var(--pa-surface-raised);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-sm);
}

.pa-sidebar {
  position: sticky;
  top: calc(var(--pa-header-height) + 1rem);
  max-height: calc(100vh - var(--pa-header-height) - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-xs);
}

.pa-sidebar a {
  display: flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--pa-radius-sm);
  text-decoration: none;
}

.pa-sidebar a:hover,
.pa-sidebar a:focus,
.pa-sidebar a.active {
  color: var(--pa-primary-hover);
  background: var(--pa-primary-soft);
}

/* ========================================================================== 
   06. TUTORIAL TYPOGRAPHY AND LESSON HEADER
   ========================================================================== */
.pa-reading-content {
  min-width: 0;
}

.pa-reading-content>p,
.pa-reading-content>ul,
.pa-reading-content>ol {
  max-width: var(--pa-reading-width);
}

.pa-reading-content p,
.pa-reading-content li {
  overflow-wrap: anywhere;
}

.pa-reading-content h1,
.pa-reading-content h2,
.pa-reading-content h3,
.pa-reading-content h4 {
  color: var(--pa-navy);
  font-weight: 780;
  line-height: 1.22;
  letter-spacing: -0.018em;
  scroll-margin-top: calc(var(--pa-header-height) + 1.2rem);
  text-rendering: optimizeLegibility;
}

.pa-reading-content h1 {
  margin-bottom: 0.8rem;
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.pa-reading-content h2 {
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.pa-reading-content h3 {
  margin-top: 1.9rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.pa-reading-content .lead {
  max-width: var(--pa-reading-width);
  color: #53687c;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.68;
}

.pa-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
  color: var(--pa-muted);
  font-size: 0.94rem;
}

.pa-progress {
  height: 0.55rem;
  overflow: hidden;
  background: #e5ebf1;
  border-radius: 999px;
}

.pa-progress .progress-bar {
  background: linear-gradient(90deg, var(--pa-primary), #29a071);
  border-radius: inherit;
}

/* ========================================================================== 
   07. BREADCRUMB AND TABLE OF CONTENTS
   ========================================================================== */
.pa-breadcrumb .breadcrumb {
  margin-bottom: 1rem;
  color: var(--pa-muted);
  font-size: 0.92rem;
}

.pa-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: #98a7b5;
}

.pa-toc {
  max-width: var(--pa-reading-width);
  padding: 1rem 1.15rem;
  margin-block: 1.35rem;
  background: linear-gradient(145deg, #f8fbff, #f1f7ff);
  border: 1px solid #cfe0f5;
  border-radius: var(--pa-radius-lg);
}

.pa-toc ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.pa-toc a {
  display: inline-block;
  padding-block: 0.2rem;
}

.pa-toc a[aria-current="true"] {
  color: var(--pa-primary-hover);
  font-weight: 750;
}

/* ========================================================================== 
   08. EDUCATIONAL CONTENT COMPONENTS
   ========================================================================== */
.pa-definition-box,
.pa-info-box,
.pa-note-box,
.pa-warning-box,
.pa-success-box,
.pa-summary-box {
  max-width: var(--pa-reading-width);
  padding: 1rem 1.15rem;
  margin-block: 1.35rem;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-left-width: 0.38rem;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-xs);
}

.pa-definition-box {
  border-left-color: var(--pa-primary);
  background: var(--pa-primary-soft);
}

.pa-info-box {
  border-left-color: var(--pa-info);
  background: var(--pa-info-soft);
}

.pa-note-box {
  border-left-color: var(--pa-warning);
  background: var(--pa-warning-soft);
}

.pa-warning-box {
  border-left-color: var(--pa-danger);
  background: var(--pa-danger-soft);
}

.pa-success-box,
.pa-summary-box {
  border-left-color: var(--pa-success);
  background: var(--pa-success-soft);
}

.pa-box-title {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--pa-navy);
  font-weight: 780;
}

.pa-definition-box> :last-child,
.pa-info-box> :last-child,
.pa-note-box> :last-child,
.pa-warning-box> :last-child,
.pa-success-box> :last-child,
.pa-summary-box> :last-child {
  margin-bottom: 0;
}

/* ========================================================================== 
   09. CODE EXAMPLES AND OUTPUT
   ========================================================================== */
.pa-code-wrapper {
  position: relative;
  max-width: 100%;
  margin-block: 1.4rem;
  overflow: hidden;
  background: var(--pa-code);
  border: 1px solid #273747;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
}

.pa-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  padding: 0.5rem 0.8rem 0.5rem 1rem;
  color: #dce6ef;
  background: var(--pa-code-header);
  border-bottom: 1px solid #344657;
  font-size: 0.88rem;
}

.pa-copy-button {
  min-width: 4.4rem;
  min-height: 2.15rem;
  padding: 0.3rem 0.65rem;
  color: #fff;
  background: transparent;
  border: 1px solid #718292;
  border-radius: var(--pa-radius-xs);
  transition: background-color var(--pa-transition-fast), border-color var(--pa-transition-fast);
}

.pa-copy-button:hover,
.pa-copy-button:focus {
  color: #fff;
  background: #304557;
  border-color: #a8b7c4;
}

.pa-code-wrapper pre[class*="language-"] {
  margin: 0;
  border-radius: 0;
}

.pa-output-box {
  max-width: 100%;
  padding: 1rem;
  margin-block: 1.35rem;
  overflow-x: auto;
  color: #e8f0f6;
  background: var(--pa-code);
  border: 1px solid #273747;
  border-radius: var(--pa-radius-lg);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========================================================================== 
   10. TABLES
   ========================================================================== */
.pa-reading-content .table-responsive {
  position: relative;
  margin-block: 1.35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%,
      rgba(19, 47, 76, 0.16),
      transparent),
    radial-gradient(farthest-side at 100% 50%,
      rgba(19, 47, 76, 0.16),
      transparent);
  background-attachment: local, local, scroll, scroll;
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.8rem 100%, 0.8rem 100%;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.pa-scroll-hint {
  display: none;
  margin-bottom: 0.5rem;
  color: var(--pa-muted);
  font-size: 0.875rem;
}


.pa-reading-content .table {
  margin-bottom: 0;
  vertical-align: middle;
}

.pa-reading-content .table> :not(caption)>*>* {
  padding: 0.75rem 0.85rem;
  border-color: var(--pa-border);
}

.pa-reading-content .table thead th {
  color: #fff;
  background: var(--pa-navy);
  border-color: #294966;
  white-space: nowrap;
}

/* ========================================================================== 
   11. QUIZ, FORMS, USERS AND COMMENTS
   ========================================================================== */
.pa-form-card,
.pa-quiz-card,
.pa-comment-section,
.pa-user-card {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
}

.pa-form-card .form-control,
.pa-form-card .form-select,
.pa-comment-section .form-control {
  min-height: var(--pa-touch-target);
  border-color: var(--pa-border-strong);
  border-radius: var(--pa-radius-sm);
}

.pa-form-card textarea.form-control,
.pa-comment-section textarea.form-control {
  min-height: 7.5rem;
}

.pa-form-card .form-control:focus,
.pa-form-card .form-select:focus,
.pa-comment-section .form-control:focus {
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 0.22rem var(--pa-focus);
}

.pa-form-help,
.pa-comment-meta {
  color: var(--pa-muted);
  font-size: 0.9rem;
}

.pa-comment-item {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--pa-border);
}

.pa-comment-item:last-child {
  border-bottom: 0;
}

.pa-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.btn {
  min-height: var(--pa-touch-target);
  border-radius: var(--pa-radius-sm);
  font-weight: 650;
}

/* ========================================================================== 
   12. ADVERTISEMENT AND FOOTER
   ========================================================================== */
.pa-ad-slot {
  min-height: 15rem;
  color: var(--pa-muted);
  background: var(--pa-surface);
  border: 1px dashed #b7c2cc;
  border-radius: var(--pa-radius-lg);
}

/* -------------------------------------
   Modern Footer Styles
-------------------------------------- */

.pa-footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.pa-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.footer-logo {
  height: 40px;
  width: 40px;
  object-fit: contain;
}

.footer-text {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Quick Links */
.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #38bdf8;
  transition: width 0.3s ease;
}

.footer-links a:hover {
  color: #38bdf8;
  transform: translateX(4px);
}

.footer-links a:hover::after {
  width: 100%;
}

/* Social Buttons */
.footer-socials .btn-social {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-socials .btn-social:hover {
  background: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
  transform: translateY(-4px);
  box-shadow: 0 8px 15px rgba(13, 110, 253, 0.4);
}

/* Footer Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 768px) {
  .pa-footer {
    text-align: center;
  }

  /* Avoid targeting ALL .d-flex — scope to footer only */
  .pa-footer .d-flex.align-items-center {
    justify-content: center;
  }

  .footer-text.pe-lg-5 {
    padding-right: 0 !important;
  }

  .footer-socials {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pa-footer .container {
    padding-inline: 1rem;
  }
}



/* ========================================================================== 
   13. DEVICE-SPECIFIC MEDIA QUERIES
   Each range has an explicit responsibility.
   ========================================================================== */

/* Extra-small phones: 320px-374px */
@media (max-width: 374.98px) {
  :root {
    --pa-radius-lg: 0.9rem;
    --pa-radius-xl: 1rem;
    --pa-header-height: 3.8rem;
  }

  body {
    font-size: 0.96rem;
    line-height: 1.64;
  }

  .pa-site-header .navbar,
  .pa-brand {
    min-height: var(--pa-header-height);
  }

  .pa-brand {
    font-size: 1.08rem;
  }

  .pa-content-card {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .pa-reading-content h1 {
    font-size: 1.85rem;
  }

  .pa-code-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  .pa-copy-button {
    width: 100%;
  }
}

/* Standard phones: 375px-575px */
@media (min-width: 375px) and (max-width: 575.98px) {
  :root {
    --pa-header-height: 4rem;
  }

  body {
    line-height: 1.66;
  }

  .pa-content-card {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* All phones: app-like navigation and touch-first spacing */
@media (max-width: 575.98px) {
  body {
    background: var(--pa-surface);
  }

  .pa-site-header {
    box-shadow: 0 0.35rem 1rem rgba(19, 47, 76, 0.10);
  }

  .pa-site-header .navbar {
    padding-block: 0.35rem;
  }

  .pa-site-header .navbar-collapse {
    max-height: calc(100dvh - var(--pa-header-height) - env(safe-area-inset-top));
    margin-top: 0.45rem;
    padding: 0.55rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-mobile);
  }

  .pa-main-nav .nav-link {
    min-height: 3rem;
    padding-inline: 0.9rem;
  }

  .pa-reading-content h2 {
    margin-top: 2.2rem;
  }

  .pa-definition-box,
  .pa-info-box,
  .pa-note-box,
  .pa-warning-box,
  .pa-success-box,
  .pa-summary-box,
  .pa-toc {
    padding: 0.95rem;
    border-radius: var(--pa-radius);
  }

  .pa-sidebar {
    position: static;
    max-height: none;
    border-radius: var(--pa-radius);
  }

  .pa-ad-slot {
    min-height: 11rem;
    margin-inline: 0.75rem;
  }

  .pa-footer {
    margin-top: 2rem;
  }

  .table-responsive {
    scrollbar-width: thin;
  }

  input,
  select,
  textarea {
    font-size: 1rem;
    /* Prevents unwanted zoom on iOS form focus. */
  }
}

/* Large phones and small tablets: 576px-767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pa-page-shell {
    padding-inline: 0.75rem;
  }

  .pa-content-card {
    border-radius: var(--pa-radius-lg);
  }

  .pa-sidebar {
    position: static;
    max-height: none;
  }

  .pa-scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

}

/* Tablets: 768px-991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pa-page-shell {
    padding-inline: 1rem;
  }

  .pa-sidebar {
    position: static;
    max-height: none;
  }

  .pa-content-card {
    border-radius: var(--pa-radius-xl);
  }

  .pa-reading-content {
    font-size: 1.02rem;
  }
}

/* Laptops: 992px-1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --pa-content-width: 74rem;
  }

  .pa-reading-content {
    font-size: 1.01rem;
  }

  .pa-site-header .navbar {
    padding-inline: 0.5rem;
  }
}

/* Desktops: 1200px-1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    --pa-content-width: 78rem;
  }

  .pa-reading-content {
    font-size: 1.03rem;
  }
}

/* Large desktops: 1400px and above */
@media (min-width: 1400px) {
  :root {
    --pa-content-width: 82rem;
    --pa-reading-width: 76ch;
  }

  .pa-reading-content {
    font-size: 1.045rem;
  }

  .pa-content-card {
    box-shadow: var(--pa-shadow);
  }
}

/* Short landscape mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --pa-header-height: 3.5rem;
  }

  .pa-site-header .navbar-collapse {
    max-height: calc(100dvh - 4rem);
  }
}

/* ========================================================================== 
   14. INTERACTION AND ACCESSIBILITY PREFERENCES
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {

  .pa-content-card,
  .pa-form-card,
  .pa-quiz-card,
  .pa-comment-section {
    transition: box-shadow var(--pa-transition), transform var(--pa-transition);
  }

  .pa-content-card:hover {
    box-shadow: var(--pa-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --pa-border: #7a8996;
    --pa-muted: #425466;
  }

  a {
    text-decoration-thickness: 0.12em;
  }
}

/* ========================================================================== 
   15. PRINT
   ========================================================================== */
@media print {

  .pa-site-header,
  .pa-sidebar,
  .pa-ad-slot,
  .pa-footer,
  .pa-copy-button,
  .pa-skip-link {
    display: none !important;
  }

  body,
  .pa-content-card {
    color: #000;
    background: #fff;
    border: 0;
    box-shadow: none;
  }

  .pa-content-card {
    padding: 0 !important;
  }

  .pa-reading-content a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.78em;
  }

  .pa-code-wrapper,
  .pa-output-box,
  .pa-definition-box,
  .pa-info-box,
  .pa-note-box,
  .pa-warning-box,
  .pa-success-box,
  .pa-summary-box {
    break-inside: avoid;
  }
}