/* =========================================================
   PR Freight Logistics — Site Enhancements
   Loaded AFTER style.css. Only touches colour, type-scale,
   responsiveness, active-link, favicon-safe and performance
   rules. No layout, spacing or component structure changes.
========================================================= */

:root {
  --pr-gradient: linear-gradient(135deg, #071B4A 0%, #0057B8 48%, #00A6C7 100%);
  --pr-text-accent: #0b54a6;
  --pr-mid-blue: #0057B8;
  --pr-cyan: #00A6C7;
}

/* ---------------------------------------------------------
   1. Buttons — brand gradient background sitewide
   All primary/filled buttons and form submit buttons use the
   brand gradient. style.css component rules already carry
   this gradient for most classes; these are safety-net
   catches for any remaining filled-button variants and the
   Track & Trace CTA that ships without the .white-bg helper.
--------------------------------------------------------- */
.primary-btn2,
.primary-btn1,
.pr-forward-btn-primary,
.pr-contact-submit-btn,
.pr-contact-form button[type="submit"],
.contact-form-wrapper button[type="submit"],
button[type="submit"],
input[type="submit"] {
  background: var(--pr-gradient) !important;
  border-color: transparent;
}

/* Outline / secondary buttons keep their outlined look, but
   pick up the new blue accent for border, text and hover. */
.pr-forward-btn-secondary {
  border-color: var(--pr-mid-blue);
  color: var(--pr-text-accent);
}

.pr-forward-btn-secondary:hover {
  background: var(--pr-gradient) !important;
  border-color: transparent;
}

/* ---------------------------------------------------------
   2. Text colour — brand blue accent
   Applied to plain, classless inline text links (breadcrumbs,
   nav, buttons and social icons all carry their own classes
   and keep their existing, more specific rules untouched).
--------------------------------------------------------- */
a:not([class]) {
  color: var(--pr-text-accent);
}

a:not([class]):hover {
  color: var(--pr-mid-blue);
}

/* ---------------------------------------------------------
   3. Fluid base type-scale (safety net only)
   :where() has zero specificity, so this NEVER overrides any
   existing component rule in style.css — it only fills gaps
   for elements that don't already have an explicit size.
--------------------------------------------------------- */
:where(html) {
  font-size: clamp(14px, 1.8vw + 8px, 16px);
}

:where(h1) {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.2;
}

:where(h2) {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  line-height: 1.3;
}

:where(h3) {
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.4rem);
  line-height: 1.4;
}

:where(h4) {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.2rem);
  line-height: 1.4;
}

:where(p) {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  line-height: 1.7;
}

:where(a, button, input, textarea, select) {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
}

/* Prevent any image/media from ever overflowing its container on any device */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   4. Active navigation link styling
   header.php adds an "active" class to the current page's
   <li> (see the is_active() helper). style.css already
   styles li.active > a for the header's selector chain; this
   is a safety fallback plus a visible underline indicator.
--------------------------------------------------------- */
.main-menu>ul>li.active>a,
.main-menu ul.sub-menu>li.active>a {
  position: relative;
  color: var(--pr-mid-blue) !important;
}

.main-menu>ul.menu-list>li.active>a.drop-down::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--pr-gradient);
  border-radius: 2px;
}

/* ---------------------------------------------------------
   5. Extra small-device refinements
   style.css's smallest breakpoint is 480px/576px; these add
   graceful scaling for phones down to ~320px so text never
   feels oversized or causes horizontal scroll on entry-level
   devices. Selectors match style.css exactly for correct
   override, no !important needed except where noted.
--------------------------------------------------------- */
@media (max-width: 480px) {

  .banner-content-wrap .banner-content h1,
  .banner-content-wrap .banner-content.two h1 {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  .section-title h2,
  .pr-air-solutions-heading h2,
  .pr-airfreight-content h2,
  .pr-editorial-heading h2,
  .pr-why-logistics-heading h2,
  .pr-contact-form-heading h2 {
    font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
    line-height: 1.3 !important;
  }

  .pr-air-service-content h3,
  .pr-why-logistics-heading h3,
  .pr-forward-banner-content h3,
  .pr-why-box-content h3,
  .pr-airfreight-story-heading h3,
  .pr-purpose-header h3 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }

  .pr-airfreight-content p,
  .pr-air-solutions-heading p,
  .pr-why-logistics-heading p,
  .pr-forward-banner-content p,
  section p {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
  }

  .primary-btn2 {
    font-size: 0.85rem !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .container,
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 375px) {
  .banner-content-wrap .banner-content h1 {
    font-size: 1.5rem !important;
  }

  .section-title h2 {
    font-size: 1.25rem !important;
  }
}

/* Avoid horizontal scroll on any device */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------------------------------------------------------
   6. Focus visibility for accessibility / keyboard users
--------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pr-cyan);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   7. Contact form validation states (visual only — logic in
   assets/js/form-validation.js)
--------------------------------------------------------- */
.pr-contact-form .form-inner input.is-invalid,
.pr-contact-form .form-inner textarea.is-invalid,
.pr-contact-form .form-inner select.is-invalid,
.contact-form-wrapper form input.is-invalid,
.contact-form-wrapper form textarea.is-invalid {
  border: 1px solid #e63946 !important;
  background-color: rgba(230, 57, 70, 0.05) !important;
}

.pr-form-error-msg {
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

.pr-form-success-msg {
  color: var(--pr-mid-blue);
  background: rgba(0, 166, 199, 0.1);
  border: 1px solid var(--pr-cyan);
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 16px;
  font-size: 0.95rem;
  display: none;
}

.pr-form-success-msg.show {
  display: block;
}