/*
Theme Name: Flat Earth Stories
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Modern editorial theme matching the latest provided React layout (emerald accent, HOME + sidebar widgets, single post with hero video play, Q&A, quiz, videos modal, library PDF modal, profile, write post).
Version: 1.3.20
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flatearth
Tags: blog, news, grid, responsive, tailwind
*/

:root {
  color-scheme: light;

  /* Default typography (can be overridden from Appearance → Flat Earth Settings) */
  --fe-content-font-size-mobile: 16px;
  --fe-content-font-size-desktop: 18px;
  --fe-title-font-size-mobile: 30px;
  --fe-title-font-size-desktop: 56px;
}

/* Line clamp fallback */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Backdrop blur fallback */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .backdrop-blur-md { background-color: rgba(255,255,255,0.95) !important; }
}

/* Lightweight "prose prose-slate" replacement (Tailwind CDN doesn't bundle typography plugin) */
.prose,
.fe-content {
  line-height: 1.8;
  font-size: var(--fe-content-font-size-mobile);
}
@media (min-width: 768px) {
  .prose,
  .fe-content {
    font-size: var(--fe-content-font-size-desktop);
  }
}
.prose p { margin: 0 0 1.25rem 0; color: rgb(51 65 85); } /* slate-700 */
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 800; font-size: 1.5rem; color: rgb(15 23 42); font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.prose blockquote {
  border-left: 4px solid rgb(16 185 129); /* emerald-500 */
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: rgb(71 85 105); /* slate-600 */
  background: rgb(248 250 252); /* slate-50 */
  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
}
.prose a { color: rgb(5 150 105); font-weight: 700; } /* emerald-600 */
.prose a:hover { text-decoration: underline; }
.prose ul { margin: 0 0 1.25rem 1.25rem; list-style: disc; }
.prose ol { margin: 0 0 1.25rem 1.25rem; list-style: decimal; }
.prose strong { color: rgb(15 23 42); }

/* Plugin/shortcode pages: make default fields match theme */
.fe-wp-content :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], textarea, select) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  border-radius: 0.75rem; /* rounded-xl */
  background: rgb(248 250 252); /* slate-50 */
  color: rgb(30 41 59); /* slate-800 */
  font-size: 0.95rem;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.fe-wp-content :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], textarea, select):focus {
  background: #fff;
  border-color: rgb(16 185 129); /* emerald-500 */
  box-shadow: 0 0 0 2px rgba(16,185,129,.20);
}
.fe-wp-content textarea { min-height: 180px; resize: vertical; }

.fe-wp-content :is(button, input[type="submit"], input[type="button"], .button, .wp-element-button) {
  background: rgb(16 185 129); /* emerald-500 */
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
}
.fe-wp-content :is(button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover, .wp-element-button:hover) {
  background: rgb(5 150 105); /* emerald-600 */
}
.fe-wp-content :is(button:active, input[type="submit"]:active, input[type="button"]:active, .button:active, .wp-element-button:active) {
  transform: translateY(1px);
}

.fe-wp-content :is(a) { color: rgb(5 150 105); font-weight: 700; }
.fe-wp-content :is(a:hover) { text-decoration: underline; }

.fe-wp-content :is(label) { font-weight: 700; color: rgb(51 65 85); }
.fe-wp-content :is(input[type="checkbox"], input[type="radio"]) { accent-color: rgb(16 185 129); }

.fe-wp-content table { width: 100%; border-collapse: collapse; }
.fe-wp-content th, .fe-wp-content td { border: 1px solid rgb(226 232 240); padding: .75rem; }
.fe-wp-content th { background: rgb(248 250 252); text-align: left; }

/* Online users widget - integrates WP-UserOnline plugin output */
.fe-online-users .avatar {
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
  display: block;
}


/* Library book cards */
.fe-book-card{
  position: relative;
  border-radius: 1.25rem; /* rounded-2xl */
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(241 245 249); /* slate-100 */
  box-shadow: 0 4px 20px -4px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fe-book-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.12);
  border-color: rgba(16,185,129,.25);
}
.fe-book-cover{
  position: relative;
  aspect-ratio: 3 / 4;
  background: rgb(241 245 249);
  overflow: hidden;
  border-radius: 1.25rem;
  transform: perspective(900px) rotateY(-6deg);
  transform-origin: left center;
}
.fe-book-card:hover .fe-book-cover{
  transform: perspective(900px) rotateY(-2deg) scale(1.01);
}
.fe-book-cover::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,.05));
  opacity:.55;
  z-index:2;
}
.fe-book-cover::after{
  content:"";
  position:absolute;
  right:-14px; top:6%;
  width: 18px; height: 88%;
  background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0));
  filter: blur(8px);
  opacity:.45;
  z-index:1;
}
.fe-book-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.fe-pdf-frame{
  width: 100%;
  height: 78vh;
  border: 1px solid rgb(203 213 225); /* slate-300 */
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.25);
}
@media (max-width: 768px){
  .fe-pdf-frame{ height: 70vh; }
}


/* Pagination */
.page-numbers { display:flex; gap:.5rem; list-style:none; padding:0; margin:0; }
.page-numbers li { list-style:none; }
.page-numbers a, .page-numbers span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  color: rgb(71 85 105);
  font-weight: 800;
  text-decoration:none;
  padding: 0 .75rem;
}
.page-numbers a:hover{
  border-color: rgba(16,185,129,.35);
  color: rgb(5 150 105);
  background: rgba(16,185,129,.06);
}
.page-numbers .current{
  border-color: rgb(16 185 129);
  background: rgba(16,185,129,.10);
  color: rgb(5 150 105);
}


/* AnsPress (Q&A) plugin: make it match theme */
.ap-container, .anspress, .ap-wrap { font-family: inherit; }
.ap-container :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], textarea, select),
.anspress :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], textarea, select) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  background: rgb(248 250 252);
  color: rgb(30 41 59);
  outline: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.ap-container :is(input, textarea, select):focus,
.anspress :is(input, textarea, select):focus{
  background: #fff;
  border-color: rgb(16 185 129);
  box-shadow: 0 0 0 2px rgba(16,185,129,.20);
}
.ap-btn, .anspress .ap-btn,
.ap-container :is(button, input[type="submit"], .button) {
  background: rgb(16 185 129);
  color: #fff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  padding: 0.7rem 1.1rem !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.ap-btn:hover, .anspress .ap-btn:hover { background: rgb(5 150 105); }
.ap-btn:active { transform: translateY(1px); }

.ap-questions, .ap-question-list, .ap-list { margin: 0; padding: 0; }
.ap-question-item, .ap-list-item, .ap-q-item {
  background: #fff;
  border: 1px solid rgb(241 245 249);
  border-radius: 1rem;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,.08);
  padding: 1rem;
  margin-bottom: .75rem;
}


/* Quiz archives: hide any thumbnail blocks the plugin outputs */
body.post-type-archive-quizzes img,
body.post-type-archive-quiz img,
body.post-type-archive-wp_quiz img,
body.post-type-archive-wp_quizzes img {
  /* only hide thumbnails inside cards; keep icons elsewhere */
}


/* Title sizing (controlled from Appearance → Flat Earth Settings) */
.fe-single-title{
  font-size: clamp(1.25rem, 4.8vw, var(--fe-title-font-size-mobile)) !important;
  line-height: 1.12 !important;
}
@media (min-width: 768px){
  .fe-single-title{
    font-size: clamp(2.0rem, 3.2vw, var(--fe-title-font-size-desktop)) !important;
  }
}

/* Full-bleed media inside the main card on mobile */
.fe-hero-media{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
@media (min-width: 640px){
  .fe-hero-media{ margin-left: 0; margin-right: 0; }
}

/* Minor mobile meta size */
@media (max-width: 640px){
  .fe-single-meta{ font-size: 0.92rem !important; }
}