/* =================================================================
   Westshore Oil & Gas — responsive, accessibility & polish layer
   -----------------------------------------------------------------
   Loaded AFTER css/style.css so it overrides the base template.
   Keep site-specific fixes here rather than editing style.css, so the
   original Industry.INC template stays upgradeable.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Fluid type scale
   The template hard-codes desktop font sizes (h1 70px, hero 90px),
   which overflow narrow viewports. clamp() keeps the desktop look
   while scaling down smoothly with no extra breakpoints.
   ----------------------------------------------------------------- */

h1 {
  font-size: clamp(2.25rem, 5.5vw, 4.375rem); /* 36px -> 70px */
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.375rem); /* 24px -> 38px */
  line-height: 1.25;
}

h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

h4 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

h5 {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.4;
}

p {
  font-size: 0.9375rem; /* 15px — 14px is below the comfortable mobile minimum */
  line-height: 1.85;
}

/* -----------------------------------------------------------------
   2. Global safety rails
   ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Stops a stray wide element from creating a horizontal scrollbar on phones */
  overflow-x: hidden;
}

/* style.css sets max-width but not height, so the width/height attributes
   added to <img> for CLS would squash the aspect ratio without this. */
img {
  height: auto;
}

svg,
video,
iframe {
  max-width: 100%;
}

/* Long words / URLs must not push the layout wide */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a {
  overflow-wrap: break-word;
}

/* Anchor targets clear the header instead of hiding under it */
:target,
[id] {
  scroll-margin-top: 24px;
}

/* The services card block is pulled 91px up over the hero, so jumping to
   #solutions would otherwise hide its heading behind the hero. */
#solutions {
  scroll-margin-top: 120px;
}

@media only screen and (max-width: 767px) {
  #solutions {
    scroll-margin-top: 24px;
  }
}

/* Failsafe: if JavaScript never runs, the preloader must not trap the
   page behind a blank overlay forever. */
#preloder {
  animation: preloader-failsafe 0.3s linear 4s forwards;
}

@keyframes preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* -----------------------------------------------------------------
   3. Accessibility
   The template removes all focus outlines, which makes the site
   unusable by keyboard. Restore a visible, on-brand focus ring.
   ----------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffc000;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 14px 22px;
  background: #ffc000;
  color: #081624;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* Visually hidden but available to screen readers */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------
   4. Fluid section rhythm
   .spad is a flat 103px top/bottom, which is far too much on a phone.
   ----------------------------------------------------------------- */

.spad {
  padding-top: clamp(48px, 8vw, 103px);
  padding-bottom: clamp(48px, 8vw, 103px);
}

.milestones-section {
  padding-top: clamp(56px, 9vw, 135px);
  padding-bottom: clamp(40px, 7vw, 105px);
}

.features-section {
  padding-bottom: clamp(32px, 5vw, 73px);
}

/* -----------------------------------------------------------------
   5. Header
   ----------------------------------------------------------------- */

.header-top p {
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Break the logo's fixed 63px/100px gutters below the widest layout */
@media only screen and (max-width: 1595px) {
  .site-logo {
    padding-left: 24px;
    margin-right: 32px;
  }
}

.header-info-box .hib-text p {
  line-height: 1.5;
  word-break: break-word;
}

/* Contact details used to be marked up as <h6>, which put heading levels
   before the page <h1>. They are styled paragraphs now — same appearance,
   correct document outline. */
.header-info-box .hib-text .hib-title {
  color: #081624;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
  word-break: break-word;
}

.header-info-box .hib-text a {
  color: #081624;
  text-decoration: none;
}

.header-info-box .hib-text a:hover,
.header-info-box .hib-text a:focus {
  color: #ffc000;
}

/* Comfortable tap targets on the mobile (SlickNav) menu */
.slicknav_nav a {
  padding: 12px 10px;
}

.slicknav_btn {
  padding: 12px 14px;
}

/* -----------------------------------------------------------------
   6. Hero
   Replaces the fixed 777px height so short/landscape phones don't get
   a hero taller than the screen, and the copy never overflows.
   ----------------------------------------------------------------- */

.hero-item {
  height: auto;
  min-height: 777px;
  padding: clamp(72px, 12vw, 120px) 0;
}

.hero-item h2 {
  font-size: clamp(2rem, 7.5vw, 5.625rem); /* 32px -> 90px */
  line-height: 1.15;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.hero-item h2 span {
  padding-left: clamp(12px, 2vw, 25px);
  padding-bottom: clamp(6px, 1.2vw, 15px);
}

@media only screen and (max-width: 1199px) {
  .hero-item {
    min-height: 620px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-item {
    min-height: 460px;
  }

  /* The template's mobile rule bumps the hero back to 60px — override it */
  .hero-item h2 {
    font-size: clamp(2rem, 9vw, 3.25rem);
  }
}

/* Landscape phones: never let the hero exceed the viewport */
@media only screen and (max-height: 520px) {
  .hero-item {
    min-height: 420px;
  }
}

/* Keep the carousel arrows off the text on small screens */
@media only screen and (max-width: 575px) {
  .hero-slider .owl-nav button.owl-prev,
  .hero-slider .owl-nav button.owl-next {
    width: 36px;
    height: 36px;
    top: auto;
    bottom: 12px;
    font-size: 13px;
  }

  .hero-slider .owl-nav button.owl-next {
    right: 12px;
  }

  .hero-slider .owl-nav button.owl-prev {
    left: 12px;
  }
}

/* -----------------------------------------------------------------
   7. Buttons
   ----------------------------------------------------------------- */

.site-btn {
  min-width: 0;
  padding: 18px 36px;
  min-height: 48px; /* WCAG-friendly tap target */
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .site-btn {
    min-width: 186px;
    padding: 23px 47px;
  }
}

/* -----------------------------------------------------------------
   8. Services
   ----------------------------------------------------------------- */

.services-warp {
  padding-left: 15px;
  padding-right: 15px;
}

.service-item {
  margin-bottom: clamp(32px, 4vw, 55px);
}

@media only screen and (max-width: 991px) {
  .services-warp {
    margin-top: -48px;
  }

  .service-item {
    padding-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .services-warp {
    margin-top: 0;
    padding-top: clamp(40px, 7vw, 56px);
  }
}

/* -----------------------------------------------------------------
   9. Features
   `.fb-text { height: 30vh }` clipped the copy on short viewports and
   left huge gaps on tall ones. Equal-height cards via flex instead.
   ----------------------------------------------------------------- */

.feature-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 30px;
}

/* min-width:100% in style.css fought the flex container; width is enough,
   and the width/height attributes in the markup reserve the space (no CLS). */
.feature-box img {
  width: 100%;
  min-width: 0;
}

.feature-box .fb-text {
  height: auto;
  flex: 1 1 auto;
  padding: clamp(24px, 3.5vw, 50px) clamp(18px, 2.5vw, 27px) clamp(24px, 3vw, 43px);
}

.feature-box h5 {
  margin-bottom: clamp(14px, 2vw, 30px);
}

.feature-box p:last-child {
  margin-bottom: 0;
}

/* Bootstrap columns need this for height:100% cards to line up */
.features-section .row > [class*="col-"] {
  display: flex;
}

/* -----------------------------------------------------------------
   10. About
   ----------------------------------------------------------------- */

.about-section img {
  width: 100%;
}

@media only screen and (max-width: 991px) {
  .about-text {
    padding-top: 40px;
  }
}

/* -----------------------------------------------------------------
   11. Milestones
   ----------------------------------------------------------------- */

.milestone-text h2 {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
}

@media only screen and (max-width: 575px) {
  .milestone {
    margin-bottom: 28px;
  }
}

/* -----------------------------------------------------------------
   12. Vision / mission + CTA
   ----------------------------------------------------------------- */

.video-text p {
  margin-bottom: clamp(24px, 4vw, 50px);
}

.video-text h2 {
  margin-bottom: clamp(18px, 3vw, 40px);
}

@media only screen and (max-width: 991px) {
  .video-text {
    margin-bottom: 24px;
  }
}

.cta-section h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.3125rem);
}

@media only screen and (max-width: 991px) {
  .cta-section {
    text-align: center;
  }

  .cta-section h2 {
    margin-bottom: 24px;
  }

  .cta-section .col-lg-9 {
    justify-content: center;
  }
}

/* -----------------------------------------------------------------
   13. Efficiency statement block
   ----------------------------------------------------------------- */

.client-text {
  margin-bottom: 0;
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}

.client-text h2 {
  margin-bottom: clamp(18px, 3vw, 40px);
}

.client-text p {
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
}

/* -----------------------------------------------------------------
   14. Map + contact
   The template absolutely positions the map behind the info card and
   only unwinds that below 480px, so 480–991px rendered a broken /
   zero-height map. Switch to a normal stacked block up to 992px.
   ----------------------------------------------------------------- */

.map-section {
  padding-top: clamp(48px, 8vw, 115px);
  padding-bottom: clamp(48px, 8vw, 110px);
}

.map iframe {
  border: 0;
}

@media only screen and (max-width: 991px) {
  .map-section {
    padding-bottom: 0;
  }

  .map-info {
    max-width: 100%;
    padding: clamp(32px, 6vw, 79px) clamp(20px, 4vw, 25px);
  }

  .map {
    position: relative;
    width: 100%;
    height: clamp(280px, 45vw, 420px);
    margin-top: 48px;
  }

  .map iframe {
    position: relative;
    height: 100%;
  }
}

.contact-text p {
  margin-bottom: clamp(28px, 5vw, 70px);
}

@media only screen and (max-width: 991px) {
  .contact-form {
    margin-top: 40px;
  }
}

/* Form controls: 16px minimum stops iOS Safari zooming on focus */
.contact-form input,
.contact-form textarea,
.footer-search input {
  font-size: 1rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form textarea {
  height: auto;
  min-height: 180px;
  resize: vertical;
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  border-bottom-color: #d9534f;
}

/* Inline submit feedback rendered by main.js */
.form-status {
  margin: 0 0 10px;
  font-size: 0.875rem;
  min-height: 1.5em;
}

.form-status.is-error {
  color: #d9534f;
}

.form-status.is-success {
  color: #2e7d32;
}

/* -----------------------------------------------------------------
   15. Footer
   ----------------------------------------------------------------- */

.footer-widget ul {
  display: block;
}

.footer-widget ul li a {
  padding: 4px 0;
  margin-bottom: 8px;
}

.footer-widget ul li a:hover,
.footer-widget ul li a:focus {
  color: #ffc000;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-social a {
  align-items: center;
  justify-content: center;
  margin-right: 0;
}

.footer-buttom {
  margin-top: clamp(24px, 4vw, 55px);
}

@media only screen and (max-width: 991px) {
  .footer-menu,
  .copyright {
    text-align: center;
  }

  .footer-menu li a {
    margin-left: 0;
    padding: 14px 12px;
  }
}

/* -----------------------------------------------------------------
   16. Search overlay
   ----------------------------------------------------------------- */

.search-model-form {
  width: 100%;
  max-width: 640px;
}

.search-model-form input {
  width: 100%;
  font-size: clamp(1.25rem, 5vw, 2.5rem);
}

.search-close-switch {
  right: 20px;
}

/* -----------------------------------------------------------------
   17. Heading-hierarchy remap
   The markup was corrected so the page has exactly one <h1> and no
   skipped levels (good for SEO and screen readers). These rules keep
   the original visual design on the new, semantically-correct tags.
   ----------------------------------------------------------------- */

/* Hero headline — <h1> on slide 1, <h2> on slide 2, identical styling */
.hero-item h1 {
  font-size: clamp(2rem, 7.5vw, 5.625rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.15;
  margin-bottom: clamp(20px, 3vw, 34px);
  opacity: 0;
  top: 50px;
  position: relative;
}

.hero-item h1 span {
  padding-left: clamp(12px, 2vw, 25px);
  padding-bottom: clamp(6px, 1.2vw, 15px);
  display: inline-block;
  background: #ffc000;
}

.hero-item h1 span:nth-child(1) {
  color: #081624;
}

.hero-item h1 span:nth-child(2) {
  padding-right: 14px;
}

.hero-item h1 span:last-child {
  padding-right: 30px;
}

.hero-slider .owl-item.active .hero-item h1 {
  top: 0;
  opacity: 1;
  -webkit-transition: all 0.5s ease 0.2s;
  transition: all 0.5s ease 0.2s;
}

@media only screen and (max-width: 767px) {
  .hero-item h1 {
    font-size: clamp(2rem, 9vw, 3.25rem);
  }

  .hero-item h1 span:nth-child(1) {
    padding-right: 15px;
  }
}

/* Section intros */
.section-title {
  max-width: 46rem;
  margin: 0 auto clamp(32px, 5vw, 55px);
}

/* style.css pins .section-title h2 to a fixed 36px — make it fluid too */
.section-title h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  margin-bottom: 18px;
}

.section-title p {
  margin-bottom: 0;
}

/* Service cards: <h5> -> <h3> */
.service-item h3 {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  overflow: hidden;
  padding-top: 12px;
  line-height: 1.4;
}

/* Capability cards: <h5> -> <h3> */
.feature-box h3 {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.4;
  margin-bottom: clamp(14px, 2vw, 30px);
}

/* About: <h1>/<h2> -> <h2>/<h3> */
.about-text h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  margin-bottom: 18px;
}

.about-text h3 {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 30px;
}

/* Milestone figures: <h2> -> <h3> */
.milestone-text h3 {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 300;
  line-height: 0.9;
  margin-bottom: 5px;
  color: #ffc000;
}

/* Vision / mission: <h2> -> <h3> */
.video-text h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  font-weight: 300;
  margin-bottom: clamp(18px, 3vw, 40px);
}

.video-text blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.video-text blockquote p:last-child {
  margin-bottom: 0;
}

/* Footer widget titles are <h2>; keep the original light look */
.footer-widget .fw-title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

/* -----------------------------------------------------------------
   18. Newly-linked contact details
   Phone numbers and email addresses are now real tel:/mailto: links,
   so they need the surrounding text colour rather than browser blue.
   ----------------------------------------------------------------- */

.contact-details,
address {
  font-style: normal;
  margin-bottom: 0;
}

.footer-info-box .fib-text a,
.contact-text .hib-text a {
  color: inherit;
  text-decoration: none;
}

.footer-info-box .fib-text a:hover,
.footer-info-box .fib-text a:focus,
.contact-text .hib-text a:hover,
.contact-text .hib-text a:focus {
  color: #ffc000;
  text-decoration: underline;
}

.copyright a {
  color: #646470;
}

/* The close control is a real <button> now, not a <div> */
button.search-close-switch {
  border: none;
  line-height: 1;
}

/* -----------------------------------------------------------------
   19. Print
   ----------------------------------------------------------------- */

@media print {
  #preloder,
  .hero-section,
  .map,
  .search-model,
  .slicknav_menu,
  .footer-search,
  .site-btn {
    display: none !important;
  }

  body {
    color: #000;
  }
}