/*
Theme Name: Tattoo Expert Child
Theme URI: http://example.com/tattoo-expert-child
Description: Custom child theme for Tattoo Expert.
Author: Your Name
Author URI: http://example.com
Template: tattoo-expert
Version: 2.4.1
*/

/* ==========================
Color palette
Deep teal + amber
========================== */
:root {
	--tx-brand: #0E3B43;        /* Deep teal (main dark color) */
	--tx-brand-dark: #0B2E34;   /* Header bar / footer */
	--tx-brand-deeper: #061D21; /* Copyright bar */
	--tx-teal: #14A098;         /* Bright teal highlight */
	--tx-teal-soft: #E6F2F1;    /* Soft teal tint */
	--tx-amber: #D97706;        /* Accent (buttons, links, highlights) */
	--tx-amber-dark: #B45309;   /* Accent hover */
	--tx-amber-soft: #FFF7E6;   /* Soft amber tint */
}

p {
	color: #000 !important;
}

.site-content {
	padding: 0 0 0 !important;
}
.site-info p {
	color: #fff !important;
}
.nav-menu a {
	color: #000 !important;
}

.nav-menu ul li a:active, .nav-menu ul li a:hover {
	color: var(--tx-amber) !important;
}
iframe { width: 100%; }
aside.widget-area a { color: #fff !important; }
.widget ul li a:focus, a:hover { color: var(--tx-amber) !important; }


.tx-article-box p { font-size: 16px;}

@media (max-width: 768px) {
	.site-info p {
		color: #fff !important;
	}
	.custom-logo-link img {
		margin-top: 10px !important;
		margin-bottom: -10px !important;
	}
}

ul.wp-block-list {
	margin-left: 17px;
}

p.has-text-align-center {
	font-size: 24px;
	border: 1px solid var(--tx-brand);
	background: var(--tx-brand);
	border-radius: 8px;
}
p.has-text-align-center strong {
	color: #fff !important;
}

a {
	color: var(--tx-amber);
}
.schema-faq-section strong.schema-faq-question {
	background: var(--tx-teal-soft);
	border-left: 4px solid var(--tx-teal);
	color: var(--tx-brand) !important;
	display: block;
	padding: 8px 12px;
	border-radius: 4px;
}
.schema-faq-question strong {
	color: var(--tx-brand) !important;
}

/* Page banners: no background photos, plain teal gradient */
.tx-hero-section,
.tx-main-banner {
	background: linear-gradient(135deg, #0B2E34 0%, #0E3B43 55%, #11585A 100%) !important;
}

/* Card icon (cards use icons only, no images) */
.tx-card-icon {
	width: 84px;
	height: 84px;
	display: block;
	margin: 0 auto;
}

/* ==========================================================
   Replace the parent theme's red (#ee5051) everywhere
   ========================================================== */

/* Links */
a:hover,
a:focus,
a:active { color: var(--tx-amber-dark) !important; }

/* Buttons */
button,
input[type="button"],
input[type="submit"],
button.search-submit,
#sidebar button.search-submit,
.site-footer button.search-submit,
a.more-link,
#slider .read-btn a,
.article_content .read-btn a {
	background: var(--tx-brand) !important;
	background-color: var(--tx-brand) !important;
	color: #fff;
}
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button.search-submit:hover,
a.more-link:hover {
	background: var(--tx-amber) !important;
	background-color: var(--tx-amber) !important;
	color: #fff !important;
}
/* Keep the search buttons, menu toggle and close buttons on their own styles */
.tx-search-btn { background: var(--tx-amber) !important; }
.tx-search-btn:hover,
.tx-search-btn:focus { background: var(--tx-amber-dark) !important; }

/* Menu */
.nav-menu ul li a:hover,
.nav-menu ul li a:active,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_ancestor > a { color: var(--tx-amber) !important; }
.nav-menu ul ul a:hover { background: var(--tx-teal-soft) !important; color: var(--tx-brand) !important; }
.site-header .navigation-top .menu-scroll-down,
.top-header .social-icons i:hover,
.contact i { color: var(--tx-amber) !important; }

/* Inner page header / breadcrumbs from the parent theme */
#inner-pages-header .header-content { background: var(--tx-brand) !important; }
#inner-pages-header .theme-breadcrumb { border-bottom-color: var(--tx-teal) !important; }
#inner-pages-header .theme-breadcrumb a,
.entry-title a { color: var(--tx-amber) !important; }

/* Parent post/article boxes */
.article_content:hover,
.woocommerce .products li:hover,
#our_service :hover { border-color: var(--tx-teal) !important; }
.article_content:hover h3,
#our_service h2 { color: var(--tx-amber) !important; }
.article_content .metabox,
.metabox1,
.content-topic:hover h3 { background: var(--tx-brand) !important; }

/* Pagination */
.page-numbers.current,
.prev.page-numbers,
.next.page-numbers {
	background: var(--tx-brand) !important;
	background-color: var(--tx-brand) !important;
	color: #fff !important;
}

/* Sidebar widgets */
#sidebar .widget:hover { border-color: var(--tx-teal) !important; }
#sidebar h3.widget-title,
.tx-widget-area h3.widget-title { color: var(--tx-brand) !important; }
#sidebar h3.widget-title { background: var(--tx-brand) !important; color: #fff !important; }
#sidebar .tagcloud a:hover,
.site-footer .tagcloud a:hover { background-color: var(--tx-amber) !important; color: #fff !important; }

/* Footer widgets (light text on the dark teal footer) */
.site-footer h3.widget-title,
.tx-footer .widget-title,
.tx-footer h2,
.tx-footer h3 {
	color: #ffffff !important;
	background: none !important;
	border: 0 !important;
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 16px;
	padding: 0 0 10px;
	position: relative;
}
.site-footer h3.widget-title:after,
.tx-footer .widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--tx-amber) !important;
}
.tx-footer,
.tx-footer p,
.tx-footer li,
.tx-footer .widget,
.tx-footer label,
.tx-footer caption { color: #cfe3e1 !important; }
.tx-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.tx-footer .widget ul li { padding: 5px 0; border: 0; }
.tx-footer a,
.tx-footer .widget a,
aside.widget-area .tx-footer a { color: #cfe3e1 !important; text-decoration: none; }
.tx-footer a:hover,
.tx-footer a:focus,
.tx-footer .widget a:hover { color: #F2B544 !important; }
.tx-footer input[type="search"],
.tx-footer input[type="text"] { background: rgba(255,255,255,0.06); border: 1px solid #1d4a51; color: #fff; }
.tx-footer .tagcloud a { border: 1px solid #1d4a51; padding: 3px 9px; border-radius: 4px; }
.tx-footer .tagcloud a:hover { background: var(--tx-amber) !important; color: #fff !important; }
.tx-disclaimer-box a { color: #F2B544 !important; }
.copyright { background: var(--tx-brand-deeper) !important; }

/* Copyright line */
.tx-site-info .site-info { padding: 0; }
.tx-site-info .site-info p,
.tx-site-info .site-info a { color: #cfe3e1 !important; text-align: left; font-size: 15px; margin: 0; }
.tx-site-info .site-info a:hover { color: #F2B544 !important; }
@media (max-width: 768px) {
	.tx-site-info .site-info p { text-align: center; }
	.tx-footer .widget-column { margin-bottom: 18px; }
}

/* ==========================================================
   Mobile header: hamburger button + slide-out menu
   ========================================================== */
.tx-mobile-btn { display: none; }

@media (max-width: 1000px) {
	.tx-header-inner { position: relative; padding-right: 76px !important; min-height: 64px; justify-content: center; }

	/* Hamburger button */
	.tx-mobile-btn,
	.tx-mobile-btn:hover,
	.tx-mobile-btn:focus,
	.tx-mobile-btn:active {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute !important;
		top: 50% !important;
		right: 16px !important;
		transform: translateY(-50%);
		width: 46px;
		height: 46px;
		padding: 0;
		margin: 0;
		border: 2px solid #d6e6e4 !important;
		border-radius: 12px;
		background: #fff !important;
		color: var(--tx-brand) !important;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		outline: none;
		box-shadow: none;
		transition: border-color .2s ease, background .2s ease;
	}
	.tx-mobile-btn:hover { border-color: var(--tx-teal) !important; background: var(--tx-teal-soft) !important; }
	.tx-mobile-btn:focus-visible { box-shadow: 0 0 0 3px rgba(20, 160, 152, .35); }

	/* Slide-out panel */
	#sidelong-menu.sidenav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 0;
		padding-top: 72px;
		background: var(--tx-brand-dark) !important;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 9999999;
		text-align: left;
		visibility: hidden;
		transition: width .35s ease, visibility .35s ease, box-shadow .35s ease;
	}
	#sidelong-menu.sidenav.open {
		width: min(300px, 85vw);
		visibility: visible;
		border-right: 1px solid rgba(255, 255, 255, .12);
		/* dims the page behind the menu + soft edge shadow */
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), 10px 0 30px rgba(0, 0, 0, .45);
	}
	#sidelong-menu.sidenav::before {
		content: 'Menu';
		position: absolute;
		top: 24px;
		left: 22px;
		color: #9fd6d1;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
	}
	#sidelong-menu .main-menu-navigation { padding: 0; }
	#sidelong-menu ul { list-style: none; margin: 0; padding: 0; }
	#sidelong-menu ul li { display: block; float: none; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; }
	#sidelong-menu ul li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }

	/* Menu links: white text on dark teal */
	#sidelong-menu .nav-menu a,
	#sidelong-menu .nav-menu ul li a {
		display: block;
		padding: 15px 22px !important;
		color: #ffffff !important;
		background: transparent !important;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .02em;
		text-decoration: none !important;
	}
	#sidelong-menu .nav-menu ul li a:hover,
	#sidelong-menu .nav-menu ul li a:focus {
		color: #F2B544 !important;
		background: rgba(255, 255, 255, .06) !important;
		outline: none;
	}
	#sidelong-menu .nav-menu .current_page_item > a,
	#sidelong-menu .nav-menu .current-menu-item > a,
	#sidelong-menu .nav-menu .current_page_ancestor > a {
		color: #F2B544 !important;
		box-shadow: inset 4px 0 0 var(--tx-amber);
	}

	/* Sub-menus */
	#sidelong-menu ul ul { position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; background: rgba(0, 0, 0, .15) !important; box-shadow: none !important; }
	#sidelong-menu ul ul li a { padding-left: 38px !important; font-weight: 500; font-size: 14px; }
	#sidelong-menu .sf-arrows .sf-with-ul:after { display: none; }

	/* Close (X) button */
	#sidelong-menu .closebtn,
	#sidelong-menu a.closebtn.responsive-menu {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 14px;
		right: 14px;
		width: 40px;
		height: 40px;
		padding: 0 !important;
		margin: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .1) !important;
		color: #ffffff !important;
		font-size: 18px;
		line-height: 1;
		text-decoration: none !important;
		box-shadow: none !important;
	}
	#sidelong-menu .closebtn:hover,
	#sidelong-menu .closebtn:focus {
		background: var(--tx-amber) !important;
		color: #ffffff !important;
		outline: none;
	}
	#sidelong-menu .closebtn i { color: inherit !important; }

	body.tx-menu-open { overflow: hidden; }
}

/* Back-to-top button
   Normal: teal diamond with white "TOP" text.
   Hover:  an amber diamond slides out behind it (the parent theme's animation). */
.back-to-top,
.back-to-top:focus,
.back-to-top:hover {
	background: var(--tx-brand) !important;
	color: #fff !important;
	border: 2px solid var(--tx-teal) !important;
}
.back-to-top::after {
	background: transparent !important;
}
.back-to-top:hover::after {
	background: var(--tx-amber) !important;
}
.back-to-top .back-to-top-text { color: #fff !important; }
/* Sit above the bottom call bar when the phone number is switched on */
.tx-has-callbar .show-back-to-top { bottom: 90px; }

/* WooCommerce (only if used) */
a.showcoupon,
.woocommerce-message::before { color: var(--tx-amber) !important; }
.woocommerce-message { border-top-color: var(--tx-amber) !important; }
.woocommerce span.onsale,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
nav.woocommerce-MyAccount-navigation ul li { background: var(--tx-brand) !important; }

/* ==========================================================
   Sticky "In This Guide" table of contents (desktop)
   ========================================================== */
@media (min-width: 992px) {
	.tx-main-grid { align-items: start; }
	.tx-main-grid > .tx-sidebar {
		position: sticky !important;
		top: 100px;
		align-self: start;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
	.tx-main-grid > .tx-sidebar .tx-widget-box { position: static !important; }
}
/* Highlight the section you are reading */
.tx-sidebar-list a.is-active {
	background: var(--tx-teal-soft) !important;
	color: var(--tx-brand) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--tx-amber);
}
/* Jump links stop below the sticky header */
.tx-article-box h2,
.tx-article-box h3 { scroll-margin-top: 110px; }

/* ==========================================================
   Responsive safety
   ========================================================== */
img,
svg,
video,
iframe { max-width: 100%; }
.tx-article-box table { display: block; overflow-x: auto; }
.tx-article-box { overflow-wrap: anywhere; }
@media (max-width: 600px) {
	.tx-block { padding: 40px 16px !important; }
	.tx-block-title { font-size: 1.45rem !important; }
	.tx-hero-section { padding: 45px 16px !important; }
	.tx-hero-section h1,
	.tx-banner-inner h1 { font-size: 1.75rem !important; }
	.tx-main-grid { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}