/*
Theme Name: TeaLamp Divi Child
Theme URI: https://tealamp.com
Template: Divi
Author: HB
Description: English, left-to-right child theme of Divi for TeaLamp.com. Design ported from the Shomineh Divi child theme + Divi Theme Options CSS (shomineh.com), with all RTL/Persian parts removed or mirrored. Brand art lives in images/brand/ (swap the files there to change the logo everywhere).
Tags: responsive-layout, featured-images, translation-ready
Version: 1.3.0
Text Domain: tealamp-child
*/

/* ---------- TeaLamp base (LTR, English) ---------- */
:root {
	--tl-ink: #2d2d2d;
	--tl-link: #005184;
	--tl-amber: #b36b00;
	--tl-amber-dark: #e0a040;
	--tl-paper: #f7f7f7;
}

body { direction: ltr; text-align: left; }

/* Long English copy: manual hyphens in running text, auto in justified blocks */
.entry-content p, .et_pb_post_content p { hyphens: manual; }

h1, h2, h3, h4, h5, h6 { color: var(--tl-ink); }
a { color: var(--tl-link); }

/* ---------- Ported from Shomineh Divi Theme Options CSS (mirrored to LTR) ---------- */

/* Menu: centred bar, items start-aligned (left in LTR) */
.et_pb_menu.et_pb_text_align_right .et_pb_menu__wrap { justify-content: center; }
.et_pb_menu_1_tb_header.et_pb_menu ul li, ul.sub-menu a { text-align: left !important; }
.main-menu-text a { text-align: left !important; color: black !important; line-height: 1.2em !important; }
.sub-menu a { padding-left: 33px !important; color: #737373 !important; text-align: left !important; }

/* Image captions as a soft overlay */
.wp-caption { position: relative; background-color: transparent; border: 5px; }
.wp-caption-text {
	position: absolute; text-align: center; font-size: 14px !important; font-weight: 600;
	bottom: 0; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;
	border-radius: 0 0 5px 5px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 15%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.6) 85%, rgba(255,255,255,0) 100%);
}

/* "Read more" arrow points right in LTR (Shomineh used a left arrow for RTL) */
.more-link::after { content: ' \2192'; }

ul p { margin-left: 35px; }
ul li, ol li { line-height: 2.1em; height: auto; }

/* ---------- TeaLamp animated logo (v1.3.0): [tealamp_logo] -> images/brand/tealamp-logo-animated-{light,dark}.svg ---------- */
.tealamp-animated-logo { display: block; max-width: 300px; margin: 0 auto; line-height: 0; }
.tealamp-animated-logo picture { display: block; }
.tealamp-animated-logo img { display: block; width: 100%; height: auto; }

/* ---------- Header-only dark scheme (v1.3.0) ----------
 * The site has NO dark mode. This block only darkens the header band when the visitor prefers a dark colour scheme, so the
 * white-lettered logo (tealamp-logo-animated-dark.svg, served by <picture> / the -auto.svg used for Divi's native logo) is legible.
 * Charcoal #2d2d2d = the approved dark logo background. Delete this block AND run add_filter('tealamp_dark_header','__return_false')
 * (functions.php) to go back to an always-light header. Rules are scoped to body.tl-dark-header. */
@media (prefers-color-scheme: dark) {
	/* Theme Builder header (home, categories, topics, magazines, about) */
	body.tl-dark-header .et_pb_row_0_tb_header { background-color: #2d2d2d; }
	body.tl-dark-header .et_pb_row_1_tb_header { background-image: linear-gradient(180deg, #2d2d2d 77%, rgba(45,45,45,0) 77%); }
	body.tl-dark-header .et_pb_divider_0_tb_header:before, body.tl-dark-header .et_pb_divider_1_tb_header:before { border-top-color: #4a4a4a; }
	body.tl-dark-header .et_pb_menu_0_tb_header.et_pb_menu { background-color: #2d2d2d; border-bottom-color: #4a4a4a; }
	body.tl-dark-header .main-menu-text a { color: #f1f1f1 !important; }
	body.tl-dark-header .main-menu-text a:hover { color: #ffffff !important; }
	body.tl-dark-header .et_pb_menu_0_tb_header.et_pb_menu .nav li ul,
	body.tl-dark-header .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,
	body.tl-dark-header .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul { background-color: #383838 !important; }
	body.tl-dark-header .et-l--header .sub-menu a { color: #d4d4d4 !important; }
	body.tl-dark-header .et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a:hover { color: #ffffff !important; }
	body.tl-dark-header .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before,
	body.tl-dark-header .et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button,
	body.tl-dark-header .et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button,
	body.tl-dark-header .et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__cart-button { color: #f1f1f1; }
	/* Divi native header (posts, contact, search, 404): logo = Divi > Theme Options > Logo (tealamp-logo-animated-auto.svg, switches itself) */
	body.tl-dark-header #main-header,
	body.tl-dark-header #main-header .nav li ul,
	body.tl-dark-header #main-header .et_mobile_menu,
	body.tl-dark-header .et-fixed-header#main-header,
	body.tl-dark-header .et-search-form { background-color: #2d2d2d !important; }
	body.tl-dark-header #main-header .nav li ul, body.tl-dark-header #main-header .et_mobile_menu { background-color: #383838 !important; }
	body.tl-dark-header #top-menu a, body.tl-dark-header #main-header .et_mobile_menu li a,
	body.tl-dark-header #main-header .nav li ul a, body.tl-dark-header .mobile_menu_bar:before,
	body.tl-dark-header #et_search_icon:before { color: #f1f1f1 !important; }
	body.tl-dark-header #top-menu li.current-menu-item > a, body.tl-dark-header #top-menu a:hover { color: #ffffff !important; }
	body.tl-dark-header #main-header { box-shadow: none; }
}

/* ---------- Magazine logos on cards / pages ---------- */
.blog-magazine-logo { max-height: 37px !important; max-width: 85px !important; padding-top: 10px; padding-bottom: 10px; }
.no-logo-display .blog-magazine-logo {
	background-color: #eeeeee; width: 115px; margin-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 5px;
}
.magazine-list .blog-magazine-logo { display: none; }
.magazine-posts-block { margin-top: 35px; margin-bottom: 35px; }
.magazine-posts-block .pagination div a { color: #b36b00 !important; }
.list-posts-magazine-logo { width: 100px; height: auto; }

.et_pb_team_member_image { width: 200px !important; margin-right: 30px; }

/* Text blocks are justified, as on Shomineh (LTR) */
.et_pb_blog_grid .post-content, .et_pb_post .post-content-inner { text-align: justify; text-justify: inter-word; hyphens: auto; }

/* ---------- WP Popular Posts grid ---------- */
.wpp-grid p { display: none; }
.wpp-thumbnail { width: 100%; height: auto; border-radius: 3px; margin-bottom: 20px; }
.wpp-post-title { font-size: 16px; line-height: 1.7em; font-weight: 600; color: #3d3d3d; }
.wpp-text-box { display: block; margin-left: 10px; text-align: left; }
.wpp-text-date { font-style: italic; font-size: 13px; font-weight: 300; color: #bababa; padding-top: 8px; }
.wpp-text-view { display: inline; background-color: #f2f2f2; color: #b36b00; padding: 4px 10px; border-radius: 5px; }
.wpp-text-excerpt { font-size: 13px; line-height: 1.3em; margin-top: 15px; margin-bottom: 15px; }
@media only screen and (min-width: 481px) { .wpp-grid, .wpp-list { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } }
@media only screen and (min-width: 768px) { .wpp-grid, .wpp-list { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Ratings ---------- */
.post-ratings img, .post-ratings-loading img, .post-ratings-image img { width: 30px; height: auto; }
.post-rating-block p { text-align: center !important; }
.rating-direction-indicator { font-size: 14px !important; padding-top: 0 !important; margin-top: -20px !important; }

/* ---------- Feedback modal ---------- */
i.la-comments { padding-right: 10px !important; }
#nedwp-fm-modal-textarea-comment { text-align: left !important; }

/* ---------- Category description under archive titles ---------- */
.category-description-text { font-size: 13px; width: 95%; text-align: left; line-height: 1.7em; padding-left: 0; margin-left: 0; }
@media only screen and (max-width: 768px) { div.category-description-text { padding-right: 0 !important; } }

/* ---------- WP-PageNavi ---------- */
.wp-pagenavi a, .wp-pagenavi span {
	color: #000000; background: #f1f3f5; font-size: 1em !important; line-height: 1em; font-weight: bold !important;
	padding: .45em .8em !important; border-radius: 1px; transition: all .5s; margin: 3px;
}
.wp-pagenavi span.current { color: #ffffff !important; background: #ffe3b3 !important; border-radius: 100px; }
.wp-pagenavi a:hover { color: #ffffff !important; background: #fff6e6 !important; }
.wp-pagenavi .pages { background: none; }
.wp-pagenavi { border-top: none; text-align: center; padding-bottom: 25px; }

/* Small post-meta / category pills (TeaLamp addition) */
.tl-pill { display: inline-block; padding: .15em .7em; border-radius: 999px; background: var(--tl-paper); color: var(--tl-amber); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pagination a { color: var(--tl-amber) !important; }

/* ---------- Post template helpers (TeaLamp) ---------- */
.tl-byline, .tl-meta-line { margin: 0; padding: 0; }
.tl-source-link a { color: var(--tl-link); text-decoration: underline; }
.tl-author-bio { color: #444; line-height: 1.7em; }

/* ---------- Layout helpers (v1.2.0) ---------- */
.tl-share { text-align: center; margin: 10px 0; }
.tl-share-label { font-weight: 600; margin-right: 8px; color: #595959; }
.tl-share a { display: inline-block; margin: 3px 4px; padding: 3px 12px; border: 1px solid #2d2d2d; border-radius: 14px; font-size: 13px; color: #2d2d2d; text-decoration: none; }
.tl-share a:hover { background: #2d2d2d; color: #f7f7f7; }
.tl-original-date { font-size: 13px; color: #595959; }
.tl-source-link { font-size: 13px; font-weight: 600; color: #b36b00; }
.main-menu-text .et-menu li a { white-space: nowrap; }

/* ---------- v1.2.1: empty-state + section-title fixes ---------- */
/* v1.2.3: no placeholders. A blog module with no articles is simply not shown (it fills in as posts are published). */
.et_pb_posts .entry:has(.not-found-title), .et_pb_posts .pagination:has(+ .not-found-title) { display: none; }
.et_pb_blog_grid_wrapper:has(.not-found-title), .et_pb_blog_grid:has(.not-found-title) { min-height: 0; }
.et_pb_column_1_3 .et_pb_text_inner h1 { white-space: nowrap; }

/* ---------- v1.2.2: section title row = flex (title sizes to its text, divider line fills the rest; no overlap in LTR) ---------- */
@media only screen and (min-width: 768px) {
	.et_pb_row:has(> .et_pb_column_1_3 .et_pb_text_inner h1):has(> .et_pb_column_2_3 .et_pb_divider) { display: flex; align-items: flex-start; flex-wrap: nowrap; }
	.et_pb_row:has(> .et_pb_column_1_3 .et_pb_text_inner h1):has(> .et_pb_column_2_3 .et_pb_divider)::before,
	.et_pb_row:has(> .et_pb_column_1_3 .et_pb_text_inner h1):has(> .et_pb_column_2_3 .et_pb_divider)::after { display: none; }
	.et_pb_row:has(> .et_pb_column_1_3 .et_pb_text_inner h1):has(> .et_pb_column_2_3 .et_pb_divider) > .et_pb_column_1_3 { flex: 0 0 auto; width: auto !important; margin-right: 0 !important; padding-right: 22px; }
	.et_pb_row:has(> .et_pb_column_1_3 .et_pb_text_inner h1):has(> .et_pb_column_2_3 .et_pb_divider) > .et_pb_column_2_3 { flex: 1 1 auto; width: auto !important; min-width: 0; margin-right: 0 !important; }
	.et_pb_column_1_3 .et_pb_text_inner h1 { text-align: left; }
}

/* ---------- v1.2.4: official TeaLamp card logo is ~2.4:1 (500x207), source logos are 500px wide ---------- */
.blog-magazine-logo.tealamp-magazine-logo { max-width: 104px !important; max-height: 44px !important; width: auto; height: auto; }
.post-magazine-logo, .tl-mag-logo-mod img { height: auto; }
.tl-mag-logo-mod:not(:has(img)) { display: none !important; }
/* v1.2.4b: heights apply to the logo itself (padding outside), so ~2.4:1 and 500px-wide logos are not squashed */
.blog-magazine-logo { box-sizing: content-box; width: auto; height: auto; }

/* ---------- v1.3.1: comments heading is an H2 but keeps the former H1 look; translator line ---------- */
h2#comments.page_title { font-family: "Open Sans", Arial, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.7em; color: #2d2d2d; margin: 0; padding: 0 0 10px; text-transform: none; letter-spacing: normal; }
.tl-translator { display: block; font-size: 13px; line-height: 1.9em; color: #595959; }
/* v1.3.1b: no empty module when an article has no translator */
.tl-translator-mod:not(:has(.tl-translator)) { display: none !important; }
/* v1.3.1c: the magazine-logo module used negative margins sized for the old 250x74 logos; they made the logo overlap the Source line */
.tl-mag-logo-mod { margin-top: 8px !important; margin-bottom: 8px !important; }
.et_pb_text.tl-mag-logo-mod { margin-top: 8px !important; margin-bottom: 8px !important; } /* v1.3.2: beats Divi's per-module .et_pb_text_N_tb_body margins; the img itself has 10px padding top/bottom, so the visible gap is ~18px */

/* ---------- v1.3.2: breadcrumb separator = quiet chevron (the plugin printed ">" in Divi's ETmodules icon font = a circled up-arrow) ---------- */
.lwp-breadcrumbs .et-pb-icon.separator { font-family: inherit !important; font-size: 0 !important; line-height: 1; vertical-align: middle; margin: 0 .35em; }
.lwp-breadcrumbs .et-pb-icon.separator::before { content: "\203A"; font-family: inherit; font-weight: 400; font-size: 20px; line-height: 1; color: #9a9a9a; }
@media (prefers-color-scheme: dark) { body.tl-dark-header .lwp-breadcrumbs .et-pb-icon.separator::before { color: #8a8a8a; } }
/* logo row of the source block: always its own row, never overlapped */
.tl-mag-logo-mod, .tl-mag-logo-mod .et_pb_text_inner { line-height: 0; }
.tl-mag-logo-mod img { display: block; }

/* ---------- v1.4.0: cookie-consent banner (built by JS; charcoal / off-white, Accept and Decline identical) ---------- */
#tl-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2147483000; box-sizing: border-box; max-width: 780px; margin: 0 auto; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: #2d2d2d; color: #f7f7f7; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.28); font: 14px/1.5 "Open Sans", Arial, sans-serif; text-align: left; direction: ltr; }
#tl-consent[hidden] { display: none !important; }
#tl-consent p { flex: 1 1 320px; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; color: #f7f7f7; }
#tl-consent a { color: #e0a040; text-decoration: underline; }
#tl-consent .tl-consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
#tl-consent button { min-width: 96px; margin: 0; padding: 8px 18px; background: #f7f7f7; color: #2d2d2d; border: 2px solid #f7f7f7; border-radius: 4px; font: 600 14px/1.2 "Open Sans", Arial, sans-serif; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
#tl-consent button:hover, #tl-consent button:focus { background: #e0a040; border-color: #e0a040; color: #2d2d2d; outline: none; }
#tl-consent button:focus-visible { outline: 2px solid #e0a040; outline-offset: 2px; }
@media (max-width: 600px) { #tl-consent { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; } #tl-consent .tl-consent-btns { width: 100%; } #tl-consent button { flex: 1 1 0; } }
.tl-cookie-settings { cursor: pointer; }

/* v1.6 (2026-10-11) WCAG AA: contrast tweaks, skip link, visible keyboard focus */
.tl-skip-link { position: absolute; left: 8px; top: -60px; z-index: 2147483001; padding: 10px 16px; background: #2d2d2d; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px; transition: top .15s ease; }
.tl-skip-link:focus { top: 0; outline: 2px solid #e0a040; outline-offset: 2px; }
#main-content:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .et_pb_button:focus-visible { outline: 2px solid #b36b00 !important; outline-offset: 2px; }
.et-l--header a:focus-visible, .et-l--footer a:focus-visible, .tlm-related a:focus-visible { outline-color: #e0a040 !important; }
/* greyed meta lines: #969696 / #bababa -> #666 (5.1-5.7:1) */
.et_pb_post .post-meta, .et_pb_post .post-meta a, .et_pb_posts .post-meta, .et_pb_posts .post-meta a, .post-meta .published, .wpp-text-date { color: #666666 !important; }
.wpp-text-view { color: #9a5b00 !important; }
/* rating prompt (inline #ff6600, 2.9:1) -> #b34700 (5.5:1) */
.single-post .et-l--body [style*="#ff6600"] { color: #b34700 !important; }
/* comment form text #999 on #eee -> #555 */
#commentform input, #commentform textarea { color: #555555; }
#commentform input::placeholder, #commentform textarea::placeholder { color: #666666; opacity: 1; }
/* links inside article text are distinguishable without colour (WCAG 1.4.1) */
.single-post .et_pb_post_content a:not(.et_pb_button):not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: 2px; }

/* v1.6b: beat Divi module-level meta colour (#left-area .et_pb_blog_N .et_pb_post .post-meta) and comment-field colours */
body #page-container .et_pb_posts .et_pb_post .post-meta, body #page-container .et_pb_posts .et_pb_post .post-meta a, body #page-container .et_pb_post .post-meta, body #page-container .et_pb_post .post-meta a { color: #666666 !important; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea { color: #555555 !important; }

/* v1.6c: home orange buttons / read-more links #d66b00,#d17600 (3.3-3.5:1) -> #ad5a00 (4.95:1) */
html body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_0 { background-color: #ad5a00 !important; border-color: #ad5a00 !important; }
html body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_2, html body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_3, html body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_5 { color: #ad5a00 !important; }
html body #page-container .et_pb_post div.post-content a.more-link { color: #ad5a00 !important; }

/* ===== SEO v1 (2026-10-25): home section titles are h2 now (were h1); keep the old h1 look ===== */
.tl-sec-title h2{font-weight:800;line-height:1.6em;padding-bottom:10px}
.tl-sec-title--a h2{font-size:26px}
.tl-sec-title--b h2{font-size:28px;text-align:center;text-shadow:0em 0.1em 0.1em rgba(0,0,0,0.17)}
@media (max-width:980px){.tl-sec-title--a h2{font-size:18px}.tl-sec-title--b h2{text-align:center}}
@media (max-width:767px){.tl-sec-title--a h2{text-align:center}.tl-sec-title--b h2{font-size:31px}}
/* ===== /SEO v1 ===== */
@media (min-width:981px){.tl-sec-title--a h2{white-space:nowrap}}