/* ==========================================================
   GlobalTime.io
   Canada City Pages
   (Toronto, Ottawa, Vancouver, Calgary, Montreal...)
   Part 1
========================================================== */

/* ---------- Layout ---------- */

.hero{
    max-width:1200px;
    margin:0 auto;
    padding:24px 16px 40px;
    display:flex;
    flex-direction:column;
    gap:24px;
    box-sizing:border-box;
}

/* ---------- Card ---------- */

.card{

    background:#ffffffee;

    border-radius:18px;

    border:1px solid rgba(148,163,184,.30);

    box-shadow:0 18px 40px rgba(15,23,42,.12);

    padding:18px 20px;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-sizing:border-box;

}

.info-block .card{

    background:rgba(248,250,252,.90);

    border-style:dashed;

}

/* ---------- Dark Mode ---------- */

body.dark-mode .card{

    background:rgba(15,23,42,.96);

    border-color:rgba(148,163,184,.35);

    box-shadow:0 18px 40px rgba(0,0,0,.75);

}

body.dark-mode .info-block .card{

    background:rgba(15,23,42,.82);

}

/* ==========================================================
   HERO TITLE
========================================================== */

.canada-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:8px;

}

.title-main{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:clamp(1.75rem,3.5vw,2.3rem);

    font-weight:700;

    color:#0f172a;

    line-height:1.2;

}

body.dark-mode .title-main{

    color:#e5e7eb;

}

.tz-small{

    margin-top:6px;

    font-size:.88rem;

    font-weight:500;

    color:#6b7280;

}

body.dark-mode .tz-small{

    color:#9ca3af;

}

/* ---------- Flag ---------- */

.flag-inline-title{

    height:1em;

    width:auto;

    object-fit:contain;

    border-radius:3px;

    display:inline-block;

    vertical-align:middle;

    box-shadow:0 4px 10px rgba(15,23,42,.18);

}

/* ==========================================================
   Intro Text
========================================================== */

.info-text{

    text-align:center;

    max-width:960px;

    margin:0 auto;

    font-size:.95rem;

    line-height:1.75;

    color:#6b7280;

}

body.dark-mode .info-text{

    color:#9ca3af;

}

.about-text{

    font-size:.97rem;

    line-height:1.9;

    color:#374151;

}

body.dark-mode .about-text{

    color:#d1d5db;

}

/* ==========================================================
   BIG LIVE CLOCK
========================================================== */

.country-big-clock{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:28px 10px;

    margin-top:6px;

    border-radius:20px;

    background:radial-gradient(

        circle at top,

        rgba(37,99,235,.18),

        transparent 68%

    );

}

.country-time-value{

    font-size:clamp(3rem,6vw,4.25rem);

    font-weight:700;

    letter-spacing:.08em;

    font-variant-numeric:tabular-nums;

    color:#111827;

}

body.dark-mode .country-time-value{

    color:#f3f4f6;

}

.country-time-label{

    margin-top:8px;

    font-size:.92rem;

    color:#6b7280;

}

body.dark-mode .country-time-label{

    color:#9ca3af;

}

/* ==========================================================
   UTC ROW
========================================================== */

.utc-row{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:fit-content;

    margin:18px auto;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(37,99,235,.05);

    border:1px solid rgba(148,163,184,.40);

}

body.dark-mode .utc-row{

    background:rgba(37,99,235,.12);

    border-color:rgba(37,99,235,.22);

}

.clock-time{

    font-size:.95rem;

    font-weight:600;

    font-variant-numeric:tabular-nums;

}

.clock-tz{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#6b7280;

}

body.dark-mode .clock-tz{

    color:#9ca3af;

}

/* ==========================================================
   Section Titles
========================================================== */

.section-title{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin:16px 0 10px;

    font-size:1.08rem;

    font-weight:700;

    color:#0f172a;

}

body.dark-mode .section-title{

    color:#f3f4f6;

}

.section-title img.flag-inline-title{

    box-shadow:none;

}

/* ==========================================================
   Meta Grid
========================================================== */

.meta-row{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

    gap:14px;

    margin-top:12px;

}

.meta{

    background:rgba(241,245,249,.90);

    border-left:3px solid rgba(148,163,184,.60);

    border-radius:0 10px 10px 0;

    padding:10px 12px;

    font-size:.92rem;

    line-height:1.65;

    color:#475569;

}

body.dark-mode .meta{

    background:rgba(15,23,42,.75);

    color:#e5e7eb;

}

/* Meta Links */

.meta a{

    color:#2563eb;

    text-decoration:underline;

    font-weight:500;

}

.meta a:hover{

    text-decoration:none;

}

body.dark-mode .meta a{

    color:#93c5fd;

}

body.dark-mode .meta a:hover{

    color:#bfdbfe;

}

/* ==========================================================
   Canada City Pages
   Part 2
   (SEO, Related Tags, Cities, Guide)
========================================================== */

/* ==========================================================
   RELATED SEARCHES
========================================================== */

.related-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:16px 0 10px;

}

.tag-item{

    display:inline-flex;

}

.tag-item a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:#f8fafc;

    border:1px solid rgba(148,163,184,.35);

    color:#2563eb;

    text-decoration:none;

    font-size:.88rem;

    font-weight:500;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .12s ease,
        box-shadow .18s ease;

}

.tag-item a:hover{

    background:rgba(37,99,235,.08);

    border-color:#3b82f6;

    color:#1d4ed8;

    transform:translateY(-1px);

    box-shadow:0 6px 14px rgba(37,99,235,.12);

}

.tag-item a:focus-visible{

    outline:2px solid #2563eb;

    outline-offset:2px;

}

body.dark-mode .tag-item a{

    background:rgba(15,23,42,.90);

    border-color:rgba(148,163,184,.28);

    color:#93c5fd;

}

body.dark-mode .tag-item a:hover{

    background:rgba(37,99,235,.18);

    color:#dbeafe;

    border-color:#60a5fa;

}

/* ==========================================================
   SEO CONTENT
========================================================== */

.seo-text{

    margin-top:24px;

}

.seo-text h2{

    margin-bottom:14px;

}

.seo-text p{

    margin:0 0 16px;

    line-height:1.9;

    color:#475569;

}

body.dark-mode .seo-text p{

    color:#d1d5db;

}

.seo-text a{

    color:#2563eb;

    text-decoration:underline;

}

.seo-text a:hover{

    text-decoration:none;

}

body.dark-mode .seo-text a{

    color:#93c5fd;

}

body.dark-mode .seo-text a:hover{

    color:#bfdbfe;

}

/* ==========================================================
   CITY GRID
========================================================== */

.cities{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:14px;

    margin-top:12px;

}

.city-card{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:14px;

    border-radius:14px;

    border:1px solid rgba(148,163,184,.25);

    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,.10),
        transparent 60%),
        #ffffff;

    box-shadow:0 8px 20px rgba(15,23,42,.08);

    transition:
        transform .15s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}

.city-card:hover{

    transform:translateY(-2px);

    border-color:#93c5fd;

    box-shadow:0 12px 24px rgba(15,23,42,.12);

}

body.dark-mode .city-card{

    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,.18),
        transparent 60%),
        rgba(15,23,42,.95);

    border-color:rgba(148,163,184,.20);

    box-shadow:0 8px 18px rgba(0,0,0,.45);

}

.city-name{

    font-size:.97rem;

    font-weight:600;

    color:#0f172a;

}

body.dark-mode .city-name{

    color:#f3f4f6;

}

.city-time{

    font-size:1.35rem;

    font-weight:700;

    font-variant-numeric:tabular-nums;

    color:#2563eb;

}

body.dark-mode .city-time{

    color:#93c5fd;

}

.city-offset{

    font-size:.82rem;

    color:#6b7280;

}

body.dark-mode .city-offset{

    color:#9ca3af;

}

/* ==========================================================
   CITY GUIDE ACCORDION
========================================================== */

.city-guide{

    margin-top:18px;

}

.city-guide-intro{

    margin-bottom:16px;

}

.city-guide-accordion{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:16px;

    border-radius:18px;

    border:1px dashed rgba(148,163,184,.32);

    background:rgba(248,250,252,.55);

}


/* ---------- Item ---------- */

.guide-item{

    overflow:hidden;

    border:1px solid rgba(148,163,184,.30);

    border-radius:15px;

    background:rgba(255,255,255,.82);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

.guide-item.active{

    border-color:rgba(37,99,235,.40);

    box-shadow:0 10px 24px rgba(37,99,235,.08);

}


/* ---------- Toggle ---------- */

.guide-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:18px 20px;

    border:0;

    background:transparent;

    color:#0f172a;

    cursor:pointer;

    text-align:left;

    font:inherit;

}

.guide-toggle:hover{

    background:rgba(37,99,235,.035);

}

.guide-toggle:focus-visible{

    outline:2px solid #2563eb;

    outline-offset:-3px;

}


/* ---------- Title ---------- */

.guide-toggle-title{

    font-size:1rem;

    font-weight:700;

    line-height:1.4;

}


/* ---------- Plus / Close Icon ---------- */

.guide-toggle-icon{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    font-size:1.3rem;

    font-weight:600;

    line-height:1;

    color:#2563eb;

    transition:transform .25s ease;

}

.guide-item.active .guide-toggle-icon{

    transform:rotate(180deg);

}


/* ---------- Collapsible Content ---------- */

.guide-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.guide-content-inner{

    padding:0 20px 20px;

    border-top:1px solid rgba(148,163,184,.18);

}


/* ---------- Content Typography ---------- */

.guide-content h4{

    margin:20px 0 10px;

    font-size:.96rem;

    font-weight:700;

    color:#1e293b;

}

.guide-content p{

    margin:0 0 14px;

    font-size:.94rem;

    line-height:1.85;

    color:#475569;

}

.guide-content ul{

    margin:8px 0 16px;

    padding-left:22px;

}

.guide-content li{

    margin-bottom:8px;

    font-size:.94rem;

    line-height:1.7;

    color:#475569;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .city-guide-accordion{

    background:rgba(15,23,42,.48);

    border-color:rgba(148,163,184,.20);

}

body.dark-mode .guide-item{

    background:rgba(15,23,42,.88);

    border-color:rgba(148,163,184,.22);

}

/* Dark mode accordion hover */

body.dark-mode .guide-item:hover{

    background:rgba(30,41,59,.92);

    border-color:rgba(96,165,250,.65);

    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 8px 20px rgba(0,0,0,.22);

}

/* Keyboard focus */

body.dark-mode .guide-item:focus-within{

    border-color:#60a5fa;

    box-shadow:
        0 0 0 2px rgba(96,165,250,.14);

}

body.dark-mode .guide-item.active{

    border-color:rgba(96,165,250,.50);

    box-shadow:0 10px 24px rgba(0,0,0,.30);

}

body.dark-mode .guide-toggle{

    color:#f3f4f6;

}

body.dark-mode .guide-toggle:hover{

    background:rgba(37,99,235,.10);

}

body.dark-mode .guide-toggle:hover
.guide-toggle-icon{

    color:#bfdbfe;

}

body.dark-mode .guide-toggle-icon{

    color:#93c5fd;

}

body.dark-mode .guide-content-inner{

    border-top-color:rgba(148,163,184,.16);

}

body.dark-mode .guide-content h4{

    color:#f3f4f6;

}

body.dark-mode .guide-content p,
body.dark-mode .guide-content li{

    color:#d1d5db;

}


/* ==========================================================
   GUIDE MOBILE
========================================================== */

@media(max-width:640px){

    .city-guide-accordion{

        padding:10px;

        gap:10px;

    }

    .guide-toggle{

        padding:15px 14px;

    }

    .guide-toggle-title{

        font-size:.95rem;

    }

    .guide-content-inner{

        padding:0 14px 16px;

    }

    .guide-content h4{

        margin-top:16px;

    }

}

/* ==========================================================
   WORLD CITIES
========================================================== */

#cities-list{

    margin-top:10px;

}

/* ==========================================================
   DIVIDER
========================================================== */

.divider{

    border:none;

    border-top:1px solid rgba(148,163,184,.28);

    margin:24px 0;

}

body.dark-mode .divider{

    border-top-color:rgba(148,163,184,.18);

}

/* ==========================================================
   Canada City Pages
   Part 3
   (Converter • Ontario Cities • Back Button • Responsive)
========================================================== */

/* ==========================================================
   CONVERTER LAYOUT
========================================================== */

.converter-countries-wrapper{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:8px;

}

.converter{

    flex:1;

    min-width:320px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.converter .row{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:10px;

}

.converter select,
.converter input[type="datetime-local"]{

    width:100%;

    padding:10px 12px;

    border-radius:12px;

    border:1px solid rgba(148,163,184,.45);

    background:#f8fafc;

    color:#0f172a;

    font-size:.92rem;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

    appearance:none;

}

.converter select:focus,
.converter input:focus{

    border-color:#3b82f6;

    box-shadow:0 0 0 3px rgba(59,130,246,.12);

}

body.dark-mode .converter select,
body.dark-mode .converter input{

    background:rgba(15,23,42,.92);

    color:#f3f4f6;

    border-color:rgba(148,163,184,.28);

}

/* ==========================================================
   BUTTONS
========================================================== */

.convert-actions{

    display:flex;

    gap:10px;

    margin-top:4px;

}

.cta{

    flex:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:10px 18px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:.92rem;

    font-weight:600;

    color:#fff;

    background:#2563eb;

    box-shadow:0 10px 22px rgba(37,99,235,.28);

    transition:
        background .18s ease,
        transform .12s ease,
        box-shadow .18s ease;

}

.cta:hover{

    background:#3b82f6;

    transform:translateY(-1px);

    box-shadow:0 14px 28px rgba(37,99,235,.20);

}

.cta:active{

    transform:translateY(0);

}

.swap-btn{

    flex:0 0 auto;

    width:46px;

    padding:0;

    background:#ffffff;

    color:#2563eb;

    border:1px solid rgba(148,163,184,.35);

    box-shadow:none;

}

.swap-btn:hover{

    background:#eff6ff;

    border-color:#60a5fa;

}

.swap-icon{

    font-size:1.15rem;

    transition:transform .25s ease;

}

.swap-btn:hover .swap-icon{

    transform:rotate(180deg);

}

body.dark-mode .swap-btn{

    background:rgba(15,23,42,.95);

    color:#93c5fd;

    border-color:rgba(148,163,184,.25);

}

body.dark-mode .swap-btn:hover{

    background:rgba(37,99,235,.18);

}

#convert-btn:focus-visible,
.swap-btn:focus-visible{

    outline:2px solid #2563eb;

    outline-offset:2px;

}

/* ==========================================================
   RESULT BOX
========================================================== */

#convert-result-box{

    margin-top:18px;

    padding:14px;

    border-radius:14px;

    background:#f8fafc;

    border:1px solid rgba(148,163,184,.35);

}

body.dark-mode #convert-result-box{

    background:rgba(15,23,42,.94);

    border-color:rgba(148,163,184,.22);

}

#convert-result{

    line-height:1.8;

}

/* ==========================================================
   EXPLORE ONTARIO
========================================================== */

.canada-divisions{

    flex:1;

    min-width:300px;

}

.states-list{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

    gap:10px;

    margin-top:14px;

}

.division-link{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 10px;

    text-align:center;

    border-radius:12px;

    text-decoration:none;

    font-size:.92rem;

    font-weight:500;

    color:#334155;

    background:#f8fafc;

    border:1px solid rgba(148,163,184,.35);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .12s ease;

}

.division-link:hover{

    background:rgba(37,99,235,.08);

    border-color:#60a5fa;

    transform:translateY(-2px);

}

body.dark-mode .division-link{

    background:rgba(15,23,42,.92);

    color:#e5e7eb;

    border-color:rgba(148,163,184,.22);

}

body.dark-mode .division-link:hover{

    background:rgba(37,99,235,.18);

}

/* ==========================================================
   BACK BUTTON
========================================================== */

.back-home-wrapper{

    max-width:1200px;

    margin:0 auto 40px;

    padding:0 16px;

}

.back-home-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#f8fafc;

    color:#475569;

    text-decoration:none;

    border:1px solid rgba(148,163,184,.40);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .12s ease;

}

.back-home-button:hover{

    background:rgba(37,99,235,.08);

    border-color:#60a5fa;

    transform:translateY(-1px);

}

body.dark-mode .back-home-button{

    background:rgba(15,23,42,.92);

    color:#e5e7eb;

}

body.dark-mode .back-home-button:hover{

    background:rgba(37,99,235,.18);

}

/* ==========================================================
   UTILITIES
========================================================== */

.hidden{

    display:none !important;

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:960px){

    .converter .row{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:640px){
    
      /* ---------- Mobile Title + Flag Alignment ---------- */

    .canada-title{
        width:100%;
    }

    .title-main{
        align-items:flex-start;
        justify-content:center;
        text-align:center;
        gap:10px;
    }

    .canada-title .flag-inline-title{
        flex:0 0 auto;
        margin-top:5px;
    }

    .card{

        padding:16px 14px;

    }

    .country-big-clock{

        background:none;

        padding:16px 8px;

    }

    .country-time-value{

        font-size:2.8rem;

        letter-spacing:.04em;

    }

    .meta-row{

        grid-template-columns:1fr;

    }

    .cities{

        grid-template-columns:1fr;

    }

    .city-card{

        background:#fff !important;

        background-image:none !important;

        box-shadow:0 2px 8px rgba(0,0,0,.06);

        transform:none !important;

    }

    body.dark-mode .city-card{

        background:#0f172a !important;

    }

    .related-tags{

        gap:8px;

    }

    .tag-item{

        flex:1 1 calc(50% - 8px);

    }

    .tag-item a{

        width:100%;

        justify-content:center;

    }

    .states-list{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media(max-width:400px){

    .states-list{

        grid-template-columns:1fr 1fr;

        gap:8px;

    }

    .division-link{

        font-size:.84rem;

        padding:9px;

    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    *{

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
   ACTIVE CITY
========================================================== */

.division-link.active-division{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

    font-weight:700;

    box-shadow:0 6px 16px rgba(37,99,235,.22);

    pointer-events:none;

    cursor:default;

}

.division-link.active-division:hover{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

    transform:none;

}


/* ---------- Dark Mode ---------- */

body.dark-mode .division-link.active-division{

    background:#2563eb;

    color:#ffffff;

    border-color:#60a5fa;

    box-shadow:0 6px 18px rgba(37,99,235,.30);

}

body.dark-mode .division-link.active-division:hover{

    background:#2563eb;

    color:#ffffff;

}