/*--------------------------------------------------------------
>>> RIO EDITION V1: PINK & PURPLE NEON UI VARIABLES
--------------------------------------------------------------*/
:root {
    /* Color Palette — Rio Pink & Purple */
    --bg-onyx: #080608;                          /* charcoal page background */
    --bg-card: #0d0b0e;                          /* warm dark card background */
    --bg-accent: #e91e8c;                        /* primary: deep magenta/pink */
    --bg-accent-secondary: #9c27b0;              /* secondary: true purple */
    --text-silver: #d4b8d8;                      /* pinkish-lavender body text */
    --text-white: #ffffff;                       /* headings & labels */
    --text-muted: rgba(212, 184, 216, 0.6);      /* muted body copy */
    --border-accent: rgba(233, 30, 140, 0.35);   /* pink border */
    --border-accent-light: rgba(233, 30, 140, 0.15); /* subtle pink border */
    --border-purple: rgba(156, 39, 176, 0.35);   /* purple border variant */

    /* Glow Effects */
    --glow-pink: rgba(233, 30, 140, 0.25);
    --glow-purple: rgba(156, 39, 176, 0.25);
    --neon-streak: linear-gradient(90deg, transparent, #e91e8c, #9c27b0, transparent);

    /* Typography */
    --font-heading: 'Playfair Display SC', serif;
    --font-body: 'Open Sans', sans-serif;

    /* UI Physics (Cards) */
    --card-radius: 4px;
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
    --card-shadow-hover: 0 15px 40px rgba(233, 30, 140, 0.2);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1 Resets
2 Normalize
3 Alignments
4 Clearings
5 Typography
6 Page Structure & Modern Cards
7 Header
8 Navigation
9 Content
10 Media
11 Footer
12 Widgets
13 Global Header & Branding
14 Mobile Navigation Chip Bar
15 SEO Tagline Bar
16 Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1 Resets
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body { line-height: 1; }
ol, ul { padding-left: 20px; }
ul { list-style-type: square; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
dd { margin-left: 30px; }

/*--------------------------------------------------------------
2 Normalize
--------------------------------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
    background-color: var(--bg-onyx);
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
#content > .row { margin: 0; }
a {
    background-color: transparent;
    color: var(--text-silver);
    transition: var(--transition-smooth);
    text-decoration: none;
}
a:focus { text-decoration: none; }
a:active, a:hover {
    outline: 0;
    color: var(--text-white);
    text-shadow: 0 0 10px var(--bg-accent);
}
a:hover, a:focus, .next-prev-post a:hover {
    text-decoration: none;
    border-bottom: 1px dotted var(--border-accent);
}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; color: var(--text-white); }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0; }
mark { background: var(--bg-accent); color: var(--text-white); }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; height: auto; max-width: 100%; }
svg:not(:root) { overflow: hidden; }
hr { box-sizing: content-box; height: 0; border-top: 1px solid var(--border-accent-light); }
pre { overflow: auto; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

/* Modern Button UI */
input[type="button"],
input[type="reset"],
input[type="submit"],
button,
.button,
.pagination a {
    position: relative;
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-accent-secondary));
    overflow: visible;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 12px 24px;
    text-transform: uppercase;
    outline: none;
    border: 1px solid var(--bg-accent);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-white);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.btn-small { font-size: 11px; letter-spacing: 1.2px; padding: 8px 15px; }
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:hover,
.button:hover,
.pagination a:hover {
    background: var(--text-silver);
    color: #050505 !important;
    border-color: var(--text-silver);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 184, 216, 0.4);
    text-shadow: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] { cursor: default; opacity: 0.6; }

input[type="text"], input[type="password"], input[type=search], input[type="email"], input[type="tel"] {
    background-color: #111;
    padding: 8px 15px;
    height: 45px;
    box-shadow: none;
    border: 1px solid var(--border-accent-light);
    outline: 0;
    color: var(--text-white);
    border-radius: 4px;
    transition: var(--transition-smooth);
}
input[type="text"]:focus, input[type="password"]:focus, input[type=search]:focus, textarea:focus {
    border-color: var(--bg-accent-secondary);
    background-color: #0d0b0e;
    box-shadow: 0 0 15px var(--glow-purple);
}
textarea {
    overflow: auto;
    background-color: #111;
    color: var(--text-white);
    padding: 10px 15px;
    resize: vertical;
    border: 1px solid var(--border-accent-light);
    border-radius: 4px;
    transition: var(--transition-smooth);
}
td, th { padding: 10px; border: 1px solid var(--border-accent-light); }
th { background-color: rgba(233, 30, 140, 0.1); color: var(--text-silver); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-onyx); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--bg-accent), var(--bg-accent-secondary)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-silver); }

/*--------------------------------------------------------------
3 Alignments
--------------------------------------------------------------*/
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------
4 Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after, .entry-content:before, .entry-content:after,
.comment-content:before, .comment-content:after, .site-header:before,
.site-header:after, .site-content:before, .site-content:after,
.site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; }
.clear:after, .entry-content:after, .comment-content:after,
.site-header:after, .site-content:after, .site-footer:after { clear: both; }

/*--------------------------------------------------------------
5 Typography
--------------------------------------------------------------*/
body, input, select, textarea {
    color: var(--text-white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .post-title, .widget-posts-wrap .title, .site-tagline, .related-posts .title {
    font-family: var(--font-heading);
    color: var(--text-white);
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    line-height: 1.4;
    font-weight: 400;
    margin: 36px 0 12px;
    letter-spacing: .5px;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
p { margin-bottom: 1.5em; color: var(--text-white); }

blockquote {
    position: relative;
    padding-left: 45px;
    color: var(--text-silver);
    font-family: var(--font-heading);
    font-size: 18px;
    font-style: italic;
    line-height: 1.75;
    margin: 2em 0;
    border-left: 4px solid var(--border-accent);
}

/*--------------------------------------------------------------
6 Page Structure & Modern Cards
--------------------------------------------------------------*/
#page { background-color: transparent; clear: both; }
.content-wrap { position: relative; z-index: 999; margin-top: 0 !important; }
.blog .content-wrap, .single .content-wrap, .page .content-wrap,
.archive .content-wrap, .error404 .content-wrap { margin-top: 0 !important; }
#content { padding-top: 30px; padding-bottom: 30px; }
.content-area { padding: 0 15px; background-color: transparent; margin-bottom: 50px; }

/* MASTER CARDS */
article, .sidebar-widget, .related-posts, .author-box, .comments, #respond, .error404 .content-area {
    display: block;
    position: relative;
    background-color: var(--bg-card);
    margin-bottom: 40px;
    padding: 40px;
    clear: both;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    border: 1px solid var(--border-accent-light);
}
article:hover, .sidebar-widget:hover, .related-posts:hover, .author-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--border-accent);
}

/* Pagination */
.pagination { margin-top: 40px; text-align: center; }
.pagination a, .pagination span {
    color: var(--text-silver);
    padding: 12px 18px;
    text-transform: uppercase;
    background-color: var(--bg-card);
    font-size: 13px;
    border: 1px solid var(--border-accent-light);
    border-radius: 4px;
    margin: 0 4px;
    transition: var(--transition-smooth);
}

.scrollToTop {
    width: 45px; height: 45px; text-align: center; color: var(--text-white);
    z-index: 999999; font-size: 24px; line-height: 45px; border: none; border-radius: 50%;
    text-decoration: none;
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-accent-secondary));
    position: fixed; bottom: 40px; right: 40px; opacity: 0; outline: none;
    transition: var(--transition-smooth);
    box-shadow: 0 5px 15px var(--glow-pink);
}
.scrollToTop.filling { opacity: 1; }

/*--------------------------------------------------------------
7 Header
--------------------------------------------------------------*/
.site-header {
    display: block;
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background: #080608 !important;
    border-bottom: 1px solid var(--border-accent);
    padding: 16px 0 !important;
    text-align: left;
}
.blog .site-header, .single .site-header, .page .site-header,
.archive .site-header, .error404 .site-header { padding-bottom: 16px !important; }
.site-header .container { position: relative; z-index: 999; padding-top: 0 !important; padding-bottom: 0 !important; }

.header-utility-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}
.site-logo { margin: 0 !important; padding: 0 !important; line-height: 1; }

/*--------------------------------------------------------------
8 Navigation
--------------------------------------------------------------*/
.desktop-nav-wrapper { display: flex; align-items: center; }
.desktop-nav-wrapper ul { display: flex !important; gap: 24px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.desktop-nav-wrapper ul li { margin: 0 !important; padding: 0 !important; list-style-type: none !important; }
.desktop-nav-wrapper ul li a {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    color: var(--text-silver); letter-spacing: 1px; padding: 6px 0;
    border-bottom: 2px solid transparent !important;
    transition: var(--transition-smooth);
}
.desktop-nav-wrapper ul li a:hover,
.desktop-nav-wrapper ul li.current-menu-item a {
    color: var(--bg-accent) !important;
    border-color: var(--bg-accent) !important;
    text-shadow: 0 0 10px var(--glow-pink);
}

/*--------------------------------------------------------------
9 Content
--------------------------------------------------------------*/
.sticky .pinned, .pinned {
    display: block; position: absolute; left: 50%; top: 0; width: 100px; margin-left: -50px;
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-accent-secondary));
    color: var(--text-white); text-align: center; z-index: 1; font-size: 11px;
    padding: 4px; text-transform: uppercase; font-weight: bold;
    border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.cats ul { display: inline-block; padding: 0; }
.cats li { display: inline-block; list-style-type: none; }
.cats li:after { font-family: FontAwesome; content: "\f10c"; font-size: 6px; vertical-align: middle; padding: 0 8px; color: var(--text-silver); }
.cats li:last-child:after { display: none; }
.cats a { font-size: 12px; font-weight: 700; color: var(--text-silver); text-transform: uppercase; letter-spacing: 1px; }

.post-title, .post-title a { color: var(--text-white); font-size: 24px; font-weight: 400; line-height: 1.4; margin: 10px 0; transition: var(--transition-smooth); }
.page .post-title, .page .post-title a, .single .post-title, .single .post-title a { font-size: 32px; }

.meta-info { display: block; text-align: center; padding: 5px 0 20px 0; color: var(--text-muted); font-size: 13px; font-style: italic; }
.post-featured { display: block; background-color: #000; margin: -40px -40px 25px -40px; overflow: hidden; border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); position: relative; }
.post-featured img { display: block; width: 100%; transition: transform 0.8s ease; }
article:hover .post-featured img { transform: scale(1.05); }

.section-title { position: relative; margin-bottom: 30px; text-align: center; }
.section-title h3 {
    display: inline-block; background-color: var(--bg-card); padding: 0 20px;
    position: relative; z-index: 1; margin: 0; font-size: 18px;
    color: var(--text-silver); text-transform: uppercase; letter-spacing: 2px;
}
.section-title:after {
    content: ""; display: block; width: 100%; height: 1px;
    background-color: var(--border-accent-light); position: absolute; top: 50%; left: 0; z-index: 0;
}

.related-posts ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2%; }
.related-item {
    display: inline-block; width: 32%; list-style-type: none;
    background: rgba(233, 30, 140, 0.03); border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border-accent-light); transition: var(--transition-smooth);
}

/*--------------------------------------------------------------
10 Media
--------------------------------------------------------------*/
embed, iframe, object { max-width: 100%; }

/*--------------------------------------------------------------
11 Footer
--------------------------------------------------------------*/
footer { background-color: #080608; color: var(--text-muted); border-top: 1px solid var(--border-accent-light); }
.copyright { text-align: center; padding: 25px 0; font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,0.4); }

/*--------------------------------------------------------------
12 Widgets
--------------------------------------------------------------*/
.sidebar-widget { padding: 30px; font-size: 14px; }

.tagcloud a {
    font-size: 11px !important;
    padding: 8px 14px;
    margin: 0 5px 8px 0;
    display: inline-block;
    background: transparent;
    color: var(--text-silver);
    border: 1px solid var(--border-accent-light);
    border-radius: 4px;
    transition: var(--transition-smooth);
}
.tagcloud a:hover {
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-accent-secondary));
    color: var(--text-white) !important;
    border-color: var(--bg-accent);
    text-shadow: 0 0 8px var(--glow-pink);
}

/*--------------------------------------------------------------
13 Global Header & Branding
--------------------------------------------------------------*/
.global-header {
    position: sticky !important; top: 0; z-index: 9999;
    background-color: var(--bg-onyx);
    border-bottom: 1px solid var(--border-accent);
    padding: 16px 0; margin: 0 !important;
}
.header-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.site-branding { margin: 0 !important; padding: 0 !important; line-height: 1; }
.branding-logo-link { display: flex; align-items: center; text-decoration: none !important; border-bottom: none !important; }
.branding-logo-link:hover { border-bottom: none !important; text-shadow: none; }
.brand-primary { font-family: var(--font-heading); font-size: 28px; color: var(--text-white); letter-spacing: 2px; font-weight: 700; }
.brand-dot { font-family: var(--font-heading); font-size: 28px; color: var(--bg-accent); text-shadow: 0 0 12px var(--glow-pink); }
.brand-secondary { font-family: var(--font-body); font-size: 18px; color: var(--text-silver); font-weight: 300; letter-spacing: 1px; margin-left: 2px; text-transform: lowercase; }

/*--------------------------------------------------------------
14 Mobile Navigation Chip Bar
--------------------------------------------------------------*/
.desktop-navigation { display: flex; align-items: center; }
.desktop-navigation ul { display: flex !important; gap: 24px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.desktop-navigation ul li { margin: 0 !important; padding: 0 !important; list-style-type: none !important; }
.desktop-navigation ul li a {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    color: var(--text-silver); letter-spacing: 1px; padding: 6px 0;
    border-bottom: 2px solid transparent !important;
    transition: var(--transition-smooth);
}
.desktop-navigation ul li a:hover,
.desktop-navigation ul li.current-menu-item a {
    color: var(--bg-accent) !important;
    border-color: var(--bg-accent) !important;
    text-shadow: 0 0 10px var(--glow-pink);
}

.mobile-swipe-navigation {
    width: 100%; background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-accent-light);
    padding: 10px 0; margin: 0 !important;
}
.mobile-chip-list {
    list-style: none !important; padding: 0 30px !important; margin: 0 !important;
    display: flex !important; flex-direction: row !important; overflow-x: auto !important;
    white-space: nowrap !important; gap: 8px; -webkit-overflow-scrolling: touch;
}
.mobile-chip-list::-webkit-scrollbar { display: none; }
.mobile-chip-list li { display: inline-block !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
.mobile-chip-list li a {
    display: block;
    background: rgba(233, 30, 140, 0.04);
    color: var(--text-silver);
    border: 1px solid var(--border-accent-light) !important;
    padding: 8px 16px; border-radius: 30px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
    text-decoration: none; transition: var(--transition-smooth);
}
.mobile-chip-list li a:hover,
.mobile-chip-list li.current-menu-item > a {
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-accent-secondary)) !important;
    color: var(--text-white) !important;
    border-color: var(--bg-accent) !important;
    box-shadow: 0 2px 8px var(--glow-pink);
}

/*--------------------------------------------------------------
15 SEO Tagline Bar
--------------------------------------------------------------*/
.seo-tagline-bar {
    text-align: center; background-color: var(--bg-card);
    padding: 14px 30px; border-bottom: 1px solid var(--border-accent-light);
    margin: 0 0 35px 0 !important;
}
.rating-stars { color: #e8b923; font-size: 12px; display: inline-flex; gap: 4px; margin-right: 12px; vertical-align: middle; }
.tagline-description {
    display: inline-block; color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
    margin: 0 !important; vertical-align: middle;
}

/*--------------------------------------------------------------
16 Responsive
--------------------------------------------------------------*/
@media (max-width: 991px) {
    .container, .header-container { padding: 0 10px !important; }
    .global-header { padding: 12px 0; }
    .brand-primary, .brand-dot { font-size: 24px; }
    .brand-secondary { font-size: 16px; }
    .hide-on-mobile { display: none !important; }
}
@media (min-width: 992px) {
    .show-on-mobile-only { display: none !important; }
}