/*
Theme Name: SSB Guide
Theme URI: https://ssbguide.in
Author: SSB Guide
Author URI: https://ssbguide.in
Description: Custom WordPress theme for SSBGuide.in — India's defence exam guidance portal. Built to work with Elementor page builder and Contact Form 7. Colors, cards, hero and layout carried over and scaled up from the original SSB Guide design mockup.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ssb-guide
Tags: blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   PRODUCTION UI PALETTE & DESIGN ENVIRONMENT VARIABLES
   (ported 1:1 from the original ssbcontent design mock)
   ========================================================================== */
:root {
    --bg-gradient-top: #36D1C4;
    --bg-gradient-bottom: #1E838B;
    --container-bg: #EFF8F7;
    --primary-teal: #2E798A;
    --mint-badge-bg: #D6F8F2;
    --mint-checkmark: #2ECCAA;
    --text-dark: #132B31;
    --text-muted: #707E80;
    --card-bg: #FFFFFF;
    --ticker-bg: #141416;
    --sidebar-dark: #1A525E;
    --footer-dark: #0E2024;

    --font-family: 'Futura PT Book', 'FuturaPTBook', 'Futura PT', 'Century Gothic', 'URW Gothic', system-ui, -apple-system, sans-serif;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width: 1320px;
}

/* ==========================================================================
   FUTURA PT BOOK — self-hosted webfont
   Futura PT is a paid Monotype font and can't be pulled from Google Fonts,
   so it loads locally. Drop your licensed font files into
   /wp-content/themes/ssb-guide/fonts/ using these exact names (or edit the
   src paths below to match your license's filenames):
     futura-pt-book.woff2  /  futura-pt-book.woff
   Until those files are added, the stack above quietly falls back to
   Century Gothic / system sans-serif so the site never looks broken.
   ========================================================================== */
@font-face {
    font-family: 'Futura PT Book';
    src: url('fonts/futura-pt-book.woff2') format('woff2'),
         url('fonts/futura-pt-book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   RESET & SYSTEM FOUNDATION BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--card-bg);
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { font-family: var(--font-family); cursor: pointer; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }

/* --- TOP META UTILITIES --- */
.top-meta-bar {
    background-color: var(--sidebar-dark);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 0;
}

.meta-inner { display: flex; justify-content: space-between; align-items: center; }

.meta-links { display: flex; gap: 20px; align-items: center; }

.meta-links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: var(--transition); }

.meta-links a:hover { color: var(--mint-badge-bg); }

.auth-btn {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   MAIN SITE HEADER / NAVIGATION (scaled up from the sidebar-nav concept
   into a full-width sticky top navbar, better suited to a large multi-page site)
   ========================================================================== */
.site-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid rgba(19,43,49,0.08);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; }

.brand-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.brand-logo img.custom-logo { max-height: 46px; width: auto; }

.brand-logo .logo-icon {
    width: 36px; height: 36px;
    background-color: var(--mint-badge-bg);
    color: var(--mint-checkmark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.brand-logo .logo-text { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); line-height: 1.1; }

.brand-logo .logo-text span {
    display: block; font-size: 0.62rem; letter-spacing: 1.5px;
    color: var(--primary-teal); margin-top: 2px; font-weight: 700;
}

.main-navigation { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.main-navigation ul { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.main-navigation li { position: relative; }

.main-navigation a {
    text-decoration: none; color: var(--text-dark); font-size: 0.92rem; font-weight: 600;
    padding: 10px 14px; border-radius: 8px; transition: var(--transition); display: block;
}

.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--card-bg); background-color: var(--primary-teal); }

/* Dropdown submenu */
.main-navigation ul ul {
    position: absolute; top: 100%; left: 0; background: var(--card-bg);
    min-width: 220px; box-shadow: 0 16px 32px rgba(19,43,49,0.15); border-radius: 10px;
    padding: 8px; flex-direction: column; display: none; z-index: 50;
}

.main-navigation li:hover > ul { display: flex; }

.main-navigation ul ul a { color: var(--text-dark); }
.main-navigation ul ul a:hover { background-color: var(--container-bg); color: var(--primary-teal); }

.menu-toggle {
    display: none; background: var(--container-bg); border: none; border-radius: 8px;
    width: 44px; height: 44px; align-items: center; justify-content: center;
}

.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block; width: 20px; height: 2px; background: var(--text-dark); position: relative; transition: var(--transition);
}
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }

/* ==========================================================================
   HERO CANVAS AND UTILITY INTERFACE SECTIONS
   ========================================================================== */
.hero-showcase {
    background: linear-gradient(135deg, #246876 0%, #154550 100%);
    padding: 70px 0;
    color: var(--card-bg);
    position: relative;
    overflow: hidden;
}

.geometric-backdrop {
    position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.03); top: -20%; right: -5%; pointer-events: none;
}

.hero-main-content { max-width: 800px; position: relative; z-index: 5; margin: 0 auto 40px; text-align: left; }

.hero-main-content h1 { font-size: 2.9rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }

.highlight-text { color: var(--bg-gradient-top); }

.hero-main-content p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 35px; line-height: 1.6; max-width: 640px; }

.search-engine-box {
    display: flex; background-color: var(--card-bg); padding: 6px; border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.15); max-width: 650px; margin-bottom: 20px;
}

.search-engine-box input { flex-grow: 1; border: none; padding: 12px 16px; font-size: 0.95rem; font-family: var(--font-family); outline: none; color: var(--text-dark); }

.search-submit {
    background-color: var(--primary-teal); border: none; color: var(--card-bg); padding: 0 24px;
    font-weight: 700; border-radius: 8px; cursor: pointer; transition: var(--transition);
}

.search-submit:hover { background-color: var(--sidebar-dark); }

.popular-tags { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

.popular-tags a { color: var(--bg-gradient-top); text-decoration: none; margin-left: 8px; }

.fast-track-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px;
    max-width: var(--max-width); margin: 50px auto 0; position: relative; z-index: 5;
}

.fast-card {
    background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px; padding: 18px 16px; text-align: center; color: var(--card-bg);
    text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: var(--transition);
}

.fast-card:hover { background-color: var(--card-bg); color: var(--text-dark); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.fast-card .icon { display: block; font-size: 1.5rem; margin-bottom: 6px; }

/* ==========================================================================
   MAIN VIEWPORT AND SECTION MODULE CONTENT
   ========================================================================== */
.content-block { padding: 70px 0; }

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

.block-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px;
    border-left: 4px solid var(--primary-teal); padding-left: 14px;
}

.block-header h2 { font-size: 1.7rem; font-weight: 800; color: var(--text-dark); }

.header-link-btn {
    font-size: 0.85rem; font-weight: 700; color: var(--primary-teal); text-decoration: none;
    background-color: var(--mint-badge-bg); padding: 8px 18px; border-radius: 6px; transition: var(--transition);
    white-space: nowrap;
}

.header-link-btn:hover { background-color: var(--primary-teal); color: var(--card-bg); }

/* ==========================================================================
   TRENDING MODULES COMPONENT ARCHITECTURE
   ========================================================================== */
.trending-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.trend-card {
    background-color: var(--card-bg); border-radius: 12px; padding: 24px;
    box-shadow: 0 4px 12px rgba(19,43,49,0.05); display: flex; flex-direction: column;
    justify-content: space-between; min-height: 180px; transition: var(--transition);
    text-decoration: none; color: inherit;
}

.trend-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(46,121,138,0.15); }

.trend-badge { align-self: flex-start; font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.5px; margin-bottom: 14px; background-color: rgba(46,121,138,0.1); color: var(--primary-teal); text-transform: uppercase; }

.trend-card h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.4; color: var(--text-dark); flex-grow: 1; }

.trend-date { font-size: 0.75rem; color: var(--text-muted); margin-top: 14px; }

/* ==========================================================================
   EXAMS DISPLAY PANELS MODULE
   ========================================================================== */
.exams-showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }

.exam-vertical-card {
    background-color: var(--card-bg); border: 1px solid rgba(112,126,128,0.15); border-radius: 16px;
    padding: 32px 24px; position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
}

.exam-vertical-card.featured-border { border: 2px solid var(--primary-teal); box-shadow: 0 10px 30px rgba(46,121,138,0.1); }

.popular-ribbon {
    position: absolute; top: -12px; left: 24px; background-color: var(--mint-badge-bg); color: var(--mint-checkmark);
    font-size: 0.68rem; font-weight: 800; padding: 4px 12px; border-radius: 4px;
}

.exam-vertical-card h3 { font-size: 1.4rem; color: var(--text-dark); margin-bottom: 4px; }

.exam-vertical-card .sub-title { font-size: 0.8rem; font-weight: 700; color: var(--primary-teal); margin-bottom: 16px; }

.exam-vertical-card .desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; flex-grow: 1; margin-bottom: 24px; }

.explore-action-link { font-weight: 700; font-size: 0.9rem; color: var(--primary-teal); text-decoration: none; }

/* ==========================================================================
   COACHING PANELS LAYOUT MODULE
   ========================================================================== */
.coaching-directory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.coaching-tile { background-color: var(--card-bg); border-radius: 12px; padding: 24px; position: relative; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }

.tile-badge { position: absolute; top: 14px; right: 14px; font-size: 0.65rem; font-weight: 800; background-color: var(--mint-badge-bg); color: var(--mint-checkmark); padding: 2px 8px; border-radius: 4px; }

.coaching-tile h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; max-width: 85%; }

.coaching-tile .location { font-size: 0.85rem; opacity: 0.8; margin-bottom: 12px; color: var(--text-muted); }

.coaching-tile .rating-bar { font-size: 0.88rem; font-weight: 700; margin-bottom: 24px; }

.coaching-tile .count { font-weight: 400; opacity: 0.6; }

.tile-btn {
    width: 100%; padding: 10px; border-radius: 6px; border: 1px solid rgba(46, 121, 138, 0.3);
    background: transparent; color: var(--primary-teal); font-weight: 700; cursor: pointer; margin-top: auto;
    transition: var(--transition); text-decoration: none; text-align: center; display: block;
}

.tile-btn:hover { background-color: var(--primary-teal); color: var(--card-bg); }

/* ==========================================================================
   TRUST SCORE MATRIX STATS BAR
   ========================================================================== */
.trust-stats-ticker { background-color: var(--text-dark); color: var(--card-bg); padding: 50px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; text-align: center; max-width: var(--max-width); margin: 0 auto; }

.stat-element .num { display: block; font-size: 2.3rem; font-weight: 800; color: var(--bg-gradient-top); }

.stat-element .lbl { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; letter-spacing: 0.5px; }

/* ==========================================================================
   NEWS ENTRIES SYSTEM
   ========================================================================== */
.news-list-matrix { display: flex; flex-direction: column; gap: 16px; }

.news-list-item {
    display: flex; align-items: center; gap: 20px; padding: 20px; background-color: var(--card-bg);
    border: 1px solid rgba(112,126,128,0.15); border-radius: 10px; text-decoration: none; color: var(--text-dark);
    transition: var(--transition);
}

.news-list-item:hover { border-color: var(--primary-teal); transform: translateX(4px); }

.news-badge { background-color: var(--container-bg); color: var(--primary-teal); font-size: 0.7rem; font-weight: 800; padding: 6px 12px; border-radius: 6px; white-space: nowrap; text-transform: uppercase; }

.news-item-body h4 { font-size: 1rem; margin-bottom: 4px; }

.news-item-body .news-meta { font-size: 0.78rem; color: var(--text-muted); }

/* ==========================================================================
   STUDY RESOURCE ACTIONS LAYOUT
   ========================================================================== */
.resources-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.resource-box { background-color: var(--card-bg); padding: 28px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); display: flex; flex-direction: column; }

.resource-box h5 { font-size: 1.05rem; color: var(--text-dark); margin-bottom: 8px; }

.resource-box p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; flex-grow: 1; }

.download-link { font-size: 0.88rem; font-weight: 700; color: var(--primary-teal); text-decoration: none; }

/* ==========================================================================
   SUBSCRIBER REGISTRATION BANNER MODULE
   ========================================================================== */
.newsletter-banner { background: linear-gradient(135deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 100%); padding: 50px 0; color: var(--card-bg); }

.newsletter-banner .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }

.news-banner-content h4 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }

.news-banner-content p { font-size: 0.92rem; opacity: 0.9; }

.news-banner-form { display: flex; background-color: var(--card-bg); padding: 4px; border-radius: 8px; }

.news-banner-form input { flex-grow: 1; border: none; padding: 10px; font-family: var(--font-family); outline: none; }

.subscribe-submit { background-color: var(--primary-teal); border: none; color: var(--card-bg); padding: 0 20px; font-weight: 700; border-radius: 6px; cursor: pointer; }

/* CF7 form styling reused across newsletter + contact areas */
.newsletter-banner .wpcf7-form p { display: flex; gap: 8px; margin: 0; }
.newsletter-banner .wpcf7-form input[type="email"],
.newsletter-banner .wpcf7-form input[type="text"] { flex-grow: 1; border: none; padding: 12px 14px; border-radius: 6px; font-family: var(--font-family); outline: none; }
.newsletter-banner .wpcf7-form input[type="submit"] { background-color: var(--primary-teal); border: none; color: var(--card-bg); padding: 0 20px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.newsletter-banner .wpcf7-response-output { grid-column: 1 / -1; margin: 12px 0 0 !important; border-radius: 8px; background: rgba(255,255,255,0.15); color: #fff; }

/* ==========================================================================
   ISOLATED DECOUPLED FOOTER DESIGN SYSTEM COMPONENT
   ========================================================================== */
.app-footer { background-color: var(--footer-dark); color: rgba(255, 255, 255, 0.6); padding: 80px 0 30px; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.05); }

.footer-container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px 50px; display: grid; grid-template-columns: 1.3fr repeat(3, 0.9fr); gap: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.foot-col { display: flex; flex-direction: column; }

.foot-logo { font-size: 1.5rem; font-weight: 800; color: #FFFFFF; letter-spacing: -0.5px; margin-bottom: 18px; line-height: 1.1; }

.brand-description { font-size: 0.88rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; }

.office-location-tag { font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.45); }

.office-location-tag .pin-icon { margin-right: 4px; }

.foot-col h6 { color: #FFFFFF; font-size: 0.95rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.2px; }

.footer-links-list li { margin-bottom: 12px; }

.footer-links-list a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.88rem; font-weight: 500; display: inline-block; transition: var(--transition); }

.footer-links-list a:hover { color: var(--bg-gradient-top); transform: translateX(4px); }

.footer-copyright-row { max-width: var(--max-width); margin: 0 auto; padding: 30px 40px 0; }

.copyright-inner { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); flex-wrap: wrap; gap: 10px; }

.compliance-tag { font-weight: 500; letter-spacing: 0.3px; }

/* ==========================================================================
   BLOG / ARCHIVE / SINGLE POST
   ========================================================================== */
.page-title-band { background: linear-gradient(135deg, #246876 0%, #154550 100%); color: var(--card-bg); padding: 50px 0; }
.page-title-band h1 { font-size: 2.1rem; font-weight: 800; }
.page-title-band p { margin-top: 10px; color: rgba(255,255,255,0.8); font-size: 0.95rem; }
.page-title-band .breadcrumb { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-bottom: 10px; }
.page-title-band .breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }

.blog-listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; padding: 60px 0; }

.blog-card { background: var(--card-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(19,43,49,0.06); transition: var(--transition); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(46,121,138,0.15); }
.blog-card .thumb { aspect-ratio: 16/10; background-color: var(--container-bg); overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .body { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card .cat { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--primary-teal); background: rgba(46,121,138,0.1); align-self: flex-start; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; }
.blog-card h2, .blog-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin-bottom: 10px; flex-grow: 1; }
.blog-card .excerpt { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.blog-card .meta { font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid rgba(19,43,49,0.06); padding-top: 12px; margin-top: auto; }

.single-post-wrap { max-width: 820px; margin: 0 auto; padding: 60px 40px; }
.single-post-wrap .post-thumb { border-radius: 14px; overflow: hidden; margin-bottom: 30px; }
.single-post-wrap .post-meta-row { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; }
.entry-content { font-size: 1.02rem; line-height: 1.8; color: var(--text-dark); }
.entry-content h2 { font-size: 1.5rem; font-weight: 800; margin: 34px 0 14px; }
.entry-content h3 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 12px; }
.entry-content p { margin-bottom: 18px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px 22px; }
.entry-content img { border-radius: 10px; margin: 20px 0; }
.entry-content a { color: var(--primary-teal); text-decoration: underline; }
.entry-content blockquote { border-left: 4px solid var(--primary-teal); background: var(--container-bg); padding: 18px 22px; border-radius: 6px; margin: 20px 0; font-style: italic; }
.post-tags { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-tags a { font-size: 0.78rem; background: var(--container-bg); color: var(--primary-teal); padding: 6px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; }

.pagination-nav { display: flex; justify-content: center; gap: 8px; padding-bottom: 60px; flex-wrap: wrap; }
.pagination-nav a, .pagination-nav span { padding: 10px 16px; border-radius: 8px; background: var(--container-bg); color: var(--primary-teal); text-decoration: none; font-weight: 700; font-size: 0.88rem; }
.pagination-nav .current { background: var(--primary-teal); color: var(--card-bg); }
.pagination-nav a:hover { background: var(--primary-teal); color: var(--card-bg); }

.comments-area { max-width: 820px; margin: 0 auto; padding: 0 40px 60px; }
.comment-list { list-style: none; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid rgba(19,43,49,0.15); border-radius: 8px; font-family: var(--font-family); margin-bottom: 14px;
}
.comment-form input[type="submit"] { background: var(--primary-teal); color: #fff; border: none; padding: 12px 26px; border-radius: 8px; font-weight: 700; }

/* ==========================================================================
   SINGLE EXAM / SINGLE COACHING — detail page profile layout
   ========================================================================== */
.exam-hero-band {
    background: linear-gradient(135deg, var(--sidebar-dark) 0%, var(--footer-dark) 100%);
    color: var(--card-bg);
    padding: 44px 0 60px;
    position: relative;
    overflow: hidden;
}
.exam-hero-band::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(54,209,196,0.18) 0%, transparent 70%);
}
.exam-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
.exam-hero-band .breadcrumb { color: rgba(255,255,255,0.6); }
.exam-hero-band .breadcrumb a { color: rgba(255,255,255,0.85); }
.exam-hero-icon { font-size: 2.6rem; margin: 14px 0 6px; line-height: 1; }
.exam-hero-text h1 { font-size: 2.3rem; font-weight: 800; margin-bottom: 10px; max-width: 640px; }
.exam-hero-subtitle { color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 560px; }
.static-ribbon { position: static; display: inline-block; margin-top: 16px; border-radius: 6px; }
.exam-hero-media { flex-shrink: 0; width: 260px; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.exam-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.coaching-hero-meta { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.meta-pill { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }

.exam-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 44px; padding: 56px 40px 70px; align-items: start; }
.exam-main-content .entry-content { font-size: 1.02rem; line-height: 1.8; }
.exam-main-content .entry-content h2 { font-size: 1.45rem; font-weight: 800; margin: 30px 0 14px; }
.exam-main-content .entry-content h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 10px; }
.exam-main-content .entry-content p { margin-bottom: 16px; }
.exam-main-content .entry-content ul, .exam-main-content .entry-content ol { margin: 0 0 16px 22px; }
.exam-main-content .entry-content img { border-radius: 10px; margin: 18px 0; }

.exam-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.exam-sidebar-card { background: var(--container-bg); border-radius: 14px; padding: 26px; }
.exam-sidebar-card h4 { font-size: 1.05rem; font-weight: 800; margin-bottom: 16px; }
.exam-quick-facts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.exam-quick-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; border-bottom: 1px dashed rgba(19,43,49,0.12); padding-bottom: 10px; }
.exam-quick-facts li span { color: var(--text-muted); }
.exam-quick-facts li strong { text-align: right; }
.status-live { color: var(--mint-checkmark); }
.full-width-btn { display: block; width: 100%; text-align: center; margin-bottom: 12px; }
.sidebar-secondary-link { display: block; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--primary-teal); text-decoration: none; }
.sidebar-secondary-link:hover { text-decoration: underline; }
.sidebar-help-text { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.sidebar-outline-btn { display: block; text-align: center; padding: 12px; border: 2px solid var(--primary-teal); color: var(--primary-teal); border-radius: 8px; text-decoration: none; font-weight: 700; transition: var(--transition); }
.sidebar-outline-btn:hover { background: var(--primary-teal); color: #fff; }

@media (max-width: 992px) {
    .exam-detail-layout { grid-template-columns: 1fr; padding: 40px 24px 50px; }
    .exam-sidebar { position: static; }
    .exam-hero-inner { flex-direction: column-reverse; align-items: flex-start; }
    .exam-hero-media { width: 100%; }
}

/* ==========================================================================
   GENERIC / STATIC PAGES + CONTACT PAGE (CF7)
   ========================================================================== */
.page-content-wrap { max-width: 900px; margin: 0 auto; padding: 60px 40px; }
.page-content-wrap .entry-content { }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; max-width: var(--max-width); margin: 0 auto; padding: 60px 40px; }
.contact-info-card { background: var(--sidebar-dark); color: #fff; border-radius: 16px; padding: 36px; }
.contact-info-card h3 { font-size: 1.3rem; margin-bottom: 16px; }
.contact-info-card p { font-size: 0.92rem; color: rgba(255,255,255,0.75); margin-bottom: 24px; line-height: 1.6; }
.contact-info-card .info-row { display: flex; gap: 12px; margin-bottom: 18px; font-size: 0.9rem; }
.contact-form-card { background: var(--card-bg); border: 1px solid rgba(19,43,49,0.1); border-radius: 16px; padding: 36px; box-shadow: 0 4px 20px rgba(19,43,49,0.05); }
.contact-form-card .wpcf7-form p { margin-bottom: 14px; }
.contact-form-card .wpcf7-form input[type="text"],
.contact-form-card .wpcf7-form input[type="email"],
.contact-form-card .wpcf7-form input[type="tel"],
.contact-form-card .wpcf7-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid rgba(19,43,49,0.15); border-radius: 8px; font-family: var(--font-family);
}
.contact-form-card .wpcf7-form input[type="submit"] { background: var(--primary-teal); color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.contact-form-card .wpcf7-form input[type="submit"]:hover { background: var(--sidebar-dark); }

/* Native contact form (no plugin required) */
.ssb-contact-form { display: flex; flex-direction: column; }
.ssb-contact-form label { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-dark); }
.ssb-contact-form input[type="text"],
.ssb-contact-form input[type="email"],
.ssb-contact-form input[type="tel"],
.ssb-contact-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid rgba(19,43,49,0.15); border-radius: 8px;
    font-family: var(--font-family); margin-bottom: 16px; font-size: 0.95rem; color: var(--text-dark);
}
.ssb-contact-form textarea { resize: vertical; }
.ssb-contact-form input:focus, .ssb-contact-form textarea:focus { outline: none; border-color: var(--primary-teal); }
.ssb-submit-btn { align-self: flex-start; background: var(--primary-teal); color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.ssb-submit-btn:hover { background: var(--sidebar-dark); }
.ssb-form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.92rem; font-weight: 600; }
.ssb-form-success { background: var(--mint-badge-bg); color: var(--primary-teal); }
.ssb-form-error { background: #FBE7E7; color: #B23B3B; }

.no-results { text-align: center; padding: 80px 20px; }
.no-results h1 { font-size: 2rem; margin-bottom: 12px; }

/* Elementor full-width canvas template */
.ssb-elementor-canvas .site-header, .ssb-elementor-canvas .app-footer { }
.ssb-full-width main { padding: 0 !important; }

/* ==========================================================================
   RESPONSIVE VIEWPORT TRANSLATION DATA RULES (BREAKPOINTS)
   ========================================================================== */
@media (max-width: 992px) {
    .footer-container { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
    .contact-grid { grid-template-columns: 1fr; }
    .newsletter-banner .wrap { grid-template-columns: 1fr; }
    .wrap, .content-block, .single-post-wrap, .page-content-wrap { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 782px) {
    .menu-toggle { display: flex; }
    .main-navigation { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: var(--card-bg); flex-direction: column; align-items: flex-start; padding: 90px 20px 20px; box-shadow: -10px 0 30px rgba(0,0,0,0.15); transition: var(--transition); z-index: 998; }
    .main-navigation.is-open { right: 0; }
    .main-navigation ul { flex-direction: column; align-items: flex-start; width: 100%; }
    .main-navigation ul ul { position: static; box-shadow: none; padding-left: 12px; }
    .top-meta-bar .meta-links a:not(.auth-btn) { display: none; }
    .hero-main-content h1 { font-size: 2rem; }
    .contact-grid, .footer-container { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .footer-container { grid-template-columns: 1fr; }
    .copyright-inner { flex-direction: column; text-align: center; }
    .single-post-wrap, .page-content-wrap, .comments-area { padding-left: 20px; padding-right: 20px; }
}