/*
 * Plugin Name: What If Tales Frontend Style Override
 * Description: Overrides Twenty Twenty-Five theme colors and design for a child-friendly look.
 */

/* === General Body and Text Colors === */

body {
    background-color: #f9f9f9 !important;
    color: #30336b !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Headings */


h1, h2, h3, h4, h5, h6 {
    color: #30336b !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Links */
a {
    color: #8c7ae6 !important; /* Playful purple for general links */
    text-decoration: none !important; /* Remove underlines by default */
    transition: color 0.2s ease !important;
}

a:hover,
a:focus {
    color: #f0932b !important; /* Vibrant orange on link hover/focus */
    text-decoration: underline !important; /* Add underline on hover for clarity */
}

/* === Header / Site Title / Navigation === */
.site-title a,
.site-description {
    color: #30336b !important; /* Dark blue for site title and description */
}


.main-navigation ul li a {
    color: #30336b !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: #f0932b !important; /* Vibrant orange for navigation hover/active */
}

/* === Buttons === */
.wp-block-button__link,
.wp-element-button,
input[type="button"],
input[type="submit"],
button {
    background-color: #f0932b !important; /* Vibrant orange for buttons */
    color: #ffffff !important; /* White text on buttons */
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    transition: background-color 0.2s ease !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
    background-color: #eb7a00 !important; /* Darker orange on button hover */
    color: #ffffff !important;
}

/* === Forms === */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    border: 1px solid #8c7ae6 !important; /* Playful purple border for form fields */
    padding: 8px 10px !important;
    border-radius: 4px !important;
    color: #30336b !important; /* Dark blue text in fields */
    background-color: #ffffff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #f0932b !important; /* Vibrant orange border on focus */
    box-shadow: 0 0 5px rgba(240, 147, 43, 0.5) !important; /* Soft orange glow on focus */
    outline: none !important;
}

/* === Widgets === */
.widget-title {
    color: #30336b !important; /* Dark blue for widget titles */
    border-bottom: 2px solid #f7d794 !important; /* Sunny yellow border for widget titles */
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
}

.widget ul li a {
    color: #8c7ae6 !important; /* Playful purple for widget links */
}

.widget ul li a:hover {
    color: #f0932b !important; /* Vibrant orange on widget link hover */
}

/* === Content Area === */
.entry-title, .page-title {
    color: #30336b !important; /* Dark blue for post/page titles */
}

.entry-content, .page-content {
    color: #30336b !important; /* Dark blue for main content text */
}

/* Blockquote */
blockquote {
    border-left: 4px solid #f7d794 !important; /* Sunny yellow border for blockquotes */
    color: #6a5acd !important; /* Darker purple for blockquote text */
}

/* Tables (similar to admin table styling) */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
    background: #fff !important;
}

table th, table td {
    border: 1px solid #e0e0e0 !important; /* Lighter border for tables */
    padding: 10px !important;
    text-align: left !important;
}

table th {
    background-color: #8c7ae6 !important; /* Playful purple for table headers */
    color: #ffffff !important; /* White text for table headers */
    font-weight: bold !important;
}

/* === Footer === */
.site-info {
    color: #30336b !important; /* Dark blue for footer text */
    background-color: #f7d794 !important; /* Sunny yellow background for footer */
    padding: 20px !important;
    text-align: center !important;
}

.site-info a {
    color: #6a5acd !important; /* Darker purple for footer links */
}

.site-info a:hover {
    color: #f0932b !important; /* Vibrant orange for footer link hover */
}

/* === Accessibility / Skip Link === */
.screen-reader-text:focus {
    background-color: #f7d794 !important; /* Sunny yellow for accessibility focus background */
    color: #30336b !important; /* Dark blue for accessibility focus text */
}

/* === Specific Twenty Twenty-Five elements or common patterns === */

/* If Twenty Twenty-Five uses a specific background color for content areas */
.wp-site-blocks {
    background-color: #ffffff !important; /* White for main content background */
}

/* Image captions */
.wp-caption-text {
    color: #6a5acd !important; /* Darker purple for image captions */
}

/* Post meta (date, author, categories, tags) */
.entry-meta, .posted-on, .byline, .cat-links, .tags-links, .comments-link {
    color: #6a5acd !important; /* Darker purple for meta info */
    font-size: 0.9em !important;
}

.entry-meta a, .posted-on a, .byline a, .cat-links a, .tags-links a, .comments-link a {
    color: #6a5acd !important; /* Darker purple for meta links */
}

.entry-meta a:hover, .posted-on a:hover, .byline a:hover, .cat-links a:hover, .tags-links a:hover, .comments-link a:hover {
    color: #f0932b !important; /* Vibrant orange on meta link hover */
}

/* Comments section */
#comments {
    color: #30336b !important;
}

.comment-reply-title {
    color: #30336b !important;
}

.comment-list .comment-author .fn {
    color: #8c7ae6 !important; /* Playful purple for comment author names */
}

.comment-list .comment-metadata a {
    color: #6a5acd !important; /* Darker purple for comment date/time links */
}

/* Search widget */
.search-form .search-submit {
    background-color: #f0932b !important; /* Vibrant orange for search button */
    color: #ffffff !important;
}

.search-form .search-submit:hover {
    background-color: #eb7a00 !important; /* Darker orange on search button hover */
}

/* Pagination */
.nav-links .page-numbers {
    background-color: #f7d794 !important; /* Sunny yellow for pagination numbers */
    color: #30336b !important;
    border: 1px solid #f7d794 !important;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    background-color: #f0932b !important; /* Vibrant orange for current/hover pagination */
    color: #ffffff !important;
}

/*** shortcode out put **/

.wit-story-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
}

.wit-story-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
  width: 280px;
}

.wit-story-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.wit-story-card h3 {
  color: #8c7ae6;
  font-family: 'Fredoka', cursive;
  font-size: 1.2em;
}

.wit-story-author {
  color: #6a5acd;
  font-style: italic;
  margin-bottom: 10px;
}


.wit-single-story h2 {
  color: #8c7ae6;
  font-family: 'Fredoka', cursive;
  margin-bottom: 10px;
}

.wit-story-content {
  color: #30336b;
  font-size: 1.1em;
  line-height: 1.6;
}

.wit-story-nav a {
  min-width: 180px;
  text-align: center;
}

.wit-story-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.wit-story-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 20px;
  text-align: center;
  width: 280px;
}

.wit-story-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.wit-story-card h4 {
  color: #8c7ae6;
  font-family: 'Fredoka', cursive;
}

.wit-story-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* On mobile, stack buttons vertically */
@media screen and (max-width: 768px) {
  .wit-story-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .wit-story-nav a.hero-button {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}