/*
 Theme Name:   RIB Media Child
 Theme URI:    https://ribmedia.in
 Description:  Astra child theme for RIB Media Pvt Ltd — brand colours (yellow/black/white), fonts, and section styles to match the RIB Media design in Elementor. Rely in best.
 Author:       RIB Media
 Template:     astra
 Version:      1.0.0
 Text Domain:  ribmedia-child
*/

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root{
  --rib-black:#0c0c0c;
  --rib-black-2:#151515;
  --rib-black-3:#1e1e1e;
  --rib-yellow:#f2c11d;
  --rib-yellow-deep:#e6b40c;
  --rib-white:#ffffff;
  --rib-paper:#faf6ea;
  --rib-muted:#9a9a92;
  --rib-line:rgba(255,255,255,.12);
}

/* Global page background + base text on the black theme */
body{
  background:var(--rib-black);
  color:var(--rib-white);
}

/* Font families (Astra loads Google Fonts; set families globally) */
body{font-family:'Inter',system-ui,sans-serif;}
h1,h2,h3,h4,.rib-display{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;}

/* ============================================================
   BUTTONS  (add CSS class rib-btn-yellow / rib-btn-ghost to Elementor buttons)
   ============================================================ */
.rib-btn-yellow .elementor-button,
a.rib-btn-yellow{
  background:var(--rib-yellow)!important;color:var(--rib-black)!important;
  text-transform:uppercase;font-weight:700;letter-spacing:.02em;border-radius:2px;
  transition:transform .2s,background .2s;
}
.rib-btn-yellow .elementor-button:hover,
a.rib-btn-yellow:hover{background:var(--rib-yellow-deep)!important;transform:translateY(-2px);}

.rib-btn-ghost .elementor-button,
a.rib-btn-ghost{
  background:transparent!important;color:var(--rib-white)!important;
  border:1px solid rgba(255,255,255,.4)!important;text-transform:uppercase;font-weight:700;
  border-radius:2px;transition:border-color .2s,color .2s;
}
.rib-btn-ghost .elementor-button:hover,
a.rib-btn-ghost:hover{border-color:var(--rib-yellow)!important;color:var(--rib-yellow)!important;}

/* ============================================================
   EYEBROW LABEL  (class: rib-eyebrow)
   ============================================================ */
.rib-eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rib-yellow);font-weight:700;display:inline-block;
}

/* ============================================================
   SECTION BACKGROUNDS  (add class to Elementor SECTION)
   ============================================================ */
.rib-sec-black{background:var(--rib-black)!important;}
.rib-sec-black-2{background:var(--rib-black-2)!important;}
.rib-sec-yellow{background:var(--rib-yellow)!important;color:var(--rib-black)!important;}
.rib-sec-yellow *{color:var(--rib-black);}
.rib-sec-yellow .rib-eyebrow{color:var(--rib-black);}

/* Dark gradient overlay for image/video hero (class: rib-overlay on section) */
.rib-overlay::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,12,12,.96),rgba(12,12,12,.72) 45%,rgba(12,12,12,.5)),
             linear-gradient(0deg,rgba(12,12,12,.97),transparent 55%);
}
.rib-overlay > .elementor-container{position:relative;z-index:2;}

/* ============================================================
   SERVICE / IMAGE CARDS  (class: rib-card on the widget or column)
   image-zoom on hover + yellow bottom accent
   ============================================================ */
.rib-card{position:relative;overflow:hidden;border:1px solid var(--rib-line);border-radius:8px;border-bottom:3px solid var(--rib-yellow);}
.rib-card img{transition:transform .6s ease;}
.rib-card:hover img{transform:scale(1.07);}

/* ============================================================
   STAT COUNTERS  (class: rib-stat on the Counter widget)
   ============================================================ */
.rib-stat{border-top:3px solid var(--rib-yellow);padding-top:20px;text-align:center;}
.rib-stat .elementor-counter-number-wrapper{
  font-family:'Fraunces',serif;font-weight:700;color:var(--rib-yellow);
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;
}
.rib-stat .elementor-counter-title{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rib-paper);opacity:.85;margin-top:12px;
}

/* ============================================================
   PORTFOLIO TILES  (class: rib-tile)
   ============================================================ */
.rib-tile{position:relative;overflow:hidden;border-radius:5px;border:1px solid var(--rib-line);}
.rib-tile img{transition:transform .6s ease;}
.rib-tile:hover img{transform:scale(1.09);}

/* ============================================================
   TESTIMONIAL CARDS  (class: rib-quote)
   ============================================================ */
.rib-quote{
  background:var(--rib-black);border:1px solid var(--rib-line);
  border-top:3px solid var(--rib-yellow);border-radius:6px;padding:34px 30px;
}
.rib-quote .elementor-testimonial-name{color:var(--rib-white);font-weight:700;}
.rib-quote .elementor-testimonial-job{color:var(--rib-muted);}

/* ============================================================
   HEADER — centered split logo, sticky darken
   (works with Elementor / Header-Footer-Builder header row given class rib-header)
   ============================================================ */
.rib-header{transition:background .3s,padding .3s;}
.rib-header.rib-scrolled{background:rgba(12,12,12,.94)!important;backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rib-line);}
.rib-header .rib-logo img{height:52px;width:auto;border-radius:6px;transition:height .3s;}
.rib-header.rib-scrolled .rib-logo img{height:44px;}
/* menu links */
.rib-header .menu-item a{
  text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:.88rem;
  color:var(--rib-white);transition:color .2s;
}
.rib-header .menu-item a:hover{color:var(--rib-yellow);}

/* ============================================================
   FOOTER  (class: rib-footer on footer section)
   ============================================================ */
.rib-footer{background:#070707!important;border-top:3px solid var(--rib-yellow);}
.rib-footer h4{color:var(--rib-yellow);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;}
.rib-footer a{color:var(--rib-paper);opacity:.72;transition:opacity .2s,color .2s;}
.rib-footer a:hover{color:var(--rib-yellow);opacity:1;}

/* ============================================================
   VIDEO BACKGROUND (self-hosted) — used with functions.php helper
   Add class rib-video-bg to a section and set data-rib-video="URL" (see README)
   ============================================================ */
.rib-video-bg{position:relative;overflow:hidden;}
.rib-video-bg > .rib-bgvideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.rib-video-bg > .elementor-container{position:relative;z-index:2;}

/* ============================================================
   SCROLL REVEAL (class: rib-reveal on any widget)
   ============================================================ */
.rib-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.rib-reveal.rib-in{opacity:1;transform:none;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rib-reveal{opacity:1;transform:none;transition:none;}
  .rib-card img,.rib-tile img{transition:none;}
}