/* ==========================================
   URDODO Maintenance Page
   responsive.css
   (Desktop / large screens are untouched —
   all rules below only apply at their
   max-width breakpoint and smaller)

   Coverage:
   - Phones:        400px – 576px
   - Large phones:  667px
   - iPad portrait: 768px – 834px
   - iPad landscape / small tablets: 834px – 992px
   - Tablets:       992px – 1024px
   - Small laptops: 1024px – 1200px
   - Laptops:       1200px – 1400px
   - Large desktop: 1400px and below
========================================== */

/* ==========================================
   Cross-OS / Cross-Browser Globals
   (applies at ALL sizes below large desktop)
========================================== */

@media (max-width: 1400px) {

    /* Font rendering parity across Windows / Mac */

    html {

        -webkit-text-size-adjust: 100%;

        -moz-text-size-adjust: 100%;

        text-size-adjust: 100%;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        text-rendering: optimizeLegibility;

    }

    /* Smooth momentum scrolling on iOS / iPad */

    html {

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

    }

    /* Allow 100dvh for modern mobile browsers
       (dynamic viewport height fixes the
       address-bar-jump problem on iOS Safari) */

    .hero {

        min-height: 100svh;

        min-height: 100dvh;

    }

    /* Container max-width already set in style.css;
       tighten it slightly here so text never
       stretches too wide on big-but-not-huge screens */

    .container {

        width: min(1200px, 94%);

    }

    /* ============================= */

    .hero h1 {

        font-size: clamp(40px, 5.5vw, 64px);

    }

    .hero h2 {

        font-size: clamp(28px, 3.5vw, 46px);

    }

    .hero p {

        font-size: clamp(15px, 1.4vw, 18px);

    }

}

/* ===========================
   Large Desktop (unchanged from base)
=========================== */

@media (max-width: 1400px) {

    /* Extra-large desktop baseline — layout
       stays identical; only tighten container
       and let typography scale fluidly */

    .hero h1 {

        font-size: 64px;

    }

    .hero h2 {

        font-size: 46px;

    }

    .hero p {

        font-size: 18px;

    }

}

/* ===========================
   Desktop / Window / Mac:
   Lock to viewport — no scrolling
   (everything must fit in one screen)
=========================== */

@media (min-width: 1025px) {

    html,
    body {

        height: 100%;

        overflow: hidden;

    }

    body {

        overflow: hidden;

    }

    /* Make the bg image cover the full locked viewport */

    body::before {

        min-height: 100vh;

        height: 100vh;

        height: 100dvh;

    }

    /* Hero fills the available height so the
       notify card + support stack vertically
       inside the same screen */

    .hero {

        min-height: calc(100vh - 70px - 80px);

        min-height: calc(100dvh - 70px - 80px);

        display: flex;

        align-items: center;

    }

    .hero-grid {

        padding-left: 120px;

        width: 100%;

    }

    /* Footer stays visible at the bottom */

    footer {

        position: fixed;

        bottom: 0;

        left: 0;

        right: 0;

        z-index: 100;

        padding: 10px 30px;

        background: #ffffff;

        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);

        border-top: 1px solid rgba(0, 0, 0, 0.06);

        opacity: 1 !important;

        transform: none !important;

    }

    .footer {

        padding: 14px 26px;

        border-radius: 14px;

        background: rgba(255,255,255,0.85);

        backdrop-filter: blur(6px);

    }

    .footer p,

    .footer-links a {

        font-size: 12px;

    }

    .footer-links a {

        padding: 0 14px;

    }

    .social a {

        width: 34px;

        height: 34px;

        font-size: 13px;

    }

    /* Push body content up so it doesn't hide
       behind the fixed footer */

    body {

        padding-bottom: 70px;

    }

}

/* ===========================
   Laptop
=========================== */

@media (max-width:1200px){

    nav ul{

        gap:25px;

    }

    .hero-grid{

        gap:40px;

    }

    .hero h1{

        font-size:56px;

    }

    .hero h2{

        font-size:42px;

    }

    .hero p{

        font-size:17px;

    }

    .gear{

        width:150px;

    }

    .wrench{

        width:145px;

    }

}

/* ===========================
   iPad / Tablet Landscape
   (1024px = iPad Pro 11" landscape,
                iPad Air 10.9" landscape)
=========================== */

@media (max-width:1024px){

    .header{

        padding:22px 0;

    }

    .navbar{

        padding:18px 24px;

        border-radius:24px;

    }

    nav ul{

        gap:20px;

    }

    nav a{

        font-size:15px;

    }

    .hero-grid{

        gap:32px;

    }

    .hero h1{

        font-size:48px;

    }

    .hero h2{

        font-size:36px;

    }

    .hero p{

        font-size:16px;

        line-height:1.8;

    }

    .laptop{

        max-width:440px;

    }

    .gear{

        width:130px;

        left:20px;

        bottom:30px;

    }

    .wrench{

        width:120px;

        bottom:60px;

    }

    .cone{

        width:75px;

        right:110px;

    }

    .footer{

        padding:24px 28px;

    }

    /* Use the mobile-optimized background from here down
       (iPad, tablets, and phones) and stop it from
       stretching past the hero text — everything from
       the notify card downward sits on the plain
       page background instead of over the artwork. */
    body::before{

        background-image:url('../assets/bgmobile.png');

        background-position:top center;

        min-height:640px;

        height:640px;

    }

}

/* ===========================
   Fine-tune: just below iPad landscape
   (Surface Pro, Galaxy Tab S8/S9, etc.)
=========================== */

@media (max-width: 992px) and (min-width: 834px) {

    .hero-grid {

        gap: 28px;

    }

    .hero h1 {

        font-size: 44px;

    }

    .hero h2 {

        font-size: 33px;

    }

    .notify-card {

        max-width: 460px;

    }

}

/* ===========================
   Tablet Landscape (general)
   (Surface Duo unfolded, Galaxy Z Fold outer,
    small laptops, iPad Pro 12.9" landscape)
=========================== */

@media (max-width:992px){

    .header{

        padding:20px 0;

    }

    .navbar{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

        padding:20px;

    }

    nav{

        width:100%;

    }

    nav ul{

        justify-content:center;

        flex-wrap:wrap;

        gap:18px;

    }

    .status-pill{

        margin-top:10px;

    }

    .hero{

        padding:30px 0 30px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-visual{

        order:1;

        margin-bottom:40px;

    }

    .badge{

        margin:auto auto 25px;

    }

    .hero h1{

        font-size:44px;

    }

    .hero h2{

        font-size:34px;

    }

    .hero p{

        margin:auto;

    }

    .notify-card{

        max-width:520px;

        width:100%;

        margin:40px auto 0;

    }

    .support{

        display:flex;

        flex-direction:column;

        align-items:center;

        margin-top:80px;

    }

    .footer{

        flex-direction:column;

        gap:25px;

        text-align:center;

    }

    .social{

        justify-content:center;

    }

    .footer-links{

        justify-content:center;

        flex-wrap:wrap;

    }

}

/* ===========================
   Fine-tune: between tablet and iPad portrait
   (Galaxy Tab A8, Lenovo Tab M10, etc.)
=========================== */

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

    .navbar {

        padding: 16px 18px;

        border-radius: 22px;

    }

    nav ul {

        gap: 14px;

    }

    nav a {

        font-size: 14px;

    }

    .hero h1 {

        font-size: 38px;

    }

    .hero h2 {

        font-size: 28px;

    }

    .hero p {

        font-size: 15px;

        line-height: 1.75;

    }

    .laptop {

        max-width: 340px;

    }

    .notify-card {

        max-width: 440px;

    }

}

/* ===========================
   iPad Portrait / Small Tablet
   (iPad 10th/9th gen 810×1080, iPad mini)
=========================== */

@media (max-width:834px){

    .laptop{

        max-width:380px;

    }

    .hero h1{

        font-size:40px;

    }

    .hero h2{

        font-size:30px;

    }

    .notify-card{

        padding:20px;

    }

    .gear{

        width:110px;

    }

    .wrench{

        width:100px;

    }

    .cone{

        width:65px;

    }

}

/* ===========================
   Small Tablet (768px breakpoint)
   (iPad mini landscape, Galaxy Tab A7)
=========================== */

@media (max-width:768px){

    .logo img{

        height:36px;

    }

    .tagline{

        font-size:5px;

    }

    nav ul{

        gap:14px;

    }

    nav a{

        font-size:15px;

    }

    .status-pill{

        font-size:14px;

        padding:10px 18px;

    }

    .hero h1{

        font-size:38px;

    }

    .hero h2{

        font-size:28px;

    }

    .hero p{

        font-size:12px;

        line-height:1.7;

    }

    .notify-form{

        flex-direction:column;
       
     

    }

    .notify-form input{

        width:100%;
        height:52px;

    }

    .notify-form button{

        width:100%;

        height:52px;

    }

    .floating-card{

        transform:scale(.8);

    }

    .laptop{

        max-width:340px;

    }

    .gear{

        width:100px;

        left:10px;

    }

    .wrench{

        width:90px;

        right:0;

    }

    .cone{

        width:60px;

        right:80px;

    }

    .screen-logo{

        width:140px;

    }

    .footer p{

        white-space:normal;

    }

    .footer-links a{

        padding:0 14px;

        font-size:13px;

    }

}

/* ===========================
   Large Phone Landscape
   (iPhone 8 Plus, 7 Plus, 6s Plus: 414×736 →
    handled here; Galaxy S21/S22/S23 Ultra
    landscape: ~512px; Pixel 7 Pro landscape)
   — m.png + no scrolling on all phones
=========================== */

@media (max-width: 667px) {

    /* Lock to viewport on phones — no scrolling */

    html,
    body {

        height: 100%;

        overflow: hidden;

    }

    /* Flex column layout — header top, footer bottom, hero fills middle */

    html {

        min-height: 100dvh;

        min-height: 100svh;

    }

    body {

        display: flex;

        flex-direction: column;

        min-height: 100dvh;

        min-height: 100svh;

        overflow: hidden;

    }

    /* Remove m.png background on phones — use plain page bg instead */
    body::before {

        background-image: none;

        min-height: 100dvh;

        min-height: 100svh;

    }

    .navbar {

        padding: 14px 14px;

        border-radius: 18px;

    }

    nav ul {

        gap: 12px;

    }

    nav a {

        font-size: 14px;

    }

    /* Hero fills the available middle space so
       the footer is always visible at the bottom */
    .hero {

        flex: 1 1 auto;

        min-height: 0;

        display: flex;

        align-items: flex-start;

        justify-content: center;

        padding: 10px 0;

    }

    /* Footer pinned to the bottom of the column */
    footer {

        flex-shrink: 0;

        margin-top: 0;

    }

    .hero h1 {

        font-size: 26px;

        margin-bottom: 6px;

    }

    .hero h2 {

        font-size: 18px;

        margin-bottom: 6px;

    }

    .hero p {

        font-size: 11px;

        line-height: 1.4;

    }

    .notify-card {

        padding: 12px;

        margin-top: 12px;

    }

    .notify-card h3 {

        font-size: 13px;

    }

    .laptop {

        max-width: 280px;

    }

    .gear {

        width: 80px;

        left: 5px;

    }

    .wrench {

        width: 80px;

        right: 0;

    }

    .cone {

        width: 50px;

        right: 50px;

    }

    .screen-logo {

        width: 110px;

    }

    .footer {

        padding: 20px 18px;

    }

    .footer-links a {

        font-size: 12px;

        padding: 0 10px;

    }

}

/* ===========================
   Mobile / Phone
   (iPhone SE, 8, 7, 6 — 375px wide;
    Galaxy A series, Android phones —
    360px to 390px wide)
=========================== */

@media (max-width:576px){

    body{

        overflow-x:hidden;

        /* Prevent accidental zoom on iOS
           when form inputs are focused */

        touch-action: manipulation;

    }

    /* Remove m.png background on phones — use plain page bg instead */
    body::before{

        background-image:none;

        min-height:100dvh;

        min-height:100svh;

    }

    .container{

        width:92%;

    }

    .header{

        padding:16px 0;

    }

    .navbar{

        border-radius:20px;

        padding:14px 16px;

        /* Logo left, status-pill right on same line */
        justify-content:space-between;

        flex-wrap:nowrap;

        align-items:center;

    }

    /* Keep nav hidden on phones */
    nav{

        display:none;

    }

    /* Logo: image on top, tagline below it
       — the whole logo block stays on the left
       side of the navbar with the pill on the right */
    .logo{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

    }

    .logo img{

        height:28px;

    }

    .tagline{

        font-size:4.5px;

       

        line-height:1.2;

        white-space:nowrap;

    }

    nav{

        display:none;

    }

    .status-pill{

        /* Sit on the right side of the navbar,
           shrink to its content so the logo keeps
           room on the left */
        width:auto;

        flex-shrink:0;

        justify-content:center;

        font-size:11px;

        padding:7px 12px;

        gap:6px;

    }

    .status-pill .dot{

        width:8px;

        height:8px;

    }

    .hero{

        padding:20px 0 25px;

    }

    .hero-content{

        padding:0 12px;

    }

    .badge{

        font-size:12px;

        padding:8px 16px;

        margin-bottom:20px;

    }

    .hero h1{

        font-size:30px;

        line-height:1.15;

    }

    .hero h2{

        font-size:24px;

        margin-bottom:16px;

    }

    .hero p{

        font-size:11px;

        line-height:1.7;

    }

    .notify-card{

        padding:18px;
        
        margin-top:8px;

        border-radius:14px;

    }

    .notify-header{

        gap:10px;

        margin-bottom:12px;

    }

    .notify-icon-wrapper{

        width:30px;

        height:30px;

    }

    .notify-card h3{

        font-size:12px;

    }
 
    .notify-form input{

        height:50px;

         padding:8px;
        font-size:12px;


    }

    .notify-form button{

        height:30px;

        font-size:12px;

        padding:0 20px;

    }

    .support{

        font-size:14px;

        margin-top:10px;

    }

    .support-item{

        font-size:14px;

    }

    .laptop{

        max-width:260px;

    }

    .floating-card{

        display:none;

    }

    .gear{

        width:70px;

        left:0;

        bottom:5px;

    }

    .wrench{

        width:70px;

        right:-5px;

        bottom:20px;

    }

    .cone{

        width:40px;

        right:40px;

    }

    .screen-logo{

        width:95px;

        margin-bottom:14px;

    }

    .progress{

        height:8px;

    }

    #progressText{

        font-size:13px;

    }

    footer{

        padding:10px 0 30px;

    }

    /* Footer layout on phones:
       All three sections (copyright, contact links,
       and social icons) flow on a single centered line.
       The web link, email, and social icons sit inline
       (with a small · divider between them), centered. */
    .footer{

        padding:16px 20px;

        border-radius:16px;

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        align-items:center;

        text-align:center;

        min-height:auto;

        gap:8px 14px;

    }

    .footer p{

        font-size:11px;

        margin:0;

        white-space:nowrap;

    }

    /* Contact info + social icons share one horizontal line,
       centered, with a thin divider between the two links */
    .footer-links{

        flex-direction:row;

        flex-wrap:nowrap;

        justify-content:center;

        align-items:center;

        gap:0;

    }

    .footer-links a{

        border-left:none;

        padding:0 8px;

        font-size:11px;

        gap:6px;

        display:inline-flex;

        align-items:center;

        white-space:nowrap;

    }

    .footer-links a + a{

        border-left:1px solid rgba(0,0,0,.12);

    }

    .social{

        display:inline-flex;

        justify-content:center;

        align-items:center;

        gap:8px;

        padding-left:10px;

        margin-left:6px;

        border-left:1px solid rgba(0,0,0,.12);

    }

    .social a{

        width:32px;

        height:32px;

    }

}

/* ===========================
   Small Phone
   (iPhone 5/SE 1st gen: 320px wide;
    Galaxy S10e, older Android phones)
=========================== */

@media (max-width:400px){

    .hero h1{

        font-size:28px;

    }

    .hero h2{

        font-size:21px;

    }

    .hero p{

        font-size:13.5px;

    }

    .badge{

        font-size:11px;

    }

    .notify-card{

        padding:14px;

    }

    .notify-card h3{

        font-size:14px;

    }

    .logo img{

        height:28px;

    }

    .laptop{

        max-width:220px;

    }

    .screen-logo{

        width:78px;

    }

    .footer p{

        font-size:11px;

    }

    /* Even tighter tagline */

    .tagline {

        font-size: 4px;

        letter-spacing: 0.2px;

    }

}

/* ===========================
   Extra Small Phone (very rare,
   but covers some feature phones)
=========================== */

@media (max-width: 340px) {

    .navbar {

        padding: 12px 12px;

        border-radius: 16px;

    }

    .hero h1 {

        font-size: 22px;

    }

    .hero h2 {

        font-size: 18px;

    }

    .hero p {

        font-size: 11px;

        line-height: 1.6;

    }

    .badge {

        font-size: 10px;

        padding: 6px 12px;

    }

    .notify-card {

        padding: 12px;

    }

    .notify-card h3 {

        font-size: 13px;

    }

    .notify-form input {

        height: 50px;
        padding: 8px;
        font-size: 13px;

    }

    .notify-form button {

        height: 30px;
        
        font-size: 13px;

    }

    .laptop {

        max-width: 180px;

    }

    .gear {

        width: 55px;

    }

    .wrench {

        width: 55px;

    }

    .cone {

        width: 35px;

    }

    .screen-logo {

        width: 60px;

    }

    .footer p {

        font-size: 10px;

    }

    .social a {

        width: 32px;

        height: 32px;

    }

}

/* ===========================
   Extra-Large Desktop
   (27"+ monitors, ultrawide screens,
    MacBook Pro 16", Windows large displays)
   — only adjust container and spacing,
   keep layout identical to base
=========================== */

@media (min-width: 1600px) {

    .container {

        width: min(1440px, 90%);

    }

    .hero-grid {

        gap: 80px;

    }

    .hero h1 {

        font-size: clamp(64px, 4.5vw, 80px);

    }

    .hero h2 {

        font-size: clamp(36px, 2.8vw, 52px);

    }

    .hero p {

        font-size: clamp(17px, 1.3vw, 20px);

    }

    .laptop {

        max-width: 580px;

    }

    .gear {

        width: 200px;

    }

    .wrench {

        width: 190px;

    }

    .cone {

        width: 110px;

    }

}

/* ===========================
   Wide / Ultrawide Desktop
   (21:9 monitors, 3440px wide,
   MacBook Pro 14"+ ultrawide mode)
=========================== */

@media (min-width: 1800px) {

    .hero-grid {

        gap: 100px;

    }

    .hero h1 {

        font-size: clamp(64px, 4vw, 88px);

    }

    .hero h2 {

        font-size: clamp(36px, 2.5vw, 56px);

    }

    .hero p {

        max-width: 700px;

    }

    .notify-card {

        max-width: 560px;

    }

    .laptop {

        max-width: 620px;

    }

}

/* ===========================
   Accessibility: Reduced Motion
   (Respects Windows Ease of Access /
    macOS Reduce Motion settings)
=========================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

    html {

        scroll-behavior: auto;

    }

    .hero-visual {

        opacity: 1;

        transform: none;

    }

}

/* ===========================
   Accessibility: High Contrast Mode
   (Windows High Contrast, macOS Increase
   Contrast, forced-colors browsers)
=========================== */

@media (forced-colors: active) {

    .navbar {

        border: 2px solid CanvasText;

    }

    .notify-card {

        border: 2px solid CanvasText;

    }

    .notify-form button {

        border: 2px solid ButtonText;

    }

    .social a {

        border: 2px solid CanvasText;

    }

    nav a::after {

        display: none;

    }

}

/* ===========================
   Print Stylesheet
   (cross-OS: Windows/Mac print dialog)
=========================== */

@media print {

    body::before,
    #particles,
    .hero-visual,
    .floating-card,
    .gear,
    .wrench,
    .cone,
    .status-pill,
    nav,
    .notify-card,
    .social {

        display: none !important;

    }

    body {

        background: white !important;

        color: black !important;

    }

    .hero h1 span {

        color: #5F18B9 !important;

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;

    }

    footer {

        position: static;

    }

}