/**
 * Material Design styling for mobile devices
 * Inspired by Material Design 3 (Material You)
 ============================================================================ */

.mobile-nav-toggle {
  display: none;
}

.mobile-nav-panel {
  display: none;
}

/* Material Design tylko na urządzeniach mobilnych */
@media (max-width: 60.0625em) {
  
  /* === LAYOUT CONTAINER === */
  .layout-container {
    background: #f5f5f5; /* Material background */
    padding: 0;
  }

  /* === HEADER - Material Top App Bar === */
  .site-header {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-header.elevated {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .header-first {
    padding: 0.5rem 4.5rem 0.5rem 1rem;
  }

  .site-branding-wrapper {
    width: 100%;
  }

  .site-branding-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
  }

  .site-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
  }

  .site-logo img {
    display: block;
    width: clamp(60px, 14vw, 80px);
    height: auto;
  }

  .site-slogan {
    display: none;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    position: absolute;
    top: 0.2rem;
    right: 1rem;
    z-index: 110;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    color: #9a4f0d;
    opacity: 0.85;
  }

  .mobile-nav-toggle__box {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.22rem;
    width: 1.125rem;
  }

  .mobile-nav-toggle__line {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .mobile-nav-toggle.is-open .mobile-nav-toggle__line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-nav-toggle.is-open .mobile-nav-toggle__line:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle.is-open .mobile-nav-toggle__line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  @media (max-width: 36em) {
    .header-first {
      padding-right: 4rem;
      padding-left: 0.75rem;
    }

    .mobile-nav-toggle {
      width: 2.1rem;
      height: 2.1rem;
      top: 0.15rem;
      right: 0.75rem;
    }

    .mobile-nav-panel {
      top: calc(env(safe-area-inset-top, 0px) + 2.8rem);
      max-height: calc(100vh - env(safe-area-inset-top, 0px) - 2.95rem);
    }
  }

  /* === NAVBAR - lekkie menu rozwijane spod nagłówka === */
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 2.95rem);
    left: 0;
    right: 0;
    z-index: 95;
    padding: 0.1rem 0.75rem 0.9rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 3.1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-panel.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* === BREADCRUMB - Material Style === */
  .breadcrumb {
    background: transparent;
    padding: 0.5rem 1rem;
    margin: 0;
  }

  /* === LAYOUT COLUMNS - Material Cards === */
  .layout-columns {
    background: transparent;
    border: none;
    padding: 0;
    gap: 0;
  }

  /* === SIDEBAR - Material Navigation Drawer === */
  .layout-sidebar-first {
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .layout-sidebar-first .block-menu {
    display: none;
  }

  /* Bloki w sidebar jako Material Cards */
  .layout-sidebar-first > .block,
  .layout-sidebar-first .region > .block {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin: 0.5rem 1rem;
    padding: 1rem;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .layout-sidebar-first > .block:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }

  /* === MAIN CONTENT - Material Surface === */
  main {
    background: transparent;
    padding: 0;
  }

  .layout-content {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin: 0.5rem 1rem;
    padding: 1rem;
  }

  /* Artykuły/Node jako Material Cards */
  .layout-content article,
  .layout-content .node {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  .layout-content article:last-child,
  .layout-content .node:last-child {
    margin-bottom: 0;
  }

  /* === SIDEBAR SECOND - Material Cards === */
  .layout-sidebar-second {
    background: transparent;
    padding: 0;
  }

  .layout-sidebar-second > .block,
  .layout-sidebar-second .region > .block {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin: 0.5rem 1rem;
    padding: 1rem;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* === FOOTER - Material Style === */
  .site-footer {
    background: #263238;
    color: rgba(255, 255, 255, 0.87);
    padding: 1.5rem 1rem;
    margin-top: 1rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  }

  .site-footer a {
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .site-footer a:hover {
    color: #ffffff;
  }

  /* === MESSAGES - Material Snackbar Style === */
  .messages {
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    margin: 0.5rem 1rem;
    padding: 1rem;
    animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes slideInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* === TYPOGRAPHY - Material Design === */
  body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Nagłówki w Material Design */
  .layout-content h1,
  .layout-content h2,
  .layout-content h3 {
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .layout-content h1 {
    font-size: 1.75rem;
    line-height: 2rem;
  }

  .layout-content h2 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .layout-content h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  /* === BUTTONS - Material Design === */
  .layout-content button,
  .layout-content .button,
  .layout-content input[type="submit"] {
    background: #666666;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .layout-content button:hover,
  .layout-content .button:hover,
  .layout-content input[type="submit"]:hover {
    background: #555555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
  }

  .layout-content button:active,
  .layout-content .button:active,
  .layout-content input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* === FORMS - Material Design === */
  .layout-content input[type="text"],
  .layout-content input[type="email"],
  .layout-content input[type="password"],
  .layout-content input[type="search"],
  .layout-content textarea,
  .layout-content select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #ffffff;
  }

  .layout-content input[type="text"]:focus,
  .layout-content input[type="email"]:focus,
  .layout-content input[type="password"]:focus,
  .layout-content input[type="search"]:focus,
  .layout-content textarea:focus,
  .layout-content select:focus {
    border-color: #666666;
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.1);
  }

  /* === LINKS - Material Design === */
  .layout-content a {
    color: #1976d2;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .layout-content a:hover {
    color: #1565c0;
    text-decoration: underline;
  }

  /* Linki w nagłówkach powinny dziedziczyć kolor nagłówka */
  .layout-content h1 a,
  .layout-content h2 a,
  .layout-content h3 a,
  .layout-content h4 a,
  .layout-content h5 a,
  .layout-content h6 a {
    color: inherit;
    text-decoration: none;
  }

  .layout-content h1 a:hover,
  .layout-content h2 a:hover,
  .layout-content h3 a:hover,
  .layout-content h4 a:hover,
  .layout-content h5 a:hover,
  .layout-content h6 a:hover {
    color: inherit;
    text-decoration: underline;
  }

  /* === MENU W SIDEBAR - Material List === */
  .layout-sidebar-first .menu,
  .layout-sidebar-second .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav-panel .rm-block,
  .mobile-nav-panel .block,
  .mobile-nav-panel .block__inner,
  .mobile-nav-panel .rm-block__inner,
  .mobile-nav-panel .block-menu__inner,
  .mobile-nav-panel .block__content,
  .mobile-nav-panel .block-menu__content {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-nav-panel {
    overflow-y: auto;
  }

  .mobile-nav-panel .mobile-nav-panel__block,
  .mobile-nav-panel .rm-block,
  .mobile-nav-panel .block {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(10px);
    margin-bottom: 0.75rem;
  }

  .mobile-nav-panel .block__title,
  .mobile-nav-panel .block-menu__title {
    display: block !important;
    margin: 0;
    padding: 0.9rem 1rem 0.45rem;
    color: #64748b;
    text-shadow: none;
    font-size: 0.78rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .mobile-nav-panel .menu,
  .mobile-nav-panel ul.menu {
    display: block !important;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: transparent;
  }

  .mobile-nav-panel .menu-level-1 > .menu__item,
  .mobile-nav-panel ul.menu > li {
    margin: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: transparent !important;
  }

  .mobile-nav-panel .menu-level-1 > .menu__item:last-child,
  .mobile-nav-panel ul.menu > li:last-child {
    border-bottom: none;
  }

  .mobile-nav-panel .menu__item,
  .mobile-nav-panel li {
    width: 100%;
    background: transparent !important;
  }

  .mobile-nav-panel .menu__link,
  .mobile-nav-panel .menu a {
    display: block;
    padding: 0.9rem 1rem !important;
    color: #1f2937 !important;
    background: transparent !important;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
  }

  .mobile-nav-panel .menu__link:hover,
  .mobile-nav-panel .menu a:hover,
  .mobile-nav-panel .menu__link:focus-visible,
  .mobile-nav-panel .menu a:focus-visible {
    background: rgba(231, 121, 25, 0.08) !important;
    color: #9a4f0d !important;
  }

  .mobile-nav-panel .menu__link.is-active,
  .mobile-nav-panel .menu a.is-active {
    color: #9a4f0d !important;
    background: rgba(231, 121, 25, 0.12) !important;
  }

  .mobile-nav-panel .is-child {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 0 0 0.35rem;
    background: transparent !important;
  }

  .mobile-nav-panel .menu-level-2 .menu__link,
  .mobile-nav-panel .menu-level-3 .menu__link {
    padding-left: 1.75rem !important;
    font-size: 0.96rem;
    font-weight: 400;
  }

  .mobile-nav-panel .menu-level-4 .menu__link {
    padding-left: 2.4rem !important;
  }

  /* Inne menu w sidebarze */
  .layout-sidebar-first .menu,
  .layout-sidebar-second .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .layout-sidebar-first .menu li,
  .layout-sidebar-second .menu li {
    border-bottom: 1px solid #e0e0e0;
  }

  .layout-sidebar-first .menu li:last-child,
  .layout-sidebar-second .menu li:last-child {
    border-bottom: none;
  }

  .layout-sidebar-first .menu a,
  .layout-sidebar-second .menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    transition: background-color 0.2s ease;
    position: relative;
  }

  .layout-sidebar-first .menu a:hover,
  .layout-sidebar-second .menu a:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .layout-sidebar-first .menu a.is-active,
  .layout-sidebar-second .menu a.is-active {
    background: rgba(102, 102, 102, 0.08);
    color: #666666;
    font-weight: 500;
  }

  /* === RIPPLE EFFECT (opcjonalny) === */
  .layout-sidebar-first .menu a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  /* === TABLES - Material Design === */
  .layout-content table {
    border-collapse: collapse;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-content table th {
    background: #f5f5f5;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 500;
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .layout-content table td {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .layout-content table tr:last-child td {
    border-bottom: none;
  }

  .layout-content table tr:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  /* === ELEVATED SCROLL STATE === */
  .scrolled .site-header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

}