/*
Theme Name: TeleRX
Theme URI: https://example.com/telerx
Author: TeleRX
Description: Landing page theme for TeleRX GLP-1 weight loss care. Every image, video and logo zone is editable from Appearance > Customize > TeleRX Landing Page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: telerx
Tags: landing-page, one-column, custom-logo, custom-menu, full-width-template
*/

/* ---------------------------------------------------------------
   Base (from the approved mockup)
   --------------------------------------------------------------- */
body{margin:0;background:#FFFFFF;-webkit-font-smoothing:antialiased;font-family:'Figtree','Helvetica Neue',sans-serif;color:#3B1450;line-height:1.5}
a{color:#D61F7A}
a:hover{color:#A8125C}

:root{--accent:#D61F7A;--accent-dark:#A8125C;--tint:#FFF0F7;--violet:#8E3BE6;--violet-dark:#6B26C2;--lav:#F6EEFF}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
img{max-width:100%;display:block}

/* ---------------------------------------------------------------
   Media slots
   Every editable image/video zone on the page uses .trx-slot.
   When the Customizer setting is empty the slot keeps the mockup
   placeholder look (gradient + label) so the layout never collapses.
   --------------------------------------------------------------- */
.trx-slot{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;font-size:14px;box-sizing:border-box}
.trx-slot__media{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.trx-slot__label{padding:20px;display:block}
.trx-slot--has-media .trx-slot__label{display:none}

/* Slot palettes */
.trx-slot--tint{background:linear-gradient(135deg,#FFDCEC 0%,#F3E0FB 55%,#E9DEFF 100%);color:#8A3A86}
.trx-slot--dark{background:rgba(255,255,255,0.12);color:#F0E1FA}
.trx-slot--violet{background:var(--violet);color:#FFFFFF}
.trx-slot--glass{background:rgba(255,255,255,0.12);color:#F1E8FF}

/* Slot sizes */
.trx-slot--h200{height:200px}
.trx-slot--h240{height:240px}
.trx-slot--h260{height:260px}
.trx-slot--h400{height:400px}
.trx-slot--h420{height:420px}
.trx-slot--h520{height:520px}
.trx-slot--h540{height:540px}
.trx-slot--ratio169{width:100%;aspect-ratio:16/9}
.trx-slot--round{width:180px;height:180px;border-radius:50%}
.trx-slot--seal{width:120px;height:50px;border-radius:6px;font-size:11px;display:inline-flex}

.trx-r18{border-radius:18px}
.trx-r20{border-radius:20px}
.trx-r22{border-radius:22px}
.trx-r28{border-radius:28px}

/* Embedded video (oEmbed) inside a 16:9 slot */
.trx-slot--ratio169 iframe,
.trx-slot--ratio169 video{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;object-fit:cover}
.trx-slot .wp-video,.trx-slot .mejs-container{width:100%!important;height:100%!important}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.trx-hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;background:radial-gradient(ellipse at 8% 10%,#FFB7DA 0%,transparent 45%),radial-gradient(ellipse at 92% 20%,#E3CCFF 0%,transparent 50%),radial-gradient(ellipse at 70% 100%,#FFD3E6 0%,transparent 55%),linear-gradient(135deg,#FFE3F0 0%,#F4E4FF 100%)}
.trx-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.trx-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 55%,rgba(255,255,255,0) 100%)}
.trx-hero__inner{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:80px 24px}
.trx-hero__note{position:absolute;top:16px;right:24px;z-index:2;font-size:13px;font-weight:600;color:#8A3A86;opacity:.8}

/* ---------------------------------------------------------------
   Navigation (works with a WP menu or the built-in fallback links)
   --------------------------------------------------------------- */
.trx-nav ul{display:contents;margin:0;padding:0;list-style:none}
.trx-nav li{list-style:none;margin:0}
.trx-nav a{color:#3B1450;text-decoration:none}
.trx-nav li:first-child a,.trx-nav .current-menu-item a{color:var(--violet)}
.trx-legal ul{display:contents;margin:0;padding:0;list-style:none}
.trx-legal li{list-style:none;margin:0}
.trx-legal a{color:#FFFFFF}

/* ---------------------------------------------------------------
   Carousel
   --------------------------------------------------------------- */
.trx-carousel__viewport{flex:1;min-width:0;position:relative}
.trx-carousel__slide{display:none}
.trx-carousel__slide.is-active{display:flex}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.faq-q{width:100%;background:none;border:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font-family:'Figtree',sans-serif;font-size:18px;font-weight:700;color:#3B1450;cursor:pointer;min-height:44px}
.faq-a{padding-bottom:10px}
.faq-a p{margin:0 0 12px;color:#6A4A78;font-size:16px}
.sign{font-size:26px;font-weight:400;color:var(--violet);flex:none}

/* ---------------------------------------------------------------
   Generic WP content (non-landing pages / posts)
   --------------------------------------------------------------- */
.trx-content{max-width:860px;margin:0 auto;padding:72px 24px}
.trx-content h1,.trx-content h2,.trx-content h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.5px}
.trx-content img{border-radius:18px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;width:auto;height:auto;clip:auto;background:#fff;padding:10px 16px;border-radius:8px}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media (max-width:640px){
  h1{font-size:38px!important}
  .trx-slot--h520,.trx-slot--h540{height:340px!important}
  .trx-slot--h420{height:300px!important}
  .trx-hero__scrim{background:rgba(255,255,255,.45)}
}