/*
Theme Name: Ethics Magazine Theme
Theme URI: https://ethics-magazine.jp/
Author: Ethics Development Team
Author URI: https://ethics-magazine.jp/
Description: Ethics Magazine専用のカスタムテーマ。Tailwind CSSベースでReactフロントエンドと同じデザインを再現します。
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ethics-theme
*/

/* Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  /* --foreground: oklch(0.145 0 0); */
  --foreground: oklch(0.145 0.004 35.8); /* #231f20 通常文字色 */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  /* --muted-foreground: oklch(0.556 0 0); */
  --muted-foreground: oklch(0.71 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --color-hero-title: oklch(0.95 0.01 68.8);

  /* Magazine Custom Colors */
  --hero-background: oklch(0.4232 0.0152 29.98);
  --hero-carousel-title: oklch(0.34 0.016 50.4);
  --header-footer-background: oklch(0.31 0.018 49.8);
  --header-footer-foreground: oklch(0.95 0.01 68.8);
  --page-title-background: oklch(0.76 0.02 75.3);
  --page-title-foreground: oklch(0.31 0.018 49.8);
  --block-background: oklch(0.95 0.01 80.1);
  --orange: oklch(0.84 0.0864 52.43);
  --dark-orange: oklch(0.83 0.0737 55.69);
  --accent-pink: oklch(0.61 0.11 20.1);
  --pink: oklch(0.68 0.1059 20.17);
  --light-pink: oklch(0.74 0.1175 350.93);
  --dark-pink: oklch(0.58 0.207 356.37);
  --dark-brown: oklch(0.3865 0.0115 34.3);
  --light-brown: oklch(0.96 0.0181 78.24);
  --light-brown-2: oklch(0.74 0.0381 64.48);
  --light-brown-3: oklch(0.95 0.0094 99.99);
  --brown: oklch(0.74 0.0373 65.81);
  --off-white: oklch(0.9589 0.0223 67.56);
  --off-white-hover: oklch(0.9588 0.0223 67.56);
  --white: oklch(0.985 0 0);
  --black: oklch(0.145 0 0);
  --dark-red: oklch(0.45 0.1169 23.74);
  --light-black: oklch(0.24 0.0064 0.59);
  --dark-black: oklch(0.145 0.004 35.8);
  --light-gray: oklch(0.94 0.0063 75.41);
  --light-blue: oklch(0.88 0.0437 228.78);
  --gray: #777777;
  /* marker */
  --marker: oklch(0.95 0.01 68.8);
  --marker-foreground: oklch(0.145 0 0);
  --marker-background: oklch(0.95 0.01 68.8);
  --marker-yellow: oklch(0.96 0.0406 91.71);

  /* Font Variables */
  --font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-futura: "tk-futura-pt-n5", "Noto Sans JP", sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo",
    sans-serif;
  color: var(--foreground);
  background-color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* WordPress Admin Bar Support for Sticky Header */
.admin-bar header.sticky {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar header.sticky {
    top: 46px !important;
  }
}

/* Also handle mobile menu positioning when admin bar is present */
.admin-bar #mobile-menu,
.admin-bar #mobile-menu-overlay {
  top: 46px;
  height: calc(100% - 46px);
}

@media screen and (min-width: 783px) {
  .admin-bar #mobile-menu,
  .admin-bar #mobile-menu-overlay {
    top: 32px;
    height: calc(100% - 32px);
  }
}

/* WordPress Block Styles Reset */
.entry-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Font Utility Classes */
.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-futura {
  font-family: var(--font-futura);
}

#search-form-1 {
  background-color: transparent;
  border: 2px solid var(--input);
  border-radius: 0;
  min-width: 217px;
  height: 36px;
}

/* #search-form-1 focus */
#search-form-1:focus-within {
  min-width: 240px;
}

/* Hide browser default clear button for search inputs */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* Article Content Styles - Matching React TextBlock standard variant */
.article-content p {
  font-size: 0.875rem; /* 14px - text-body-sm */
  line-height: 2; /* leading-loose */
  margin-bottom: 1rem; /* mb-4 */
  font-weight: 400; /* font-normal */
}

@media (min-width: 768px) {
  .article-content p {
    font-size: 1rem; /* 16px - text-body-md */
    margin-bottom: 1.75rem; /* mb-7 */
  }
}

.article-content h1,
.article-content h2,
/* .article-content h3,
.article-content h4,
.article-content h5, */
.article-content h6 {
  margin-top: 2rem; /* mb-7 */
  margin-bottom: 1.25rem; /* mb-4 */
  font-weight: 700; /* font-bold */
  font-size: 1.5rem; /* text-2xl */
}

.article-content figure {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .article-content figure {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

.article-content figcaption {
  font-size: 0.75rem; /* text-body-xss */
  color: var(--gray);
  margin-top: 0.5rem;
  text-align: left;
}

@media (min-width: 768px) {
  .article-content figcaption {
    font-size: 0.875rem; /* text-body-xs */
  }
}

.article-content ol {
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  list-style-type: decimal;
}

.article-content ul {
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  list-style-type: disc;
}

@media (min-width: 768px) {
  .article-content ol,
  .article-content ul {
    margin-bottom: 1.75rem;
    margin-left: 2rem;
  }
}

.article-content li {
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 400;
}

@media (min-width: 768px) {
  .article-content li {
    font-size: 1rem;
  }
}

.article-content li + li {
  margin-top: 0.5rem; /* space-y-2 */
}

/* Pagination Styles */
.navigation {
  display: flex !important;
  justify-content: center !important;
}

.navigation .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.navigation .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.navigation .page-numbers.current {
  background-color: #e05a00 !important;
  color: #fff !important;
  border-radius: 0.375rem !important;
}

.navigation .page-numbers:not(.current):not(.dots):hover {
  opacity: 0.7 !important;
}

.navigation .page-numbers.prev,
.navigation .page-numbers.next {
  font-size: 1.25rem !important;
}

.navigation .page-numbers.dots {
  cursor: default !important;
}

.navigation .page-numbers.dots:hover {
  opacity: 1 !important;
}

/* ============================================
   Utility Classes
   ============================================ */
.leading-relaxed,
.leading-relaxed > p {
  line-height: 1.625 !important;
}
.leading-loose,
.leading-loose > p {
  line-height: 2 !important;
}

/* Mobile Menu Body Lock */
body.mobile-menu-open {
  overflow: hidden !important;
}

/* Background overlay for iOS keyboard - prevents background showing through */
body.mobile-menu-open::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
  background-color: var(--dark-brown);
  z-index: 49;
  pointer-events: none;
}

/* Mobile Menu Scroll Support for iOS keyboard */
#mobile-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#mobile-menu > nav {
  padding-top: 4rem;
  padding-bottom: 4rem;
}