/* ==========================================================================
   ICSEBOARD.ORG - Professional Responsive Theme
   Version: 1.0.0
   Description: SEO-optimized, fast-loading, mobile-first design
   ========================================================================== */

/* ============================================
   PERFORMANCE & OPTIMIZATION
   ============================================ */

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Font rendering optimization */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent horizontal scroll on mobile */
body,
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* Will-change optimization for animated elements */
.navbar,
.breadcrumb {
  will-change: transform;
}

/* ============================================
   LAYOUT GRID (3-column layout)
   ============================================ */

/* Kill old Twenty Nineteen "more" menu artifacts */
.main-menu-more {
  display: none !important;
}

/* Left menu styles (used in offcanvas + desktop sidebar) */
.left-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-menu li {
  border-bottom: 1px solid var(--bs-border-color, #e9ecef);
}

.left-menu a {
  display: block;
  padding: .65rem 1rem;
  text-decoration: none;
  color: var(--bs-gray-700);
  transition: background-color 0.2s ease;
}

.left-menu a:hover {
  background: rgba(13, 110, 253, .07);
  color: var(--bs-primary);
}

/* Desktop 3-col grid: 260px (left) | 1fr (content) | 320px (right) */
@media (min-width: 992px) {
  #layout-grid.layout-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    column-gap: 1rem;
    align-items: start;
  }

  #layout-grid>.left-sidebar {
    grid-column: 1;
  }

  #layout-grid>#primary {
    grid-column: 2;
    margin: 0;
  }

  #layout-grid>.right-sidebar {
    grid-column: 3;
  }

  #content {
    padding: 1rem 0;
  }
}

/* Mobile: hide desktop sidebars (use offcanvas) */
@media (max-width: 991.98px) {

  .left-sidebar,
  .right-sidebar {
    display: none !important;
  }
}

/* ============================================
   FOOTER STYLES - Professional & Responsive
   ============================================ */

.site-footer {
  background-color: #2c3e50;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  padding: 4rem 0 0;
  margin-top: 4rem;
  color: #ecf0f1;
  border-top: 4px solid #3498db;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide old widget areas completely */
.site-footer .footer-widgets {
  display: none !important;
}

/* Footer anchor links container */
.footer-anchor-links {
  margin-bottom: 3rem;
}

/* Footer multi-column responsive grid */
.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 0;
}

/* Mobile: 2 columns */
.site-footer .footer-column {
  flex: 1 1 calc(50% - 1.5rem);
  min-width: 150px;
}

/* Tablet: 3 columns */
@media (min-width: 768px) {
  .site-footer .footer-column {
    flex: 1 1 calc(33.333% - 1.5rem);
  }
}

/* Desktop: 6 columns */
@media (min-width: 992px) {
  .site-footer .footer-grid {
    gap: 1.25rem;
  }

  .site-footer .footer-column {
    flex: 1 1 calc(16.666% - 1.25rem);
    min-width: 160px;
  }
}

@media (min-width: 1200px) {
  .site-footer .footer-grid {
    gap: 1.5rem;
  }

  .site-footer .footer-column {
    flex: 1 1 calc(16.666% - 1.5rem);
    min-width: 180px;
  }
}

@media (min-width: 1400px) {
  .site-footer .footer-grid {
    gap: 2rem;
  }
}

/* Footer column styling */
.site-footer .footer-column {
  padding: 0;
}

/* Footer widget styling */
.site-footer .widget {
  margin-bottom: 1.5rem;
}

.site-footer .widget:last-child {
  margin-bottom: 0;
}

.site-footer .footer-column .widget+.widget {
  margin-top: 1.5rem;
}

/* Widget titles with modern underline */
.site-footer .widget-title,
.site-footer .widget h6 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #3498db;
  position: relative;
  display: block;
  width: 100%;
}

.site-footer .widget-title::after,
.site-footer .widget h6::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #e74c3c;
}

/* Widget title links */
.site-footer .widget-title a,
.site-footer .widget h6 a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer .widget-title a:hover,
.site-footer .widget h6 a:hover {
  color: #3498db;
}

/* Footer links list styling */
.site-footer .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .widget ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}

.site-footer .widget ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: #3498db;
  font-size: 0.75rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.site-footer .widget ul li:hover::before {
  transform: translateX(3px);
  color: #5dade2;
}

/* Footer links */
.site-footer .widget a {
  color: #bdc3c7;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  display: inline-block;
  line-height: 1.4;
  cursor: pointer;
}

.site-footer .widget a:hover {
  color: #3498db;
  padding-left: 4px;
  text-decoration: none;
}

/* Prevent page jump for placeholder links in footer widgets only */
.site-footer .widget ul a[href="#"] {
  cursor: default;
  pointer-events: none;
}

.site-footer .widget ul a[href="#"]:hover {
  color: #bdc3c7;
  padding-left: 0;
}

/* Footer bottom links remain active */
.footer-bottom a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
  margin: 0 0.5rem;
  cursor: pointer;
}

.footer-bottom a:hover {
  color: #5dade2;
  text-decoration: underline;
}

/* Footer disclaimer section - Full width row */
.footer-disclaimer-row {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-disclaimer-row .widget-title {
  text-align: center;
  display: block;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  border-bottom: none;
  padding-bottom: 0;
}

.footer-disclaimer-row .widget-title::after {
  display: none;
}

.footer-disclaimer-row .disclaimer-content {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  border-left: 4px solid #e74c3c;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-disclaimer-row .disclaimer-content p {
  margin-bottom: 0;
  color: #ecf0f1;
  font-size: 0.9rem;
  line-height: 1.8;
}

.footer-disclaimer-row .disclaimer-content strong {
  color: #ffffff;
  font-weight: 600;
}

.footer-disclaimer-row .disclaimer-content a {
  color: #3498db;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-disclaimer-row .disclaimer-content a:hover {
  color: #5dade2;
  text-decoration: none;
}

/* Footer bottom bar */
.footer-bottom {
  padding: 1.5rem 0;
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(0, 0, 0, 0.2);
}

.footer-bottom p {
  margin: 0.5rem 0;
  line-height: 1.8;
  color: #95a5a6;
  font-size: 0.875rem;
}

.footer-bottom a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
  margin: 0 0.5rem;
}

.footer-bottom a:hover {
  color: #5dade2;
  text-decoration: underline;
}

/* Mobile optimizations */
@media (max-width: 575.98px) {
  .site-footer {
    padding: 2rem 0 0;
    margin-top: 2rem;
  }

  .footer-anchor-links {
    margin-bottom: 1.5rem;
  }

  .site-footer .footer-grid {
    gap: 1.25rem;
  }

  .site-footer .footer-column {
    flex: 1 1 calc(50% - 1.25rem);
    min-width: 140px;
  }

  .site-footer .widget {
    margin-bottom: 1.25rem;
  }

  .site-footer .footer-column .widget+.widget {
    margin-top: 1.25rem;
  }

  .site-footer .widget-title,
  .site-footer .widget h6 {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .site-footer .widget a {
    font-size: 0.75rem;
  }

  .site-footer .widget ul li {
    margin-bottom: 0.45rem;
    padding-left: 0.85rem;
  }

  .site-footer .widget ul li::before {
    font-size: 0.7rem;
  }

  .footer-bottom {
    padding: 1.25rem 0;
    margin-top: 1.5rem;
  }

  .footer-bottom p {
    font-size: 0.75rem;
  }

  .footer-bottom a {
    display: inline-block;
    margin: 0.25rem 0.5rem;
  }

  /* Disclaimer mobile adjustments */
  .footer-disclaimer-row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .footer-disclaimer-row .widget-title {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .footer-disclaimer-row .disclaimer-content {
    padding: 1rem 1.25rem;
    text-align: left;
  }

  .footer-disclaimer-row .disclaimer-content p {
    font-size: 0.75rem;
    line-height: 1.6;
  }
}

/* Tablet optimizations */
@media (min-width: 576px) and (max-width: 991.98px) {
  .site-footer {
    padding: 2.5rem 0 0;
  }

  .site-footer .footer-grid {
    gap: 1.5rem;
  }

  .site-footer .footer-column {
    flex: 1 1 calc(33.333% - 1.5rem);
    min-width: 150px;
  }

  .site-footer .widget-title,
  .site-footer .widget h6 {
    font-size: 0.82rem;
  }

  .site-footer .widget a {
    font-size: 0.78rem;
  }

  /* Disclaimer tablet adjustments */
  .footer-disclaimer-row .disclaimer-content {
    padding: 1.25rem 1.5rem;
  }

  .footer-disclaimer-row .disclaimer-content p {
    font-size: 0.82rem;
  }
}

/* Large desktop enhancements */
@media (min-width: 1200px) {
  .site-footer {
    padding: 3.5rem 0 0;
  }

  .footer-anchor-links {
    margin-bottom: 3rem;
  }

  .site-footer .widget-title,
  .site-footer .widget h6 {
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
  }

  .site-footer .widget a {
    font-size: 0.82rem;
  }

  .site-footer .widget ul li {
    margin-bottom: 0.55rem;
  }
}

/* Extra large screens */
@media (min-width: 1400px) {
  .site-footer {
    padding: 4rem 0 0;
  }

  .site-footer .footer-grid {
    gap: 2rem;
  }

  .site-footer .widget-title,
  .site-footer .widget h6 {
    font-size: 0.9rem;
  }

  .site-footer .widget a {
    font-size: 0.85rem;
  }
}

/* ============================================
   CONTENT AREA
   ============================================ */

#primary {
  min-height: 400px;
  background: #ffffff;
  padding: 1.5rem 1rem;
}

#main {
  padding: 0;
}

.entry-content {
  padding: 1rem 0;
}

/* Page titles */
.entry-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.entry-header .entry-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a1a1a;
  line-height: 1.2;
}

/* Remove border for pages with hero sections */
.page .entry-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .entry-header .entry-title {
    font-size: 3rem;
  }
}

/* Single post/page layout */
.single .entry-content,
.page .entry-content {
  max-width: 100%;
}

/* Hero sections and featured content */
.entry-content>p:first-of-type {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 2rem;
}

/* Call-to-action buttons */
.entry-content .btn,
.entry-content a.btn {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.entry-content .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Hero section with gradient background */
.entry-content .has-background,
.entry-content>div[style*="background"],
.entry-content>div[class*="gradient"] {
  padding: 3rem 2rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Hero text styling */
.entry-content .has-background h1,
.entry-content .has-background h2,
.entry-content .has-background h3 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.entry-content .has-background p {
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.8;
}

/* Orange/Yellow CTA buttons */
.btn-warning,
.entry-content .btn-warning {
  background-color: #ff9800;
  border-color: #ff9800;
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0.5rem;
}

.btn-warning:hover,
.entry-content .btn-warning:hover {
  background-color: #f57c00;
  border-color: #f57c00;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(255, 152, 0, 0.4);
}

/* Desktop hero enhancements */
@media (min-width: 992px) {

  .entry-content .has-background,
  .entry-content>div[style*="background"] {
    padding: 4rem 3rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .entry-content .has-background h1,
  .entry-content .has-background h2 {
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
  }

  .entry-content .has-background p {
    font-size: 1.25rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   SIDEBAR STYLES
   ============================================ */

.left-sidebar .card,
.right-sidebar .widget {
  margin-bottom: 1.5rem;
}

.left-sidebar .card-header {
  font-weight: 600;
  padding: 0.75rem 1rem;
  background-color: var(--bs-gray-100, #f8f9fa);
  border-bottom: 1px solid var(--bs-gray-200, #dee2e6);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.site-content {
  padding: 2rem 0;
  min-height: calc(100vh - 400px);
}

/* Ensure proper spacing for breadcrumbs */
.breadcrumb {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background-color: transparent;
  font-size: 0.875rem;
}

/* Professional page spacing */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

/* Container improvements */
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 992px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .site-content {
    padding: 3rem 0;
  }
}

/* ============================================
   IMAGE OPTIMIZATION & RESPONSIVE IMAGES
   ============================================ */

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
}

/* Images within content */
.entry-content img {
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Center-aligned images */
.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* Full-width images */
.entry-content .alignfull,
.entry-content .alignwide {
  margin-bottom: 2rem;
}

/* Lazy-loaded images fade in smoothly */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([loading]) {
  opacity: 1;
}

/* Featured images in posts */
.post-thumbnail {
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

.post-thumbnail img {
  transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
  transform: scale(1.05);
}

/* ============================================
   CONTENT TYPOGRAPHY & READABILITY
   ============================================ */

/* Improve content readability */
.entry-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #333;
}

.entry-content p {
  margin-bottom: 1.25rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}

.entry-content h2 {
  font-size: 1.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.entry-content h3 {
  font-size: 1.5rem;
}

/* Code blocks styling */
.entry-content pre,
.entry-content code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.entry-content pre {
  padding: 1rem;
  overflow-x: auto;
  border-left: 3px solid #0d6efd;
}

.entry-content code {
  padding: 0.2em 0.4em;
  color: #e83e8c;
}

/* Tables styling */
.entry-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
}

.entry-content table thead th {
  background-color: #ffd360;
  font-weight: 600;
  text-align: left;
}

/* Lists styling */
.entry-content ul,
.entry-content ol {
  margin-bottom: 1.25rem;
  padding-left: 2rem;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

/* ============================================
   MOBILE OPTIMIZATION & RESPONSIVE DESIGN
   ============================================ */

/* Touch-friendly buttons on mobile */
@media (max-width: 767.98px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem;
  }

  /* Larger font for better mobile readability */
  body {
    font-size: 16px;
  }

  .entry-content {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Adjust heading sizes for mobile */
  .entry-content h1 {
    font-size: 1.75rem;
  }

  .entry-content h2 {
    font-size: 1.5rem;
  }

  .entry-content h3 {
    font-size: 1.25rem;
  }

  /* Mobile-friendly tables */
  .entry-content table {
    font-size: 0.875rem;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 0.5rem;
  }

  /* Horizontal scroll for wide tables */
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    max-width: 720px;
  }
}

/* Desktop adjustments */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  /* Professional padding for main content area */
  #primary {
    padding: 2rem 1.5rem;
  }

  .entry-content {
    padding: 1.5rem 2rem;
  }

  /* Card spacing for professional look */
  .left-sidebar .card {
    padding: 0;
  }

  /* Right sidebar professional spacing */
  .right-sidebar .widget {
    padding: 0;
  }

  /* Content area background and shadow */
  #primary {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  }

  /* Full-width template overrides */
  .fullwidth-template {
    max-width: 100%;
    padding: 2rem;
  }

  .fullwidth-template .entry-content {
    max-width: 100%;
    padding: 1rem 0;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  /* Increased padding for larger screens */
  #primary {
    padding: 2.5rem 2rem;
  }

  .entry-content {
    padding: 2rem 2.5rem;
  }

  /* Wider layout with better spacing */
  #layout-grid.layout-grid {
    column-gap: 1.5rem;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  /* Maximum padding for extra large screens */
  #primary {
    padding: 3rem 2.5rem;
  }

  .entry-content {
    padding: 2rem 3rem;
  }

  /* Extra spacing for premium feel */
  #layout-grid.layout-grid {
    column-gap: 2rem;
  }
}

/* ============================================
   NAVIGATION ENHANCEMENTS
   ============================================ */

/* Sticky navbar shadow on scroll */
.navbar.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Hover effects for navigation */
.navbar .nav-link {
  transition: color 0.2s ease-in-out;
  position: relative;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #0d6efd;
  transition: width 0.3s ease;
}

.navbar .nav-link:hover::after {
  width: 80%;
}

/* Search form enhancement */
.header-search input[type="search"]:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0d6efd;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Screen reader only text */
.screen-reader-text,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   LOADING & ANIMATION PERFORMANCE
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

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

/* Loading spinner for better UX */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 0.25rem solid rgba(13, 110, 253, 0.2);
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .navbar,
  .breadcrumb,
  .left-sidebar,
  .right-sidebar,
  .site-footer,
  .skip-link,
  button,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
  }

  .entry-content {
    max-width: 100%;
  }
}

/* Content sections and spacing */
.entry-content>* {
  margin-bottom: 1.5rem;
}

.entry-content>*:last-child {
  margin-bottom: 0;
}

/* WordPress blocks spacing */
.entry-content .wp-block-group,
.entry-content .wp-block-columns {
  margin-bottom: 2rem;
}

/* Better spacing for lists in content */
.entry-content>ul,
.entry-content>ol {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Blockquotes */
.entry-content blockquote {
  border-left: 4px solid #0d6efd;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #555;
}

/* Horizontal rules */
.entry-content hr {
  margin: 3rem 0;
  border: 0;
  border-top: 2px solid #e9ecef;
}

/* ============================================
   FULL-WIDTH TEMPLATE STYLES
   ============================================ */

/* Full-width template - no sidebars */
.page-template-page-fullwidth #layout-grid {
  display: block !important;
  grid-template-columns: none !important;
}

.page-template-page-fullwidth .fullwidth-template {
  grid-column: 1 !important;
  max-width: 100%;
  width: 100%;
}

/* Remove constraints on full-width pages */
.page-template-page-fullwidth #primary {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

/* Full-width content styling */
.fullwidth-template .entry-header {
  text-align: center;
  border-bottom: none;
  margin-bottom: 1.5rem;
}

.fullwidth-template .entry-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.fullwidth-template .entry-content {
  padding: 0;
}

/* Better spacing for full-width hero sections */
.fullwidth-template .has-background {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0.75rem;
}

/* Responsive full-width adjustments */
@media (min-width: 992px) {
  .fullwidth-template .entry-title {
    font-size: 3.5rem;
  }

  .fullwidth-template .has-background {
    padding: 5rem 3rem;
  }
}

@media (min-width: 1200px) {
  .fullwidth-template .has-background {
    padding: 6rem 4rem;
  }
}

/* Home page specific styling when using full-width */
.home.page-template-page-fullwidth .site-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.home.page-template-page-fullwidth .entry-header {
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE GRID LAYOUT - TEACHING RESOURCES
   ============================================ */

/* Professional Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  margin: 2rem 0;
  padding: 0;
}

/* Grid Card Styling */
.grid-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: #667eea;
}

/* Grid Card Headings */
.grid-card h3 {
  color: #667eea;
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grid-card h3::before {
  font-size: 1.5rem;
  line-height: 1;
}

/* Grid Card Lists */
.grid-card ul {
  color: #4b5563;
  line-height: 1.8;
  margin: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
  flex-grow: 1;
}

.grid-card ul li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  padding-left: 0.25rem;
}

.grid-card ul li:last-child {
  margin-bottom: 0;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 2.5rem 0;
  }

  .grid-card {
    padding: 2.25rem;
  }

  .grid-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
}

/* Desktop: 3 columns */
@media (min-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 3rem 0;
    max-width: 100%;
  }

  .grid-card {
    padding: 2.5rem;
  }

  .grid-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .grid-card ul li {
    font-size: 1rem;
  }
}

/* Large Desktop: Enhanced spacing */
@media (min-width: 1200px) {
  .grid-container {
    gap: 3rem;
    margin: 3.5rem 0;
  }

  .grid-card {
    padding: 3rem;
  }

  .grid-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1.75rem;
  }

  .grid-card ul li {
    font-size: 1.05rem;
    line-height: 1.9;
  }
}

/* Extra Large Screens: Maximum spacing */
@media (min-width: 1400px) {
  .grid-container {
    gap: 3.5rem;
    margin: 4rem 0;
  }

  .grid-card {
    padding: 3.5rem;
  }

  .grid-card h3 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
}

/* Mobile Optimizations */
@media (max-width: 767.98px) {
  .grid-container {
    gap: 1.25rem;
    margin: 1.5rem 0;
  }

  .grid-card {
    padding: 1.5rem;
  }

  .grid-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .grid-card ul {
    padding-left: 1.25rem;
  }

  .grid-card ul li {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    line-height: 1.7;
  }
}

/* Print Styles for Grid */
@media print {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    page-break-inside: avoid;
  }

  .grid-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}