/* ==========================================================================
   Arise Precision Casting - custom site styling
   Brand palette taken from the logo: orange #EE5A28, navy #1E3070
   Two independent blocks, each scoped to its own selector so nothing else on
   the site is affected:
     1. .table-responsive  - table styling
     2. .apc-whatsapp      - WhatsApp floating button (see end of file)
   To remove: delete this file and its <link> in resources/views/partials/header.blade.php
   ========================================================================== */

:root {
    --arise-orange: #ee5a28;
    --arise-orange-soft: #fff4ef;
    --arise-navy: #1e3070;
    --arise-navy-light: #2c4694;
    --arise-navy-soft: #eef2fa;
    --arise-line: #e8ecf4;
}

/* ---- wrapper ---- */
.table-responsive {
    border: 1px solid var(--arise-line) !important;
    border-radius: 10px !important;
    overflow: hidden;
    overflow-x: auto;
    background: #fff;
    box-shadow: 0 6px 26px rgba(30, 48, 112, 0.07);
    -webkit-overflow-scrolling: touch;
}

/* ---- base table ---- */
.table-responsive > .table {
    margin-bottom: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-responsive > .table > :not(:first-child) {
    border-top: 0;
}

/* ---- head ---- */
.table-responsive > .table thead th {
    background: linear-gradient(135deg, var(--arise-navy) 0%, var(--arise-navy-light) 100%);
    color: #ffffff !important;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 16px 18px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    vertical-align: middle;
    white-space: nowrap;
}

.table-responsive > .table thead th:last-child {
    border-right: 0;
}

/* second header row sits slightly lighter so grouped headers read clearly */
.table-responsive > .table thead tr + tr th {
    background: var(--arise-navy-light);
    font-size: 11.5px;
}

/* ---- body ---- */
.table-responsive > .table tbody td {
    padding: 14px 18px;
    font-size: 14px;
    color: #55575c;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--arise-line);
    border-right: 1px solid #f2f5fa;
    vertical-align: middle;
    transition: color 0.25s ease;
}

.table-responsive > .table tbody td:last-child {
    border-right: 0;
}

.table-responsive > .table tbody tr:nth-child(even) {
    background: #fbfcfe;
}

/* first column carries the row identity */
.table-responsive > .table tbody td:first-child {
    color: var(--arise-navy);
    font-weight: 600;
}

/* label / sub-heading cells (spec sheets and grouped tolerance rows) */
.table-responsive > .table tbody td.alt-font {
    background: var(--arise-navy-soft);
    color: var(--arise-navy);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---- interaction ---- */
.table-responsive > .table tbody tr {
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.table-responsive > .table tbody tr:hover {
    background: var(--arise-orange-soft);
    box-shadow: inset 3px 0 0 0 var(--arise-orange);
}

.table-responsive > .table tbody tr:hover td {
    color: #33353a;
}

.table-responsive > .table tbody tr:hover td:first-child,
.table-responsive > .table tbody tr:hover td.alt-font {
    color: var(--arise-orange);
}

.table-responsive > .table tbody tr:hover td.alt-font {
    background: #ffeee6;
}

/* tolerance figures read better in a tabular figure face */
.table-responsive > .table tbody td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .table-responsive > .table thead th {
        padding: 13px 14px;
        font-size: 11px;
    }

    .table-responsive > .table tbody td {
        padding: 12px 14px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .table-responsive > .table thead th {
        padding: 11px 12px;
        white-space: normal;
    }

    .table-responsive > .table tbody td {
        padding: 11px 12px;
        font-size: 12.5px;
    }
}

/* ==========================================================================
   WhatsApp floating button
   Anchored to the same reference as .scroll-top-arrow (position:fixed;
   right:45px; top:91%) so it always sits directly above it at any viewport
   height. Below 992px the theme hides .scroll-top-arrow, so the button drops
   to a standard bottom-right position instead.
   Markup lives in resources/views/partials/footer.blade.php
   ========================================================================== */

.apc-whatsapp {
    position: fixed;
    right: 45px;
    top: calc(91% - 62px);
    width: 52px;
    height: 52px;
    text-align: center;
    border-radius: 100%;
    background: #25d366;
    color: #fff !important;
    font-size: 27px;
    text-decoration: none;
    z-index: 10006;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .40);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.apc-whatsapp:hover,
.apc-whatsapp:focus {
    background: #1ebe5b;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .50);
}

.apc-whatsapp i {
    line-height: 52px;
    position: relative;
    z-index: 2;
}

/* soft outward pulse so the button reads as live without shouting */
.apc-whatsapp::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: apcWaPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes apcWaPulse {
    0% {
        transform: scale(1);
        opacity: .75;
    }

    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

@media (max-width: 991px) {
    .apc-whatsapp {
        right: 20px;
        top: auto;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    .apc-whatsapp i {
        line-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apc-whatsapp {
        transition: none;
    }

    .apc-whatsapp::after {
        animation: none;
    }
}

/* ==========================================================================
   Certificate gallery tiles
   Every sheet here is A4 portrait (2481x3509) - the two real scans and the
   cert-logo.webp stand-in alike. Locking each tile to that proportion keeps
   the masonry grid even and gives it a known height before the images load.
   object-fit: contain guarantees a full sheet is always shown whole, never
   cropped, whatever the source image's exact dimensions turn out to be.
   Markup lives in resources/views/certificates.blade.php
   ========================================================================== */

.apc-cert-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2481 / 3509;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--arise-line);
}

.apc-cert-tile img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   Justified body copy
   Paragraphs inside page sections are justified. Anything the theme has
   explicitly centred stays centred, and the responsive
   "text-center text-lg-start" pattern still switches correctly at its
   breakpoint - the breakpoint rules below sit after the centring rule at
   equal specificity, so they win only once their media query applies.
   Scoped to <section> so the navbar, footer and dropdowns are untouched.
   ========================================================================== */

section p,
.panel-body {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* explicitly aligned blocks keep their alignment */
.text-center p {
    text-align: center;
}

.text-end p,
.text-md-end p {
    text-align: right;
}

/* where the theme switches to left-aligned, justify instead */
.text-start p {
    text-align: justify;
}

@media (min-width: 576px) {
    .text-sm-start p {
        text-align: justify;
    }
}

@media (min-width: 768px) {
    .text-md-start p {
        text-align: justify;
    }
}

@media (min-width: 992px) {
    .text-lg-start p {
        text-align: justify;
    }
}

/* never justify a lone short line - list items and captions read better flush */
section .list-style-4 li,
section figcaption p,
section .breadcrumb {
    text-align: left;
    hyphens: manual;
}

/* ==========================================================================
   HEADER THEME
   --------------------------------------------------------------------------
   >>> CHANGE EVERY HEADER COLOUR FROM THE :root BLOCK DIRECTLY BELOW. <<<
   Nothing further down needs editing - every rule reads these variables, so
   one edit here recolours the bar, the dropdowns and the mobile menu at once.

   The logo is used as-is in its original colours, so the bar is kept light:
   a navy wordmark would disappear on a dark background. The tint is the
   logo's own navy at very low strength, which lifts the logo off the white
   page without competing with it, finished with an orange hairline and
   orange hover marks taken straight from the logo's flame.

   Want a dark navy bar instead? You would need a white/light version of the
   logo first - then set --apc-hdr-bg-a/-b to #1e3070 / #16224a and
   --apc-hdr-link to #ffffff.
   ========================================================================== */

:root {
    /* ---- bar ---- */
    --apc-hdr-bg-a: #ffffff;              /* gradient start (left)  */
    --apc-hdr-bg-b: #eef2fa;              /* gradient end (right)   */
    --apc-hdr-accent: #ee5a28;            /* orange hairline + hover */
    --apc-hdr-accent-height: 3px;
    --apc-hdr-shadow: 0 4px 22px rgba(30, 48, 112, .13);

    /* ---- menu text ---- */
    --apc-hdr-link: #1e3070;              /* logo navy */
    --apc-hdr-link-hover: #ee5a28;        /* logo orange */

    /* ---- dropdowns ---- */
    --apc-hdr-dd-bg: #1e3070;             /* navy panel, white text */
    --apc-hdr-dd-link: rgba(255, 255, 255, .82);
    --apc-hdr-dd-link-hover: #ffffff;
    --apc-hdr-dd-hover-bg: rgba(238, 90, 40, .22);
    --apc-hdr-dd-divider: rgba(255, 255, 255, .09);
}

/* ---- the bar ---------------------------------------------------------- */
header nav.navbar.bootsnav,
header.sticky nav.navbar.bootsnav,
header.header-appear nav.navbar.bootsnav,
header.sticky nav.navbar-fixed-top.header-light,
header.header-appear nav.header-light {
    background: var(--apc-hdr-bg-a) !important;
    background-image: linear-gradient(120deg, var(--apc-hdr-bg-a) 0%, var(--apc-hdr-bg-b) 100%) !important;
    box-shadow: var(--apc-hdr-shadow);
    border-bottom: 0;
}

/* orange hairline along the bottom edge */
header nav.navbar.bootsnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--apc-hdr-accent-height);
    background: var(--apc-hdr-accent);
    pointer-events: none;
}

/* ---- logo ------------------------------------------------------------- */
/* both <img> tags carry the same original logo, so show exactly one of them
   at every scroll position and never let the theme's swap hide both */
header .logo .logo-dark,
header.sticky nav.header-light .logo .logo-dark,
header.header-appear nav.header-light .logo .logo-dark {
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
}

header .logo .logo-light,
header.sticky nav.header-light .logo .logo-light,
header.header-appear nav.header-light .logo .logo-light {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
}

/* ---- top level menu links --------------------------------------------- */
header nav.navbar.bootsnav .navbar-nav > li > a,
header.sticky nav.navbar.bootsnav .navbar-nav > li > a,
header.sticky nav.navbar-fixed-top.header-light .navbar-nav > li > a,
header.header-appear nav.header-light .navbar-nav > li > a {
    color: var(--apc-hdr-link) !important;
    position: relative;
    transition: color .25s ease;
}

header nav.navbar.bootsnav .navbar-nav > li > a:hover,
header nav.navbar.bootsnav .navbar-nav > li > a:focus,
header nav.navbar.bootsnav .navbar-nav > li.active > a,
header.sticky nav.navbar.bootsnav .navbar-nav > li > a:hover,
header.sticky nav.navbar.bootsnav .navbar-nav > li.active > a {
    color: var(--apc-hdr-link-hover) !important;
}

/* dropdown chevrons sit outside the <a>, so colour them to match */
header nav.navbar.bootsnav .navbar-nav > li > .dropdown-toggle,
header nav.navbar.bootsnav .navbar-nav > li > i {
    color: var(--apc-hdr-link) !important;
    transition: color .25s ease;
}

header nav.navbar.bootsnav .navbar-nav > li:hover > .dropdown-toggle,
header nav.navbar.bootsnav .navbar-nav > li:hover > i,
header nav.navbar.bootsnav .navbar-nav > li.active > .dropdown-toggle,
header nav.navbar.bootsnav .navbar-nav > li.active > i {
    color: var(--apc-hdr-link-hover) !important;
}

/* underline growing from the centre on hover / active */
header nav.navbar.bootsnav .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 2px;
    height: 2px;
    background: var(--apc-hdr-accent);
    opacity: 0;
    transition: left .28s ease, right .28s ease, opacity .28s ease;
}

header nav.navbar.bootsnav .navbar-nav > li > a:hover::after,
header nav.navbar.bootsnav .navbar-nav > li.active > a::after {
    left: 10px;
    right: 10px;
    opacity: 1;
}

/* ---- dropdowns -------------------------------------------------------- */
header nav.navbar.bootsnav .simple-dropdown .dropdown-menu,
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li.dropdown > ul,
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li.dropdown > ul > li.dropdown > ul {
    background: var(--apc-hdr-dd-bg) !important;
    border: 0;
    border-top: var(--apc-hdr-accent-height) solid var(--apc-hdr-accent);
    box-shadow: var(--apc-hdr-shadow);
}

header nav.navbar.bootsnav .dropdown-menu > li > a {
    color: var(--apc-hdr-dd-link) !important;
    border-bottom: 1px solid var(--apc-hdr-dd-divider);
    transition: background .22s ease, color .22s ease;
}

header nav.navbar.bootsnav .dropdown-menu > li:last-child > a {
    border-bottom: 0;
}

header nav.navbar.bootsnav .dropdown-menu > li > a:hover,
header nav.navbar.bootsnav .dropdown-menu > li > a:focus,
header nav.navbar.bootsnav .dropdown-menu > li.active > a {
    color: var(--apc-hdr-dd-link-hover) !important;
    background: var(--apc-hdr-dd-hover-bg) !important;
}

/* ---- mobile ----------------------------------------------------------- */
@media (max-width: 991px) {

    header nav.navbar.bootsnav .navbar-collapse {
        background: var(--apc-hdr-bg-a);
        border-top: 1px solid rgba(30, 48, 112, .10);
    }

    /* hamburger bars */
    header nav.navbar.bootsnav .navbar-toggler .icon-bar,
    header.sticky nav.navbar.bootsnav .navbar-toggler .icon-bar {
        background: var(--apc-hdr-link) !important;
    }

    /* centre-out underline reads as a stray rule on stacked links */
    header nav.navbar.bootsnav .navbar-nav > li > a::after {
        display: none;
    }

    header nav.navbar.bootsnav .dropdown-menu {
        background: var(--apc-hdr-dd-bg) !important;
        border-top: 0;
    }
}

/* ==========================================================================
   Heading size locks  (.apc-h1 ... .apc-h6)
   --------------------------------------------------------------------------
   The theme sizes headings by TAG only (h1 70px ... h6 25px), so changing a
   tag for SEO would also change its size. These classes carry the exact
   font-size and line-height of each original tag at every breakpoint, so a
   heading can be re-tagged for correct document outline while looking
   pixel-identical to before.

   Usage: <h2 class="apc-h5 ..."> renders exactly like the old <h5>.
   Values mirror style.css (base) and responsive.css (1199 / 991 / 767).
   ========================================================================== */

.apc-h1 { font-size: 70px; line-height: 70px; }
.apc-h2 { font-size: 55px; line-height: 60px; }
.apc-h3 { font-size: 48px; line-height: 54px; }
.apc-h4 { font-size: 40px; line-height: 46px; }
.apc-h5 { font-size: 32px; line-height: 40px; }
.apc-h6 { font-size: 25px; line-height: 30px; }

@media (max-width: 1199px) {
    .apc-h1 { font-size: 65px; line-height: 65px; }
    .apc-h2 { font-size: 50px; line-height: 55px; }
    .apc-h3 { font-size: 42px; line-height: 48px; }
    .apc-h4 { font-size: 35px; line-height: 41px; }
    .apc-h5 { font-size: 27px; line-height: 32px; }
    .apc-h6 { font-size: 22px; line-height: 27px; }
}

@media (max-width: 991px) {
    .apc-h1 { font-size: 57px; line-height: 58px; }
    .apc-h2 { font-size: 43px; line-height: 48px; }
    .apc-h3 { font-size: 36px; line-height: 41px; }
    .apc-h4 { font-size: 30px; line-height: 35px; }
    .apc-h5 { font-size: 24px; line-height: 30px; }
    .apc-h6 { font-size: 22px; line-height: 26px; }
}

@media (max-width: 767px) {
    .apc-h1 { font-size: 37px; line-height: 42px; }
    .apc-h2 { font-size: 30px; line-height: 36px; }
    .apc-h3 { font-size: 28px; line-height: 34px; }
    .apc-h4 { font-size: 24px; line-height: 30px; }
    .apc-h5 { font-size: 20px; line-height: 28px; }
    .apc-h6 { font-size: 18px; line-height: 23px; }
}

/* counter stats were <h6>; as <div> they lose the shared heading reset, so
   restore the only parts that were doing visible work */
.apc-h6.counter,
div.apc-h6 {
    padding: 0;
    letter-spacing: 0;
}

/* a heading present only for the document outline: the styled element inside
   keeps its own size, spacing and weight, so wrapping changes nothing visually */
.apc-h-reset {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
}

/* Images now carry real width/height attributes so the browser can reserve
   space and avoid layout shift. This keeps them fluid: the attributes supply
   the aspect ratio, CSS supplies the width. Deliberately low specificity so
   any class that sets a height (.h-100, .apc-cert-tile img) still wins. */
img {
    height: auto;
}

/* ==========================================================================
   Process step marker
   The step number was removed from the process page, leaving an empty bordered
   span above each heading. It is now the Arise mark (the favicon icon) sitting
   inline, directly before the step heading text.
   Markup: resources/views/process.blade.php
   ========================================================================== */

.feature-box-5 .feature-content .apc-step-icon {
    display: inline-block;
    width: 24px;
    height: auto;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

@media (max-width: 767px) {
    .feature-box-5 .feature-content .apc-step-icon {
        width: 20px;
        margin-right: 10px;
    }
}
