/* ==========================================================================
   RESPONSIVE STYLES - Mobile-First UX
   ========================================================================== */

/* ========== BREAKPOINTS ==========
   xs: 0 - 575px    (Small phones)
   sm: 576 - 767px  (Large phones)
   md: 768 - 991px  (Tablets)
   lg: 992 - 1199px (Laptops)
   xl: 1200px+      (Desktops)
   ========================================================================== */

/* ========== EXTRA SMALL DEVICES (< 576px) ========== */

@media (max-width: 575px) {
  /* Typography */
  body {
    font-size: 0.95rem;
  }

  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }
  h4 { font-size: 1rem !important; }

  /* Header */
  .wrapper-header {
    padding: 0.5rem 0.75rem !important;
  }

  .site-branding::after {
    font-size: 1rem;
  }

  .site-branding img,
  .custom-logo {
    height: 28px !important;
  }

  .header-cta {
    display: none;
  }

  /* Mobile Menu */
  #site-mobile-menu-toggle {
    padding: 0.4rem;
  }

  /* Content Layout */
  .wrapper,
  .container {
    padding: 0 0.75rem;
  }

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

  /* Cards */
  .ilovewp-post {
    margin-bottom: 1rem;
    border-radius: 0.75rem;
  }

  .post-cover img {
    height: 180px !important;
  }

  .title-post {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .post-excerpt {
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
  }

  .entry-meta {
    font-size: 0.7rem !important;
    gap: 0.5rem;
  }

  /* Sidebar */
  .widget-area {
    padding-left: 0;
    margin-top: 2rem;
  }

  .widget {
    padding: 1rem;
  }

  /* Single Post */
  .single-post .entry-title {
    font-size: 1.35rem !important;
  }

  .single-post .entry-content {
    font-size: 0.95rem;
  }

  /* Footer */
  .site-footer {
    padding: 2rem 0 1rem !important;
  }

  .footer-widgets {
    gap: 1.5rem;
  }

  .site-info {
    font-size: 0.75rem;
  }
}

/* ========== SMALL DEVICES (576px - 767px) ========== */

@media (min-width: 576px) and (max-width: 767px) {
  /* Typography */
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }

  /* Header */
  .wrapper-header {
    padding: 0.5rem 1rem !important;
  }

  .header-cta {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  /* Content */
  .wrapper,
  .container {
    padding: 0 1rem;
  }

  /* Cards */
  .post-cover img {
    height: 200px !important;
  }

  .title-post {
    font-size: 1.1rem !important;
  }

  /* Single Post */
  .single-post .entry-title {
    font-size: 1.5rem !important;
  }
}

/* ========== TABLET DEVICES (768px - 991px) ========== */

@media (min-width: 768px) and (max-width: 991px) {
  /* Header */
  .wrapper-header {
    padding: 0.5rem 1.25rem !important;
  }

  #site-primary-menu > li > a {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  .header-search {
    display: none;
  }

  /* Two Column Layout */
  .site-main {
    width: 65%;
  }

  .widget-area {
    width: 35%;
    padding-left: 1.5rem;
  }

  /* Cards */
  .ilovewp-post {
    flex-direction: row;
  }

  .post-cover-wrapper {
    width: 200px !important;
    min-width: 200px !important;
  }

  .post-cover img {
    width: 200px !important;
    height: 135px !important;
  }

  .title-post {
    font-size: 1.05rem !important;
  }

  /* Featured First Post */
  .ilovewp-post:first-child {
    flex-direction: column;
  }

  .ilovewp-post:first-child .post-cover-wrapper {
    width: 100% !important;
  }

  .ilovewp-post:first-child .post-cover img {
    width: 100% !important;
    height: 240px !important;
  }

  /* Single Post */
  .single-post .entry-title {
    font-size: 1.75rem !important;
  }

  .author-box {
    padding: 1.5rem;
  }
}

/* ========== LAPTOP DEVICES (992px - 1199px) ========== */

@media (min-width: 992px) and (max-width: 1199px) {
  /* Container */
  .wrapper,
  .container {
    max-width: 960px;
  }

  /* Header */
  #site-primary-menu > li > a {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  .header-search {
    max-width: 160px;
  }

  /* Cards */
  .post-cover-wrapper {
    width: 220px !important;
    min-width: 220px !important;
  }

  .post-cover img {
    width: 220px !important;
    height: 150px !important;
  }

  /* Sidebar */
  .widget-area {
    padding-left: 1.5rem;
  }
}

/* ========== DESKTOP DEVICES (1200px+) ========== */

@media (min-width: 1200px) {
  /* Container */
  .wrapper,
  .container {
    max-width: 1140px;
  }

  /* Header */
  #site-primary-menu > li > a {
    padding: 0.4rem 0.65rem !important;
  }

  /* Cards */
  .post-cover-wrapper {
    width: 260px !important;
    min-width: 260px !important;
  }

  .post-cover img {
    width: 260px !important;
    height: 175px !important;
  }
}

/* ========== LARGE DESKTOP (1400px+) ========== */

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

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  #site-primary-menu > li > a {
    padding: 0.5rem 0.75rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  button,
  .btn,
  input[type="submit"] {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
  }

  /* Disable hover effects */
  .ilovewp-post:hover {
    transform: none;
  }

  .post-cover img:hover {
    transform: none;
  }

  /* Add active state instead */
  .ilovewp-post:active {
    transform: scale(0.98);
  }
}

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

@media print {
  /* Hide non-essential elements */
  .site-header,
  .widget-area,
  .site-footer,
  .comments-area,
  .post-navigation,
  .related-posts,
  .reading-progress {
    display: none !important;
  }

  /* Reset backgrounds */
  body {
    background: white !important;
    color: black !important;
  }

  /* Full width content */
  .site-main {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Improve readability */
  .entry-content {
    font-size: 12pt;
    line-height: 1.6;
  }

  /* Show URLs for links */
  .entry-content a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
    max-width: 100%;
  }
}

/* ========== HIGH CONTRAST MODE ========== */

@media (prefers-contrast: high) {
  :root {
    --hamnus-primary: #000066;
    --hamnus-accent: #006666;
    --hamnus-gray-600: #333;
    --hamnus-gray-500: #444;
  }

  .widget,
  article,
  .ilovewp-post {
    border-width: 2px;
    border-color: #333;
  }

  a {
    text-decoration: underline;
  }
}

/* ========== DARK MODE SUPPORT ========== */

@media (prefers-color-scheme: dark) {
  /* Enable when dark mode is fully implemented */
  /*
  :root {
    --hamnus-white: #1a1a2e;
    --hamnus-gray-50: #16213e;
    --hamnus-gray-100: #1f3460;
    --hamnus-gray-200: #2d4a7c;
    --hamnus-gray-600: #a0aec0;
    --hamnus-gray-700: #cbd5e0;
    --hamnus-gray-800: #e2e8f0;
    --hamnus-gray-900: #f7fafc;
  }
  */
}

/* ========== LANDSCAPE PHONE ORIENTATION ========== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Compact header */
  .site-header {
    position: relative;
  }

  .wrapper-header {
    padding: 0.35rem 1rem !important;
  }

  .site-branding img {
    height: 24px !important;
  }

  /* Reduce vertical spacing */
  .site-content {
    padding: 0.5rem 0;
  }

  .ilovewp-post {
    margin-bottom: 0.75rem;
    padding: 0.75rem !important;
  }

  .post-cover img {
    height: 100px !important;
  }
}

/* ========== NOTCH/SAFE AREA SUPPORT ========== */

@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .site-footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

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

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hamnus-accent);
  color: var(--hamnus-white);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--hamnus-radius-md) var(--hamnus-radius-md);
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.3s ease;
}

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

/* Focus visible for keyboard users */
*:focus-visible {
  outline: 3px solid var(--hamnus-accent);
  outline-offset: 2px;
}

/* Ensure minimum text size on mobile */
@media (max-width: 767px) {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  input,
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}