/*
Theme Name: TelecomByte
Theme URI: https://telecombyte.com
Author: Dipak
Author URI: https://telecombyte.com
Description: A high-performance, SEO-optimized, and E-E-A-T compliant news theme for the telecom industry.
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: telecombyte
Tags: news, magazine, responsive, accessibility-ready, dark-mode
*/

/*
|--------------------------------------------------------------------------
| TelecomByte
|--------------------------------------------------------------------------
|
| Global styles are loaded from:
| assets/css/base.css
| assets/css/components.css
|
| Single post styles are loaded only on single posts:
| assets/css/single.css
|
*/

/*====================================================
= Root
====================================================*/

html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*====================================================
= Accessibility
====================================================*/

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: #f1f1f1;
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*====================================================
= WordPress Alignment Classes
====================================================*/

.alignleft {
    float: left;
    margin: 0 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignwide {
    width: 100%;
}

.alignfull {
    width: 100%;
}

/*====================================================
= WordPress Images
====================================================*/

.wp-caption {
    max-width: 100%;
}

.wp-caption img {
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    font-size: .875rem;
    text-align: center;
    color: #5f6368; /* Google News meta gray */
    margin-top: 8px;
}

.gallery-caption {
    font-size: .875rem;
}

/*====================================================
= Embedded Media
====================================================*/

iframe,
embed,
object,
video {
    max-width: 100%;
}

/*====================================================
= Tables
====================================================*/

table {
    max-width: 100%;
}

/*====================================================
= Mobile Navigation
====================================================*/

@media(max-width:768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
        width: 100%;
    }

    .main-navigation.is-active {
        display: block;
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
    }
}

@media(min-width:769px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/*====================================================
= Typography & UI Components (Google News Style)
====================================================*/

/* Global Body Configurations */
body {
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2124; /* Soft charcoal high-readability primary text */
}

/* Article Copy Paragraphs */
p {
    margin-bottom: 20px;
}

/* Headline Hierarchies */
h1 {
    font-family: 'Google Sans', 'Product Sans', system-ui, sans-serif;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 400; /* Clean, un-bolded H1 modern editorial look */
    color: #1f2124;
    letter-spacing: -0.5px;
}

h2 {
    font-family: 'Google Sans', 'Product Sans', system-ui, sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500; /* Replaces heavy bolding with a sleek medium weight */
    color: #1f2124;
    letter-spacing: -0.2px;
}

h3 {
    font-family: 'Google Sans', 'Product Sans', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #1f2124;
}

/* --- Sidebar Components Optimized for Text Wrapping --- */
.sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0; /* Clear default indenting to optimize space on small screens */
}

.sidebar .widget li {
    margin-bottom: 20px;
    position: relative;
}

/* Prevents text overflow truncation */
.sidebar .widget li a, 
.sidebar .latest-news li a {
    display: inline-block;
    width: 100%;
    font-family: 'Google Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: #1f2124;
    text-decoration: none;
    
    /* Dynamic line wrapping fallback system */
    white-space: normal;   /* Safely forces text wrapping down lines */
    word-wrap: break-word; /* Cuts down long technical strings dynamically if required */
    word-break: break-word; 
    overflow: visible;     /* Ensures layout boundaries aren't cutting off letter shapes */
}

.sidebar .widget li a:hover {
    color: #1a73e8; /* Interactive Google Accent Blue */
}

.sidebar .widget .post-date {
    display: block;
    font-size: 12px;
    color: #5f6368; /* Editorial secondary gray */
    letter-spacing: 0.2px;
    margin-bottom: 4px; /* Keeps meta elements from running tightly into titles */
}

/* Article Data Tables */
.post-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    overflow: hidden;
    margin: 24px 0;
    font-size: 14px;
    color: #3c4043;
}

.post-content th {
    background: #f8f9fa;
    font-family: 'Google Sans', system-ui, sans-serif;
    font-weight: 500;
    padding: 12px 16px;
    text-align: left;
    color: #1f2124;
    border-bottom: 1px solid #e0e3e7;
}

.post-content td {
    padding: 12px 16px;
    border-top: 1px solid #e0e3e7;
    vertical-align: top;
}

.post-content tr:first-child td {
    border-top: none;
}

.post-content tr:hover {
    background: #f8f9fa;
}

/* Interactive Elements */
.comment-extra {
    max-height: 0;
    overflow: hidden;
    transition: .3s;
}

.comment-extra.active {
    max-height: 220px;
}