/*
 Theme Name:   Sexy & Funny (Standalone)
 Theme URI:    https://sexyandfunny.com
 Description:  Custom blue theme for Sexy & Funny - child theme of Hello Elementor with full Elementor override styles
 Author:       Icarus (OpenClaw)
 Author URI:   https://openclaw.ai
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sexyandfunny
 Tags:         dark, blue, adult-entertainment, elementor
*/

/* ============================================================
   SEXY & FUNNY — Blue Theme
   Elementor Override Edition
   ============================================================ */

/* ----- Custom Properties ----- */
:root {
  --sf-bg-deep:        #181b21;
  --sf-bg-surface:     #2E323D;
  --sf-bg-elevated:    #353945;
  --sf-blue-primary:   #2C78C9;
  --sf-blue-dark:      #234A70;
  --sf-blue-light:     #5B92CD;
  --sf-blue-pale:      #8FACC7;
  --sf-blue-bright:    #1390D8;
  --sf-text-primary:   #e8ecf2;
  --sf-text-secondary: #9cb5d0;
  --sf-text-muted:     #6c778e;
  --sf-accent:         #fe0000;
  --sf-accent-hover:   #ff8c00;
  --sf-border:         rgba(91,146,205,.15);
  --sf-border-hover:   rgba(91,146,205,.3);
  --sf-nav-gradient:   linear-gradient(to bottom, #2C78C9 0%, #234A70 100%);
  --sf-section-gradient: linear-gradient(to bottom, #6C778E 0%, #2E323D 20%);
  --sf-card-shadow:    0 8px 24px rgba(0,0,0,.3);
  --sf-card-shadow-hover: 0 16px 40px rgba(0,0,0,.4);
}

/* ============================================================
   GLOBAL
   ============================================================ */

body,
body.elementor-default,
body.elementor-page {
  background-color: var(--sf-bg-deep) !important;
  color: var(--sf-text-primary) !important;
  font-family: 'Outfit', Verdana, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

a {
  color: var(--sf-blue-bright) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--sf-accent) !important;
}

/* ============================================================
   ELEMENTOR CONTAINERS
   ============================================================ */

.e-con,
.elementor-section,
.elementor-column,
.elementor-element {
  --e-con-default-bg: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */

header .e-con,
.elementor-location-header .e-con,
.elementor-location-header,
[data-elementor-type="header"] .e-con {
  background-color: var(--sf-bg-deep) !important;
  border-bottom: 1px solid var(--sf-border) !important;
}

/* Logo */
.elementor-widget-image.elementor-widget-image .elementor-image img {
  max-height: 80px !important;
  width: auto !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu a,
nav.elementor-nav-menu--layout-horizontal a {
  color: #fff !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--sf-blue-pale) !important;
}

.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  background-color: var(--sf-blue-primary) !important;
}

.elementor-nav-menu--dropdown a {
  color: #fff !important;
  background-color: var(--sf-bg-surface) !important;
}

.elementor-nav-menu--dropdown a:hover {
  background-color: var(--sf-bg-elevated) !important;
}

/* ============================================================
   POST / CARD STYLING
   ============================================================ */

.elementor-post,
.elementor-post__card,
.elementor-posts-container .elementor-post,
.elementor-loop-container .e-loop-item {
  background-color: #fff !important;
  border: 3px solid #eee !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.elementor-post:hover,
.elementor-post__card:hover,
.elementor-loop-container .e-loop-item:hover {
  border-color: var(--sf-blue-light) !important;
  box-shadow: var(--sf-card-shadow-hover) !important;
  transform: translateY(-3px) !important;
}

/* Post Titles */
.elementor-post__title,
.elementor-post__title a {
  color: var(--sf-blue-dark) !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.elementor-post:hover .elementor-post__title a,
.elementor-post__title a:hover {
  color: var(--sf-accent) !important;
}

/* Post Meta */
.elementor-post__meta-data,
.elementor-post-date,
.elementor-post-author,
.elementor-post__excerpt,
.elementor-post__excerpt p {
  color: var(--sf-text-muted) !important;
}

/* Post Thumbnails */
.elementor-post__thumbnail {
  overflow: hidden !important;
}

.elementor-post__thumbnail img,
.elementor-loop-container .e-loop-item img {
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}

.elementor-post:hover .elementor-post__thumbnail img,
.elementor-loop-container .e-loop-item:hover img {
  transform: scale(1.06) !important;
}

/* Post Badges / Categories */
.elementor-post__badge {
  background-color: var(--sf-blue-primary) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

/* ============================================================
   HEADINGS
   ============================================================ */

.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--sf-text-primary) !important;
}

/* Heading links */
.elementor-heading-title a,
h2.elementor-heading-title a,
h3.elementor-heading-title a {
  color: var(--sf-text-primary) !important;
}

.elementor-heading-title a:hover {
  color: var(--sf-blue-bright) !important;
}

/* ============================================================
   TEXT & CONTENT
   ============================================================ */

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor p {
  color: var(--sf-text-secondary) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.elementor-button,
.elementor-button-wrapper .elementor-button {
  background-color: var(--sf-blue-primary) !important;
  border-color: var(--sf-blue-dark) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}

.elementor-button:hover {
  background-color: var(--sf-blue-dark) !important;
  box-shadow: 0 4px 16px rgba(44,120,201,.3) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   ICONS & SOCIAL
   ============================================================ */

.elementor-icon,
.elementor-social-icon {
  color: var(--sf-blue-pale) !important;
  transition: color 0.2s ease !important;
}

.elementor-icon:hover,
.elementor-social-icon:hover {
  color: var(--sf-blue-primary) !important;
}

/* ============================================================
   SEARCH
   ============================================================ */

.elementor-search-form input,
.elementor-search-form__input {
  background: #fff !important;
  border: 1px solid #eee !important;
  color: #333 !important;
  border-radius: 5px !important;
}

.elementor-search-form__submit {
  background-color: var(--sf-blue-dark) !important;
  color: #fff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer .e-con,
.elementor-location-footer .e-con,
.elementor-location-footer,
[data-elementor-type="footer"] .e-con,
[data-elementor-type="footer"] {
  background-color: var(--sf-bg-surface) !important;
  border-top: 1px solid #444 !important;
}

footer .elementor-heading-title,
.elementor-location-footer .elementor-heading-title,
[data-elementor-type="footer"] .elementor-heading-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

footer .elementor-widget a,
.elementor-location-footer .elementor-widget a,
[data-elementor-type="footer"] a {
  color: var(--sf-blue-pale) !important;
}

footer .elementor-widget a:hover,
.elementor-location-footer .elementor-widget a:hover,
[data-elementor-type="footer"] a:hover {
  color: var(--sf-accent-hover) !important;
}

footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor p,
[data-elementor-type="footer"] .elementor-widget-text-editor p {
  color: #888 !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.elementor-pagination,
.page-numbers,
nav.navigation.pagination {
  display: flex !important;
  gap: 4px !important;
  justify-content: center !important;
}

.page-numbers a,
.page-numbers span,
.elementor-pagination a {
  padding: 4px 10px !important;
  background: #fff !important;
  color: var(--sf-blue-primary) !important;
  border: 1px solid #e4eaf1 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.page-numbers a:hover,
.elementor-pagination a:hover {
  background: #eef2f7 !important;
  border-color: #cfdae7 !important;
  color: var(--sf-blue-primary) !important;
}

.page-numbers .current,
.page-numbers span.current {
  background: var(--sf-blue-primary) !important;
  color: #fff !important;
  border-color: var(--sf-blue-primary) !important;
}

/* ============================================================
   WIDGETS
   ============================================================ */

/* Image Widgets */
.elementor-widget-image img {
  border-radius: 5px !important;
}

/* Video Widget */
.elementor-widget-video {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Dividers */
.elementor-divider-separator {
  border-color: var(--sf-border) !important;
}

/* Tabs */
.elementor-tab-title {
  color: var(--sf-text-muted) !important;
  transition: color 0.2s ease !important;
}

.elementor-tab-title.elementor-active {
  color: var(--sf-blue-primary) !important;
}

/* Forms */
.elementor-field-textual,
.elementor-field-textual input,
.elementor-field-textual textarea,
.elementor-field-group input,
.elementor-field-group textarea {
  background: #fff !important;
  border: 1px solid #eee !important;
  color: #333 !important;
  border-radius: 5px !important;
}

.elementor-field-textual:focus,
.elementor-field-group input:focus {
  border-color: var(--sf-blue-primary) !important;
  outline: none !important;
}

/* ============================================================
   LOOP GRID / POST GRID
   ============================================================ */

.elementor-loop-container,
.elementor-posts-container {
  gap: 15px !important;
}

/* ============================================================
   SIDEBAR / WIDGET AREAS
   ============================================================ */

.elementor-widget-container {
  transition: all 0.2s ease !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
  .elementor-nav-menu--dropdown a {
    font-size: 16px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }

  .elementor-post,
  .elementor-post__card {
    border-width: 2px !important;
  }
}

@media (max-width: 480px) {
  .elementor-heading-title {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.elementor-post,
.elementor-loop-container .e-loop-item,
.elementor-button,
.elementor-icon,
.elementor-social-icon,
a {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}


/* ----- Archive / Taxonomy Grid (2 columns) ----- */
.archive .page-content,
.tax-sf_category .page-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.archive .page-content article,
.tax-sf_category .page-content article {
  background: var(--sf-bg-surface, #2E323D);
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 16px;
}

.archive .page-content article h2 {
  font-size: 1.1rem;
  padding: 12px 16px 4px;
  margin: 0;
}

.archive .page-content article h2 a {
  color: var(--sf-text-primary, #e8ecf2);
  text-decoration: none;
}

.archive .page-content article h2 a:hover {
  color: var(--sf-blue-primary, #2C78C9);
}

.archive .page-content article p {
  padding: 0 16px;
  font-size: 0.9rem;
  color: var(--sf-blue-pale, #8FACC7);
  margin: 4px 0 0;
}

.archive .page-content article img {
  width: 100%;
  height: auto;
  display: block;
}

/* Pagination stays full-width */
.archive nav.navigation {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .archive .page-content,
  .tax-sf_category .page-content {
    grid-template-columns: 1fr;
  }
}


/* ----- Archive / Taxonomy Date ----- */
.sf-archive-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8899aa;
    font-size: 12px;
    font-family: "DM Sans", sans-serif;
    padding: 0 16px;
    margin: 2px 0 4px;
    line-height: 1;
}
.sf-archive-date__icon {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ----- Archive / Taxonomy Meta Row ----- */
.sf-archive-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    margin: 2px 0 4px;
    flex-wrap: wrap;
}
.sf-archive-meta-row .sf-archive-date {
    padding: 0;
    margin: 0;
}
.sf-archive-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8899aa;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    line-height: 1;
}
.sf-archive-stat svg {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ----- Archive Pagination (paginate_links output) ----- */
.pagination .nav-links {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 24px 0;
    flex-wrap: wrap;
}
.pagination .nav-links a,
.pagination .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--sf-elevated, #22262E);
    color: var(--sf-text-secondary, #9BA4B5);
    border-radius: var(--sf-radius-sm, 8px);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pagination .nav-links a:hover {
    background: var(--sf-elevated-2, #2A2E36);
    color: var(--sf-text, #E8ECF2);
}
.pagination .nav-links span.current {
    background: var(--sf-accent, #3B9AE8);
    color: #fff;
    font-weight: 700;
}
.pagination .nav-links span.dots {
    background: transparent;
    color: var(--sf-text-secondary, #9BA4B5);
}