/*
Theme Name:   WP Holder Child
Theme URI:    https://www.wpholder.com/
Description:  A child theme for GeneratePress — customized for WP Holder
Author:       WP Holder
Author URI:   https://www.wpholder.com/
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  generatepress-wpholder-child
Tags:         wordpress, tutorials, plugins, beginner's guide
*/
.featured-image {
    display: none;
}
.copyright-bar{display:none;
}
.wp-block-image img {
	padding-bottom: 40px;
}
.wp-block-list li {
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}
.whtoc {
	background: #f8fafc;
    margin: 2rem 0 2.5rem;
}
.site-main .wp-block-group__inner-container {
	padding: 10px;
}
/* ── Post Meta: avatar + name + date + read time ── */
.wpholder-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.wpholder-meta-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}

.wpholder-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpholder-meta-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    line-height: 1.3;
}

.wpholder-meta-name:hover {
    text-decoration: underline;
}

.wpholder-meta-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
    line-height: 1.3;
}

.wpholder-meta-dot {
    color: #ccc;
}
/* ── Yoast Breadcrumbs — Left Accent Bar Style ── */
#breadcrumbs {
  color: #757575;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 18px;
  margin-bottom: 24px;
}

#breadcrumbs a {
	color: #555;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

#breadcrumbs a:hover {
    border-bottom-color: #f46804;
    text-decoration: none;
}

/* Current / last crumb */
#breadcrumbs .breadcrumb_last {
    font-size: 13px;
    font-weight: 500;
    color: #2c2c2a;
}

/* Separator */
#breadcrumbs .breadcrumb-separator {
    color: #b4b2a9;
    font-size: 11px;
    margin: 0 8px;
}
/* ── tag round in posts ── */
footer.entry-meta a {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    border: 1px solid #e0d8d0;
    color: #6b6b6b;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}
/* ── next post and category no display ── */
.site-main .post-navigation, .cat-links {
	display: none;
}
.entry-meta .gp-icon {
  display: none;
}
/* =============================================================================
   AUTHOR BIO BOX — WP Holder Child Theme
   Add this CSS block to your child theme's style.css
   ============================================================================= */

/* ── Outer Box ── */
.wpholder-author-bio-box {
	margin: 1.5rem 0;
	padding: 1.75rem 2rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #f2f2f2;
	font-family: inherit;
}

/* ── Header row (avatar + info side by side) ── */
.wpholder-author-bio-header {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

/* ── Avatar ── */
.wpholder-author-avatar-wrap {
	flex-shrink: 0;
}

.wpholder-author-avatar-wrap a {
	display: block;
	border-radius: 50%;
	overflow: hidden;
	line-height: 0;
}

.wpholder-author-avatar,
.wpholder-author-avatar-wrap img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
	border: 2px solid #e2e8f0;
	transition: border-color 0.2s ease;
}

.wpholder-author-avatar-wrap a:hover img {
	border-color: #1d4ed8;
}

/* ── Info block ── */
.wpholder-author-bio-info {
	flex: 1;
	min-width: 0;
}

.wpholder-author-bio-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 0.25rem;
	line-height: 1;
}

.wpholder-author-bio-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.wpholder-author-bio-name a {
	color: #1e293b;
	text-decoration: none;
}

.wpholder-author-bio-name a:hover {
	color: #1d4ed8;
}

.wpholder-author-bio-description {
	font-size: 0.9rem;
	color: #475569;
	margin: 0 0 0.875rem;
	line-height: 1.65;
}

/* ── Links row ── */
.wpholder-author-bio-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.wpholder-author-all-posts-link,
.wpholder-author-linkedin-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.35rem 0.875rem;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
	line-height: 1;
}

.wpholder-author-all-posts-link {
	background: #1d4ed8;
	color: #fff;
}

.wpholder-author-all-posts-link:hover {
	background: #1e40af;
	color: #fff;
}

.wpholder-author-linkedin-link {
	background: #0a66c2;
	color: #fff;
}

.wpholder-author-linkedin-link:hover {
	background: #004182;
	color: #fff;
}

.wpholder-linkedin-icon {
	fill: currentColor;
	flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.wpholder-author-bio-box {
		padding: 1.25rem 1rem;
	}

	.wpholder-author-bio-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.wpholder-author-bio-links {
		justify-content: center;
	}
}
/* Sidebar recent posts - square thumbnail fix */
.widget-area .wp-widget-recent-posts li,
.widget-area .widget_recent_entries li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid #e5e7eb;
}

.widget-area .wp-widget-recent-posts li:last-child,
.widget-area .widget_recent_entries li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Thumbnail wrapper */
.widget-area .wp-widget-recent-posts .wp-post-image,
.widget-area .widget_recent_entries img,
.sidebar img.attachment-thumbnail,
.widget-area ul li img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 !important;
}

/* Post title next to thumbnail */
.widget-area .wp-widget-recent-posts .wp-widget-recent-posts__data,
.widget-area .widget_recent_entries li a {
    font-size: 12.5px;
    font-weight: 600;
    color: #1a2744;
    line-height: 1.5;
    text-decoration: none;
    flex: 1;
}

.widget-area .wp-widget-recent-posts li a:hover,
.widget-area .widget_recent_entries li a:hover {
    color: #ea580c;
    text-decoration: underline;
}
.widget-area .widget {
    padding-bottom: 10px;
}
/* Post date */
.widget-area .wp-widget-recent-posts .wp-widget-recent-posts__date {
    font-size: 11px;
    color: #6b7280;
    display: block;
    margin-top: 3px;
}
/* ============================================================
   WP Holder — Editorial Red Redesign
   Targets: header border, nav font, breadcrumbs, post title
   Apply via: Appearance > Customize > Additional CSS
   ============================================================ */

/* ----------------------------------------------------------
   1. GOOGLE FONT IMPORT — DM Serif Display + DM Sans
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap');

/* ----------------------------------------------------------
   2. CSS VARIABLES
   ---------------------------------------------------------- */
:root {
  --red:        #E24B4A;
  --red-dark:   #c23a39;
  --red-pale:   #fff0f0;
  --ink:        #111111;
  --muted:      #888888;
  --border:     #e8e8e8;
  --bg:         #ffffff;
  --font-head:  'DM Serif Display', Georgia, serif;
  --font-body:  'DM Sans', system-ui, sans-serif;
}

/* ----------------------------------------------------------
   3. GLOBAL FONT OVERRIDE (nav, body)
   ---------------------------------------------------------- */
body,
.site-header,
.main-navigation,
.nav-menu,
.site-title,
.site-description {
  font-family: var(--font-body);
}

/* ----------------------------------------------------------
   4. SITE HEADER — partial red bottom border
   ---------------------------------------------------------- */


/* Full-width thin light rule */
.site-header {
   border-bottom: 1px solid #e2e8f0;
}
.inside-header {
   padding: 5px 20px;
}

/* ----------------------------------------------------------
   5. SITE TITLE (logo text fallback) — serif, sharp
   ---------------------------------------------------------- */
.site-title,
.site-title a {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--red) !important;
}

/* ----------------------------------------------------------
   6. MAIN NAVIGATION — clean, DM Sans
   ---------------------------------------------------------- */
.main-navigation a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: #555 !important;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--red) !important;
}

/* ----------------------------------------------------------
   7. BREADCRUMBS — slash style, subtle
   ---------------------------------------------------------- */

/* GeneratePress / Yoast / RankMath breadcrumb containers */
.breadcrumb-trail,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb,
.entry-header .breadcrumbs,
nav.breadcrumb {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* All breadcrumb links */
.breadcrumb-trail a,
.breadcrumbs a,
.rank-math-breadcrumb a,
.yoast-breadcrumb a,
nav.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-trail a:hover,
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.yoast-breadcrumb a:hover,
nav.breadcrumb a:hover {
  color: var(--red);
}

/* Replace default separators with slash */
.breadcrumb-trail .sep,
.breadcrumbs .sep,
.rank-math-breadcrumb .separator,
.yoast-breadcrumb span + span::before,
nav.breadcrumb .delimiter {
  content: '/';
  margin: 0 6px;
  color: #ccc;
  font-weight: 400;
}

/* Current (last) breadcrumb item — red, no link */
.breadcrumb-trail .trail-end,
.breadcrumbs .current,
.rank-math-breadcrumb .last,
.yoast-breadcrumb span:last-child {
  color: var(--red);
  font-weight: 600;
}

/* GeneratePress specific breadcrumb separator override */
.grid-container .breadcrumbs .sep {
  color: #ccc;
}

/* ----------------------------------------------------------
   8. POST TITLE — DM Serif Display + vertical red bar
   ---------------------------------------------------------- */
.entry-title,
h1.entry-title,
.page-title,
h1.page-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 400;                 /* Serif display looks best at regular */
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;

  /* Vertical red left-bar accent */
  padding-left: 1rem;
  margin-left: -1.05rem;           /* Pull bar into the gutter */
}

/* Hover: subtle red tint on the title text */
.entry-title:hover {
  color: #222;
}

/* ----------------------------------------------------------
   9. POST META (date / author) — tidy up below title
   ---------------------------------------------------------- */
.entry-meta,
.posted-on,
.byline,
.entry-footer {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #bbb;
  margin-top: 0.4rem;
}

.entry-meta a {
  color: #bbb;
  text-decoration: none;
}

.entry-meta a:hover {
  color: var(--red);
}

/* ----------------------------------------------------------
   10. SUBTLE ENTRY HEADER WRAPPER
   ---------------------------------------------------------- */
.entry-header {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.8rem;
}

/* ----------------------------------------------------------
   11. RESPONSIVE TWEAKS
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Shorter partial border on mobile */
  .site-header::after {
    width: 72px;
  }

  .entry-title,
  h1.entry-title {
    font-size: 1.6rem;
    margin-left: -0.8rem;
    padding-left: 0.8rem;
  }
}
/* ============================================================
   WP HOLDER — FOOTER (GeneratePress Child Theme)
   Uses exact GP HTML classes confirmed from GP source
   ============================================================ */

/* ── 1. FULL FOOTER BACKGROUND ── */
.site-footer {
	background-color: #0f172a !important;
	color: #94a3b8;
}

/* ── 2. FOOTER WIDGETS AREA — outer wrapper ── */
#footer-widgets {
	background-color: #0f172a;
	padding: 20px 0 10px;
}

/* ── 3. INSIDE FOOTER WIDGETS — the flex row ── */
.inside-footer-widgets {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 3rem;
}

.footer-widgets-container {
	padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 5px;
    padding-left: 40px;
}
/* ── 4. INDIVIDUAL WIDGET COLUMNS ── */
.footer-widgets .footer-widget-1 {
	flex: 2;
}

.footer-widgets .footer-widget-2,
.footer-widgets .footer-widget-3,
.footer-widgets .footer-widget-4 {
	flex: 1;
}

/* ── 5. WIDGET TITLES (Tutorials / Plugins / Company) ── */
.footer-widgets .widget-title,
.footer-widgets h2.widget-title,
.footer-widgets .widgettitle {
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

/* ── 6. WIDGET PARAGRAPH TEXT (brand description) ── */
.footer-widgets .widget p,
.footer-widgets .textwidget p {
	font-size: 0.88rem;
	color: #64748b;
	line-height: 1.7;
	margin: 0;
}

.footer-widgets .widget ul li a,
.footer-widgets .widget ul li a:visited {
	color: #64748b !important;
	text-decoration: none !important;
	font-size: 0.88rem !important;
	transition: color 0.2s ease;
}

.footer-widgets .widget ul li a:hover {
	color: #ff6200 !important;
}

/* Remove bullet dots GeneratePress sometimes adds */
.footer-widgets .widget ul li::before {
	display: none !important;
}

/* ── 9. FOOTER BAR (bottom copyright strip) ── */
.site-info,
.inside-site-info {
	background-color: #0f172a !important;
	font-size: 0.82rem;
    color: #475569;
}
.inside-site-info {
	padding-top: 2px;
    padding-bottom: 20px;
	justify-content: inherit;

}
a.generate-back-to-top {
	background-color: #ff6200;
}
/* Social icons */
.footer-socials { display: flex; gap: 8px; margin-top: 16px; }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: #64748b; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.footer-socials a .dashicons { font-size: 18px; width: 18px; height: 18px; }
.footer-socials a.soc-tw:hover { background: #1d9bf0; color: #fff; }
.footer-socials a.soc-yt:hover { background: #ff0000; color: #fff; }
.footer-socials a.soc-fb:hover { background: #1877f2; color: #fff; }

/* ── 14. RESPONSIVE — Tablet ── */
@media (max-width: 900px) {
	.inside-footer-widgets {
		flex-wrap: wrap !important;
	}

	.footer-widgets .footer-widget-1 {
		flex: 0 0 100%;
	}

	.footer-widgets .footer-widget-2,
	.footer-widgets .footer-widget-3,
	.footer-widgets .footer-widget-4 {
		flex: 0 0 calc(33.333% - 2rem);
	}
}

/* ── 15. RESPONSIVE — Mobile ── */
@media (max-width: 540px) {
	.inside-footer-widgets {
		flex-direction: column !important;
		gap: 2rem;
	}

	.footer-widgets .footer-widget-1,
	.footer-widgets .footer-widget-2,
	.footer-widgets .footer-widget-3,
	.footer-widgets .footer-widget-4 {
		flex: 0 0 100%;
	}

	.inside-footer-bar,
	.inside-site-info {
		flex-direction: column !important;
		text-align: center !important;
	}

	.footer-bar .menu,
	.footer-bar ul.menu {
		justify-content: center;
	}
}
/* WP Holder – Variant A: White + Orange Top Bar (300×300) */

.wph-a {
  display: block;
  width: 300px;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  border: 1.5px solid #ffe0cc;
}
.wph-a-topbar {
  background: #ff6200;
  height: 7px;
  width: 100%;
}
.wph-a-inner {
  padding: 18px 22px 14px;
  box-sizing: border-box;
}
.wph-a-badge {
  display: inline-block;
  background: #fff3eb;
  color: #cc4e00;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
  border: 1px solid #ffd0b0;
}
.wph-a h2 {
  color: #1a1a1a;
  font-size: 21px;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1.25;
  margin: 0 0 6px;
}
.wph-a h2 em {
  color: #ff6200;
  font-style: normal;
}
.wph-a .wph-sub {
  color: #666666;
  font-size: 11px;
  margin: 0 0 14px;
  line-height: 1.6;
}
.wph-a .wph-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.wph-a .wph-pill {
  background: #fff3eb;
  color: #cc4e00;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #ffd0b0;
  font-weight: 600;
}
.wph-a .wph-cta {
  display: block;
  background: #ff6200;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.wph-a:hover .wph-cta {
  background: #dd5200;
  transform: translateY(-2px);
}
.wph-a .wph-domain {
  color: #bbbbbb;
  font-size: 9px;
  text-align: center;
  margin-top: 9px;
}
/* WP Holder */
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
  background-color: #fff;
  border: 1px solid #dfdfdf;
  box-sizing: border-box;
  padding: 0px;
}
input[type="search"] {border: none;
}
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: #fff;
  color: #c9c9c9;
}
.wp-block-search__input {
	font-size: 13px;
}