/*!
Theme Name: LittleKrishna
Theme URI: http://www.minimalaura.com
Author: Bipin Basnet
Author URI: http://www.minimalaura.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: littlekrishna
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

LittleKrishna is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
body {
      font-family: 'Segoe UI', sans-serif;
    }

    .form-section {
      background-image: url('img/babyboy.webp'); /* Change this to your own image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 80px 0;
      position: relative;
    }

    .form-overlay {
      background: rgba(255, 255, 255, 0.9);
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    footer {
      background-color: #f8f9fa;
      padding: 30px 0;
      margin-top: 50px;
    }

    .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: white;
  font-size: 18px;
  border-radius: 4px; /* square with slight rounding */
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

/* Brand Colors */
.social-icon.facebook { background-color: #3b5998; }
.social-icon.twitter { background-color: #1da1f2; }
.social-icon.instagram { background-color: #e1306c; }
.social-icon.pinterest { background-color: #bd081c; }

/* Hover Effect */
.social-icon:hover {
  opacity: 0.9;
  transform: scale(1.1);
}


    .carousel { text-align: center; padding: 20px; }
        .carousel-item { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 10px 0; }
        .blog-section { display: flex; justify-content: center; gap: 20px; padding: 20px; flex-wrap: wrap; }
        .blog-post { width: 200px; text-align: center; }
        .blog-post img { width: 100%; height: auto; }
        footer { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding: 20px; font-size: 14px; }

         .popular-section {
    font-family: 'Poppins', sans-serif;
    padding: 60px 0;
    background-color: #fdfdfd;
  }

  .popular-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 600;
  }

  .baby-names-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  .baby-names-table th {
    background-color: #f3f4f6;
    font-weight: 600;
    color: #333;
  }

  .baby-names-table td {
    vertical-align: middle;
    font-size: 16px;
  }

  .heart-icon {
    color: #ccc;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s ease;
  }

  .heart-icon.liked {
    color: red;
  }
  .heart.liked {
      color: red;
    }
    .heartc.liked {
      color: red;
    }

  .table td,
  .table th {
    padding: 12px 18px;
  }
  .card-img-top {
    height: 280px;
    object-fit: cover;
    width: 100%;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
  }

   .card {
      transition: transform 0.3s;
    }
    .card:hover {
      transform: scale(1.02);
    }
/*Alphabet wise name generator*/

/* === Container === */
.babynames .container {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* === Heading === */
.babynames .container h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #2a6ebd;
  font-weight: 600;
}

/* === Filter Section === */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
  padding: 60px;
  background: #f9fbff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.filters label {
  font-weight: 500;
  margin-right: 5px;
  font-size: 0.95rem;
  color: #444;
}

.filters select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e0;
  outline: none;
  font-size: 0.95rem;
  background: #fff;
  transition: 0.2s;
}

.filters select:focus {
  border-color: #2a6ebd;
  box-shadow: 0 0 0 3px rgba(42, 110, 189, 0.2);
}
.actions {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center horizontally */
  gap: 12px;                /* space between buttons */
  margin-top: 20px;
}
#generateNamesBtn {
  margin-top: 30px;
  width: 400px;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #2a6ebd, #1d4e8e);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
}
@media only screen and (max-width: 600px) {
  #generateNamesBtn {
    width: auto;
  }
}
#generateNamesBtn:hover {
  background: #000;   /* ✅ black on hover */
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

#generateNamesBtn:active {
  transform: scale(0.97);
  background: #222;
}

#generateNamesBtn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}

/* === Results Table === */
table {
  width: 100% !important;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

table thead {
  background: #2a6ebd;
  color: #fff;
}

table thead th {
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
}

table tbody tr {
  transition: background 0.2s;
}

table tbody tr:nth-child(even) {
  background: #f6f9fc;
}

table tbody tr:hover {
  background: #eef6ff;
}

table td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.95rem;
}

table td:first-child {
  font-weight: 600;
  color: #2a6ebd;
}
/*reset button css*/
#resetBtn {
  background: #f1f1f1;
  color: #333;
  font-weight: 600;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  min-width: 140px;
}

#resetBtn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px) scale(1.02);
}

#resetBtn:active {
  background: #222;
  transform: scale(0.97);
}
/*menu item*/
@media (min-width: 992px) {
    #menu-main-menu {
        margin-left: 550px !important; /* space between menu items only on desktop/laptop */
    }
}
/*card title css*/
/* Blog Post Title Hover */
.card-title a {
  color: #212529; /* default dark text */
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.card-title a:hover {
  color: #007bff; /* Bootstrap primary color */
  text-shadow: 0 1px 5px rgba(0, 123, 255, 0.3);
  text-decoration: none;
}

.card-body .btn-primary, .gnt-btn .btn-primary {
  transition: all 0.3s ease-in-out;
}

.card-body .btn-primary:hover, .gnt-btn .btn-primary:hover {
  border-color: #004085;
  background: #000;   /* ✅ black on hover */
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.card-body .btn-primary:focus, .gnt-btn .btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}
.footer a:hover {
  color: #f1c40f !important;
  text-decoration: underline;
}
.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu li a {
    color: #fff;
    text-decoration: none;
}

.footer-menu li a:hover {
    color: #0000FF;
    text-decoration: none;
}
/* Breadcrumb Wrapper 
*/

/* Breadcrumb Items */
/* Breadcrumb Header Section */
.breadcrumb-header {
  width: 100%;
  background: #eef9fd; /* light blue background */
  border-bottom: 1px solid #e0e0e0;
}

.breadcrumb-header > .d-flex {
  max-width: 1400px;   /* Optional: limit max content width */
  margin: 0 auto;
}

.breadcrumb a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.single-title {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}

.last-updated {
  font-size: 0.9rem;
  margin: 0;
}

/* Search box styling */
.search-box {
  max-width: 350px;
  width: 100%;
}

.search-input {
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid #ddd;
}

.search-input:focus {
  border-color: #007bff;
  box-shadow: none;
}

.search-box .btn {
  border-radius: 6px;
  border: 1px solid #ddd;
}

#archive h2 {
  margin: 30px 0;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
/* Blog Post Title Hover */
#archive a {
  color: #212529; /* default dark text */
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

#archive a:hover {
  color: #007bff; /* Bootstrap primary color */
  text-shadow: 0 1px 5px rgba(0, 123, 255, 0.3);
  text-decoration: none;
}
/*Single Page CSS code*/
/* Single Post */
.single-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.single-meta {
  font-size: 0.9rem;
}

.single-meta i {
  color: #007bff;
  margin-right: 5px;
}

.single-featured img {
  border-radius: 10px;
}

.single-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}

.single-tags .badge {
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 20px;
  transition: background 0.3s;
}

.single-tags .badge:hover {
  background: #007bff;
  color: #fff !important;
}

.single-nav a {
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.single-nav a:hover {
  color: #007bff;
}

/* Sidebar */
:root{
  --sidebar-width: 320px;
  --widget-bg: #ffffff;
  --widget-border: rgba(23,23,23,0.06);
  --accent: #6b8cff;         /* change this to match your brand */
  --muted: #6b6f7a;
  --title-color: #1f2937;
  --shadow: 0 6px 20px rgba(31,41,55,0.06);
  --radius: 12px;
  --gutter: 18px;
  --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* container (optional) — ensures consistent spacing inside sidebar area */
.sidebar {
  width: 100%;
  box-sizing: border-box;
  padding: var(--gutter);
  font-family: var(--font-sans);
}

/* each widget as a card */
.sidebar .widget {
  background: var(--widget-bg);
  border: 1px solid var(--widget-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

/* subtle lift on hover/focus (keyboard accessible) */
.sidebar .widget:focus-within,
.sidebar .widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(31,41,55,0.09);
}

/* Widget title styling */
.sidebar .widget .widget-title,
.sidebar .widget .title,
.sidebar h3.widget-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--title-color);
  font-weight: 600;
  padding-bottom: 8px;
}

/* left accent bar */
.sidebar .widget .widget-title::before {
  content: "";
  width: 44px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(107,140,255,0.65));
  border-radius: 6px;
  margin-right: 8px;
  display: inline-block;
  transform-origin: left center;
  opacity: 0.98;
}

/* small subtitle or count — optional */
.sidebar .widget .widget-title small {
  display: block;
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  font-size: .85rem;
}

/* widget content — readable spacing */
.sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sidebar .widget li {
  padding: 10px;
  border-radius: 8px;
  transition: background .15s ease, transform .12s ease;
}

/* link inside item */
.sidebar .widget a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

/* hover effect on each list item */
.sidebar .widget li:hover,
.sidebar .widget li:focus-within {
  background: rgba(107,140,255,0.06);
  transform: translateX(4px);
}

/* meta / small text inside widget items */
.sidebar .widget .meta {
  display: block;
  color: var(--muted);
  font-size: .86rem;
  margin-top: 4px;
}

/* example: search or newsletter input style inside widget */
.sidebar .widget .search-field,
.sidebar .widget input[type="email"],
.sidebar .widget input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(31,41,55,0.06);
  box-sizing: border-box;
  font-size: .95rem;
  margin-bottom: 8px;
}

/* CTA button inside widget */
.sidebar .widget .btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent), #4363ff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(67,99,255,0.18);
}

/* responsive behavior: make the sidebar full width under small screens if needed */
@media (max-width: 900px) {
  :root { --sidebar-width: 100%; }
  .sidebar {
    padding: 14px;
  }
  .sidebar .widget {
    padding: 14px;
    margin-bottom: 14px;
  }
}

/* if you use a 2-column layout in sidebar (eg. tags or mini-widgets) */
.sidebar .widget .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* accessibility: focus styles for keyboard users */
.sidebar .widget a:focus,
.sidebar .widget button:focus,
.sidebar .widget input:focus {
  outline: 3px solid rgba(107,140,255,0.18);
  outline-offset: 2px;
  border-radius: 8px;
}
.wp-social-link a:hover{

}


.tag-cloud a {
  display: inline-block;
  background: #f1f1f1;
  color: #212529;
  padding: 6px 12px;
  margin: 4px 3px;
  font-size: 0.85rem;
  border-radius: 20px;
  transition: all 0.3s;
  text-decoration: none;
}

.tag-cloud a:hover {
  background: #007bff;
  color: #fff !important;
}
.single-featured {
  margin-bottom: 30px;
  overflow: hidden;
}

.single-featured img {
  width: 100%;
  height: 500px;
  border-radius: 8px; /* Optional for rounded corners */
  display: block;
}
/*Comment Section CSS*/
/* ===== Comment Section Container ===== */
#comments.comments-area {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ===== Comment Title ===== */
.comments-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #222;
    text-align: center;
}

/* ===== Comment List ===== */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list li {
    padding: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    gap: 1rem;
}

/* ===== Avatar ===== */
.comment-list li img.avatar {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #ddd;
}

/* ===== Comment Content ===== */
.comment-list li .comment-content {
    flex: 1;
}

.comment-list li .comment-author {
    font-weight: 600;
    color: #111;
    margin-bottom: 0.25rem;
}

.comment-list li .comment-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.comment-list li .comment-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* ===== Reply Link ===== */
.comment-list li .reply a {
    font-size: 0.85rem;
    color: #007bff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.comment-list li .reply a:hover {
    text-decoration: underline;
}

/* ===== Nested Comments ===== */
.comment-list li ul.children {
    margin-left: 80px;
    border-left: 2px solid #eee;
    padding-left: 1rem;
}

/* ===== Comment Form ===== */
.comment-respond {
    margin-top: 3rem;
}

.comment-respond h3.comment-reply-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

.form-submit .submit{
   margin-top: 30px;
  width: 200px;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #2a6ebd, #1d4e8e);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
}

.form-submit .submit:hover {
  background: #000;   /* ✅ black on hover */
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.form-submit .submit:active {
  transform: scale(0.97);
  background: #222;
}

.form-submit .submit:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}

/* ===== No Comments Text ===== */
.no-comments {
    font-style: italic;
    color: #777;
    text-align: center;
    margin-top: 1.5rem;
}
.comment-form-url {
  display: none;
}
/*FAQs Section CSS*/
/* FAQ Section Styling */
#faq h2 {
  font-size: 2rem;
  color: #2c3e50;
}

#faq .accordion-button {
  font-size: 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#faq .accordion-button:not(.collapsed) {
  background-color: #f0f4ff;
  color: #2c3e50;
  box-shadow: none;
}

#faq .accordion-item {
  border: none;
}

#faq .accordion-body {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}
/*wp pagination css*/
.custom-pagination ul {
    display: flex;
    list-style: none;
    gap: 8px;
    justify-content: center;
    padding: 0;
}
.custom-pagination li a,
.custom-pagination li span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    border-radius: 4px;
}
.custom-pagination li span.current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
/*Related Posts CSS*/
.related-posts {
  border-top: 2px solid #eee;
  padding-top: 20px;
}

.card-title {
  font-size: 18px;
  margin: 0;
  line-height: 1.4;
}

.card-title a:hover {
  color: #0073aa; /* WP blue */
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}
/*Author Box*/
.author-card {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.mt-5-custom {
    margin-top: 85px !important;
}


.author-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.author-card .card-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #0073e6;
}

.author-card .card-text {
    font-size: 0.95rem;
    line-height: 1.5;
}
/*mobile view*/
@media only screen and (max-width: 600px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.single-featured img{
    height: 100%;
}
}
/*tools faq*/