/* ============================================================
   OUTGLE POLISH — Fluid Typography, Spacing & Consistency Layer
   Applied AFTER outgle-core.css to normalize inconsistencies.
   ============================================================ */

/* ----- 1. DESIGN TOKENS (Fluid Typography & Spacing) ----- */
:root {
  /* --- Fluid Typography Scale --- */
  /* Card / small UI text */
  --outgle-text-xs:   clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);     /* 12→13px */
  --outgle-text-sm:   clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);   /* 13→15px */
  /* Body / paragraph text */
  --outgle-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);    /* 15→17px */
  --outgle-text-md:   clamp(1rem, 0.94rem + 0.3vw, 1.125rem);         /* 16→18px */
  /* Lead / larger body text */
  --outgle-text-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);       /* 17→20px */
  --outgle-text-xl:   clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);        /* 20→24px */

  /* --- Fluid Heading Scale --- */
  --outgle-heading-sm:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* 18→22px */
  --outgle-heading-md:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);    /* 22→28px */
  --outgle-heading-lg:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);      /* 24→36px */
  --outgle-heading-xl:   clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 28→40px */
  --outgle-heading-2xl:  clamp(2rem, 1.4rem + 2.5vw, 3.125rem);       /* 32→50px */
  --outgle-heading-hero: clamp(2.5rem, 1.5rem + 4vw, 5rem);           /* 40→80px */

  /* --- Fluid Spacing Scale --- */
  --outgle-space-xs:      clamp(8px, 0.5vw + 4px, 15px);
  --outgle-space-sm:      clamp(12px, 1vw + 4px, 20px);
  --outgle-space-md:      clamp(20px, 1.5vw + 8px, 35px);
  --outgle-space-lg:      clamp(30px, 2.5vw + 10px, 50px);
  --outgle-space-xl:      clamp(40px, 3vw + 15px, 70px);
  --outgle-space-section: clamp(60px, 5vw + 20px, 120px);
  --outgle-space-card:    clamp(24px, 2vw + 12px, 45px);

  /* --- Consistent Line Heights --- */
  --outgle-lh-tight:  1.3;
  --outgle-lh-body:   1.6;
  --outgle-lh-loose:  1.75;
}


/* ----- 2. BASE TYPOGRAPHY NORMALIZATION ----- */

/* Body: set a more sensible base that bridges the 14px body / 18px p gap */
body {
  font-size: var(--outgle-text-base);
  line-height: var(--outgle-lh-body);
}

/* Paragraphs: consistent across all pages */
p {
  font-size: var(--outgle-text-md);
  font-weight: 400;
  line-height: var(--outgle-lh-body);
}


/* ----- 3. HEADING HIERARCHY ----- */

h1 { font-size: var(--outgle-heading-hero); }
h2 { font-size: var(--outgle-heading-xl); }
h3 { font-size: var(--outgle-heading-lg); }
h4 { font-size: var(--outgle-heading-md); }
h5 { font-size: var(--outgle-heading-sm); }
h6 { font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); }


/* ----- 4. SECTION PARAGRAPH CONSISTENCY ----- */
/* Normalize the scattered paragraph font-sizes across components
   to use a consistent scale. Card/UI paragraphs get slightly smaller. */

/* Main content / overview paragraphs → fluid medium */
.pp-service-details-overview-wrapper p,
.ar-about-us-4-title-box p,
.des-text-title-box p,
.tp-error-content p,
.tp-pd-3-overview-text p,
.studio-team-title-box p {
  font-size: var(--outgle-text-lg);
  font-weight: 400;
  line-height: var(--outgle-lh-body);
}

/* Card / component paragraphs → fluid base (slightly smaller) */
.tp-service-4-solution-item-content p,
.postbox-content p,
.postbox-details-text p,
.postbox-details-form p,
.sidebar-widget-author-content p,
.tp-work-content p,
.tp-career-details-wrap p,
.crp-price-head p {
  font-size: var(--outgle-text-base);
  font-weight: 400;
  line-height: var(--outgle-lh-body);
}

/* FAQ accordion body text */
.ai-faq-accordion-wrap .accordion-body p,
.app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-body p,
.app-faq-wrap.faq-inner-style .ai-faq-accordion-wrap .accordion .accordion-items .accordion-body p {
  font-size: var(--outgle-text-base);
  font-weight: 400;
  line-height: var(--outgle-lh-body);
}


/* ----- 5. SECTION SPACING NORMALIZATION ----- */
/* Use fluid spacing for major section padding to replace scattered fixed values */

/* Large section areas */
.des-about-area,
.des-portfolio-area,
.des-project-area,
.des-brand-area,
.des-team-area,
.tp-work-area {
  padding-top: var(--outgle-space-section);
  padding-bottom: var(--outgle-space-section);
}

/* Medium section areas */
.it-feature-ptb {
  padding-top: var(--outgle-space-section);
}

.tp-benefit-ptb {
  padding-top: var(--outgle-space-section);
  padding-bottom: var(--outgle-space-section);
}

.tp-career-slider-ptb {
  padding-bottom: var(--outgle-space-section);
}

.tp-career-details-ptb {
  padding-top: var(--outgle-space-section);
}

.tp-contact-me-interest-ptb {
  padding-bottom: clamp(50px, 4vw + 15px, 80px);
}

/* Section title boxes */
.tp-service-title-box {
  padding-left: clamp(15px, 5vw + 10px, 220px);
  padding-right: clamp(15px, 5vw + 10px, 220px);
  padding-bottom: var(--outgle-space-md);
}


/* ----- 6. CARD PADDING NORMALIZATION ----- */

/* Main card components → consistent fluid padding */
.tp-service-item {
  padding: var(--outgle-space-card);
}

.tp-service-4-solution-item {
  padding: clamp(28px, 2vw + 14px, 40px) clamp(24px, 2vw + 10px, 35px) clamp(24px, 2vw + 10px, 35px);
}

.tp-benefit-item {
  padding: var(--outgle-space-card);
}

.tp-work-item {
  padding: var(--outgle-space-card) clamp(28px, 2vw + 12px, 50px);
}

.crp-price-item {
  padding: var(--outgle-space-card) clamp(28px, 2vw + 12px, 40px);
}

/* Blog postbox */
.postbox-item {
  padding: clamp(24px, 2vw + 10px, 35px) var(--outgle-space-sm);
  padding-bottom: clamp(28px, 2vw + 12px, 40px);
}

.postbox-content {
  padding: 0 var(--outgle-space-sm);
}

.postbox-details-item {
  padding: clamp(24px, 2vw + 10px, 43px) clamp(24px, 2vw + 10px, 45px);
}

.postbox-blockquote {
  padding: clamp(24px, 2vw + 10px, 50px) clamp(20px, 2vw + 10px, 55px);
  padding-bottom: clamp(20px, 1.5vw + 10px, 30px);
}

.postbox-details-form {
  padding: clamp(24px, 3vw + 10px, 60px);
}

/* Sidebar */
.sidebar-widget-author {
  padding: clamp(24px, 2vw + 10px, 40px);
}


/* ----- 7. BREADCRUMB CONSISTENCY ----- */

.tp-breadcrumb-title {
  font-size: var(--outgle-heading-hero);
  font-weight: 700;
  line-height: 1.2;
}

.tp-breadcrumb-list span {
  font-size: var(--outgle-text-md);
}

.tp-breadcrumb-ptb {
  padding-top: clamp(120px, 8vw + 40px, 180px);
}


/* ----- 8. HEADING ELEMENTS ACROSS COMPONENTS ----- */

/* Section titles */
.tp-section-title {
  font-size: clamp(2rem, 1.2rem + 3.5vw, 5rem);
  font-weight: 700;
}

.tp-section-title.fs-140 {
  font-size: clamp(3rem, 1.5rem + 6vw, 8.75rem);
}

.tp-section-subtitle {
  font-size: var(--outgle-text-md);
}

/* Postbox titles */
.postbox-title {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.5rem);
}

.postbox-title.fs-80 {
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
}

/* Work section */
.tp-work-title {
  font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem);
}

/* Service details */
.pp-service-details-overview-title {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}

.pp-service-details-overview-wrapper h4 {
  font-size: var(--outgle-heading-lg);
}

.pp-service-details-process-item h4 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}

/* Service solution item */
.tp-service-4-solution-item-title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
}

/* Price headings */
.tp-service-5-price-item-title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
}

.tp-service-5-price-item-head h4 {
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
}


/* ----- 9. FONT WEIGHT NORMALIZATION ----- */
/* Fix inconsistent font-weights on paragraphs — ensure a clear hierarchy:
   - 400 for body/content text
   - 500 for UI labels / emphasized text
   - 600-700 for headings and buttons */

.postbox-details-text p,
.sidebar-widget-author-content p,
.postbox__comment-text p,
.postbox-details-form p {
  font-weight: 400;
}

/* Comment/meta text stays 500 for emphasis */
.postbox__comment-name h5 {
  font-weight: 600;
}


/* ----- 10. FONT FAMILY CONSISTENCY ----- */
/* Ensure paragraphs and body text always use Inter, not inherit heading fonts */

p,
.tp-service-4-solution-item-content p,
.postbox-content p,
.postbox-details-text p,
.tp-work-content p,
.crp-price-head p,
.tp-career-details-wrap p,
.tp-error-content p,
.tp-pd-3-overview-text p,
.pp-service-details-overview-wrapper p {
  font-family: var(--tp-ff-p);
}


/* ----- 11. MOBILE-SPECIFIC FIXES ----- */

@media (max-width: 767px) {

  /* Ensure body text never drops below readable minimum */
  body {
    font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  }

  p {
    font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
    line-height: 1.6;
  }

  /* Fix FAQ button font-family inconsistency on mobile */
  .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons,
  .app-faq-wrap.faq-inner-style .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
    line-height: 1.4;
  }

  /* FAQ accordion body on mobile */
  .ai-faq-accordion-wrap .accordion-body p {
    font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    font-weight: 400;
  }

  /* Section spacing on mobile */
  .des-about-area,
  .des-portfolio-area,
  .des-project-area,
  .des-brand-area,
  .des-team-area,
  .tp-work-area {
    padding-top: clamp(50px, 4vw + 15px, 80px);
    padding-bottom: clamp(50px, 4vw + 15px, 80px);
  }

  /* Breadcrumb mobile */
  .tp-breadcrumb-title {
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  }

  .tp-breadcrumb-list span {
    font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  }

  /* Section title mobile */
  .tp-section-title {
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.625rem);
  }

  .tp-section-title.fs-140 {
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4.0625rem);
  }

  /* Card padding mobile */
  .tp-service-item {
    padding: clamp(20px, 2vw + 8px, 30px) clamp(15px, 1.5vw + 5px, 20px);
  }

  .tp-benefit-item {
    padding: clamp(20px, 2vw + 8px, 30px);
  }

  /* Postbox mobile */
  .postbox-content {
    padding: 0;
  }

  /* Footer text */
  .des-footer-bottom a,
  .des-footer-bottom span {
    font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  }

  /* Heading sizes mobile */
  h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); }
  h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }
  h4 { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem); }
  h5 { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); }
}


/* ----- 12. TABLET SPACING REFINEMENTS ----- */

@media (min-width: 768px) and (max-width: 991px) {

  .tp-breadcrumb-title {
    font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  }

  .tp-section-title {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.125rem);
  }

  /* Card padding tablet */
  .tp-service-item {
    padding: var(--outgle-space-card) clamp(18px, 1.5vw + 8px, 30px);
  }
}


/* ----- 13. BUTTON TEXT CONSISTENCY ----- */

.tp-btn-black-text {
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
}

.tp-btn-black-solid {
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
}

.tp-btn-gradient {
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
}


/* ----- 14. PORTFOLIO / BLOG DETAILS CONSISTENCY ----- */

.postbox-details-quote p {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: var(--outgle-lh-tight);
}

.postbox-details-quote span {
  font-size: var(--outgle-text-base);
}

.postbox-blockquote-paragraph p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
}

.postbox-details-list ul li {
  font-size: var(--outgle-text-base);
}

.postbox-details-code pre {
  font-size: var(--outgle-text-sm);
}


/* ----- 15. COMMENT SECTION CONSISTENCY ----- */

.postbox__comment-text p {
  font-size: var(--outgle-text-base);
  line-height: var(--outgle-lh-body);
}

.postbox__comment-title {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
}

.postbox-details-form-title {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
}


/* ----- 16. SIDEBAR & META CONSISTENCY ----- */

.sidebar-widget-title {
  font-size: var(--outgle-heading-sm);
}

.sidebar-widget-category ul li a {
  font-size: var(--outgle-text-base);
}

.rc-post-title {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

.rc-post-meta span,
.postbox-meta span,
.postbox-author-info span {
  font-size: var(--outgle-text-xs);
  font-weight: 600;
}


/* ----- 17. CONTACT / FORM ELEMENTS ----- */

/* Keep input sizes consistent */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
  font-size: var(--outgle-text-base);
}

.postbox-details-input label,
.tp-contact-form-input label {
  font-size: var(--outgle-text-base);
  font-weight: 500;
}


/* ----- 18. MISCELLANEOUS POLISH ----- */

/* Service price list items */
.tp-service-5-price-item-list ul li {
  font-size: var(--outgle-text-base);
}

/* Price list items in app-style */
.app-price-box .crp-price-list ul li {
  font-size: var(--outgle-text-base);
  font-weight: 500;
}

/* Benefit section title */
.tp-benefit-item-title {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
}

/* Navigation consistency (these are in inline <style> blocks but
   we reinforce them here for single-source-of-truth) */
.outgle-nav > a,
.outgle-nav > .outgle-menu-item {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
}

/* Mega menu text */
.mega-menu-column a {
  font-size: var(--outgle-text-xs);
}

.mega-menu-column h5 {
  font-size: var(--outgle-text-xs);
}

/* Mobile submenu */
.mobile-submenu a {
  font-size: var(--outgle-text-sm);
}

/* Tagcloud consistency */
.tagcloud a {
  font-size: var(--outgle-text-base);
}

/* Service details solution content */
.tp-service-4-solution-item.service-details .tp-service-4-solution-item-content ul li {
  font-size: var(--outgle-text-base);
}

/* Creative project text */
.creative-project-btn-box p {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
  font-weight: 500;
}

/* Des-text title box paragraph */
.des-text-title-box p {
  font-size: clamp(0.9375rem, 0.88rem + 0.35vw, 1.375rem);
}


/* ----- 19. INDUSTRY CARD CONSISTENCY (overrides inline <style> blocks) ----- */
/* These pages (industries.html, about.html, products.html) have inline !important
   styles on .tp-industry-card components. We unify them here. */

.tp-industry-card-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem) !important; /* 17→20px fluid */
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.tp-industry-card p {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--outgle-text-sm) !important;
  line-height: 1.6 !important;
}

.tp-industry-card {
  padding: clamp(24px, 2vw + 12px, 45px) clamp(20px, 1.5vw + 10px, 35px) !important;
}

@media (max-width: 991px) {
  .tp-industry-card {
    padding: clamp(22px, 2vw + 8px, 30px) clamp(18px, 1.5vw + 6px, 24px) !important;
  }
  .tp-industry-card-title {
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem) !important; /* 16→18px fluid */
  }
}

@media (max-width: 575px) {
  .tp-industry-card {
    padding: clamp(20px, 2vw + 6px, 24px) clamp(16px, 1.5vw + 4px, 20px) !important;
  }
  .tp-industry-card-title {
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important;
  }
}


/* ----- 20. BLOG POST TYPOGRAPHY CONSISTENCY ----- */
/* blog-post.html has extensive inline style blocks; reinforce consistent sizing */

.postbox-details-nevigation-title {
  font-size: clamp(1.125rem, 0.8rem + 1.5vw, 3.75rem);
}

.postbox-details-nevigation-content span {
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.5rem);
}


/* ----- 21. CAREER DETAILS CONSISTENCY ----- */

.tp-career-details-wrap h3 {
  font-size: var(--outgle-heading-md);
}

.tp-career-details-wrap p {
  font-size: var(--outgle-text-base);
  font-weight: 400;
  line-height: var(--outgle-lh-body);
}

.tp-career-details-wrap ul li {
  font-size: var(--outgle-text-base);
}


/* ----- 22. FOOTER TYPOGRAPHY ----- */

.des-footer-middle > span {
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 1.125rem);
}

.des-footer-bottom a,
.des-footer-bottom span {
  font-size: clamp(0.8125rem, 0.78rem + 0.25vw, 1.125rem);
}


/* ----- 23. SERVICE CATEGORY LIST (hover reveal items) ----- */

.des-team-item-box span {
  font-size: var(--outgle-text-base);
}


/* ----- 24. PRIVACY POLICY / TERMS PAGES ----- */
/* Ensure legal content has consistent paragraph sizing */

.tp-career-details-wrap h2,
.postbox-details-text h2 {
  font-size: var(--outgle-heading-lg);
  margin-bottom: var(--outgle-space-sm);
}

.tp-career-details-wrap h4,
.postbox-details-text h4 {
  font-size: var(--outgle-heading-md);
  margin-bottom: var(--outgle-space-xs);
}


/* ----- 25. PROGRAMS PAGE INLINE OVERRIDES ----- */
/* programs.html has inline font-size: 32px; font-weight: 700 on some h3s */

.programs-section h3,
.tp-service-4-solution-item.service-details .tp-service-4-solution-item-title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
}

/* ----- 26. FIX HEIGHT STRETCHING ON GOOEY BUTTONS ----- */
/* Prevent flex stretching from deforming the buttons on Contact/Careers pages */
.outgle-dynamic-btn,
.tp-career-opening-btn .outgle-dynamic-btn,
.tp-hero-2-btn-box .outgle-dynamic-btn {
    align-self: center !important;
    max-height: 52px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.tp-btn-black-filter {
    align-items: center !important;
    max-height: 52px !important;
}

.tp-btn-black-circle,
.tp-btn-black-text {
    align-items: center !important;
}

.tp-btn-black-text {
    white-space: nowrap !important;
}