/*
 Theme Name:   Precinho Tech
 Theme URI:    https://precinhotech.com.br
 Description:  Tema filho do GeneratePress para o blog Precinho Tech — notícias, reviews e comparativos de tecnologia com design light body + dark header inspirado no TecMundo.
 Author:       Precinho Tech
 Author URI:   https://precinhotech.com.br
 Template:     generatepress
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  precinho-tech-child
*/

/* ==========================================================================
   CSS Custom Properties — Design Tokens
   ========================================================================== */

:root {
    /* Light Body Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card: #ffffff;

    /* Dark Header */
    --header-bg: #1a1a2e;
    --header-text: #ffffff;

    /* Dark Background (Footer) */
    --bg-dark: #1a1a2e;

    /* Typography Colors */
    --text-primary: #1a1a2e;
    --text-secondary: #6b7280;

    /* Accent Colors (TecMundo-inspired) */
    --accent-primary: #2b65f5;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;

    /* Category Badge Colors */
    --badge-noticias: #2b65f5;
    --badge-lancamentos: #7c3aed;
    --badge-reviews: #10b981;
    --badge-comparativos: #f59e0b;
    --badge-ofertas: #ef4444;

    /* Borders & Shadows */
    --border-color: #e5e7eb;
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.3);

    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Typography Scale (fluid) */
    --font-body: clamp(14px, 1vw + 12px, 16px);
    --font-h1: clamp(1.25rem, 2vw + 1rem, 2.25rem);
    --font-h2: clamp(1.125rem, 1.5vw + 0.875rem, 1.75rem);
    --font-h3: clamp(1rem, 1vw + 0.75rem, 1.375rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 250ms ease;

    /* Layout */
    --header-height-desktop: 64px;
    --header-height-mobile: 56px;
    --content-max-width: 1200px;
    --sidebar-width: 320px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* ==========================================================================
   Base Reset & Normalization — Light Theme
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-body);
    line-height: 1.7;
    margin: 0;
    padding-top: var(--header-height-desktop);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
    body {
        padding-top: var(--header-height-mobile);
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Typography — Fluid Scaling
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: 1.125rem;
}

p {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: #1d4ed8;
}

/* Global focus-visible indicator for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

strong, b {
    color: var(--text-primary);
    font-weight: 700;
}

blockquote {
    border-left: 4px solid var(--accent-primary);
    background-color: var(--bg-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-style: italic;
}

code, pre {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.875rem;
}

code {
    padding: 2px 6px;
}

pre {
    padding: var(--spacing-md);
    overflow-x: auto;
}

/* ==========================================================================
   Layout — GeneratePress Overrides
   ========================================================================== */

/* Force dark header background over GeneratePress defaults */
.site-header,
#site-header,
header.site-header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/* Force menu link colors over GeneratePress defaults */
.site-header .primary-menu > li > a,
.site-header .site-header__nav-item > a,
#site-header .primary-menu > li > a {
    color: var(--header-text) !important;
}

.site-header .primary-menu > li > a:hover,
.site-header .primary-menu > li.current-menu-item > a,
#site-header .primary-menu > li > a:hover {
    color: var(--accent-primary) !important;
}

/* Force hide desktop nav on mobile (override GeneratePress) */
@media (max-width: 768px) {
    .site-header__nav,
    #site-navigation,
    .site-header nav.site-header__nav,
    nav.site-header__nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .site-header__nav.is-active,
    #site-navigation.is-active {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Force vertical layout and consistent alignment in mobile menu */
    .site-header__nav.is-active .primary-menu,
    #site-navigation.is-active .primary-menu,
    .site-header__nav.is-active ul,
    #site-navigation.is-active ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .site-header__nav.is-active .primary-menu > li,
    #site-navigation.is-active .primary-menu > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .site-header__nav.is-active .primary-menu > li > a,
    #site-navigation.is-active .primary-menu > li > a {
        display: block !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: var(--header-text) !important;
        text-align: left !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        height: auto !important;
    }

    .site-header__nav.is-active .primary-menu > li:last-child > a,
    #site-navigation.is-active .primary-menu > li:last-child > a {
        border-bottom: none !important;
    }

    /* Mobile overlay menu — vertical list with consistent alignment */
    .mobile-nav-overlay__menu {
        display: flex !important;
        flex-direction: column !important;
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .mobile-nav-overlay__menu > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-nav-overlay__menu > li:last-child {
        border-bottom: none !important;
    }

    .mobile-nav-overlay__menu > li > a {
        display: flex !important;
        align-items: center !important;
        padding: var(--spacing-md) var(--spacing-sm) !important;
        font-size: 1.125rem !important;
        font-weight: 500 !important;
        color: var(--header-text) !important;
        text-decoration: none !important;
        min-height: 44px !important;
    }

    .mobile-nav-overlay__menu > li > a:hover {
        color: var(--accent-primary) !important;
    }
}

.site-content {
    background-color: var(--bg-primary);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    width: 100%;
}

/* Homepage has its own container — remove site-content constraints */
.home .site-content,
.page-template-default .site-content {
    padding-top: 0;
}

.home .site-content .homepage {
    max-width: none;
    padding: 0;
}

/* Ensure article content fills available width */
.inside-article {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-xl);
    width: 100%;
}

/* Entry content should use full width */
.entry-content,
.post-content,
.page-content {
    width: 100%;
    max-width: 100%;
}

/* GeneratePress containers — ensure proper width and centering */
.grid-container {
    max-width: var(--content-max-width) !important;
    margin: 0 auto !important;
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
    width: 100% !important;
}

.site-main,
.content-area {
    width: 100%;
}

/* Single post featured image — constrain size */
.single .post-image,
.single .featured-image,
.single .wp-post-image,
.single .inside-article > .post-image img,
.single .entry-content > .wp-block-image img,
.page .post-image,
.page .featured-image {
    max-height: 480px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* GeneratePress specific content containers */
.grid-container,
.site-main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Sidebar */
.widget {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.widget-title {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-primary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
button,
input[type="submit"] {
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
    text-align: center;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #1d4ed8;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

.btn-secondary:hover {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    transition: border-color var(--transition-fast);
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 101, 245, 0.2);
}

::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
}

th, td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    text-align: left;
}

th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

td {
    background-color: var(--bg-card);
    color: var(--text-secondary);
}

tr:hover td {
    background-color: var(--bg-secondary);
}

/* ==========================================================================
   Images & Media
   ========================================================================== */

.post-image,
.featured-image {
    border-radius: var(--radius-md);
    overflow: hidden;
}

figure {
    margin: var(--spacing-lg) 0;
}

figcaption {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: var(--spacing-sm);
    text-align: center;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-accent {
    color: var(--accent-primary);
}

.text-muted {
    color: var(--text-secondary);
}

.bg-card {
    background-color: var(--bg-card);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

/* ==========================================================================
   Responsive Utilities — Overflow Prevention
   Requirement 11.4: No horizontal scroll from 320px to 2560px
   ========================================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

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

pre,
code {
    overflow-x: auto;
    word-wrap: break-word;
}

/* ==========================================================================
   Readable Line Length — Desktop
   Requirement 11.4: Line length ≤80 characters on desktop
   ========================================================================== */

@media (min-width: 769px) {
    .entry-content p,
    .entry-content li,
    .entry-content blockquote,
    .inside-article p,
    .inside-article li,
    .inside-article blockquote,
    .single .post-content p,
    .single .post-content li {
        max-width: 70ch;
    }
}

/* Mobile: text uses full available width with symmetric padding */
@media (max-width: 768px) {
    .entry-content p,
    .entry-content li,
    .entry-content blockquote,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content ul,
    .entry-content ol,
    .entry-content div,
    .inside-article p,
    .inside-article li,
    .inside-article blockquote,
    .inside-article h1,
    .inside-article h2,
    .inside-article h3,
    .inside-article h4,
    .inside-article ul,
    .inside-article ol,
    .single .post-content p,
    .single .post-content li,
    .single .post-content ul,
    .single .post-content ol {
        max-width: 100% !important;
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Lists: keep bullets inside the content area */
    .entry-content ul,
    .entry-content ol,
    .inside-article ul,
    .inside-article ol,
    .post-content ul,
    .post-content ol {
        padding-left: 1.25rem !important;
        list-style-position: inside !important;
        box-sizing: border-box !important;
    }

    /* Nested lists: reduce padding further */
    .entry-content ul ul,
    .entry-content ol ol,
    .entry-content ul ol,
    .entry-content ol ul,
    .inside-article ul ul,
    .inside-article ol ol,
    .inside-article ul ol,
    .inside-article ol ul {
        padding-left: 1rem !important;
    }

    .entry-content li,
    .inside-article li,
    .post-content li {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }

    /* Force ALL text to wrap within its container */
    .site-content *,
    .entry-content *,
    .inside-article *,
    .post-content * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Prevent any horizontal overflow on mobile */
    html, body {
        overflow-x: hidden !important;
    }

    .site-content {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Reset ALL containers to zero padding, then apply once at outermost level */
    .site-content,
    .site-content .grid-container,
    .site-content .content-area,
    .site-content .site-main,
    .site-content .inside-article,
    .site-content .entry-content,
    .grid-container,
    .content-area,
    .site-main,
    .inside-article,
    .entry-content,
    .post-content,
    article,
    .page-content,
    .generate-columns-container,
    .page-hero,
    .paging-navigation {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Apply padding ONLY at the outermost content wrapper */
    .site-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Images should also fill the width */
    .entry-content img,
    .inside-article img,
    .post-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ==========================================================================
   Touch Target Sizing — Mobile
   Requirement 11.2: Min 44×44px touch targets with 8px spacing
   ========================================================================== */

@media (max-width: 768px) {
    /* Buttons and submit inputs */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-width: 44px;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Links in navigation and lists */
    nav a,
    .widget a,
    .site-footer__links a,
    .primary-menu a,
    .mobile-nav-overlay__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Spacing between adjacent interactive elements */
    nav li + li,
    .widget li + li,
    .site-footer__links li + li {
        margin-top: 8px;
    }

    .site-footer__social-list {
        gap: 8px;
    }

    .site-footer__social-link {
        width: 44px;
        height: 44px;
    }

    /* Ensure inline links in body text have adequate tap area */
    .entry-content a,
    .inside-article a,
    .news-card__title a,
    .card-noticia__title a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

@media (max-width: 768px) {
    .site-content {
        padding: var(--spacing-md) var(--spacing-md);
    }

    .inside-article {
        padding: var(--spacing-md);
        border-radius: var(--radius-sm);
    }

    .single .inside-article {
        padding: var(--spacing-md);
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .widget {
        padding: var(--spacing-md);
    }
}

/* ==========================================================================
   Orientation Change Reflow
   Requirement 11.8: Reflow on orientation change without reload
   ========================================================================== */

@media (orientation: portrait) {
    :root {
        --layout-columns: 1;
    }
}

@media (orientation: landscape) and (max-width: 768px) {
    :root {
        --layout-columns: 2;
    }
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* ==========================================================================
   Footer (BEM: site-footer)
   ========================================================================== */

.site-footer {
    background-color: var(--bg-dark);
    color: var(--header-text);
    padding-top: var(--spacing-2xl);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Footer Columns */
.site-footer__column {
    display: flex;
    flex-direction: column;
}

.site-footer__heading {
    color: var(--header-text);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-primary);
}

/* Footer Logo & Description */
.site-footer__logo {
    margin-bottom: var(--spacing-md);
}

.site-footer__logo a {
    display: inline-block;
    text-decoration: none;
}

.site-footer__logo img {
    display: block;
    height: 40px;
    width: auto;
}

.site-footer__description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Footer Social Icons */
.site-footer__social-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--header-text);
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social-link svg {
    width: 20px;
    height: 20px;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* Footer Links */
.site-footer__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__links li {
    margin-bottom: var(--spacing-sm);
}

.site-footer__links a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus {
    color: var(--accent-primary);
}

/* Footer Newsletter */
.site-footer__newsletter {
    margin-top: var(--spacing-sm);
}

/* Footer Copyright Bar */
.site-footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg);
    text-align: center;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.site-footer__copyright p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin: 0;
}

/* Footer Responsive — Tablet (≤1024px): 2 columns */
@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Footer Responsive — Mobile (≤768px): 1 column */
@media (max-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer {
        padding-top: var(--spacing-xl);
    }

    .site-footer__copyright {
        margin-top: var(--spacing-xl);
    }
}