/*
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 premium news/magazine theme for the telecom industry.
Version: 2.0.23
Requires at least: 6.0
Requires PHP: 7.4
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 (Fallback)
====================================================*/

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 {
    /* 1. Dynamic Tech Stack: Replaces basic safe-fallbacks with premium, high-readability system typefaces */
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji");
    
    /* 2. Fluid Scale: Starts at a crisp 16px, scales gracefully for mobile viewports */
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    
    /* 3. The Golden Ratio: Boosts line-height slightly to 1.6 to alleviate reading fatigue on dense data blocks */
    line-height: 1.6;
    
    /* 4. Rich Slate Gray: Softens absolute contrast against bright white backgrounds to prevent eye strain */
    color: #2d3136; 
    
    /* 5. Subpixel Smoothing: Tames harsh rendering engines for self-hosted weights */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Editorial In-Body Links */
.post-content p a, 
.post-content li a {
    color: #1a73e8; /* Google Interactive Blue */
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, 0.4); /* Soft underline */
    text-underline-offset: 3px; /* Drops the line slightly for better readability */
    transition: text-decoration-color 0.2s ease-in-out;
}

.post-content p a:hover, 
.post-content li a:hover {
    text-decoration-color: rgba(26, 115, 232, 1); /* Solid underline on hover */
}

/* Headline Hierarchies */
h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 90px; /* Prevents sticky headers from covering anchor-linked headings */
}

h1 {
    font-family: var(--font-display, 'Roboto', 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: var(--font-display, 'Roboto', 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: var(--font-display, 'Roboto', 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: var(--font-display, 'Roboto', 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 */
}

/* Optimized Article Data Tables */
.post-content table {
    display: block; /* Forces the table to behave as a block container */
    width: 100%;
    overflow-x: auto; /* Enables horizontal swiping on mobile */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    margin: 24px 0;
    font-size: 14px;
    color: #3c4043;
}

.post-content th {
    background: #f8f9fa;
    font-family: var(--font-display, 'Roboto', 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;
}