/*
Theme Name: Taifa Times
Theme URI: https://taifatimes.co.ke/
Description: Taifa Times child theme for ColorMag.
Author: Taifa Times
Template: colormag
Version: 0.2.6
Text Domain: taifa-times
*/

:root {
  --taifa-navy: #072d4e;
  --taifa-red: #df1f2d;
  --taifa-ink: #081b2f;
  --taifa-paper: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--taifa-paper); color: var(--taifa-ink); font-family: Georgia, 'Times New Roman', serif; }
body a { color: inherit; text-decoration: none; }
body a:hover { color: var(--taifa-red); }
body button { cursor: pointer; }
.tt-container { width: min(100% - 48px, 1240px); margin-inline: auto; }
.tt-header { background: #fff; }
.tt-utility { display: flex; justify-content: space-between; align-items: center; height: 26px; font: 600 11px/1 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #24364a; }
.tt-utility-right { display: flex; gap: 22px; align-items: center; }
.tt-search-toggle { display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--taifa-ink); }
.tt-search-toggle .dashicons { font-size: 22px; width: 22px; height: 22px; }
.tt-brand-row { display: flex; align-items: center; justify-content: center; min-height: 96px; position: relative; }
.tt-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--taifa-navy); white-space: nowrap; }
.tt-brand:hover { color: var(--taifa-navy); }
.tt-brand img { display: block; width: 101px; height: 94px; object-fit: contain; }
.tt-wordmark { display: flex; flex-direction: column; transform: translateY(2px); }
.tt-wordmark > span { display: flex; align-items: center; gap: 11px; font: 700 clamp(36px, 5.05vw, 69px)/.95 Georgia, 'Times New Roman', serif; letter-spacing: -.06em; }
.tt-wordmark i { display: block; width: 5px; height: .9em; background: var(--taifa-red); margin-inline: 2px; }
.tt-wordmark small { display: block; align-self: center; margin-top: 7px; font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .39em; }
.tt-search-form { display: flex; position: absolute; top: 26px; right: 0; z-index: 10; align-items: center; gap: 7px; background: white; padding: 10px; box-shadow: 0 8px 25px #08203b2e; }
.tt-search-form[hidden] { display: none; }
.tt-search-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tt-search-form input { min-width: 240px; padding: 9px; border: 1px solid #bac4cc; font: 14px Arial, sans-serif; }
.tt-search-form button { padding: 10px 16px; border: 0; background: var(--taifa-navy); color: white; font: 700 12px Arial, sans-serif; }
.tt-nav { position: relative; z-index: 20; background: var(--taifa-red); color: white; }
.tt-nav.is-scrolled { position: fixed; top: 0; left: 0; right: 0; }
.tt-header.has-fixed-nav { padding-bottom: 43px; }
.tt-nav .tt-container { display: flex; align-items: stretch; gap: 74px; min-height: 43px; padding-inline: 50px; }
.tt-nav-brand { display: none !important; align-items: center !important; border-bottom: 0 !important; padding: 0 !important; }
.tt-nav-brand img { display: block; width: 38px; height: 38px; object-fit: contain; }
.tt-nav.is-scrolled .tt-container { gap: 34px; }
.tt-nav.is-scrolled .tt-nav-brand { display: inline-flex !important; }
.tt-nav a { display: inline-flex; align-items: center; color: white; font: 700 14px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; border-bottom: 3px solid transparent; padding-top: 3px; }
.tt-nav a:hover, .tt-nav a[aria-current="page"] { color: white; border-bottom-color: #fff; }
.tt-home { padding-block: 7px 36px; }
.tt-breaking { position: relative; left: 50%; width: 100vw; margin-left: 0; transform: translateX(-50%); display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; min-height: 38px; background: #f0f3f7; font-family: Arial, Helvetica, sans-serif; color: #283748; overflow: hidden; }
.tt-breaking-label { position: relative; z-index: 1; background: var(--taifa-red); color: #fff; height: 38px; display: flex; align-items: center; padding-inline: 20px; font-size: 17px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.tt-breaking-viewport { min-width: 0; overflow: hidden; }
.tt-breaking-track { display: flex; width: max-content; }
.tt-breaking[data-breaking-motion="scroll"] .tt-breaking-track { animation: tt-breaking-scroll var(--tt-breaking-duration, 45s) linear infinite; }
.tt-breaking-group { display: flex; flex-direction: row; direction: ltr; align-items: center; flex: none; }
.tt-breaking-item { display: inline-flex; align-items: center; flex: none; height: 38px; white-space: nowrap; }
.tt-breaking-item::before { content: '•'; color: var(--taifa-red); font-size: 18px; }
.tt-breaking-item a { padding: 0 15px; font-size: 15px; }
.tt-breaking-item time { padding-right: 24px; color: #536477; font-size: 12px; }
.tt-breaking:hover .tt-breaking-track, .tt-breaking:focus-within .tt-breaking-track { animation-play-state: paused; }
.tt-breaking[data-breaking-motion="static"] .tt-breaking-viewport { overflow-x: auto; }
.tt-breaking:focus-within .tt-breaking-viewport { overflow-x: auto; }
@keyframes tt-breaking-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tt-breaking-distance, 0px))); } }
.tt-lead-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 21px; padding-top: 15px; }
.tt-carousel { min-width: 0; position: relative; }
.tt-slide[hidden] { display: none; }
.tt-hero-image { display: block; overflow: hidden; height: 350px; background: #e6e9eb; }
.tt-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-hero-text { padding: 11px 4px 0; }
.tt-kicker { display: block; color: #c71928; font: 700 12px/1.2 Arial, Helvetica, sans-serif; text-transform: uppercase; }
.tt-hero-text h1 { margin: 3px 0 0; max-width: 810px; font: 700 clamp(38px, 4.15vw, 54px)/.96 Georgia, 'Times New Roman', serif; letter-spacing: -.044em; }
.tt-hero-text p { margin: 4px 0 0; max-width: 780px; font: 20px/1.12 Georgia, 'Times New Roman', serif; color: #243041; }
.tt-carousel-controls { position: absolute; right: 14px; top: 306px; display: flex; align-items: center; gap: 10px; background: #072d4edb; color: white; padding: 3px 7px; }
.tt-carousel-controls > button { border: 0; background: transparent; color: #fff; font: 26px/1 Arial, sans-serif; padding: 2px 5px; }
.tt-carousel-controls > .tt-carousel-toggle { border-left: 1px solid #ffffff80; padding: 5px 4px 5px 10px; font: 700 11px/1 Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.tt-carousel-dots { display: flex; align-items: center; gap: 7px; }
.tt-carousel-dots button { width: 7px; height: 7px; padding: 0; border: 1px solid white; border-radius: 50%; background: transparent; }
.tt-carousel-dots button[aria-current="true"] { background: white; }
.tt-rail { border-left: 1px solid #e3e6ea; padding-left: 8px; }
.tt-rail-story { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 11px; padding: 8px 0 10px; border-top: 1px solid #d6dce3; min-height: 126px; }
.tt-rail-story:first-child { padding-top: 8px; }
.tt-rail-image { display: block; height: 113px; overflow: hidden; background: #e6e9eb; }
.tt-rail-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-rail-story h2 { margin: 4px 0 0; font: 700 clamp(18px, 1.65vw, 23px)/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; }
.tt-story-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 9px; border-top: 1px solid #ccd3dc; border-bottom: 1px solid #ccd3dc; }
.tt-strip-story { display: grid; grid-template-columns: 104px 1fr; gap: 10px; min-width: 0; padding: 8px 13px 8px 0; }
.tt-strip-story + .tt-strip-story { border-left: 1px solid #dbe0e6; padding-left: 12px; }
.tt-strip-image { display: block; width: 104px; height: 76px; background: #e6e9eb; overflow: hidden; }
.tt-strip-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-strip-story h2 { margin: 4px 0 0; font: 15px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.tt-strip-story .tt-kicker { font-size: 10px; }
.tt-empty { padding: 60px 0; }
.tt-footer { border-top: 1px solid #d6dce3; margin-top: 32px; color: #586879; font: 12px/1.5 Arial, sans-serif; }
.tt-footer .tt-container { padding-block: 26px 20px; }
.tt-footer-social h2 { margin: 0 0 14px; color: var(--taifa-navy); font: 700 23px/1.1 Georgia, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: .025em; }
.tt-social-links { display: flex; gap: 12px; }
.tt-social-links a { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--taifa-navy); color: var(--taifa-navy); transition: background-color .2s, border-color .2s, color .2s; }
.tt-social-links a:hover, .tt-social-links a:focus-visible { background: var(--taifa-navy); border-color: var(--taifa-navy); color: #fff; }
.tt-social-links a:focus-visible { outline: 2px solid var(--taifa-red); outline-offset: 3px; }
.tt-social-links svg { display: block; width: 19px; height: 20px; fill: currentColor; }
.tt-footer-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #d6dce3; }
.tt-footer-meta span:first-child { color: var(--taifa-navy); font-weight: 800; letter-spacing: .08em; }
.tt-article { max-width: 1050px; padding-top: 40px; }
.tt-article-header { max-width: 850px; margin-inline: auto; }
.tt-article-header h1 { margin: 8px 0 12px; font: 700 clamp(40px, 5.5vw, 70px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; }
.tt-article-excerpt { margin: 0 0 18px; font: 22px/1.3 Georgia, serif; color: #364657; }
.tt-article-meta { font: 12px/1.5 Arial, sans-serif; color: #687b8e; text-transform: uppercase; letter-spacing: .06em; }
.tt-article-figure { margin: 27px 0; }
.tt-article-figure img { width: 100%; max-height: 560px; object-fit: cover; }
.tt-article-body { max-width: 730px; margin: 30px auto 80px; font: 21px/1.6 Georgia, serif; }
.tt-article-body p { margin: 0 0 1.3em; }
.tt-archive { padding-block: 38px; }
.tt-archive > header h1 { font: 700 50px/1 Georgia, serif; margin: 8px 0 30px; }
.tt-archive-list { max-width: 950px; }
.tt-archive-story { display: grid; grid-template-columns: 230px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid #d6dce3; }
.tt-archive-story img { width: 230px; height: 155px; object-fit: cover; }
.tt-archive-story h2 { font: 700 31px/1.05 Georgia, serif; margin: 5px 0 7px; }
.tt-archive-story p { font: 17px/1.3 Georgia, serif; margin: 0 0 8px; }
.tt-archive-story time { font: 11px Arial, sans-serif; color: #687b8e; }
@media (max-width: 1050px) {
  .tt-lead-grid { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); }
  .tt-hero-image { height: 330px; }
  .tt-carousel-controls { top: 286px; }
  .tt-rail-story { grid-template-columns: 115px 1fr; min-height: 112px; }
  .tt-rail-image { height: 92px; }
  .tt-rail-story h2 { font-size: 18px; }
  .tt-story-strip { grid-template-columns: repeat(2, 1fr); }
  .tt-strip-story:nth-child(3) { border-left: 0; }
}
@media (max-width: 740px) {
  .tt-container { width: min(100% - 28px, 1240px); }
  .tt-utility { height: 25px; font-size: 9px; }
  .tt-utility-right { gap: 8px; }
  .tt-brand-row { min-height: 78px; }
  .tt-header.has-fixed-nav { padding-bottom: 39px; }
  .tt-brand { gap: 5px; }
  .tt-brand img { width: 66px; height: 65px; }
  .tt-wordmark > span { font-size: clamp(29px, 7.7vw, 48px); gap: 5px; }
  .tt-wordmark i { width: 3px; margin-inline: 1px; }
  .tt-wordmark small { font-size: 7px; letter-spacing: .31em; margin-top: 5px; }
  .tt-nav .tt-container { gap: clamp(12px, 4vw, 26px); padding-inline: 14px; min-height: 39px; }
  .tt-nav a { font-size: 12px; }
  .tt-breaking { grid-template-columns: max-content minmax(0, 1fr); min-height: 34px; }
  .tt-breaking-label { height: 34px; padding-inline: 8px; font-size: 11px; letter-spacing: .04em; }
  .tt-breaking-item { height: 34px; }
  .tt-breaking-item a { padding-inline: 10px; font-size: 12px; }
  .tt-breaking-item time { font-size: 11px; padding-right: 14px; }
  .tt-lead-grid { display: block; padding-top: 10px; }
  .tt-hero-image { height: clamp(220px, 57vw, 390px); }
  .tt-carousel-controls { top: calc(clamp(220px, 57vw, 390px) - 44px); bottom: auto; transform: none; }
  .tt-hero-text h1 { font-size: clamp(34px, 8vw, 52px); }
  .tt-hero-text p { font-size: 17px; line-height: 1.22; }
  .tt-rail { margin-top: 20px; border-left: 0; padding: 0; }
  .tt-rail-story { grid-template-columns: 35% 1fr; gap: 13px; }
  .tt-rail-image { height: 100px; }
  .tt-rail-story h2 { font-size: 20px; }
  .tt-strip-story { grid-template-columns: 86px 1fr; }
  .tt-strip-image { width: 86px; height: 72px; }
  .tt-article { padding-top: 25px; }
  .tt-article-header h1 { font-size: 40px; }
  .tt-article-excerpt { font-size: 19px; }
  .tt-article-body { font-size: 18px; }
  .tt-archive-story { grid-template-columns: 110px 1fr; gap: 12px; }
  .tt-archive-story img { width: 110px; height: 96px; }
  .tt-archive-story h2 { font-size: 21px; }
  .tt-archive-story p { display: none; }
}
@media (max-width: 480px) { .tt-story-strip { grid-template-columns: 1fr; } .tt-strip-story + .tt-strip-story { border-left: 0; border-top: 1px solid #dbe0e6; padding-left: 0; } .tt-footer-meta { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .tt-breaking[data-breaking-motion="scroll"] .tt-breaking-track { animation: none; }
  .tt-breaking-viewport { overflow-x: auto; }
}