/* ============================================================
   BlogSphere - Master Responsive Stylesheet
   ============================================================
   File:     assets/css/responsive.css
   Purpose:  Global responsive design fine-tuning
   Loaded:   LAST in head.php - overrides all other CSS

   Breakpoints:
     - Extra Large Desktop : ≥ 1440px
     - Desktop             : 1200px - 1439px
     - Tablet Landscape    : 1024px - 1199px
     - Tablet Portrait     : 768px - 1023px
     - Mobile Landscape    : 481px - 767px
     - Mobile Portrait     : ≤ 480px

   Table of Contents:
     1. CSS Variable Overrides (responsive sizing)
     2. Global Container & Spacing
     3. Typography Scaling
     4. Touch-friendly Interactions
     5. Page-specific Responsive Tweaks
     6. Form Optimization (iOS zoom fix)
     7. Image & Media Responsive
     8. Print Styles
     9. Landscape Orientation Fixes
    10. High DPI / Retina Display
    11. Accessibility & Reduced Motion
   ============================================================ */

/* ============================================================
   1. CSS VARIABLE OVERRIDES (Responsive Sizing)
   Adjusts spacing & sizes based on screen
   ============================================================ */

/* Extra Large Desktop (1440px+) - Larger spacing */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
    --space-3xl: 5rem;
    --space-4xl: 7rem;
  }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  :root {
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 4.5rem;
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --space-md: 0.875rem;
    --space-lg: 1.25rem;
    --space-xl: 1.75rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3.5rem;

    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.1875rem;
    --text-2xl: 1.375rem;
    --text-3xl: 1.625rem;
    --text-4xl: 1.875rem;
    --text-5xl: 2.125rem;
    --text-6xl: 2.5rem;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  :root {
    --header-height: 58px;
    --text-base: 0.875rem;
    --text-sm: 0.8125rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
  }
}

/* ============================================================
   2. GLOBAL CONTAINER & SPACING
   ============================================================ */

@media (max-width: 1199px) {
  .container,
  .container-wide {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 768px) {
  .container,
  .container-wide,
  .container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

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

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

  .section-sm {
    padding: var(--space-lg) 0;
  }
}

@media (max-width: 480px) {
  .container,
  .container-wide,
  .container-fluid {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

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

/* ============================================================
   3. TYPOGRAPHY SCALING
   Better readability on small screens
   ============================================================ */

@media (max-width: 768px) {
  body {
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  h3 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }
  h4 {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  }
  h5 {
    font-size: clamp(1rem, 3vw, 1.25rem);
  }
  h6 {
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
  }

  /* Better readability for paragraphs */
  p {
    line-height: 1.65;
  }

  /* Reduce blockquote left padding */
  blockquote {
    padding-left: var(--space-md);
    font-size: var(--text-base);
  }

  /* Smaller code blocks */
  pre {
    font-size: var(--text-xs);
    padding: var(--space-sm);
  }
}

/* ============================================================
   4. TOUCH-FRIENDLY INTERACTIONS
   Larger tap targets for mobile
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only animations on touch devices */
  .card:hover,
  .article-card:hover,
  .blog-post-card:hover,
  .latest-carousel-card:hover,
  .editors-choice-card:hover,
  .about-team-card:hover,
  .about-mv-card:hover,
  .contact-quick-card:hover {
    transform: none;
  }

  /* Always show share buttons on touch */
  .post-hero-share {
    display: flex !important;
  }

  /* Minimum tap target size: 44x44px (Apple HIG / WCAG) */
  a,
  button,
  input[type='button'],
  input[type='submit'],
  .btn,
  .filter-pill,
  .navbar-action-btn,
  .scroll-arrow,
  .footer-social-link,
  .post-hero-share-btn,
  .floating-share-btn,
  .legal-faq-question,
  .contact-faq-question {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase clickable area without visual changes */
  .breadcrumb-link,
  .footer-link,
  .post-tag-link,
  .sidebar-tag-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ============================================================
   5. PAGE-SPECIFIC RESPONSIVE TWEAKS
   ============================================================ */

/* ---------- NAVBAR (Mobile Fine-tuning) ---------- */
@media (max-width: 1024px) {
  .navbar-menu {
    display: none !important;
  }

  .btn-subscribe {
    display: none !important;
  }

  .navbar-hamburger {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .navbar-actions {
    gap: 4px;
  }

  .navbar-action-btn {
    width: 32px;
    height: 32px;
  }
}

/* ---------- HOMEPAGE - Hero Slider ---------- */
@media (max-width: 768px) {
  .hero-card-image {
    height: clamp(280px, 50vw, 360px);
  }

  .hero-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .hero-excerpt {
    display: none;
  }

  .hero-card-content {
    padding: var(--space-md);
  }

  .hero-meta {
    gap: var(--space-xs);
  }

  .hero-author-name,
  .hero-date,
  .hero-read-time {
    font-size: 11px;
  }
}

/* ---------- HOMEPAGE - Categories Scroll ---------- */
@media (max-width: 768px) {
  .categories-scroll-wrapper,
  .latest-carousel-wrapper,
  .editors-choice-carousel-wrapper {
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Allow native swipe scrolling */
  .categories-scroll,
  .latest-carousel,
  .editors-choice-carousel {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .category-card,
  .latest-carousel-card,
  .editors-choice-card {
    scroll-snap-align: start;
  }
}

/* ---------- HOMEPAGE - Hide Scroll Arrows on Mobile ---------- */
@media (max-width: 768px) {
  .section-nav-arrows {
    display: none;
  }
}

/* ---------- BLOG LISTING - Featured Card ---------- */
@media (max-width: 768px) {
  .blog-post-card-featured {
    grid-template-columns: 1fr !important;
  }

  .blog-post-card-featured .blog-post-thumb {
    min-height: 220px !important;
  }

  .blog-post-card-featured .blog-post-body {
    padding: var(--space-md) !important;
  }

  .blog-post-card-featured .blog-read-more-btn {
    margin: 0 var(--space-md) var(--space-md) !important;
  }
}

/* ---------- POST PAGE - Hero & Content ---------- */
@media (max-width: 768px) {
  .post-hero-image-wrap {
    height: clamp(240px, 45vw, 320px);
    border-radius: var(--radius-md);
  }

  .post-hero-content {
    padding: var(--space-md);
  }

  .post-hero-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  /* Hide floating share, show inline in hero */
  .post-floating-share {
    display: none !important;
  }

  /* Compact meta bar */
  .post-hero-meta-bar {
    gap: var(--space-sm);
  }

  /* Hide author role on small screens */
  .post-hero-author-role {
    display: none;
  }

  /* Hide some meta items on very small screens */
  .post-hero-meta-item:nth-of-type(2),
  .post-hero-meta-item:nth-of-type(3) {
    display: none;
  }

  /* Compact TOC */
  .post-toc {
    padding: var(--space-md);
  }

  /* Comment form: stack name/email */
  .post-comment-form-row {
    grid-template-columns: 1fr !important;
  }

  /* Author bio stack on mobile */
  .post-author-bio {
    flex-direction: column;
    text-align: center;
    padding: var(--space-md);
  }

  .post-author-bio-avatar {
    width: 72px;
    height: 72px;
  }

  .post-author-bio-social {
    justify-content: center;
  }
}

/* ---------- ABOUT PAGE - Sections ---------- */
@media (max-width: 768px) {
  .about-hero-content {
    text-align: center;
  }

  .about-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .about-hero-illustration {
    order: -1;
    margin-bottom: var(--space-md);
  }

  .hero-illustration-card {
    height: 180px;
    max-width: 280px;
  }

  .hero-illustration-icon {
    font-size: 60px;
  }

  .about-story-grid {
    grid-template-columns: 1fr !important;
  }

  .about-story-image-wrap {
    max-width: 320px;
    margin: 0 auto;
  }

  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .about-stat-card {
    padding: var(--space-md);
  }

  .about-stat-value {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .about-editor-card {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: var(--space-lg);
  }

  .about-editor-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .about-team-grid {
    grid-template-columns: 1fr !important;
    max-width: 340px;
    margin: 0 auto;
  }

  .about-newsletter-card {
    padding: var(--space-xl) var(--space-md);
  }
}

/* ---------- CONTACT PAGE ---------- */
@media (max-width: 768px) {
  .contact-hero-content {
    text-align: center;
  }

  .contact-hero-illustration {
    order: -1;
    margin-bottom: var(--space-md);
  }

  .contact-illustration-card {
    height: 200px;
    max-width: 320px;
  }

  .contact-illustration-person {
    font-size: 60px;
  }

  .contact-illustration-bubble {
    width: 40px;
    height: 40px;
    font-size: var(--text-sm);
  }

  .contact-main-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-form-card,
  .contact-info-card {
    padding: var(--space-md);
  }

  .contact-social-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-quick-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-newsletter-card {
    padding: var(--space-xl) var(--space-md);
  }

  .contact-map-placeholder,
  .contact-map-wrapper iframe {
    height: 280px;
  }
}

/* ---------- LEGAL PAGES (Privacy & Terms) ---------- */
@media (max-width: 1024px) {
  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  .legal-sidebar {
    position: static !important;
    margin-bottom: var(--space-lg);
  }

  .legal-sidebar-inner {
    max-height: 280px;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .legal-hero-content {
    text-align: center;
  }

  .legal-hero-illustration {
    order: -1;
    margin-bottom: var(--space-md);
  }

  .legal-illustration-card {
    height: 180px;
    max-width: 280px;
  }

  .legal-illustration-icon {
    font-size: 60px;
  }

  .legal-dates-badge {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-xs);
  }

  .legal-date-item {
    border-right: none !important;
    border-bottom: 1px solid var(--color-border-light);
    padding-right: 0 !important;
    padding-bottom: var(--space-xs);
  }

  .legal-date-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .legal-section {
    padding: var(--space-md);
  }

  .legal-section-title {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    flex-wrap: wrap;
  }

  .legal-info-cards,
  .legal-service-cards,
  .legal-trust-grid,
  .terms-prohibited-grid {
    grid-template-columns: 1fr !important;
  }

  .legal-security-grid {
    grid-template-columns: 1fr !important;
  }

  .legal-contact-card {
    flex-direction: column !important;
    text-align: center;
  }

  .legal-summary-cta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- SIDEBARS - Stack on Mobile ---------- */
@media (max-width: 1024px) {
  .blog-sidebar,
  .post-sidebar,
  .home-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-lg) !important;
  }

  .sidebar-newsletter,
  .sidebar-widget-newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .blog-sidebar,
  .post-sidebar,
  .home-sidebar {
    grid-template-columns: 1fr !important;
  }

  .sidebar-widget {
    padding: var(--space-md);
  }

  .sidebar-newsletter-card,
  .sidebar-newsletter-card-form {
    padding: var(--space-md);
  }
}

/* ---------- FOOTER - Mobile Stack ---------- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .footer-about {
    grid-column: 1 !important;
  }

  .footer-about-text {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-contact-list {
    align-items: center;
  }

  .footer-newsletter-wrapper {
    flex-direction: column !important;
    text-align: center;
    gap: var(--space-md);
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* ============================================================
   6. FORM OPTIMIZATION (iOS Zoom Fix)
   Prevents iOS Safari from zooming on input focus
   ============================================================ */

@media (max-width: 768px) {
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='number'],
  input[type='search'],
  input[type='url'],
  textarea,
  select {
    font-size: 16px !important; /* CRITICAL: Prevents iOS zoom */
  }

  /* Better form spacing on mobile */
  .form-group {
    margin-bottom: var(--space-sm);
  }

  /* Larger form controls for easier touch */
  .form-control,
  .form-input,
  .contact-form-input,
  .contact-form-textarea,
  .contact-form-select {
    padding: 0.85rem 1rem;
  }

  /* Full-width buttons on mobile */
  .btn-block-mobile,
  .contact-form-submit {
    width: 100%;
  }
}

/* ============================================================
   7. IMAGE & MEDIA RESPONSIVE
   ============================================================ */

/* All images responsive by default */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.post-card-author-avatar {
  max-width: 12% !important;
  border-radius: 50% !important;
}

/* Lazy-loaded images */
img[loading='lazy'] {
  background-color: var(--color-bg-tertiary);
  transition: opacity 0.3s ease;
}

img[loading='lazy']:not(.loaded) {
  opacity: 0.7;
}

img[loading='lazy'].loaded {
  opacity: 1;
}

/* iframes (YouTube, Maps, etc.) */
iframe {
  max-width: 100%;
  border: 0;
}

/* Embedded YouTube videos - responsive 16:9 */
.video-embed,
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-md);
}

.video-embed iframe,
.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive tables - horizontal scroll */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inside post content */
  .post-content table {
    font-size: var(--text-sm);
  }
}

/* ============================================================
   8. PRINT STYLES
   Optimized for printing pages
   ============================================================ */

@media print {
  /* Hide non-essential elements */
  .navbar,
  .footer,
  .back-to-top,
  .toast-container,
  .post-floating-share,
  .post-hero-share,
  .post-actions-bar,
  .post-comment-form,
  .post-comments-list,
  .ad-component,
  .ad-section,
  .ad-placeholder,
  .related-articles-section,
  .home-sidebar,
  .blog-sidebar,
  .post-sidebar,
  .reading-progress,
  .legal-sidebar,
  .newsletter-component,
  .newsletter-form,
  .navbar-hamburger,
  .mobile-menu {
    display: none !important;
  }

  /* Reset for print */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  .container,
  .container-wide {
    max-width: 100%;
    padding: 0;
  }

  /* Expand all FAQs */
  .contact-faq-item,
  .legal-faq-item {
    max-height: none !important;
  }

  .contact-faq-answer,
  .legal-faq-answer {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Show URLs after links */
  a:not(.no-print-url)::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
  }

  /* No background colors */
  .post-content blockquote,
  .legal-section,
  .post-author-bio,
  .post-conclusion {
    background: white !important;
    border: 1px solid #ccc !important;
  }

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

  p,
  blockquote,
  pre {
    page-break-inside: avoid;
  }

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

  /* Layout adjustments */
  .blog-layout,
  .post-layout,
  .home-content-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   9. LANDSCAPE ORIENTATION FIXES
   For mobile devices in landscape mode
   ============================================================ */

@media (max-width: 920px) and (orientation: landscape) {
  /* Reduce hero heights in landscape */
  .hero-card-image {
    height: 280px;
  }

  .post-hero-image-wrap {
    height: 240px;
  }

  .about-hero,
  .contact-hero,
  .legal-hero {
    padding: var(--space-xl) 0;
  }

  .about-hero-title,
  .contact-hero-title,
  .legal-hero-title {
    font-size: var(--text-3xl);
  }

  /* Reduce navbar height in landscape */
  .navbar,
  .navbar-inner {
    height: 56px;
  }

  .navbar-spacer {
    height: 56px;
  }
}

/* ============================================================
   10. HIGH DPI / RETINA DISPLAY
   Sharper rendering on retina screens
   ============================================================ */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  /* Sharper text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Slightly thinner borders */
  .card,
  .blog-post-card,
  .article-card,
  .legal-section,
  .sidebar-widget,
  .about-mv-card,
  .about-why-card,
  .contact-form-card,
  .contact-info-card {
    border-width: 0.5px;
  }
}

/* ============================================================
   11. ACCESSIBILITY & REDUCED MOTION
   Respects user preferences for reduced motion
   ============================================================ */

@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;
  }

  /* Disable all transform effects */
  .card:hover,
  .blog-post-card:hover,
  .article-card:hover {
    transform: none !important;
  }

  /* Disable floating animations */
  .contact-illustration-person,
  .contact-illustration-bubble {
    animation: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-text-secondary: #1a1a1a;
    --color-border: #000000;
    --color-border-light: #333333;
  }

  .card,
  .blog-post-card,
  .article-card,
  .btn,
  input,
  textarea,
  select {
    border-width: 2px !important;
  }
}

/* ============================================================
   12. EXTRA UTILITIES FOR RESPONSIVE
   ============================================================ */

/* Hide on specific screen sizes */
@media (max-width: 1024px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hide-on-small-mobile {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-on-mobile-only {
    display: none !important;
  }
}

/* ============================================================
   13. SCROLLBAR STYLING (Optional aesthetic)
   ============================================================ */

@media (min-width: 768px) {
  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg-secondary);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }
}

/* ============================================================
   14. SAFE AREA INSETS (iPhone X+ Notch Support)
   ============================================================ */

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .navbar {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
  }

  .footer-bottom {
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  }

  .back-to-top {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right));
  }
}

/* ============================================================
   15. CSS GRID FALLBACK (Older Browsers)
   ============================================================ */

@supports not (display: grid) {
  .articles-grid,
  .blog-posts-grid,
  .related-articles-grid,
  .about-team-grid,
  .about-stats-grid,
  .contact-quick-grid,
  .legal-trust-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .articles-grid > *,
  .blog-posts-grid > *,
  .related-articles-grid > * {
    flex: 1 1 calc(33.333% - var(--space-md));
    min-width: 280px;
  }
}

/* ============================================================
   16. DARK MODE SPECIFIC RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 768px) {
  [data-theme='dark'] .blog-post-card,
  [data-theme='dark'] .article-card,
  [data-theme='dark'] .sidebar-widget,
  [data-theme='dark'] .legal-section,
  [data-theme='dark'] .about-stat-card,
  [data-theme='dark'] .contact-form-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================================
   END OF RESPONSIVE STYLESHEET
   ============================================================ */