/*
Theme Name: hostVigor
Theme URI: https://example.com/hostpro
Author: Tatwerco
Author URI: https://example.com
Description: A conversion-focused theme for web hosting and domain businesses, built for hostVigor. Hosting plans and domain TLD pricing are fully manageable from the WordPress admin. Built RTL-first for Arabic sites, and works equally well in LTR languages.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hostpro
Tags: e-commerce, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready
*/

/* -----------------------------------------------------------
   This file intentionally contains ALL front-end styling.
   It is enqueued from functions.php via get_stylesheet_uri().
   Logical CSS properties (inset-inline-*, border-inline-*, etc.)
   are used wherever a side depends on text direction, so the
   theme adapts automatically between RTL (Arabic) and LTR sites
   based on the site's language setting — no separate rtl.css
   duplication needed for layout, only for the few purely
   cosmetic direction flips called out below.
   ----------------------------------------------------------- */

:root{
  --navy:#132043;
  --navy-2:#1c2d59;
  --orange:#FF6B35;
  --orange-dark:#E6551F;
  --blue:#2F80ED;
  --bg:#F5F7FB;
  --white:#FFFFFF;
  --text:#5B6478;
  --heading:#151E3D;
  --line:#E7EBF3;
  --radius:14px;
  --shadow:0 20px 45px -18px rgba(19,32,67,0.18);
  --maxw:1180px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Tajawal',sans-serif; color:var(--text); background:var(--white); line-height:1.8;}
h1,h2,h3,h4,h5{font-family:'Tajawal',sans-serif; color:var(--heading); margin:0;}
a{text-decoration:none; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:100px 0;}
section[id]{scroll-margin-top:100px;}
@media(max-width:720px){section{padding:64px 0;} .wrap{padding:0 18px;}}
.bg-alt{background:var(--bg);}
.mono{font-family:'Tajawal',sans-serif; direction:ltr; unicode-bidi:isolate; display:inline-block;}

.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-weight:700; font-size:13px; letter-spacing:.3px; margin-bottom:12px;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--orange); display:inline-block;}
.section-head{max-width:600px; margin:0 auto 54px; text-align:center;}
.section-head h2{font-size:clamp(24px,3.2vw,34px); font-weight:800;}
.section-head p{margin-top:14px; font-size:15.5px;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:8px; font-weight:700; font-size:15px; border:2px solid transparent; transition:.25s;}
.btn-orange{background:var(--orange); color:#fff;}
.btn-orange:hover{background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(255,107,53,0.55);}
.btn-outline{border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-outline-w{border-color:rgba(255,255,255,0.4); color:#fff;}
.btn-outline-w:hover{background:#fff; color:var(--navy);}
.btn-sm{padding:10px 20px; font-size:14px;}

/* HEADER */
.topbar{background:var(--navy); color:#cfd7ec; font-size:13px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:40px;}
.topbar-links{display:flex; gap:22px;}
.topbar-links a:hover{color:#fff;}
@media(max-width:720px){.topbar{display:none;}}

.site-header{position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line); transition:.3s;}
.nav{display:flex; align-items:center; justify-content:space-between; height:84px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; color:var(--navy);}
.brand-mark{width:38px; height:38px; border-radius:9px; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; flex-shrink:0;}
.brand img{max-height:38px; width:auto;}
nav.links{display:flex; align-items:center; gap:32px;}
nav.links ul{display:flex; align-items:center; gap:32px;}
nav.links li{position:relative;}
nav.links a{font-weight:600; font-size:14.5px; color:var(--heading); padding:10px 0; display:inline-block;}
nav.links li.menu-item-has-children > a::after{content:"▾"; font-size:11px; margin-inline-start:5px;}
nav.links .sub-menu{position:absolute; top:100%; inset-inline-start:0; background:#fff; box-shadow:var(--shadow); border-radius:10px; padding:10px; min-width:190px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; z-index:20;}
nav.links li:hover > .sub-menu{opacity:1; visibility:visible; transform:none;}
nav.links .sub-menu a{display:block; padding:9px 12px; border-radius:6px; font-size:14px; color:var(--text); font-weight:500;}
nav.links .sub-menu a:hover{background:var(--bg); color:var(--orange);}
.nav-actions{display:flex; align-items:center; gap:16px;}
.nav-actions a.login{font-weight:600; font-size:14px; color:var(--heading);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.burger span{width:22px; height:2px; background:var(--navy); border-radius:2px;}
@media(max-width:980px){
  nav.links{display:none;}
  .nav-actions .login, .nav-actions .btn{display:none;}
  .burger{display:flex;}
}
#mobileMenu{display:none; flex-direction:column; border-top:1px solid var(--line); padding:10px 0 20px;}
#mobileMenu.open{display:flex;}
#mobileMenu a{padding:12px 4px; font-weight:600; border-bottom:1px solid var(--line); color:var(--heading); display:block;}

/* HERO */
.hero{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; padding:130px 0 150px;}
.hero-inner{position:relative; max-width:720px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,5.6vw,58px); color:#fff; font-weight:800; line-height:1.3; margin-bottom:36px;}

.domain-search{display:flex; align-items:center; gap:0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); border-radius:100px; padding:8px; max-width:680px; margin:0 auto; backdrop-filter:blur(6px);}
.domain-search input{flex:1; background:none; border:none; outline:none; color:#fff; font-family:inherit; font-size:16.5px; padding:15px 22px;}
.domain-search input::placeholder{color:#aab3cc;}
.domain-search button{border-radius:100px; flex-shrink:0; padding:14px 28px; font-size:15.5px;}
@media(max-width:520px){
  .domain-search{flex-direction:column; background:none; border:none; padding:0; gap:10px; max-width:100%;}
  .domain-search input{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); border-radius:100px; width:100%;}
  .domain-search button{width:100%; justify-content:center;}
}
.domain-note{font-size:13px; color:#9aa4c2; margin:14px auto 0; max-width:680px; text-align:center;}

/* TLD strip */
.tld-band{background:var(--navy-2); position:relative; overflow:hidden;}
.tld-row{display:flex; width:max-content; gap:0; animation:hostpro-tld-scroll 22s linear infinite;}
.tld-band:hover .tld-row{animation-play-state:paused;}
@keyframes hostpro-tld-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
html[dir="rtl"] .tld-row{animation-name:hostpro-tld-scroll-rtl;}
@keyframes hostpro-tld-scroll-rtl{from{transform:translateX(0);} to{transform:translateX(50%);}}
.tld-cell{flex:0 0 auto; min-width:150px; text-align:center; padding:22px 24px; border-inline-end:1px solid rgba(255,255,255,0.08); color:#fff; white-space:nowrap;}
.tld-cell .ext{font-weight:700; font-size:16px; color:#ffb59b; direction:ltr; display:inline-block;}
.tld-cell .price{font-weight:800; font-size:22px; margin-top:6px;}
.tld-cell .price sup{font-size:13px; font-weight:600;}
@media(prefers-reduced-motion:reduce){.tld-row{animation:none; overflow-x:auto;}}
.tld-row.tld-row--static{width:auto; animation:none; justify-content:center; flex-wrap:wrap;}
.tld-row.tld-row--static .tld-cell{border-inline-end:none;}

/* FEATURE STRIP (3 icons) */
.feat3-wrap{padding-bottom:56px;}
.feat3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px; position:relative; z-index:6;}
@media(max-width:820px){.feat3{grid-template-columns:1fr; margin-top:30px;}}
.feat3-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px 26px; display:flex; gap:18px; align-items:flex-start;}
.feat3-icon{width:54px; height:54px; border-radius:12px; background:#FFF1EC; color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.feat3-card h3{font-size:17px; margin-bottom:8px;}
.feat3-card p{font-size:14px; margin:0;}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
.about-art{aspect-ratio:4/3.2; border-radius:20px; background:linear-gradient(150deg,#eef2fb,#dfe6f7); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.about-art svg{width:55%; opacity:.85;}
.about-badge{position:absolute; bottom:20px; inset-inline-start:20px; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:14px 18px; display:flex; align-items:center; gap:12px;}
.about-badge .n{font-weight:800; color:var(--orange); font-size:20px;}
.about-badge .l{font-size:12px; color:var(--text);}
.about-text p{font-size:15px; margin:18px 0 30px;}
.about-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px;}
.about-stats .n{font-weight:800; font-size:clamp(22px,2.6vw,28px); color:var(--navy);}
.about-stats .l{font-size:13px; color:var(--text); margin-top:4px;}

/* PRICING */
.price-tabs{display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:44px; font-size:14px; color:var(--text); flex-wrap:wrap;}
.switch{width:46px; height:26px; background:#e3e7f1; border:1px solid var(--line); border-radius:100px; position:relative; cursor:pointer; flex-shrink:0;}
.switch::after{content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%; background:#9aa2b6; transition:.25s;}
.switch.on{border-color:var(--orange);}
.switch.on::after{background:var(--orange); transform:translateX(20px);}
html[dir="rtl"] .switch.on::after{transform:translateX(-20px);}
.save-badge{background:#FFF1EC; color:var(--orange); font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px;}
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:900px){.plans-grid{grid-template-columns:1fr; max-width:400px; margin:0 auto;}}
.plan-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px; text-align:center; position:relative; transition:.25s;}
.plan-card:hover{box-shadow:var(--shadow); transform:translateY(-4px);}
.plan-card.pop{border-color:var(--orange); box-shadow:var(--shadow);}
.plan-tag{position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(-50%); background:var(--orange); color:#fff; font-size:12px; font-weight:700; padding:5px 16px; border-radius:100px; white-space:nowrap;}
.plan-card h3{font-size:15px; color:var(--text); font-weight:700; margin-bottom:16px;}
.plan-price{font-weight:800; font-size:40px; color:var(--navy);}
.plan-price span{font-size:14px; font-weight:600; color:var(--text);}
.plan-note{font-size:12.5px; color:#9aa2b6; margin:6px 0 26px;}
.plan-feats{text-align:start; display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
.plan-feats li{display:flex; align-items:center; gap:10px; font-size:14px;}
.plan-feats svg{color:#39C972; flex-shrink:0;}
.plan-card .btn{width:100%; justify-content:center;}
.plans-empty{text-align:center; color:var(--text); padding:40px; border:1px dashed var(--line); border-radius:var(--radius);}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr;}}
.service-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:.25s;}
.service-card:hover{border-color:var(--orange); box-shadow:var(--shadow); transform:translateY(-3px);}
.service-icon{width:50px; height:50px; border-radius:12px; background:#EAF1FE; color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.service-card h4{font-size:17px; margin-bottom:8px;}
.service-card p{font-size:14px; margin:0;}

/* TESTIMONIALS */
.test-slider{position:relative; max-width:760px; margin:0 auto; text-align:center;}
.test-slide{display:none;}
.test-slide.active{display:block;}
.test-quote{font-size:17px; color:var(--heading); font-weight:500; max-width:640px; margin:0 auto 26px;}
.test-avatar{width:60px; height:60px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--blue),#8ab4f8); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.test-name{font-weight:700; color:var(--heading);}
.test-role{font-size:13px; color:var(--orange); font-weight:600;}
.test-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.test-dots button{width:8px; height:8px; border-radius:50%; background:var(--line); border:none;}
.test-dots button.active{background:var(--orange); width:22px; border-radius:5px; transition:.25s;}

/* BLOG */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.25s;}
.blog-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.blog-thumb{aspect-ratio:16/10; background:linear-gradient(135deg,#eef2fb,#dfe6f7); display:flex; align-items:center; justify-content:center; color:#c3cce6; overflow:hidden;}
.blog-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-body{padding:22px;}
.blog-meta{font-size:12px; color:#9aa2b6; margin-bottom:10px;}
.blog-body h4{font-size:16px; margin-bottom:10px;}
.blog-body h4 a:hover{color:var(--orange);}
.blog-body p{font-size:13.5px; margin:0 0 14px;}
.blog-body a.more{font-size:13px; font-weight:700; color:var(--orange);}

/* CONTACT */
.contact-band{background:var(--navy); color:#fff; border-radius:24px; padding:56px; display:grid; grid-template-columns:1fr auto auto; gap:30px; align-items:center;}
@media(max-width:820px){.contact-band{grid-template-columns:1fr; text-align:center;}}
.contact-item{display:flex; align-items:center; gap:14px;}
@media(max-width:820px){.contact-item{justify-content:center;}}
.contact-icon{width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-item .l{font-size:12.5px; color:#a9b2cc;}
.contact-item .v{font-weight:700; font-size:15px;}

/* FAQ */
.faq-wrap{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; background:none; border:none; text-align:start; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 4px; font-size:15.5px; font-weight:700; color:var(--heading);}
.faq-q .plus{width:20px; height:20px; position:relative; flex-shrink:0;}
.faq-q .plus::before,.faq-q .plus::after{content:""; position:absolute; background:var(--orange); border-radius:2px;}
.faq-q .plus::before{width:14px; height:2px; top:9px; inset-inline-start:3px;}
.faq-q .plus::after{width:2px; height:14px; top:3px; inset-inline-start:9px; transition:.25s;}
.faq-item.open .faq-q .plus::after{transform:rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{font-size:14px; padding:0 4px 22px; margin:0;}

/* FOOTER */
.site-footer{background:#0F192F; color:#aab3cc; padding:70px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff; font-size:15px; margin-bottom:18px;}
.site-footer .brand{color:#fff;}
.site-footer p{font-size:13.5px; max-width:280px; margin:16px 0 0;}
.footer-grid ul li{margin-bottom:11px;}
.footer-grid ul a{font-size:14px; color:#aab3cc;}
.footer-grid ul a:hover{color:var(--orange);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; text-align:center; font-size:13px;}
.footer-bottom a{color:#aab3cc;}
.footer-bottom a:hover{color:var(--orange);}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s;}
.reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;} .reveal{opacity:1; transform:none;}}
:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

/* Core WP alignment classes, needed for block/editor content inside pages */
.alignleft{float:left; margin:0 20px 20px 0;}
.alignright{float:right; margin:0 0 20px 20px;}
.aligncenter{display:block; margin:20px auto;}
.wp-caption{max-width:100%;}