/*
Theme Name: benwebsite
Theme URI: https://example.com/benwebsite
Author: Ben
Description: A focused personal blog for a web and software maker.
Version: 2.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: benwebsite
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary: #164080;
    --primary-dark: #224b94;
    --bg: #f8fafc;
    --text: #1e293b;
  }
  
  body {
    @apply bg-[#f8fafc] text-[#1e293b] font-sans antialiased;
    font-family: 'PingFang SC', Inter, system-ui, -apple-system, sans-serif;
  }

  a {
    @apply transition-all duration-200;
  }

  /* Handle images overflow */
  img {
    @apply max-w-full h-auto block;
  }

  /* Handle long code blocks and tables */
  pre {
    @apply overflow-x-auto max-w-full whitespace-pre-wrap break-words;
  }
  
  table {
    @apply block overflow-x-auto max-w-full;
  }
}

@layer components {
  /* WordPress Pagination Styles */
  .pagination .nav-links {
    @apply flex items-center gap-2;
  }
  
  .pagination .page-numbers {
    @apply inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 text-sm font-bold text-slate-500 transition-all hover:bg-[#164080] hover:text-white hover:border-[#164080] hover:-translate-y-1;
  }
  
  .pagination .page-numbers.current {
    @apply bg-[#164080] text-white border-[#164080];
  }

  .pagination .page-numbers.dots {
    @apply border-transparent hover:bg-transparent hover:text-slate-500 hover:translate-y-0;
  }

  /* WordPress Comment List Styles */
  .comment-list .comment {
    @apply bg-white p-6 md:p-8 rounded-3xl border border-slate-100 shadow-sm transition-all duration-300;
  }
  
  .comment-list .comment-body {
    @apply relative flex flex-col;
  }
  
  .comment-list .comment-author {
    @apply flex items-center gap-4 mb-2;
  }
  
  .comment-list .avatar {
    @apply rounded-full border-2 border-white shadow-md;
  }
  
  .comment-list .fn {
    @apply font-bold text-slate-900 not-italic;
  }
  
  .comment-list .comment-meta {
    @apply text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-4;
  }
  
  .comment-list .comment-content {
    @apply text-slate-600 leading-relaxed text-sm;
  }
  
  .comment-list .reply {
    @apply mt-6 flex justify-end;
  }
  
  .comment-list .comment-reply-link {
    @apply text-[10px] font-bold uppercase tracking-widest text-[#164080] bg-blue-50 px-4 py-2 rounded-full hover:bg-[#164080] hover:text-white transition-all;
  }
  
  .comment-list .children {
    @apply mt-6 ml-6 md:ml-12 border-l border-slate-100 pl-6 md:pl-12 space-y-6;
  }

  /* Navigation Menu */
  #primary-menu .menu-item a {
    @apply relative py-2 transition-all hover:text-[#164080];
  }
  
  #primary-menu .current-menu-item a {
    @apply text-[#164080];
  }
  
  #primary-menu .current-menu-item a::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-0.5 bg-[#164080] rounded-full;
  }
}

/* Mobile navigation toggle. The Tailwind `hidden` utility needs an explicit
 * open-state override because the menu is rendered hidden by default. */
@media (max-width: 767px) {
  .main-navigation.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  }

  .main-navigation > ul,
  .main-navigation .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .main-navigation li a {
    display: block;
    padding: 0.75rem 1rem;
  }

  .main-navigation #primary-menu .current-menu-item a::after {
    display: none;
  }
}