/* Source: /assets/css/base/reset.css */
/* ==========================================================================
   File: /inadramseo/assets/css/base/reset.css
   Purpose:
   - Predictable box model
   - Remove browser defaults that break layout consistency
   - Prevent horizontal overflow issues early
   - Keep accessibility and media elements safe by default
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-block-size: 100%;
  overflow-x: clip;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary);
  direction: rtl;
}

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

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

button {
  border: 0;
  background: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre,
figure,
dl,
dd {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  inline-size: 100%;
}

hr {
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
}

textarea {
  resize: vertical;
}

:focus-visible {
  outline: var(--focus-ring-width, 0.1875rem) solid var(--color-focus-ring);
  outline-offset: 0.125rem;
}

::selection {
  background-color: var(--color-primary-soft);
  color: var(--color-text);
}

/* Source: /assets/css/base/variables.css */
/* ==========================================================================
   File: /inadramseo/assets/css/base/variables.css
   Purpose:
   - Global design tokens for the entire InadramSEO theme
   - Single source of truth for typography, spacing, colors, radii, shadows,
     transitions, layout containers, and breakpoints
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Font Families
     ------------------------------------------------------------------------ */
  --font-primary: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* ------------------------------------------------------------------------
     Font Weights
     ------------------------------------------------------------------------ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* ------------------------------------------------------------------------
     Line Heights
     ------------------------------------------------------------------------ */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.75;
  --leading-relaxed: 1.875;

  /* ------------------------------------------------------------------------
     Font Sizes - Body
     Mobile-first values
     ------------------------------------------------------------------------ */
  --font-body-xs: 0.75rem;
  --font-body-sm: 0.875rem;
  --font-body: 1rem;
  --font-body-lg: 1.125rem;

  /* ------------------------------------------------------------------------
     Font Sizes - Headings
     Mobile-first values
     ------------------------------------------------------------------------ */
  --font-h6: 1rem;
  --font-h5: 1.125rem;
  --font-h4: 1.25rem;
  --font-h3: 1.5rem;
  --font-h2: 1.875rem;
  --font-h1: 2.25rem;

  /* ------------------------------------------------------------------------
     Space Scale
     Used for margin, padding, gap only
     ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3rem;
  --space-5xl: 4rem;

  /* ------------------------------------------------------------------------
     Radius
     ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------ */
  --border-width-thin: 0.0625rem;
  --border-width-thick: 0.125rem;

  /* ------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------ */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: rgb(37 99 235 / 0.12);

  --color-secondary: #0f766e;
  --color-accent: #f59e0b;
  --color-accent-soft: rgb(245 158 11 / 0.12);

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-alt: #eef2f7;
  --color-surface-dark: #0f172a;

  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;

  --color-border: #dbe2ea;
  --color-border-strong: #c3ccd8;

  --color-focus-ring: rgb(37 99 235 / 0.35);

  /* ------------------------------------------------------------------------
     Code Colors
     ------------------------------------------------------------------------ */
  --color-code-background: #0b1120;
  --color-code-text: #e2e8f0;
  --color-code-border: rgba(148, 163, 184, 0.2);

  /* ------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 0.0625rem 0.125rem rgb(15 23 42 / 0.06);
  --shadow-md: 0 0.25rem 0.75rem rgb(15 23 42 / 0.08);
  --shadow-lg: 0 0.75rem 1.75rem rgb(15 23 42 / 0.12);
  --shadow-xl: 0 1.25rem 2.5rem rgb(15 23 42 / 0.16);

  /* ------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ------------------------------------------------------------------------
     Container
     ------------------------------------------------------------------------ */
  --container-max-width: 75rem;
  --container-padding: var(--space-md);

  /* ------------------------------------------------------------------------
     Header
     ------------------------------------------------------------------------ */
  --header-height: 4.5rem;

  /* ------------------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------------------ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
}

/* --------------------------------------------------------------------------
   Responsive Token Overrides
   Only token values are overridden here; components stay mobile-first.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  :root {
    --font-body: 1.0625rem;
    --font-body-lg: 1.1875rem;

    --font-h6: 1.0625rem;
    --font-h5: 1.25rem;
    --font-h4: 1.375rem;
    --font-h3: 1.75rem;
    --font-h2: 2.25rem;
    --font-h1: 3rem;

    --space-md: 1.125rem;
    --space-lg: 1.5rem;
    --space-xl: 1.75rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
    --space-5xl: 5rem;

    --container-padding: var(--space-xl);
    --header-height: 5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --font-body: 1.125rem;
    --font-body-lg: 1.25rem;

    --font-h1: 3.5rem;
    --font-h2: 2.75rem;
    --font-h3: 2rem;

    --container-padding: var(--space-2xl);
  }
}

/* Source: /assets/css/base/typography.css */
/* ==========================================================================
   File: /inadramseo/assets/css/base/typography.css
   Purpose:
   - Base text styles for the whole theme
   - Token-driven typography only
   - Mobile-first and responsive by design tokens
   ========================================================================== */

body {
  font-family: var(--font-primary);
  font-size: var(--font-body);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-background);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-h1);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--font-h2);
  letter-spacing: -0.028em;
}

h3 {
  font-size: var(--font-h3);
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--font-h4);
  letter-spacing: -0.015em;
}

h5 {
  font-size: var(--font-h5);
}

h6 {
  font-size: var(--font-h6);
}

p {
  margin: 0;
  color: var(--color-text-soft);
}

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

a:hover,
a:focus-visible {
  color: var(--color-primary-hover);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--font-body-xs);
  line-height: var(--leading-normal);
}

code,
kbd,
samp {
  font-family: var(--font-code);
  font-size: 0.9375em;
}

code {
  padding-inline: var(--space-2xs);
  padding-block: 0.125rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

pre {
  margin: 0;
  overflow-x: auto;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-code-background);
  color: var(--color-code-text);
  box-shadow: var(--shadow-sm);
}

pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: var(--font-body-sm);
}

ul,
ol {
  padding-inline-start: var(--space-xl);
  color: var(--color-text-soft);
}

li + li {
  margin-block-start: var(--space-2xs);
}

blockquote {
  margin: 0;
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--border-width-thick) solid var(--color-primary);
  color: var(--color-text-soft);
  font-style: italic;
}

figure {
  margin: 0;
}

figcaption {
  margin-block-start: var(--space-xs);
  font-size: var(--font-body-sm);
  color: var(--color-text-muted);
}

table {
  width: 100%;
  font-size: var(--font-body-sm);
}

th,
td {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

th {
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Source: /assets/css/components/buttons.css */
/* ==========================================================================
   File: /inadramseo/assets/css/components/buttons.css
   Purpose:
   - Reusable button system for links, buttons, submits and CTA elements
   - Token-based styling only
   - Mobile-first, accessible and consistent across the theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Button
   Usage:
   - <a class="btn btn-primary" href="#">...</a>
   - <button class="btn btn-primary" type="button">...</button>
   - <input class="btn btn-primary" type="submit" value="...">
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-inline-size: max-content;
  min-block-size: 2.875rem;
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-0.0625rem);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width, 0.1875rem) var(--color-focus-ring);
}

/* --------------------------------------------------------------------------
   Primary Button
   Main CTA
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   Secondary Button
   Neutral surface-based action
   -------------------------------------------------------------------------- */
.btn-secondary {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Outline Button
   -------------------------------------------------------------------------- */
.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   Ghost Button
   Minimal action
   -------------------------------------------------------------------------- */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-soft);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Accent Button
   Optional highlight CTA
   -------------------------------------------------------------------------- */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: color-mix(in srgb, var(--color-accent) 88%, black);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Button Sizes
   -------------------------------------------------------------------------- */
.btn-sm {
  min-block-size: 2.375rem;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  font-size: var(--font-body-xs);
}

.btn-lg {
  min-block-size: 3.25rem;
  padding-block: var(--space-md);
  padding-inline: var(--space-xl);
  font-size: var(--font-body);
}

/* --------------------------------------------------------------------------
   Full Width Button
   Useful in mobile layouts and forms
   -------------------------------------------------------------------------- */
.btn-block {
  display: inline-flex;
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Button with icon
   HTML target:
   <a class="btn btn-primary btn-icon" href="#">
     <span class="btn-icon__label">شروع</span>
     <svg ...></svg>
   </a>
   -------------------------------------------------------------------------- */
.btn-icon {
  gap: var(--space-sm);
}

.btn-icon svg,
.btn-icon i {
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
}

/* --------------------------------------------------------------------------
   Button Group
   Useful for hero actions or paired CTA rows
   -------------------------------------------------------------------------- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.btn-group .btn {
  min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   WordPress / Form compatibility
   -------------------------------------------------------------------------- */
button.btn,
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
  border-width: var(--border-width-thin);
  border-style: solid;
}

a.btn {
  text-decoration: none;
}

/* Source: /assets/css/components/cards.css */

/* Source: /assets/css/components/forms.css */

/* Source: /assets/css/layout/grid.css */
/* ==========================================================================
   File: /inadramseo/assets/css/layout/grid.css
   Purpose:
   - Container and grid utilities
   - Stable layout width management
   - Prevent horizontal overflow and content squashing
   ========================================================================== */

.container {
  width: min(100%, var(--container-max-width));
  margin-inline: auto;
  padding-inline: var(--container-padding);
  min-inline-size: 0;
}

.container-fluid {
  width: 100%;
  padding-inline: var(--container-padding);
  min-inline-size: 0;
}

.section {
  padding-block: var(--space-3xl);
}

.section-sm {
  padding-block: var(--space-2xl);
}

.section-lg {
  padding-block: var(--space-4xl);
}

.grid {
  display: grid;
  gap: var(--space-6);
  min-inline-size: 0;
}

.grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  min-inline-size: 0;
}

.grid-3 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  min-inline-size: 0;
}

.grid-4 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  min-inline-size: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.inline-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 48rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Source: /assets/css/layout/header.css */
/* ==========================================================================
   File: /inadramseo/assets/css/layout/header.css
   Purpose:
   - Create a sticky, responsive, token-driven header.
   - Includes desktop navigation, mobile off-canvas drawer, and overlay.
   - Ensures no horizontal overflow and prevents layout collapse.
   - Uses CSS variables for all design tokens (colors, spacing, fonts, etc.).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Header Shell
   - Makes the header sticky and visually distinct.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; /* Header sticks to the top when scrolling */
  inset-block-start: 0; /* Position it at the very top */
  z-index: var(--z-sticky); /* Ensure it's above other content */
  inline-size: 100%; /* Take full width */
  min-inline-size: 0; /* Prevent overflow issues */

  /* Visual Styling */
  background-color: color-mix(in srgb, var(--color-background) 92%, transparent); /* Slightly transparent background */
  backdrop-filter: blur(0.75rem); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(0.75rem); /* For Safari compatibility */
  border-block-end: var(--border-width-thin) solid var(--color-border); /* Subtle bottom border */
  box-shadow: var(--shadow-sm); /* Small shadow for depth */
}

/* Container for header content, ensuring proper alignment and spacing. */
.header-inner {
  display: flex;
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Space out logo and navigation */
  gap: var(--space-md); /* Spacing between elements */
  min-block-size: var(--header-height); /* Fixed height for the header */
  min-inline-size: 0; /* Prevent overflow */
}

/* --------------------------------------------------------------------------
   Logo Styling
   - Handles both desktop and mobile logo display.
   -------------------------------------------------------------------------- */
.site-logo {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  flex: 0 1 auto; /* Allow logo to shrink/grow but prefer its natural size */
  max-width: var(--space-4xl); /* Maximum width for desktop logo */
}

.logo-link {
  display: inline-flex; /* Use flex for alignment */
  align-items: center;
  gap: var(--space-sm); /* Space between logo image and text */
  min-inline-size: 0;
  text-decoration: none; /* Remove underline */
  color: var(--color-text); /* Inherit text color */
  max-width: var(--space-4xl); /* Match container width */
}

/* Hover/focus states for the logo link */
.logo-link:hover,
.logo-link:focus-visible {
  color: var(--color-text); /* Keep color consistent on interaction */
}

/* Specific styling for the logo image (custom logo or fallback) */
.logo-link img,
.logo-link .custom-logo {
  display: block; /* Ensure it behaves like a block element */
  width: auto;
  height: auto;
  max-width: 160px; /* Max width for desktop logo image */
  max-height: 48px; /* Max height for desktop logo image */
  object-fit: contain; /* Scale image while preserving aspect ratio */
}

/* Styling for the fallback logo text */
.logo-text {
  display: inline-block;
  color: var(--color-text);
  font-size: var(--font-h5); /* Use variable for font size */
  font-weight: var(--font-weight-extra-bold); /* Use variable for font weight */
  line-height: var(--leading-tight); /* Use variable for line height */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for overflowed text */
  max-inline-size: 12rem; /* Limit text width */
}

/* --------------------------------------------------------------------------
   Desktop Navigation
   - Hidden by default, shown on larger screens.
   -------------------------------------------------------------------------- */
.main-nav {
  display: none; /* Hidden by default, shown via media query */
  min-inline-size: 0;
  flex: 1 1 auto; /* Allow nav to take available space */
}

/* Styles for the main menu list */
.main-nav .menu-list {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the menu items */
  gap: var(--space-xs); /* Spacing between menu items */
  margin: 0;
  padding: 0;
  list-style: none; /* Remove bullet points */
  min-inline-size: 0;
  flex-wrap: wrap; /* Allow items to wrap on smaller desktop screens */
}

/* List item styling */
.main-nav .menu-list > li {
  position: relative; /* Needed for dropdown positioning */
  min-inline-size: 0;
}

/* Individual menu item link styling */
.main-nav .menu-list > li > a {
  display: inline-flex; /* Use flex for alignment */
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem; /* Minimum height */
  padding-inline: var(--space-md);
  padding-block: var(--space-xs);
  border-radius: var(--radius-md); /* Use variable for radius */
  color: var(--color-text-soft); /* Softer text color for links */
  font-size: var(--font-body); /* Use variable for font size */
  font-weight: var(--font-weight-medium); /* Use variable for font weight */
  line-height: var(--leading-none); /* Use variable for line height */
  text-decoration: none; /* Remove underline */
  white-space: nowrap; /* Prevent text wrapping */
  transition: /* Smooth transitions for hover/focus states */
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Hover and active states for desktop menu items */
.main-nav .menu-list > li > a:hover,
.main-nav .menu-list > li > a:focus-visible,
.main-nav .menu-list > .current-menu-item > a, /* Active page */
.main-nav .menu-list > .current_page_item > a, /* Another active page state */
.main-nav .menu-list > .current-menu-ancestor > a { /* Parent of active page */
  color: var(--color-text);
  background-color: var(--color-surface); /* Use variable for surface color */
}

/* --------------------------------------------------------------------------
   Desktop Dropdown Menu
   - Styles for the sub-menus.
   -------------------------------------------------------------------------- */
.main-nav .menu-list .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + var(--space-xs)); /* Position below parent */
  display: grid; /* Use grid for layout */
  gap: var(--space-2xs); /* Spacing between dropdown items */
  min-inline-size: 14rem; /* Minimum width for dropdown */
  padding: var(--space-sm);
  margin: 0;
  list-style: none;
  background-color: var(--color-background); /* Use variable */
  border: var(--border-width-thin) solid var(--color-border); /* Use variables */
  border-radius: var(--radius-lg); /* Use variable */
  box-shadow: var(--shadow-lg); /* Use variable */

  /* Initially hidden and inaccessible */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem); /* Slight offset for transition */
  transition: /* Smooth transition for appearing */
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
  z-index: var(--z-dropdown); /* Ensure dropdown is above other elements */
}

/* Show dropdown on hover/focus */
.main-nav .menu-list li:hover > .sub-menu,
.main-nav .menu-list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Make it clickable */
  transform: translateY(0); /* Move to final position */
}

/* Styling for dropdown menu items */
.main-nav .menu-list .sub-menu li a {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md); /* Use variable */
  color: var(--color-text-soft);
  text-decoration: none;
  background-color: transparent;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

/* Hover/active states for dropdown items */
.main-nav .menu-list .sub-menu li a:hover,
.main-nav .menu-list .sub-menu li a:focus-visible,
.main-nav .menu-list .sub-menu .current-menu-item > a {
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Call To Action (CTA) Button
   - Styles the primary action button.
   -------------------------------------------------------------------------- */
.header-cta {
  display: inline-flex; /* Use flex for alignment */
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-lg);
  padding-block: var(--space-sm);
  border-radius: var(--radius-md); /* Use variable */
  background-color: var(--color-primary); /* Use variable */
  color: var(--color-text-inverse); /* Use variable */
  font-size: var(--font-body); /* Use variable */
  font-weight: var(--font-weight-semibold); /* Use variable */
  line-height: var(--leading-none); /* Use variable */
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm); /* Use variable */
  transition: /* Smooth transitions for interactions */
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.header-cta:hover,
.header-cta:focus-visible {
  background-color: var(--color-primary-hover); /* Use variable */
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md); /* Use variable */
}

.header-cta:active {
  transform: translateY(0.0625rem); /* Subtle press effect */
}

.desktop-cta {
  display: none; /* Hidden on mobile by default */
}

/* --------------------------------------------------------------------------
   Mobile Menu Button (Hamburger)
   - Toggles the mobile drawer.
   -------------------------------------------------------------------------- */
.mobile-menu-btn {
  display: inline-flex; /* Use flex for alignment */
  flex-direction: column; /* Stack the lines vertically */
  align-items: center;
  justify-content: center;
  gap: 0.25rem; /* Small gap between lines */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: var(--border-width-thin) solid var(--color-border); /* Use variables */
  border-radius: var(--radius-md); /* Use variable */
  background-color: var(--color-background); /* Use variable */
  color: var(--color-text); /* Use variable */
  cursor: pointer; /* Indicate it's clickable */
  flex: 0 0 auto; /* Prevent resizing */
  transition: /* Smooth transitions for interaction */
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
  background-color: var(--color-surface); /* Use variable */
  border-color: var(--color-border-strong); /* Use variable */
}

/* The three lines of the hamburger icon */
.mobile-menu-btn span {
  display: block;
  inline-size: 1.125rem;
  block-size: 0.125rem;
  border-radius: var(--radius-pill); /* Rounded ends */
  background-color: currentColor; /* Inherit color */
  transition: /* Smooth animation for transform */
    transform var(--transition-normal),
    opacity var(--transition-normal);
}

/* Transform lines into an 'X' when menu is open */
body.menu-open .mobile-menu-btn span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg); /* Move down and rotate */
}

body.menu-open .mobile-menu-btn span:nth-child(2) {
  opacity: 0; /* Hide the middle line */
}

body.menu-open .mobile-menu-btn span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg); /* Move up and rotate */
}

/* --------------------------------------------------------------------------
   Overlay for Mobile Menu
   - Covers the main content when the mobile drawer is open.
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed; /* Cover the whole viewport */
  inset: 0; /* Same as top:0, right:0, bottom:0, left:0 */
  z-index: var(--z-overlay); /* Position above content, below modal drawer */
  background-color: rgb(15 23 42 / 0.48); /* Semi-transparent dark background */
  opacity: 0; /* Hidden by default */
  visibility: hidden;
  pointer-events: none; /* Cannot be interacted with when hidden */
  transition: /* Smooth fade-in/out */
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

/* Show overlay when menu is open */
body.menu-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Allow interaction (e.g., to close menu) */
}

/* --------------------------------------------------------------------------
   Mobile Drawer (Off-canvas Menu)
   - Slides in from the side on smaller screens.
   -------------------------------------------------------------------------- */

.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  inline-size: min(100%, 22rem);
  block-size: 100dvh;
  padding: var(--space-xl);
  background-color: var(--color-background);
  border-inline-start: var(--border-width-thin) solid var(--color-border);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  overflow-x: clip;

  /* حالت بسته (پیش‌فرض) */
  transform: translateX(100%);
  visibility: hidden;        /* مهم: وقتی بسته است دیده نشود */
  pointer-events: none;      /* مهم: وقتی بسته است قابل کلیک/فوکوس نباشد */
  transition:
    transform var(--transition-normal),
    visibility 0s linear var(--transition-normal); /* visibility بعد از انیمیشن قطع شود */

  min-inline-size: 0;
  overscroll-behavior: contain;
}

/* حالت باز */
body.menu-open .mobile-nav {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--transition-normal),
    visibility 0s;
}

/* جلوگیری از اسکرول بک‌گراند وقتی منو باز است */
body.menu-open {
  position: fixed; /* بدنه را ثابت می‌کند تا اسکرول پشت‌صحنه قفل شود */
  inset-inline: 0;
  inline-size: 100%;
  top: calc(var(--scroll-y, 0px) * -1); /* صفحه را در همان جای قبلی نگه می‌دارد */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Mobile Drawer Top Section
   - Contains the mobile logo and close button.
   -------------------------------------------------------------------------- */
.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md); /* Spacing between logo and close button */
  margin-block-end: var(--space-xl); /* Space below this section */
  min-inline-size: 0;
}

/* Mobile Logo within the drawer */
.mobile-logo {
  display: inline-flex; /* Use flex for alignment */
  align-items: center;
  gap: var(--space-sm);
  min-inline-size: 0;
  text-decoration: none;
  color: var(--color-text);
  /* Adjusted max-width for better fit within the drawer */
  max-width: var(--space-md);
}

/* Ensure the logo image scales correctly within the mobile logo container */
.mobile-logo img,
.mobile-logo .custom-logo {
  display: block;
  inline-size: auto; /* Auto width */
  max-inline-size: 100%; /* Max width is container's width */
  block-size: auto; /* Auto height */
  max-block-size: var(--space-md); /* Limit height, adjust as needed */
  object-fit: contain; /* Scale image while preserving aspect ratio */
}

/* Mobile Close Button Styling */
.mobile-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: var(--border-width-thin) solid var(--color-border); /* Use variables */
  border-radius: var(--radius-md); /* Use variable */
  background-color: var(--color-background); /* Use variable */
  color: var(--color-text); /* Use variable */
  font-size: var(--font-h4); /* Use variable */
  line-height: var(--leading-none); /* Use variable */
  cursor: pointer;
  flex: 0 0 auto; /* Prevent resizing */
  transition: /* Smooth transitions for interaction */
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.mobile-close-btn:hover,
.mobile-close-btn:focus-visible {
  background-color: var(--color-surface); /* Use variable */
  border-color: var(--color-border-strong); /* Use variable */
}

/* --------------------------------------------------------------------------
   Mobile Navigation Menu
   - Styles the list of links within the drawer.
   -------------------------------------------------------------------------- */
.mobile-nav-menu {
  display: block; /* Ensure it takes block space */
  min-inline-size: 0;
}

/* Styling for menu list and sub-menus */
.mobile-menu-list,
.mobile-menu-list .sub-menu {
  display: grid; /* Use grid for consistent spacing */
  gap: var(--space-xs); /* Use variable */
  margin: 0;
  padding: 0;
  list-style: none; /* Remove bullets */
}

/* Styling for individual menu item links in the mobile drawer */
.mobile-menu-list > li > a,
.mobile-menu-list .sub-menu li > a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-md);
  padding-block: var(--space-xs);
  border-radius: var(--radius-md); /* Use variable */
  color: var(--color-text); /* Use variable */
  font-size: var(--font-body); /* Use variable */
  font-weight: var(--font-weight-medium); /* Use variable */
  text-decoration: none;
  transition: /* Smooth transitions */
    background-color var(--transition-fast),
    color var(--transition-fast);
}

/* Hover and active states for mobile menu links */
.mobile-menu-list > li > a:hover,
.mobile-menu-list > li > a:focus-visible,
.mobile-menu-list > .current-menu-item > a,
.mobile-menu-list > .current_page_item > a,
.mobile-menu-list .sub-menu li > a:hover,
.mobile-menu-list .sub-menu li > a:focus-visible,
.mobile-menu-list .sub-menu .current-menu-item > a {
  background-color: var(--color-surface); /* Use variable */
  color: var(--color-text); /* Use variable */
}

/* Indentation for sub-menus within the mobile drawer */
.mobile-menu-list .sub-menu {
  padding-inline-start: var(--space-md);
  margin-block-start: var(--space-2xs);
}

/* Mobile CTA button styling within the drawer */
.mobile-cta {
  inline-size: 100%; /* Full width */
  margin-block-start: var(--space-xl); /* Space above the button */
  justify-content: center; /* Center the text */
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   - Adjusts layout for different screen sizes.
   -------------------------------------------------------------------------- */

/* Medium screens and up (e.g., tablets and desktops) */
@media (min-width: 64rem) {
  .main-nav {
    display: block; /* Show desktop navigation */
  }

  .desktop-cta {
    display: inline-flex; /* Show desktop CTA */
  }

  /* Hide mobile-specific elements */
  .mobile-menu-btn,
  .mobile-nav,
  .nav-overlay {
    display: none;
  }
}

/* Small screens (below 64rem) */
@media (max-width: 63.9375rem) {
  .desktop-cta {
    display: none; /* Hide desktop CTA */
  }
  /* Ensure mobile elements are displayed */
  .mobile-menu-btn,
  .mobile-nav,
  .nav-overlay {
    display: inline-flex; /* Or block, depending on desired layout */
  }
  .main-nav {
    display: none; /* Hide desktop nav */
  }
}

/* --------------------------------------------------------------------------
   Overflow Safety Utilities
   - Apply `min-inline-size: 0` to elements that might cause horizontal
     overflow, especially in flex or grid layouts.
   -------------------------------------------------------------------------- */
.site-header,
.header-inner,
.main-nav,
.mobile-nav,
.mobile-nav-menu,
.site-logo,
.logo-link,
.mobile-logo {
  min-inline-size: 0;
}

/* --- End of header.css --- */

/* Source: /assets/css/layout/footer.css */
footer.site-footer {
    padding: 30px;
    font-weight: 700;
}


.site-footer .container {
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items : center;
  font-weight: 700;
  
}
/* Source: /assets/css/lms/lms.css */
/* ========================================
   File: /assets/css/lms/lms.css
   Purpose: LMS pages styling for course archive,
            single course, curriculum, lesson layout,
            lesson sidebar, breadcrumbs, and lesson navigation.
   Dependencies:
   - /assets/css/base/variables.css
   - /assets/css/base/typography.css
   - /assets/css/components/cards.css
   - /assets/css/components/buttons.css
   - /assets/css/layout/grid.css

   Notes:
   - Mobile-first
   - Token-based only
   - No hardcoded spacing, radius, shadows, colors, typography
   - Designed to align with theme design system
======================================== */

/* ========================================
   Private LMS Tokens
   Scoped local aliases for easier maintenance
======================================== */
:root {
  --_lms-sidebar-width: 18.75rem;
  --_lms-sidebar-width-md: 15.625rem;
  --_lms-course-card-image-height: 12.5rem;
  --_lms-content-max-width: 100%;
}

/* ========================================
   Course Archive
======================================== */

/* Main archive wrapper for course grids */
.courses-archive .courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Course card container */
.course-card {
  overflow: hidden;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Hover state to improve visual affordance */
.course-card:hover {
  transform: translateY(calc(var(--space-2xs) * -0.25));
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* Course thumbnail image */
.course-card .course-thumbnail img {
  display: block;
  width: 100%;
  height: var(--_lms-course-card-image-height);
  object-fit: cover;
}

/* Course title inside archive card */
.course-card .course-title {
  margin-bottom: var(--space-xs);
  padding:
    var(--space-md)
    var(--space-md)
    0;
  color: var(--color-text);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight, 1.3);
}

/* Course excerpt inside archive card */
.course-card .course-excerpt {
  padding:
    0
    var(--space-md)
    var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
  line-height: var(--leading-relaxed, 1.8);
}

/* ========================================
   Single Course Page
======================================== */

/* Main single course wrapper */
.course-container {
  display: grid;
  gap: var(--space-xl);
}

/* Header section of single course */
.course-header {
  display: grid;
  gap: var(--space-md);
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* Main course title */
.course-title {
  margin-bottom: 0;
  color: var(--color-text);
  font-size: var(--font-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight, 1.2);
}

/* Featured image of single course */
.course-thumbnail img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
}

/* ========================================
   Curriculum Section
======================================== */

/* Curriculum wrapper */
.course-curriculum {
  padding: var(--space-lg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-alt);
  box-shadow: var(--shadow-sm);
}

/* Curriculum top bar */
.curriculum-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 0.0625rem solid var(--color-border);
}

/* Curriculum title */
.curriculum-header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight, 1.3);
}

/* Total lessons meta */
.total-lessons {
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-medium);
}

/* ========================================
   Curriculum Accordion Sections
======================================== */

/* Each course section block */
.course-section {
  overflow: hidden;
  margin-bottom: var(--space-md);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.course-section:last-child {
  margin-bottom: 0;
}

/* Section toggle button */
.section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  border: 0;
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  text-align: right;
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

/* Hover/focus states for better accessibility */
.section-toggle:hover,
.section-toggle:focus-visible {
  background-color: var(--color-primary-soft);
  color: var(--color-text);
  outline: none;
}

/* Section icon wrapper */
.section-icon {
  flex-shrink: 0;
  margin-left: var(--space-xs);
  transition: transform var(--transition-base);
}

/* Rotated icon in open state */
.section-toggle.open .section-icon,
.course-section.active .section-icon {
  transform: rotate(180deg);
}

/* Badge for section lesson count */
.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    var(--space-2xs)
    var(--space-sm);
  border-radius: var(--radius-pill, 999rem);
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Section content body */
.section-content {
  display: none;
  padding:
    0
    var(--space-md);
}

/* Open state controlled by JS/class toggling */
.course-section.active .section-content {
  display: block;
}

/* Lesson list inside section */
.lesson-list {
  margin: 0;
  padding:
    var(--space-md)
    0;
  list-style: none;
}

/* Single lesson item */
.lesson-item {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 0.0625rem dashed var(--color-border);
}

.lesson-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Lesson link row */
.lesson-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding:
    var(--space-xs)
    0;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Hover/focus state for lesson links */
.lesson-link:hover,
.lesson-link:focus-visible {
  color: var(--color-primary);
  outline: none;
}

/* Left part of the lesson row */
.lesson-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

/* Lesson ordering number */
.lesson-number {
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* Lesson title text */
.lesson-title {
  color: inherit;
  font-size: var(--font-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal, 1.6);
}

/* Lesson duration text */
.lesson-duration {
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
  white-space: nowrap;
}

/* Empty states */
.empty-section,
.no-lessons {
  padding:
    var(--space-lg)
    0;
  color: var(--color-text-soft);
  text-align: center;
  font-size: var(--font-body-sm);
}

/* ========================================
   Single Lesson Page Layout
======================================== */

/* Main lesson page layout */
.lesson-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

/* Sidebar of lesson page */
.lesson-sidebar {
  padding: var(--space-lg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Sidebar course header */
.sidebar-course-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 0.0625rem solid var(--color-border);
}

/* Sidebar course title */
.sidebar-course-title {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight, 1.3);
}

/* Sidebar course title link */
.sidebar-course-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.sidebar-course-title a:hover,
.sidebar-course-title a:focus-visible {
  color: var(--color-primary);
  outline: none;
}

/* Sidebar course meta information */
.sidebar-course-meta {
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
}

/* Sidebar curriculum wrapper */
.sidebar-curriculum {
  display: grid;
  gap: var(--space-sm);
}

/* Sidebar section item */
.sidebar-section {
  overflow: hidden;
  margin-bottom: var(--space-sm);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

/* Sidebar accordion toggle */
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding:
    var(--space-sm)
    var(--space-md);
  border: 0;
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  text-align: right;
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus-visible {
  background-color: var(--color-primary-soft);
  color: var(--color-text);
  outline: none;
}

/* Sidebar arrow icon */
.sidebar-section-toggle .section-arrow {
  flex-shrink: 0;
  margin-left: var(--space-2xs);
  transition: transform var(--transition-base);
}

/* Open state arrow rotation */
.sidebar-section.open .sidebar-section-toggle .section-arrow,
.sidebar-section.active-section .sidebar-section-toggle .section-arrow {
  transform: rotate(180deg);
}

/* Sidebar accordion content */
.sidebar-section-content {
  display: none;
  padding:
    0
    var(--space-md);
}

/* Open state */
.sidebar-section.active-section .sidebar-section-content {
  display: block;
}

/* Sidebar lesson list */
.sidebar-lesson-list {
  margin: 0;
  padding:
    var(--space-sm)
    0;
  list-style: none;
}

/* Variation when no sections exist */
.sidebar-lesson-list.no-sections {
  padding: 0;
}

/* Sidebar lesson item */
.sidebar-lesson-item {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 0.0625rem dotted var(--color-border);
}

.sidebar-lesson-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Sidebar lesson anchor */
.sidebar-lesson-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding:
    var(--space-2xs)
    0;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Sidebar lesson hover/focus */
.sidebar-lesson-item a:hover,
.sidebar-lesson-item a:focus-visible {
  color: var(--color-primary);
  outline: none;
}

/* Current lesson state */
.sidebar-lesson-item.current-lesson a {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Left content group */
.sidebar-lesson-item .lesson-item-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

/* Lesson order number */
.sidebar-lesson-item .lesson-order {
  min-width: 1.75rem;
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
  text-align: right;
  white-space: nowrap;
}

/* Lesson name text */
.sidebar-lesson-item .lesson-name {
  flex-grow: 1;
  color: inherit;
}

/* Lesson time meta */
.sidebar-lesson-item .lesson-time {
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
  white-space: nowrap;
}

/* ========================================
   Lesson Main Content Area
======================================== */

/* Main lesson content column */
.lesson-main-content {
  max-width: var(--_lms-content-max-width);
  padding-top: var(--space-xs);
  padding-right: var(--space-lg);
  padding-left: var(--space-lg);
}

/* Breadcrumb navigation */
.lesson-breadcrumb {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 0.0625rem solid var(--color-border);
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
}

.lesson-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.lesson-breadcrumb a:hover,
.lesson-breadcrumb a:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.lesson-breadcrumb span {
  margin: 0 var(--space-xs);
}

.lesson-breadcrumb .current-lesson-breadcrumb {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* Lesson top header */
.lesson-header {
  margin-bottom: var(--space-lg);
}

/* Top meta row */
.lesson-meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
}

/* Lesson counter */
.lesson-counter {
  font-weight: var(--font-weight-medium);
}

/* Duration badge */
.lesson-duration-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding:
    var(--space-2xs)
    var(--space-sm);
  border-radius: var(--radius-pill, 999rem);
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-body-sm);
}

/* Lesson title */
.lesson-title {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight, 1.3);
  padding-top:var(--space-lg);
  padding-bottom:var(--space-lg);
}

/* Current section label */
.current-section-name {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 0.0625rem solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-body);
}

/* Main lesson content body */
.lesson-content {
  margin-bottom: var(--space-2xl);
  padding-inline: var(--space-md);
  color: var(--color-text);
  line-height: var(--leading-relaxed, 1.9);
}

/* Flow spacing inside lesson content */
.lesson-content p,
.lesson-content ul,
.lesson-content ol,
.lesson-content blockquote,
.lesson-content pre,
.lesson-content figure {
  margin-bottom: var(--space-md);
}

/* Headings inside content body */
.lesson-content h2,
.lesson-content h3,
.lesson-content h4 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

/* lesoson code */
.lesson-content .wp-block-code code {
    direction: ltr;
    display: block;
    font-family: inherit;
    overflow-wrap: break-word;
    text-align: initial;
    white-space: pre-wrap;
    font-size: var(--font-body-lg);
}

/* ========================================
   Lesson Navigation
======================================== */

/* Previous / next lesson navigation wrapper */
.lesson-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 0.0625rem solid var(--color-border);
  font-size: var(--font-body-sm);
}

/* Previous and next wrappers */
.lesson-nav-prev,
.lesson-nav-next {
  flex: 1 1 100%;
  margin: 0;
  text-align: inherit;
}

/* Navigation link card */
.lesson-nav-prev a,
.lesson-nav-next a {
  display: block;
  height: 100%;
  padding: var(--space-md);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Hover/focus interaction */
.lesson-nav-prev a:hover,
.lesson-nav-prev a:focus-visible,
.lesson-nav-next a:hover,
.lesson-nav-next a:focus-visible {
  border-color: var(--color-primary-soft);
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  outline: none;
}

/* Small label above title */
.nav-label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-soft);
  font-size: var(--font-body-sm);
}

/* Navigation title */
.nav-title {
  color: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal, 1.6);
}

/* ========================================
   Responsive Enhancements
======================================== */

/* Small tablets and up */
@media (min-width: 48rem) {
  .courses-archive .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-navigation {
    flex-direction: row;
    align-items: stretch;
  }

  .lesson-nav-prev {
    text-align: right;
  }

  .lesson-nav-next {
    text-align: left;
  }
}

/* Large tablets and desktop */
@media (min-width: 64rem) {
  .lesson-page-layout {
    grid-template-columns: var(--_lms-sidebar-width-md) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .courses-archive .courses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Wide desktop */
@media (min-width: 75rem) {
  .lesson-page-layout {
    grid-template-columns: var(--_lms-sidebar-width) minmax(0, 1fr);
  }
}

/* Source: /assets/css/pages/home.css */
/**
 * Homepage styles
 *
 * File path:
 * /inadramseo/assets/css/pages/home.css
 *
 * Purpose:
 * - Style hero, courses, blog, and final CTA sections
 * - Reuse global tokens from variables.css
 * - Keep layout responsive and consistent
 *
 * Related files:
 * - /inadramseo/assets/css/base/variables.css
 * - /inadramseo/assets/css/base/typography.css
 * - /inadramseo/assets/css/components/buttons.css
 * - /inadramseo/assets/css/components/cards.css
 * - /inadramseo/assets/css/layout/grid.css
 */

.front-page {
	direction: rtl;
	font-family: var(--font-primary);
	color: var(--color-text);
	line-height: var(--leading-normal);
	background: var(--color-background);
}

.section-padding {
	padding-block: var(--space-3xl);
}

.section-header {
	display: grid;
	gap: var(--space-sm);
	margin-block-end: var(--space-xl);
}

.section-title {
	font-size: var(--font-h2);
	line-height: var(--leading-tight);
	color: var(--color-secondary);
	margin: 0;
}

.section-intro {
	font-size: var(--font-body-lg);
	color: var(--color-text-muted);
	max-width: 60ch;
	margin: 0;
}

/* Hero */
.hero {
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
}

.hero-content {
	display: grid;
	gap: var(--space-lg);
	text-align: right;
	max-width: 72rem;
}

.hero-title {
	font-size: var(--font-h1);
	line-height: var(--leading-tight);
	color: var(--color-secondary);
	margin: 0;
	max-width: 14ch;
}

.hero-description {
	font-size: var(--font-body-lg);
	color: var(--color-text-muted);
	max-width: 65ch;
	margin: 0;
}

.hero-actions,
.final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* Course grid */
.course-grid,
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

/* Cards */
.course-card,
.blog-card {
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.course-card:hover,
.blog-card:hover {
	transform: translateY(calc(var(--space-2xs) * -1));
	box-shadow: var(--shadow-md);
}

.course-card__link,
.blog-card__link {
	display: grid;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.course-card__media,
.blog-card__media {
	background: var(--color-surface-alt);
	overflow: hidden;
}

.course-card__image,
.blog-card__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.course-card__placeholder,
.blog-card__placeholder {
	min-height: 12rem;
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft));
}

.course-card__body,
.blog-card__body {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-lg);
}

.course-card__title,
.blog-card__title {
	font-size: var(--font-h4);
	line-height: var(--leading-tight);
	color: var(--color-secondary);
	margin: 0;
}

.course-card__excerpt,
.blog-card__excerpt {
	font-size: var(--font-body);
	color: var(--color-text-muted);
	margin: 0;
}

.course-card__meta,
.blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--font-body-sm);
	color: var(--color-text-subtle);
}

.course-card__cta,
.blog-card__cta {
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
}

/* Why us */
.why-us-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.why-item {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
}

.why-item h3 {
	font-size: var(--font-h4);
	margin: 0 0 var(--space-sm);
	color: var(--color-secondary);
}

.why-item p {
	margin: 0;
	color: var(--color-text-muted);
}

/* Final CTA */
.final-cta__box {
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	color: var(--color-white);
	display: grid;
	gap: var(--space-md);
}

.final-cta__title {
	font-size: var(--font-h2);
	line-height: var(--leading-tight);
	margin: 0;
}

.final-cta__text {
	margin: 0;
	color: var(--color-white-soft);
	max-width: 60ch;
}

/* Responsive overrides */
@media (min-width: 48rem) {
	.course-grid,
	.blog-grid,
	.why-us-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.final-cta__box {
		padding: var(--space-2xl);
	}
}

@media (min-width: 64rem) {
	.course-grid,
	.blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero-content {
		grid-template-columns: minmax(0, 1.2fr);
	}
}

/* Source: /assets/css/pages/blog.css */
/* =========================
   BLOG ARCHIVE
========================= */

.blog-archive {
    background: #ffffff;
}

/* HERO */
.archive-hero {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

.archive-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
}

.archive-hero p {
    max-width: 640px;
    margin: 0 auto;
    color: #475569;
}

/* CONTENT */
.archive-content {
    padding: 80px 20px;
}

/* GRID */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
}

/* CARD */
.blog-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.blog-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* BODY */
.blog-body {
    padding: 20px;
}

.blog-category a {
    font-size: 12px;
    color: #0f766e;
    font-weight: 600;
    text-decoration: none;
}

.blog-title {
    font-size: 18px;
    margin: 10px 0;
}

.blog-title a {
    color: #0f172a;
    text-decoration: none;
}

.blog-title a:hover {
    color: #0f766e;
}

.blog-excerpt {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}

/* META */
.blog-meta {
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
}

/* PAGINATION */
.archive-pagination {
    margin-top: 60px;
    text-align: center;
}

/* Source: /assets/css/pages/single.css */
/* ===============================
   Single Post – Mobile First
================================ */

.single-post {
    padding: 16px;
}

/* Reading Progress */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: #0a7cff;
    z-index: 9999;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 10px;
}

/* Reading Time */
.reading-time {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 6px;
}

/* Title */
.post-title {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Meta */
.post-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 16px;
}

/* TOC */
.toc {
    background: #f4f6fa;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}
.toc-toggle {
    width: 100%;
    background: none;
    border: none;
    font-weight: bold;
}
.toc-list {
    display: none;
    margin-top: 10px;
}

/* Cover */
.post-cover img {
    width: 100%;
    border-radius: 12px;
}

/* Content */
.post-content {
    font-size: 1rem;
    line-height: 1.9;
    margin-top: 20px;
}
.post-content p {
    margin-bottom: 16px;
}

/* Share */
.post-share {
    display: flex;
    gap: 10px;
    margin: 24px 0;
}
.post-share a {
    flex: 1;
    padding: 12px;
    text-align: center;
    background: #0a7cff;
    color: #fff;
    border-radius: 8px;
}

/* Author */
.author {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 12px;
}

/* Related */
.related-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.related-card {
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    scroll-snap-align: start;
}
.related-card img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.related-card span {
    display: block;
    padding: 10px;
}

/* Back To Top */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    padding: 12px;
    border-radius: 50%;
    background: #0a7cff;
    color: #fff;
    border: none;
}

/* Dark Mode */
body.dark {
    background: #121212;
    color: #eaeaea;
}
body.dark .author,
body.dark .toc {
    background: #1e1e1e;
}

/* Tablet */
@media (min-width: 768px) {
    .single-post {
        max-width: 720px;
        margin: auto;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .post-title {
        font-size: 2.2rem;
    }
}

/* Source: /assets/css/pages/single-cource.css */
.course-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 100px auto;
}

.course-header {
    display: flex;
    gap: var(--space-md);
    text-align: center;
    margin-bottom: var(--space-lg);
    margin-top: var(--space-lg);
    width: 100%;
  flex-direction: column;
    align-items: center;
}

.course-thumbnail img {
    display: block;
    width: 60vw;
    min-width: 350px;     
    height: auto;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
     
}

h1.course-title {
    margin-bottom: 50px;
    font-size: var(--font-h3);
}


.curriculum-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight, 1.3);
}
h3.section-title {
   margin: 0;
    color: var(--color-text);
    font-size: var(--font-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight, 1.3);
  
}


.course-curriculum {
    width: 80vw;
    min-width: 350px; 
    padding: var(--space-lg);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-alt);
    box-shadow: var(--shadow-sm);
}

 
/* Source: /assets/css/pages/courses-archive.css */
/* =========================================
   Courses Archive Page
   File: /assets/css/pages/courses-archive.css
   Purpose:
   - Styling only the course archive page
   - Scoped classes to avoid conflicts
   - Token-based spacing, radius, colors, typography
========================================= */

.courses-archive-page {
	padding-block: var(--space-2xl);
}

.courses-archive-hero {
	margin-bottom: var(--space-2xl);
}

.courses-archive-hero__inner {
	display: grid;
	gap: var(--space-md);
	max-width: var(--container-lg);
}

.courses-archive-hero__label {
	margin: 0;
	font-size: var(--font-body-sm);
	line-height: var(--leading-tight);
	color: var(--color-text-muted);
}

.courses-archive-hero__title {
	margin: 0;
	font-size: var(--font-h1);
	line-height: var(--leading-tight);
	color: var(--color-text);
}

.courses-archive-hero__description {
	font-size: var(--font-body);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	max-width: var(--container-md);
}

.courses-archive-listing {
	padding-bottom: var(--space-2xl);
}

.courses-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.courses-archive-card {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		transform var(--transition-normal),
		box-shadow var(--transition-normal);
}

.courses-archive-card:hover {
	transform: translateY(calc(var(--space-2xs) * -1));
	box-shadow: var(--shadow-md);
}

.courses-archive-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.courses-archive-card__media {
	aspect-ratio: 16 / 9;
	background: var(--color-surface-alt);
	overflow: hidden;
}

.courses-archive-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.courses-archive-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		var(--color-surface-alt),
		var(--color-border)
	);
}

.courses-archive-card__content {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-lg);
}

.courses-archive-card__title {
	margin: 0;
	font-size: var(--font-h4);
	line-height: var(--leading-heading);
	color: var(--color-text);
}

.courses-archive-card__excerpt {
	font-size: var(--font-body);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.courses-archive-card__footer {
	margin-top: var(--space-xs);
}

.courses-archive-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-sm);
	padding-inline: var(--space-md);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-body-sm);
	font-weight: var(--font-weight-semibold);
	transition:
		background-color var(--transition-normal),
		transform var(--transition-normal);
}

.courses-archive-card:hover .courses-archive-card__cta {
	background: var(--color-primary-hover);
	transform: translateY(calc(var(--space-2xs) * -1));
}

.courses-archive-pagination {
	margin-top: var(--space-2xl);
}

.courses-archive-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	padding: 0;
	margin: 0;
}

.courses-archive-pagination .page-numbers a,
.courses-archive-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--space-2xl);
	min-block-size: var(--space-2xl);
	padding-inline: var(--space-sm);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
}

.courses-archive-pagination .page-numbers .current {
	background: var(--color-primary);
	color: var(--color-white);
}

.courses-archive-empty {
	display: grid;
	gap: var(--space-md);
	padding: var(--space-xl);
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.courses-archive-empty__title {
	margin: 0;
	font-size: var(--font-h3);
	line-height: var(--leading-heading);
}

.courses-archive-empty__text {
	margin: 0;
	font-size: var(--font-body);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.courses-archive-empty__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding-block: var(--space-sm);
	padding-inline: var(--space-lg);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	transition:
		background-color var(--transition-normal),
		transform var(--transition-normal);
}

.courses-archive-empty__button:hover,
.courses-archive-empty__button:focus-visible {
	background: var(--color-primary-hover);
	transform: translateY(calc(var(--space-2xs) * -1));
}

/* Responsive overrides only change layout density, not token values */
@media (min-width: 48rem) {
	.courses-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.courses-archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}