/*
Theme Name: VisaPath 2
Author: Hardeep Singh
Description: Custom theme for immigration and visa consulting sites. Layout follows the VisaVision template: top bar, hero, four boxes, about, country grid, free consultation, services, team, testimonials, logos, CTA and four-column footer. Works with Elementor (Theme Builder supported) and includes custom post types and shortcodes.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: visapath
*/

/* Change the whole colour scheme here. */
:root{
  --vp-primary:#10243E; --vp-primary-2:#1B3556; --vp-accent:#F2A93B; --vp-accent-d:#D98E1C;
  --vp-mist:#F3F5F9; --vp-text:#44546A; --vp-line:#DDE3EC;
  --vp-radius:4px; --vp-wrap:1200px; --vp-font:"Outfit",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--vp-font);color:var(--vp-text);background:#fff;line-height:1.7;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--vp-primary-2)}
h1,h2,h3,h4{color:var(--vp-primary);line-height:1.15;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.4rem,3.5vw,3.2rem)} h2{font-size:clamp(1.8rem,3.2vw,2.6rem)} h3{font-size:1.25rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--vp-accent);outline-offset:2px}
.screen-reader-text{position:absolute;left:-9999px}
.vp-wrap{max-width:var(--vp-wrap);margin:0 auto;padding:0 20px}
.vp-section{padding:90px 0}
.vp-section--mist{background:var(--vp-mist)}
.vp-icon{display:block}
.vp-center{text-align:center;margin-top:40px}
.vp-eyebrow{display:block;text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:.82rem;color:var(--vp-accent-d);margin-bottom:10px}
.vp-head{max-width:720px;margin-bottom:44px}
.vp-head--center{margin-left:auto;margin-right:auto;text-align:center}

/* Buttons */
.vp-btn{display:inline-block;background:var(--vp-accent);color:var(--vp-primary);font:700 .85rem/1 var(--vp-font);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:16px 28px;border:0;border-radius:var(--vp-radius);cursor:pointer;transition:background .2s}
.vp-btn:hover{background:var(--vp-accent-d)}
.vp-btn--dark{background:var(--vp-primary);color:#fff}
.vp-btn--dark:hover{background:var(--vp-primary-2)}

/* Top bar */
.vp-topbar{background:var(--vp-primary);color:#C9D5E6;font-size:.875rem}
.vp-topbar .vp-wrap{display:flex;gap:16px 28px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px}
.vp-topbar a{color:#fff;text-decoration:none}
.vp-topbar__contact{display:flex;gap:22px;flex-wrap:wrap}
.vp-social{display:flex;gap:14px}
.vp-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#fff}
.vp-social a:hover{background:var(--vp-accent);border-color:var(--vp-accent);color:var(--vp-primary)}
.vp-social--top a{width:auto;height:auto;border:0;border-radius:0}
.vp-social--team{margin-top:10px;gap:8px}
.vp-social--team a{border-color:var(--vp-line);color:var(--vp-primary)}
.vp-social--team a:hover{color:var(--vp-primary)}

/* Header */
.vp-header{background:#fff;border-bottom:1px solid var(--vp-line);position:sticky;top:0;z-index:50}
.vp-header .vp-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.vp-logo{font-weight:800;font-size:1.7rem;color:var(--vp-primary);text-decoration:none}
.vp-logo--light{color:#fff;display:inline-block;margin-bottom:14px}
.vp-logo img,.custom-logo{max-height:56px;width:auto}
.vp-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center}
.vp-nav a{color:var(--vp-primary);text-decoration:none;font-weight:600;padding:8px 0;display:inline-block}
.vp-nav a:hover,.vp-nav .current-menu-item>a{color:var(--vp-accent-d)}
.vp-nav li{position:relative}
.vp-nav .sub-menu{display:none;position:absolute;top:100%;left:-16px;background:#fff;min-width:250px;padding:12px 16px;border:1px solid var(--vp-line);border-radius:var(--vp-radius);flex-direction:column;align-items:flex-start;gap:4px;box-shadow:0 12px 30px rgba(16,36,62,.12)}
.vp-nav li:hover>.sub-menu,.vp-nav li:focus-within>.sub-menu{display:flex}
.vp-menu-toggle{display:none;background:none;border:2px solid var(--vp-primary);border-radius:var(--vp-radius);padding:8px 12px;font:600 .9rem var(--vp-font);color:var(--vp-primary);cursor:pointer}

/* Hero */
.vp-hero{background:var(--vp-primary) center/cover no-repeat;position:relative;color:#fff;padding:150px 0 170px}
.vp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,36,62,.95) 30%,rgba(16,36,62,.55))}
.vp-hero .vp-wrap{position:relative}
.vp-hero h1{color:#fff;max-width:18ch}
.vp-hero p{max-width:54ch;color:#D5DFEE;font-size:1.15rem;margin-bottom:28px}

/* Four boxes */
.vp-boxes{margin-top:-70px;position:relative;z-index:2}
.vp-boxes .vp-grid{gap:0;background:#fff;box-shadow:0 18px 44px rgba(16,36,62,.16);border-radius:var(--vp-radius);padding:0}
.vp-box{padding:32px 28px;border-right:1px solid var(--vp-line);border-top:4px solid var(--vp-accent)}
.vp-box:last-child{border-right:0}
.vp-box h3{margin-bottom:6px}
.vp-box p{margin:0;font-size:.95rem}

/* Split sections */
.vp-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.vp-split--rev>:first-child{order:1}
.vp-media{min-height:440px;background:var(--vp-mist) center/cover no-repeat;border-radius:var(--vp-radius)}
.vp-checks{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vp-checks li{padding-left:30px;position:relative;font-weight:600;color:var(--vp-primary)}
.vp-checks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:3px solid var(--vp-accent-d);border-bottom:3px solid var(--vp-accent-d);transform:rotate(-45deg)}

/* Grids and cards */
.vp-grid{display:grid;gap:26px;grid-template-columns:repeat(var(--cols,3),1fr)}
.vp-card{background:#fff;border:1px solid var(--vp-line);border-radius:var(--vp-radius);overflow:hidden;display:flex;flex-direction:column}
.vp-card__body{padding:26px}
.vp-card h3 a{text-decoration:none;color:inherit; pointer-events: none;}
.vp-card--country{position:relative;min-height:340px;border:0;justify-content:flex-end;background:var(--vp-primary)}
.vp-card--country img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vp-card--country:hover img{transform:scale(1.05)}
.vp-card--country::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,36,62,.92) 12%,rgba(16,36,62,0) 70%)}
.vp-card--country .vp-card__body{position:relative;z-index:1;color:#DCE4EF}
.vp-card--country h3,.vp-card--country h3 a{color:#fff;text-transform:uppercase;letter-spacing:.03em}
.vp-card--country p{margin:0;font-size:.92rem}
.vp-card--service{padding:20px; border-left:5px solid var(--vp-accent);transition:box-shadow .2s}
.vp-card--service:hover{box-shadow:0 14px 34px rgba(16,36,62,.1)}
.vp-card--service p{margin:0}
.vp-card--service .f-img{ width:100%; float:left; text-align:center;}
.vp-card__img{ text-align:center; display: inline-block; pointer-events: none;}
.vp-card--service .f-img img{ max-width:64px; text-align:center;}
.vp-card--team{text-align:center}
.vp-card--team img{aspect-ratio:5/6;object-fit:cover;width:100%}
.vp-card--team .vp-card__body{padding:20px}
.vp-card--team h3{margin:0}
.vp-role{margin:0;font-size:.95rem}
.vp-card--team .vp-social{justify-content:center}

/* Testimonials */
.vp-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.vp-quote{flex:0 0 min(460px,88%);scroll-snap-align:start;background:#fff;border-radius:var(--vp-radius);border:1px solid var(--vp-line);padding:32px}
.vp-quote blockquote{margin:0 0 22px;color:var(--vp-primary)}
.vp-quote footer{display:flex;gap:14px;align-items:center}
.vp-quote img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.vp-quote strong{display:block;color:var(--vp-primary)}
.vp-slider-nav{display:flex;gap:10px;margin-top:22px;justify-content:center}
.vp-slider-nav button{width:46px;height:46px;border-radius:50%;border:2px solid var(--vp-primary);background:#fff;color:var(--vp-primary);font-size:1.1rem;cursor:pointer}
.vp-slider-nav button:hover{background:var(--vp-primary);color:#fff}

/* Logos */
.vp-logos{padding:56px 0;border-bottom:1px solid var(--vp-line)}
.vp-logos .vp-wrap{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.vp-logos img{max-height:56px;width:auto;opacity:.7;filter:grayscale(1)}

/* CTA */
.vp-cta{background:var(--vp-accent);padding:64px 0}
.vp-cta .vp-wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vp-cta h2{margin:0 0 6px}
.vp-cta p{margin:0;color:var(--vp-primary)}

/* Contact form (shortcode) */
.vp-form{display:grid;gap:14px}
.vp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vp-form input,.vp-form textarea{width:100%;font:inherit;padding:13px 14px;border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;color:var(--vp-primary)}
.vp-notice{background:var(--vp-mist);border-left:4px solid var(--vp-accent);padding:10px 14px;font-size:.95rem}

/* Posts (shortcode) */
.vp-posts{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.vp-post h3{font-size:1.05rem;margin:12px 0 6px}
.vp-post h3 a,.vp-post--lead>a{color:var(--vp-primary);text-decoration:none}
.vp-post--lead img{width:100%;aspect-ratio:3/2;object-fit:cover}
.vp-more{color:var(--vp-accent-d);font-weight:600;text-decoration:none}
.vp-posts__list{display:grid;gap:22px;align-content:start}
.vp-post--row{display:grid;grid-template-columns:150px 1fr;gap:18px}
.vp-post--row img{width:150px;height:100px;object-fit:cover}

/* Inner pages */
.vp-page-head{background:var(--vp-primary);color:#fff;padding:64px 0}
.vp-page-head h1{color:#fff;margin:0;font-size:clamp(2rem,4vw,3rem)}
.vp-post-meta{color:#C9D5E6;margin-top:10px}
.vp-content{padding:56px 0}
.vp-content .entry-content>*{max-width:780px}
.vp-content .entry-content .alignwide,.vp-content .entry-content .alignfull{max-width:none}
.vp-pagination{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.vp-pagination .page-numbers{padding:8px 14px;border:1px solid var(--vp-line);text-decoration:none}
.vp-pagination .current{background:var(--vp-primary);color:#fff;border-color:var(--vp-primary)}

/* Footer */
.vp-footer{background:var(--vp-primary);color:#B9C6D8;padding:72px 0 0;font-size:.97rem}
.vp-footer h3{color:#fff;font-size:1.15rem;margin-bottom:18px}
.vp-footer a{color:#fff;text-decoration:none; margin-bottom:10px; display:block;}
.vp-footer__grid{display:grid;/*grid-template-columns:1.3fr 1.1fr 1.2fr 1fr;*/ grid-template-columns: 1.3fr 1.1fr 1.2fr; gap:40px}
.vp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vp-news{display:flex;margin:0 0 20px}
.vp-news input[type=email]{flex:1;min-width:0;padding:12px 14px;border:0;border-radius:var(--vp-radius) 0 0 var(--vp-radius);font:inherit}
.vp-news .vp-btn{border-radius:0 var(--vp-radius) var(--vp-radius) 0;padding:12px 18px}
.vp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vp-gallery img{aspect-ratio:1;object-fit:cover;width:100%}
.vp-footer__bottom{margin-top:56px;border-top:1px solid rgba(255,255,255,.15);padding:22px 0;font-size:.875rem}

/* Responsive */
@media (max-width:1000px){
  .vp-section{padding:64px 0}
  .vp-hero{padding:100px 0 120px}
  .vp-split,.vp-posts{grid-template-columns:1fr;gap:36px}
  .vp-split--rev>:first-child{order:0}
  .vp-media{min-height:280px}
  .vp-grid{grid-template-columns:repeat(2,1fr)}
  .vp-boxes .vp-box:nth-child(2){border-right:0}
  .vp-boxes .vp-box:nth-child(-n+2){border-bottom:1px solid var(--vp-line)}
  .vp-footer__grid{grid-template-columns:1fr 1fr}
  .vp-menu-toggle{display:block}
  .vp-header__btn{display:none}
  .vp-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--vp-line);padding:12px 20px 20px}
  .vp-nav.is-open{display:block}
  .vp-nav ul{flex-direction:column;align-items:flex-start;gap:6px}
  .vp-nav .sub-menu{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 14px}
}
@media (max-width:600px){
  .vp-grid,.vp-footer__grid,.vp-form__row,.vp-checks{grid-template-columns:1fr}
  .vp-boxes .vp-box{border-right:0;border-bottom:1px solid var(--vp-line)}
  .vp-post--row{grid-template-columns:110px 1fr}
  .vp-post--row img{width:110px;height:80px}
  .vp-topbar__hours{display:none}
}