/* =========================================================================
   Blog posts: one style for every article
   - h2 navy with a red bar, h3 red
   - body #333 weight 700; English examples bold navy, translations regular
   - tables, examples, tip boxes, letter tiles and listen buttons
   ========================================================================= */
.tf-post { --tp-navy: #1A1C2A; --tp-red: #C70807; --tp-grey: #EAEBEC; --tp-grey-2: #F6F6F7; --tp-text: #333333; }

.tf-post { --tp-text: #1f1f24; font-size: 17px; line-height: 1.7; color: var(--tp-text); font-weight: 700; }
.tf-post > * + * { margin-top: 0; }
.tf-post p { margin: 0 0 1.05em; }
.tf-post strong, .tf-post b { color: var(--tp-navy); font-weight: 900; }
.tf-post em, .tf-post i { font-style: normal; }

/* Headings */
.tf-post h2 {
	display: flex; align-items: center; gap: 12px;
	margin: 2.2em 0 .9em; padding: 12px 18px 12px 12px; border-radius: 10px; background: var(--tp-grey-2);
	color: var(--tp-red) !important; font-size: clamp(21px, 2.2vw, 24px); font-weight: 900; line-height: 1.25; letter-spacing: -.2px;
}
.tf-post h2::before {
	content: ""; flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 6px 14px rgba(26, 28, 42, .2);
	background: var(--tp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tf-post h2:hover::before { transform: rotate(-8deg) scale(1.08); }
.tf-post > h2:first-of-type { margin-top: 0; }
.tf-post > h2:first-child { margin-top: 0; }
.tf-post h3 { display: flex; align-items: center; gap: 10px; margin: 1.7em 0 .6em; color: var(--tp-navy) !important; font-size: clamp(18px, 1.8vw, 20px); font-weight: 900; line-height: 1.3; }
.tf-post h3::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--tp-red); }
.tf-post h4 { margin: 1.4em 0 .5em; color: #1f1f24 !important; font-size: 18px; font-weight: 900; }

/* Intro */
.tf-post .tf-lead { position: relative; font-size: 18px; color: var(--tp-navy); font-weight: 800; line-height: 1.65; padding-left: 20px; border-left: 4px solid var(--tp-red); margin-bottom: 2.4em; }
.tf-post .tf-lead::after { content: ""; position: absolute; left: -4px; right: 0; bottom: -1.2em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tp-red) 0 90px, var(--tp-grey) 90px); }

/* Lists: red markers, same size everywhere */
.tf-post ul:not([class*="tf-"]), .tf-post ol:not([class*="tf-"]) { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.tf-post ul:not([class*="tf-"]) > li, .tf-post ol:not([class*="tf-"]) > li { position: relative; margin: 0 0 .55em; padding-left: 32px; }
.tf-post ul:not([class*="tf-"]) > li::before { content: ""; position: absolute; left: 8px; top: .6em; width: 9px; height: 9px; border-radius: 3px; background: var(--tp-red); }
.tf-post ol:not([class*="tf-"]) { counter-reset: tfp; }
.tf-post ol:not([class*="tf-"]) > li { counter-increment: tfp; padding-left: 40px; }
.tf-post ol:not([class*="tf-"]) > li::before {
	content: counter(tfp); position: absolute; left: 0; top: .12em; width: 27px; height: 27px; border-radius: 7px;
	display: grid; place-items: center; background: var(--tp-navy); color: #fff; font-size: 16px; font-weight: 900; line-height: 1;
}

/* Example sentences: English bold, translation in brackets, listen button */
.tf-examples { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tf-examples li {
	display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px;
	background: var(--tp-grey-2); border: 2px solid transparent; border-radius: 10px;
	transition: background .25s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.tf-examples li:hover { background: #fff; border-color: var(--tp-red); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(26, 28, 42, .1); }
.tf-examples .tf-ex { flex: 1; min-width: 0; }
.tf-examples strong { color: var(--tp-navy); font-weight: 900; }
.tf-tr { color: var(--tp-text); font-weight: 700; }
.tf-examples .tf-tr { display: block; margin-top: 2px; }
.tf-examples mark, .tf-post mark { background: none; color: var(--tp-red); font-weight: 900; padding: 0; }

/* Listen button */
.tf-say-btn {
	flex-shrink: 0; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
	border: 0; border-radius: 6px; background: var(--tp-navy); color: #fff; cursor: pointer; vertical-align: middle;
	transition: background .2s, transform .2s;
}
.tf-say-btn svg { width: 15px; height: 15px; fill: currentColor; }
.tf-say-btn:hover { background: var(--tp-red); transform: scale(1.08); }
.tf-say-btn.is-speaking { background: var(--tp-red); animation: tfp-pulse 1s ease-in-out infinite; }
.tf-say-btn--sm { width: 28px; height: 28px; }
.tf-say-btn--sm svg { width: 12px; height: 12px; }
.tf-say-inline { white-space: nowrap; }
.tf-say-inline .tf-say-btn { margin-left: 6px; }
.tf-say-note { margin: -.4em 0 1.2em; font-size: 16px; color: #6b6b6b; font-weight: 700; }

/* Tables: clean on desktop, cards on phones */
.tf-table { margin: 0 0 1.6em; border: 1px solid var(--tp-grey); border-radius: 10px; overflow: hidden; }
.tf-table table { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; white-space: normal; }
.tf-table th, .tf-table td { border: 0 !important; border-bottom: 1px solid var(--tp-grey) !important; padding: 12px 16px; text-align: left; vertical-align: middle; background: #fff; }
.tf-table thead th { background: var(--tp-grey) !important; color: var(--tp-navy); font-size: 16px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.tf-table tbody tr:last-child td { border-bottom: 0 !important; }
.tf-table tbody tr:nth-child(even) td { background: var(--tp-grey-2); }
.tf-table tbody tr:hover td { background: #FBEFEF; }
.tf-table td { color: var(--tp-text); font-weight: 700; }
.tf-table td:first-child { color: var(--tp-navy); font-weight: 900; }
.tf-table td .tf-cell { display: flex; align-items: center; gap: 10px; }
.tf-table td .tf-cell > :not(.tf-say-btn) { min-width: 0; overflow-wrap: anywhere; }
.tf-table td .tf-say-btn { flex: none; }
.tf-table caption { caption-side: top; text-align: left; padding: 12px 16px; font-weight: 900; color: var(--tp-navy); background: #fff; }
@media (max-width: 680px) {
	.tf-table { border: 0; border-radius: 0; overflow: visible; }
	.tf-table table, .tf-table tbody, .tf-table tr, .tf-table td { display: block; width: 100%; }
	.tf-table thead { display: none; }
	.tf-table tr { margin: 0 0 12px; border: 2px solid var(--tp-grey); border-radius: 10px; overflow: hidden; }
	.tf-table tbody tr:nth-child(even) td, .tf-table tbody tr:hover td { background: #fff; }
	.tf-table td { padding: 8px 14px; border-bottom: 1px solid var(--tp-grey-2) !important; }
	.tf-table td:first-child { background: var(--tp-grey-2) !important; }
	.tf-table td[data-label]:not(:first-child)::before {
		content: attr(data-label); display: block; margin-bottom: 1px; color: #6b6b6b; font-size: 16px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
	}
}

/* Boxes: tip, note, warning, rule */
.tf-box { position: relative; margin: 0 0 1.6em; padding: 20px 22px 20px 68px; border-radius: 10px; background: var(--tp-grey-2); border: 2px solid transparent; transition: border-color .25s; }
.tf-box:hover { border-color: var(--tp-grey); }
.tf-box::before {
	content: ""; position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 8px;
	background: var(--tp-red) var(--tfp-ic) center / 15px no-repeat;
}
.tf-box p { margin: 0 0 .5em; }
.tf-box > :last-child { margin-bottom: 0; }
.tf-box__title { color: var(--tp-red); font-size: 18px; font-weight: 900; margin-bottom: 4px !important; }
.tf-box--tip { --tfp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80z'/%3E%3C/svg%3E"); }
.tf-box--note { --tfp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23fff' d='M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E"); }
.tf-box--note::before { background-color: var(--tp-navy); }
.tf-box--warn { --tfp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E"); background: #FBEFEF; }
.tf-box--rule { --tfp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z'/%3E%3C/svg%3E"); background: #fff; border: 2px solid var(--tp-navy); }
.tf-box--rule::before { background-color: var(--tp-navy); }

/* Formula: structure of a tense or pattern */
.tf-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.4em; padding: 14px 16px; border-radius: 10px; background: #fff; border: 2px dashed var(--tp-grey); }
.tf-formula span { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: var(--tp-grey); color: var(--tp-navy); font-weight: 900; font-size: 16px; }
.tf-formula span.is-key { background: var(--tp-navy); color: #fff; }
.tf-formula span.is-plus { background: none; color: var(--tp-red); padding: 0 2px; font-size: 20px; }

/* Letter / number tiles */
.tf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin: 0 0 1.6em; }
.tf-tile {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 118px; padding: 14px 8px 12px; border: 1px solid var(--tp-grey); border-radius: 10px; background: #fff;
	font-family: inherit; color: var(--tp-navy); cursor: pointer; text-align: center;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.tf-tile:hover, .tf-tile:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(26, 28, 42, .14); border-color: transparent; }
.tf-tile__big { font-size: 30px; font-weight: 900; line-height: 1.05; }
.tf-tile__sub { color: var(--tp-red); font-size: 16px; font-weight: 900; }
.tf-tile__pt { color: var(--tp-text); font-size: 16px; font-weight: 700; line-height: 1.3; }
.tf-tile::after {
	content: ""; position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 6px;
	background: var(--tp-grey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%231A1C2A' d='M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z'/%3E%3C/svg%3E") center / 11px no-repeat;
	opacity: .8; transition: background-color .2s;
}
.tf-tile.is-speaking { border-color: var(--tp-red); box-shadow: 0 0 0 3px rgba(199, 8, 7, .18); }
.tf-tile.is-speaking::after { background-color: rgba(199, 8, 7, .18); }
.tf-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tf-tiles--wide .tf-tile__big { font-size: 26px; }
@media (max-width: 480px) { .tf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tf-tile { min-height: 100px; } .tf-tile__big { font-size: 28px; } .tf-tiles--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Compare two forms side by side (e.g. American vs British) */
.tf-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 1.6em; }
.tf-compare__card { padding: 20px 22px; border-radius: 10px; background: var(--tp-grey-2); border: 2px solid transparent; transition: border-color .25s, transform .25s; }
.tf-compare__card:hover { border-color: var(--tp-navy); transform: translateY(-3px); }
.tf-compare__card:nth-child(2) h4 { color: var(--tp-red) !important; }
.tf-compare__card h4 { margin: 0 0 8px !important; }
.tf-compare__card p:last-child, .tf-compare__card ul:last-child { margin-bottom: 0; }

/* Practice heading above the quiz */
.tf-post .tf-quiz { margin-top: 2em; }

/* Entrance animations */
.js .tf-post .tf-box, .js .tf-post .tf-table, .js .tf-post .tf-formula, .js .tf-post .tf-compare { opacity: 0; transform: translateY(12px); transition: opacity .4s cubic-bezier(.2, .7, .2, 1), transform .4s cubic-bezier(.2, .7, .2, 1); }
.js .tf-post .is-visible { opacity: 1 !important; transform: none !important; }
.js .tf-post .tf-tiles > .tf-tile { opacity: 0; transform: scale(.85); transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.js .tf-post .tf-tiles.is-visible > .tf-tile { opacity: 1; transform: none; }
.js .tf-post .tf-tiles.is-visible > .tf-tile:hover { transform: translateY(-5px); }

@keyframes tfp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 8, 7, .45); } 50% { box-shadow: 0 0 0 7px rgba(199, 8, 7, 0); } }
@media (prefers-reduced-motion: reduce) {
	.js .tf-post .tf-box, .js .tf-post .tf-table, .js .tf-post .tf-formula, .js .tf-post .tf-compare, .js .tf-post .tf-tiles > .tf-tile { opacity: 1; transform: none; }
}

/* Win over the general body-text rule of the theme */
.tf-content.tf-post .tf-lead { color: var(--tp-navy); font-weight: 800; }
.tf-content.tf-post .tf-box__title { color: var(--tp-red); font-weight: 900; }
.tf-content.tf-post .tf-tr { color: var(--tp-text); font-weight: 700; }
.tf-content.tf-post li { color: var(--tp-text); }
.tf-box::before { background-size: auto 15px; }