/*
 * The site's own styles, after the old theme's (public/theme/theme.css). Changes asked for after the move go here.
 */

/* The hidden field bots fill in (src/lib/blocks.ts). */
.sf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* The home page's campaign picture (Smart Slider on the old site: one slide, full window width, 1920 x 500). */
.sf-banner { position: relative; left: 50%; width: 100vw; margin-left: -50vw; line-height: 0; }
.sf-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 500; object-fit: cover; object-position: 8% 65%; }
.sf-banner a { display: block; }

/* The footer: the theme's demo site gave it a dark picture, which the old site had lost (white text on white). */
.qodef-page-footer .qodef-footer-top-holder { background-color: #141414; background-image: url(/site/footer.jpg); background-size: cover; background-position: center; }

/* Cards of the lists: the pictures fill their box (WordPress cut them to the box's shape). */
.qodef-tours-gallery-item-image img, .qodef-tours-gim-image img, .qodef-tours-destination-item-image img { display: block; width: 100%; height: auto; }

/* The search results of tours, destinations and pages, above the posts. */
.sf-search-results { margin: 60px 0 40px; }
.sf-search-results li { margin: 6px 0; }

/* The 404 page. */
.sf-404 { min-height: 70vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.sf-404-inner { padding: 120px 20px; color: #fff; max-width: 640px; }
.sf-404-inner h1 { font-size: 160px; line-height: 1; color: #fff; margin: 0; }
.sf-404-inner h3, .sf-404-inner p { color: #fff; }
.sf-404-inner .qodef-btn { margin-top: 20px; }

/* The old pages' own space above their content (the theme's "content top padding" per page): none on Ana Sayfa,
   Destinasyonlar and İletişim, 44 px on a destination. src/pages/[...path].astro gives the body the class. */
.sf-pad-0 .qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner,
.sf-pad-0 .qodef-content .qodef-content-inner > .qodef-full-width > .qodef-full-width-inner { padding-top: 0 !important; }
.sf-pad-44 .qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner,
.sf-pad-44 .qodef-content .qodef-content-inner > .qodef-full-width > .qodef-full-width-inner { padding-top: 44px !important; }

/* Title areas: the picture covers the whole width (the theme sized it for 1920 px pictures), slightly darkened so the
   white page name stays readable. */
.qodef-title-holder.qodef-has-bg-image { background-size: cover !important; background-position: center center; position: relative; }
.qodef-title-holder.qodef-has-bg-image::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); pointer-events: none; }
.qodef-title-holder.qodef-has-bg-image .qodef-title-wrapper { position: relative; }

/* The red italic line under a heading in tour and destination texts (the old editor's "change-second-color"). */
.sf-subtitle { text-align: left; font-family: Montserrat, sans-serif; margin-top: -18px; margin-bottom: 16px; }
.sf-subtitle em { color: #ff0030; }