@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply m-0 text-darkslateblue-300;
}

*,
::before,
::after {
    border-width: 0;
}

[x-cloak] {
    display: none !important;
}

::-moz-selection {
    @apply bg-pink text-white;
}

::selection {
    @apply bg-pink text-white;
}

/* Link custom */
.link {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.link:before {
    content: "";
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .4s ease;
    height: 2px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 100%;
    background: #a1dcf5;
    opacity: 0.5;
    border-radius: 99rem;
}

.link:hover:before,
.link--active:before {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

:root {
    --header-height: 90px;
}

/* Contraste */
.modo-contraste {
    filter: grayscale(100%) contrast(150%);
}

.start-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.start-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.start-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background-color 0.3s;
}

.start-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
}


/* ======== Rich Editor======== */
.rich-editor>*:not(:first-child):where(p, div, ul, ol, li) {
    @apply mt-2;
}

.rich-editor b,
.rich-editor strong {
    @apply font-bold;
}

.rich-editor i,
.rich-editor em {
    @apply italic;
}

.rich-editor u {
    @apply underline;
}

.rich-editor a {
    @apply text-blue-500 underline hover:text-blue-700;
}

.rich-editor ul {
    @apply list-disc pl-5;
}

.rich-editor ol {
    @apply list-decimal pl-5;
}

.rich-editor li:not(:first-child) {
    @apply mt-1;
}

/* ======== Conteudo TipTap ======== */
.start-conteudo {
    @apply text-base text-darkslateblue-300;

    word-break: break-word;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-bold text-deepblue font-headline;
    }

    img {
        @apply block max-w-full mx-auto rounded-2xl;
    }

    h1 {
        @apply text-[2.5rem] sm:text-[4rem] leading-tight;
    }

    h2 {
        @apply text-[1.5rem] sm:text-[2rem] leading-tight;
    }

    h3 {
        @apply text-lg leading-snug;
    }

    h4 {
        @apply text-base;
    }

    a {
        @apply underline hover:no-underline;
    }

    p:empty {
        @apply h-10;
    }

    blockquote {
        @apply pl-4 border-l-8 border-midnightblue-100;
    }

    iframe {
        @apply w-full;
    }

    ul,
    ol {
        @apply pl-4 ml-4;
    }

    ul {
        @apply list-disc;
    }

    ol {
        @apply list-decimal;
    }

    ul.checked-list {
        @apply list-none ml-0;

        li {
            @apply flex items-baseline gap-1.5;

            &::before {
                content: '✓';
                @apply w-5 h-5 shrink-0;
            }
        }
    }

    hr {
        @apply my-4 border-gray-400;
    }

    /* Table */
    table {
        @apply overflow-auto border border-collapse rounded-[40px] [border-style:hidden] [box-shadow:_0_0_0_1px_rgb(0_60_165)];
    }

    td,
    th {
        @apply border border-midnightblue-100;
    }

    td {
        @apply py-6 px-2 sm:px-4;
    }

    th {
        @apply p-2;
    }

    th,
    th p {
        @apply text-deepblue;
    }

    /* margins */
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);

    :where(.lead, h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, table, dl, img, iframe, .filament-tiptap-grid, .filament-tiptap-grid-builder)+ :where(p, ul, ol, li, blockquote, pre, table, dl, img, iframe, .filament-tiptap-grid, .filament-tiptap-grid-builder) {
        margin-block-start: var(--stack);
    }

    :where(h1, h2, h3, h4, h5, h6) {
        margin-block-start: calc(var(--stack) * 1.5);
    }

    :where(h1, h2, h3, h4, h5, h6)+*:not(h1, h2, h3, h4, h5, h6) {
        margin-block-start: calc(var(--stack) / 2);
    }
}

/* Lead text */
/*.lead {*/
/*    @apply text-lg leading-snug;*/
/*}*/

/* GRID Styles */
.filament-tiptap-grid,
.filament-tiptap-grid-builder {
    @apply grid gap-4 box-border;

    .filament-tiptap-grid__column,
    .filament-tiptap-grid-builder__column {
        @apply box-border rounded;
    }

    &.ProseMirror-selectednode {
        @apply rounded outline outline-2 outline-dashed outline-gray-900 outline-offset-2;
    }
}

@media (max-width: theme('screens.md')) {

    .filament-tiptap-grid,
    .filament-tiptap-grid-builder {
        grid-template-columns: 1fr !important;
    }
}

/* Asymetric Grids */
.filament-tiptap-grid[type^="asymetric"] {
    @apply grid-cols-1 auto-rows-auto;
}

@media (max-width: theme('screens.sm')) {
    .filament-tiptap-grid-builder[data-stack-at="sm"] {
        @apply grid-cols-1 !important;

        .filament-tiptap-grid-builder__column {
            @apply col-span-1 !important;
        }
    }
}

@media (max-width: theme('screens.md')) {
    .filament-tiptap-grid-builder[data-stack-at="md"] {
        @apply grid-cols-1 !important;

        .filament-tiptap-grid-builder__column {
            @apply col-span-1 !important;
        }
    }
}

@media (max-width: theme('screens.lg')) {
    .filament-tiptap-grid-builder[data-stack-at="lg"] {
        @apply grid-cols-1 !important;

        .filament-tiptap-grid-builder__column {
            @apply col-span-1 !important;
        }
    }
}

/* Specific asymetric grid layouts */
.filament-tiptap-grid[type="asymetric-right-thirds"] {
    @screen md {
        @apply grid-cols-[1fr_2fr];
    }
}

.filament-tiptap-grid[type="asymetric-left-thirds"] {
    @screen md {
        @apply grid-cols-[2fr_1fr];
    }
}

.filament-tiptap-grid[type="asymetric-right-fourths"] {
    @screen md {
        @apply grid-cols-[1fr_3fr];
    }
}

.filament-tiptap-grid[type="asymetric-left-fourths"] {
    @screen md {
        @apply grid-cols-[3fr_1fr];
    }
}

/* Responsive Grids */
.filament-tiptap-grid[type="responsive"] {
    @apply grid-cols-1 auto-rows-auto;

    &[cols="2"] {
        @screen md {
            @apply grid-cols-2;
        }
    }

    &[cols="3"] {
        @screen md {
            @apply grid-cols-3;
        }
    }

    &[cols="4"] {
        @screen md {
            @apply grid-cols-2;
        }

        @screen lg {
            @apply grid-cols-4;
        }
    }

    &[cols="5"] {
        @screen md {
            @apply grid-cols-5;
        }
    }
}

/* Fixed Grids */
.filament-tiptap-grid[type="fixed"] {
    &[cols="2"] {
        @apply grid-cols-2;
    }

    &[cols="3"] {
        @apply grid-cols-3;
    }

    &[cols="4"] {
        @apply grid-cols-4;
    }

    &[cols="5"] {
        @apply grid-cols-5;
    }
}

/* Tuff Heart */
@keyframes spin-heart {
    from {
        offset-distance: calc(var(--char-index) * 26px);
    }

    to {
        offset-distance: calc((var(--char-index) * 26px) + 100%);
    }
}

.tuff-heart {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
    font-family: Montserrat;

    .char {
        position: absolute;
        offset-path: path('M222.838 216.245C195.284 242.759 157.092 260.97 148.315 260.97C139.539 260.97 101.33 242.759 73.7751 216.245C58.023 201.095 8.12754 153.099 22.1734 102.735C28.1218 81.4385 47.3382 53.1491 78.3611 49.9772C106.552 47.0975 136.539 96.993 148.32 96.993C160.1 96.993 190.087 47.0975 218.261 49.9772C249.297 53.1491 268.496 81.4342 274.448 102.735C288.511 153.103 238.599 201.095 222.847 216.245H222.838Z');
        offset-distance: calc(var(--char-index) * 26px);
        offset-rotate: auto;
        animation: spin-heart 32s linear infinite;
    }
}