@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import 'tailwindcss';
@import "swiper/css/bundle";
@import "flag-icons/css/flag-icons.min.css";
@import "./navigation.css";
@import "./carousel.css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/aspect-ratio";

@theme {
    --font-sans                   : "Noto Sans TC", "Roboto", sans-serif;
    --font-serif                  : "Roboto Slab", serif;
    --font-roboto                 : "Roboto", sans-serif;

    --color-brand-primary         : #05327B;
    --color-brand-secondary       : #C46308;
    --color-brand-secondary-light : #F8C77C;
    --color-brand-secondary-dark  : #A94F06;
    --color-brand-light           : #EAF4FF;
    --color-brand-dark            : #043556;
}


@plugin "daisyui" {
    themes : light --default;
}

@plugin "daisyui/theme" {
    name                      : "light";
    default                   : true;
    prefersdark               : false;
    color-scheme              : light;

    --color-primary           : var(--color-brand-primary);
    --color-primary-content   : var(--color-brand-light);

    --color-secondary         : var(--color-brand-secondary-dark);
    --color-secondary-content : #FFFFFF;

    --color-accent            : var(--color-brand-secondary-light);
    --color-accent-content    : var(--color-brand-dark);

    --color-neutral           : var(--color-brand-dark);
    --color-neutral-content   : var(--color-brand-light);

    --color-base-100          : #FFFFFF;
    --color-base-200          : #F5FAFF;
    --color-base-300          : var(--color-brand-light);
    --color-base-content      : var(--color-brand-dark);

    --color-info              : var(--color-brand-primary);
    --color-info-content      : var(--color-brand-light);

    --color-success           : #047857;
    --color-success-content   : #FFFFFF;

    --color-warning           : #F2C94C;
    --color-warning-content   : var(--color-brand-dark);

    --color-error             : #C62828;
    --color-error-content     : #FFFFFF;
}

@layer components {
    .page-loading {
        @apply pointer-events-none fixed inset-x-0 top-0 z-[10000] opacity-100 transition-opacity duration-300;
    }

    .page-loading.is-hidden {
        @apply opacity-0;
    }

    .page-loading__bar {
        @apply h-1 bg-accent shadow-sm;
        width      : 18%;
        transform  : translateX(-100%);
        animation  : page-loading-bar 1.2s ease-in-out infinite;
        box-shadow : 0 0 12px rgba(248, 199, 124, 0.45);
    }

    @keyframes page-loading-bar {
        0% {
            width     : 18%;
            transform : translateX(-100%);
        }

        55% {
            width : 45%;
        }

        100% {
            width     : 22%;
            transform : translateX(460%);
        }
    }

    .prose .table {
        @apply my-6 w-full overflow-hidden rounded-box border border-base-300 bg-base-100 text-base-content shadow-sm;
        border-collapse : separate;
        border-spacing  : 0;
    }

    .prose .table th,
    .prose .table td {
        @apply border-base-300 px-4 py-3 align-top;
        border-width : 0 1px 1px 0;
    }

    .prose .table tr > :last-child {
        border-right-width : 0;
    }

    .prose .table tr:last-child > * {
        border-bottom-width : 0;
    }

    .prose .table th {
        @apply bg-base-200 font-semibold text-primary;
    }

    .prose .table-sm th,
    .prose .table-sm td {
        @apply px-3 py-2 text-sm;
    }

    .prose .w-50 {
        @apply w-1/2;
    }

    .prose .img-fluid {
        @apply h-auto max-w-full;
    }

    .prose .d-block {
        @apply block;
    }

    .prose .float-right {
        @apply float-right;
    }

    .prose .card {
        @apply rounded-box border border-base-300 bg-base-100 shadow-sm;
    }

    .prose .card-header {
        @apply rounded-t-box border-b border-base-300 bg-base-200 px-5 py-3 font-semibold text-primary;
    }

    .prose .card-body {
        @apply px-5 py-4 text-base-content;
    }

    .prose .footstep-timeline {
        @apply mx-auto my-10 max-w-5xl;
    }

    .prose .footstep-timeline__intro {
        @apply mb-10 rounded-box border border-base-300 bg-base-100 p-6 shadow-sm md:p-8;
    }

    .prose .footstep-timeline__eyebrow {
        @apply mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-secondary;
    }

    .prose .footstep-timeline__heading {
        @apply text-3xl font-bold text-primary md:text-4xl;
    }

    .prose .footstep-timeline__description {
        @apply mt-3 max-w-3xl text-base leading-7 text-base-content/75;
    }

    .prose .footstep-timeline__list {
        @apply relative m-0 list-none space-y-8 border-s border-primary/20 ps-0;
    }

    .prose .footstep-timeline__item {
        @apply relative grid gap-4 ps-8 md:grid-cols-[8rem_1fr] md:gap-6 md:ps-10;
    }

    .prose .footstep-timeline__marker {
        @apply absolute -start-3 top-2 flex size-6 items-center justify-center rounded-full bg-primary ring-8 ring-base-100;
    }

    .prose .footstep-timeline__marker::after {
        @apply block size-2 rounded-full bg-primary-content;
        content : "";
    }

    .prose .footstep-timeline__year {
        @apply inline-flex w-fit items-center rounded-full bg-primary px-3 py-1 text-sm font-bold text-primary-content md:mt-1;
    }

    .prose .footstep-timeline__card {
        @apply rounded-box border border-base-300 bg-base-100 p-5 shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md md:p-6;
    }

    .prose .footstep-timeline__date {
        @apply mb-3 text-sm font-semibold tracking-wide text-secondary;
    }

    .prose .footstep-timeline__title {
        @apply m-0 text-xl font-bold leading-snug text-primary;
    }

    .prose .footstep-timeline__title a {
        @apply text-primary no-underline hover:text-secondary;
    }

    .prose .footstep-timeline__subtitle {
        @apply mt-2 text-base leading-7 text-base-content/70;
    }

    .prose .footstep-timeline__subtitle a {
        @apply text-base-content/70 no-underline hover:text-secondary;
    }
}