/* =============================================================================
   SEVGİ PINARI — THE LOOK OF THE WEBSITE
   =============================================================================
   One style sheet laid on top of the theme (OceanWP) and the plug-ins.
   It is loaded by wp-content/mu-plugins/sp-design.php, and only while that file
   marks the page with the word "sp-design": every rule below starts with
   "body.sp-design", so nothing here can touch a page that is not marked.

   TABLE OF CONTENTS
     1. Letters (fonts)
     2. Colours, sizes, spacing — THE PLACE TO CHANGE A COLOUR
     3. The page: background, text, links, keyboard focus
     4. Top strip (Giriş Yap / Üye Ol)
     5. The menu: side column on wide screens, bar + drop-down on phones
     6. Page titles and the "you are here" line
     7. Reading: the text of pages and posts (also Arabic passages, videos)
     8. A single post: date line, share buttons, previous / next, related posts
     9. Lists of posts (categories, search results), page numbers
    10. Side boxes (widgets)
    11. Comments
    12. Forms and buttons — one look for the theme, WPForms, MailPoet,
        Ultimate Member and the forum
    13. Member pages (Ultimate Member) and forum (bbPress)
    14. Foot of the page, "back to top", "page not found"
    15. The home page (the sections of home.html)
    16. Less movement for those who ask for it; paper (print)

   Two things to know when reading the rules:
   - ":is(a, b)" means "a or b"; it keeps the lists short.
   - "!important" is used only where a plug-in or the theme forces its own
     value with "!important" (or writes it into the page itself); each of these
     lines says why.
   ============================================================================= */


/* =============================================================================
   1. LETTERS
   Three free fonts, served from this website (see fonts/LICENSE):
     Inter       — all running text (the ERP uses the same)
     El Messiri  — headings: a Latin alphabet drawn to live next to Arabic
     Amiri       — Arabic passages (verses, du'a), drawn in the classical Naskh hand
   The browser fetches a file only when a page really contains its letters.
   ============================================================================= */
@font-face { font-family: "SP Text"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SP Text"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SP Display"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(fonts/el-messiri-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SP Display"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(fonts/el-messiri-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arabic. "size-adjust" draws these letters larger than the Latin ones around
   them (Arabic with its vowel signs needs it). The same file is named for bold
   and for slanted text too, so the browser never fakes a bold or a slant on a verse. */
@font-face { font-family: "SP Arabic"; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 128%;
	src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "SP Arabic"; font-style: italic; font-weight: 400 700; font-display: swap; size-adjust: 128%;
	src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* The same Arabic letters, only slightly enlarged: for the three-line summaries on cards, where the
   lines sit close together and the large size would make the vowel signs run into the line above. */
@font-face { font-family: "SP Arabic Compact"; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 110%;
	src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "SP Arabic Compact"; font-style: italic; font-weight: 400 700; font-display: swap; size-adjust: 110%;
	src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* The sign "a digit in a little box" (a digit followed by the sign U+20E3), which some posts use to
   number their passages. Windows' ordinary text font draws the box NEXT to the digit; its symbol font
   draws the digit inside the box. Nothing is downloaded: "local" only uses a font the device already
   has. Where that font does not exist (phones, Mac) this line does nothing and the device draws the
   sign as it always did. */
@font-face { font-family: "SP Keycap"; src: local("Segoe UI Symbol"); unicode-range: U+23, U+2A, U+30-39, U+20E3; }
/* A safety net. The old look named three Google fonts in many places. Should a
   corner of a plug-in still ask for one of them, it gets our letters instead of
   the browser's default ones. */
@font-face { font-family: "Roboto"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: "Roboto"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Andika"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: "Andika"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Amarante"; font-weight: 400 700; font-display: swap; src: url(fonts/el-messiri-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: "Amarante"; font-weight: 400 700; font-display: swap; src: url(fonts/el-messiri-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }


/* =============================================================================
   2. COLOURS, SIZES, SPACING
   Change a value here and it changes everywhere.
   Blue, navy, gold and cream are the colours of the academy's logo.
   ============================================================================= */
body.sp-design {
	/* blue and navy */
	--sp-blue: #0274a8;        /* the blue of the logo: buttons, the things one presses */
	--sp-blue-dark: #025f8d;   /* its darker shade: links, a button under the pointer */
	--sp-navy: #023956;        /* the navy of the logo's lettering: headings, the dark bands, the foot of the page */
	--sp-blue-soft: #e8f1f7;   /* a quiet blue background */
	--sp-blue-line: #cfe2ee;   /* a border on that background */
	/* gold: used sparingly */
	--sp-gold: #b58918;        /* the gold of the logo: lines, stars (decoration; too light for small text) */
	--sp-gold-dark: #806008;   /* gold that can be read as text */
	--sp-gold-light: #ecd9a4;  /* gold on the navy bands */
	--sp-focus: #a67c12;       /* the ring around the thing the keyboard is on (visible on light and on navy) */
	/* cream and paper: warm, not grey */
	--sp-cream: #f5f0e0;       /* the cream of the logo's book: quiet panels */
	--sp-bg: #faf7ef;          /* the page */
	--sp-surface: #ffffff;     /* cards, forms */
	--sp-line: #e8e0cb;        /* borders */
	--sp-line-soft: #f1ebda;
	--sp-line-strong: #d6cba9; /* the border of a card under the pointer */
	--sp-field: #8f866c;       /* the border of a field you can type in */
	--sp-ink: #1d2b33;         /* text */
	--sp-ink-soft: #43525b;    /* secondary text */
	--sp-ink-mute: #5a6870;    /* dates, small notes */
	--sp-danger: #b3261e;

	/* letters */
	--sp-font: "SP Text", "SP Arabic", "SP Keycap", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--sp-display: "SP Display", "SP Arabic", "SP Text", "SP Keycap", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sp-font-compact: "SP Text", "SP Arabic Compact", "SP Keycap", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* card summaries */
	--sp-text: clamp(16px, 15.2px + 0.22vw, 17.5px);
	--sp-small: 14px;
	--sp-h1: clamp(27px, 21px + 1.7vw, 42px);
	--sp-h2: clamp(23px, 19.5px + 0.95vw, 30px);
	--sp-h3: clamp(20px, 18.2px + 0.5vw, 24px);
	--sp-h4: clamp(18px, 17.3px + 0.2vw, 20px);

	/* space */
	--sp-gutter: clamp(16px, 4vw, 40px);       /* left and right of the page */
	--sp-section: clamp(48px, 7vw, 96px);      /* above and below a section of the home page */
	--sp-measure: 46em;                        /* the comfortable width of a column of text */

	/* corners and shadows */
	--sp-radius-sm: 10px;
	--sp-radius: 16px;
	--sp-radius-lg: 24px;
	--sp-shadow-sm: 0 1px 2px rgba(16, 42, 56, .06), 0 1px 1px rgba(16, 42, 56, .04);
	--sp-shadow: 0 10px 28px -14px rgba(16, 42, 56, .28), 0 2px 6px rgba(16, 42, 56, .05);
	--sp-shadow-lg: 0 28px 56px -28px rgba(2, 57, 86, .45);

	/* the theme's own colour switches, pointed at ours */
	--owp-primary-color: var(--sp-blue);
	--owp-primary-color-hover: var(--sp-blue-dark);
	--owp-link-color: var(--sp-blue-dark);
	--owp-link-color-hover: var(--sp-navy);
	--owp-button-bg-color: var(--sp-blue);
	--owp-button-bg-color-hover: var(--sp-blue-dark);
	--owp-widget-link-color: var(--sp-blue-dark);
	--owp-widget-link-color-hover: var(--sp-navy);
	--owp-search-form-label-color: var(--sp-ink-soft);
	--owp-comment-form-label-color: var(--sp-ink-soft);
}


/* =============================================================================
   3. THE PAGE
   ============================================================================= */
body.sp-design {
	background-color: var(--sp-bg);
	color: var(--sp-ink);
	font-family: var(--sp-font);
	font-size: var(--sp-text);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* a last safety net: the page never scrolls sideways. ("clip", not "hidden": "hidden" would make the body its own scrolling box, and the header could no longer stay at the top.) */
}
body.sp-design :is(#outer-wrap, #wrap, #main) { background-color: transparent; }
body.sp-design #main { overflow-wrap: break-word; } /* a long word or address never pushes a page wider than the screen */

/* Everything the theme set in Roboto / Andika uses our text letters. */
body.sp-design :is(button, input, select, textarea, #top-bar-content, .site-breadcrumbs, .site-breadcrumbs a, .sidebar-box, .footer-box, .page-header .page-subheading),
body.sp-design #footer-bottom :is(#copyright, #footer-bottom-menu) { font-family: var(--sp-font); }

/* Headings. */
body.sp-design :is(h1, h2, h3, h4, h5, h6, .theme-heading, .widget-title, .entry-title, .comment-reply-title) {
	font-family: var(--sp-display); font-weight: 600; letter-spacing: 0; text-transform: none;
	color: var(--sp-navy); line-height: 1.25; overflow-wrap: break-word;
}
body.sp-design h1 { font-size: var(--sp-h1); line-height: 1.18; }
body.sp-design h2 { font-size: var(--sp-h2); }
body.sp-design h3 { font-size: var(--sp-h3); }
body.sp-design h4 { font-size: var(--sp-h4); }
body.sp-design :is(h5, h6) { font-family: var(--sp-font); font-size: var(--sp-text); font-weight: 700; }

body.sp-design a { color: var(--sp-blue-dark); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.sp-design a:hover { color: var(--sp-navy); }
body.sp-design ::selection { background: var(--sp-gold-light); color: var(--sp-ink); }
body.sp-design img { max-width: 100%; height: auto; }

/* Keyboard focus: always visible, the same everywhere. */
body.sp-design :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sp-focus) !important; /* Ultimate Member sets "outline: 0 !important" on its fields */
	outline-offset: 2px;
}

/* The widest a page gets, and its side margins. */
body.sp-design .container { width: auto; max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: var(--sp-gutter); padding-right: var(--sp-gutter); }
body.sp-design #main #content-wrap { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 959px) {
	body.sp-design .container { max-width: none; }
}


/* =============================================================================
   4. THE HEADER — emblem and name, the menus, search, sign-in, registration
   (printed by sp-design.php, section 9; the body is then marked "sp-frame")
   One bar at the top of every page; it stays in view while the page scrolls.
   From 1100 px the three menus open into wide panels under the bar.
   Below 1100 px one "Menü" button opens the same menus as a sheet.
   Everything opens with <details>: it works even without the script.
   ============================================================================= */
body.sp-frame { --sp-header-h: 72px; --sp-top: 0px; }
body.sp-frame.admin-bar { --sp-top: 32px; }
@media (max-width: 782px) { body.sp-frame.admin-bar { --sp-top: 46px; } }
@media (max-width: 767px) { body.sp-frame { --sp-header-h: 64px; } }
@media (max-width: 600px) { body.sp-frame.admin-bar { --sp-top: 0px; } } /* WordPress' own bar scrolls away on small phones */

/* the theme's header and top strip are not printed; should a plug-in print them anyway, they stay hidden */
body.sp-frame :is(#site-header, #top-bar-wrap, #mobile-dropdown, #sidr) { display: none !important; } /* the theme's script may show them with an inline style */

body.sp-frame .sp-header {
	position: sticky; top: var(--sp-top); z-index: 1000;
	background: rgba(250, 247, 239, .96); border-bottom: 1px solid var(--sp-line);
	transition: background-color .25s ease, box-shadow .25s ease;
}
body.sp-frame .sp-header:is(.is-scrolled, .has-open-menu) { background: rgba(255, 255, 255, .985); box-shadow: 0 12px 32px -24px rgba(2, 57, 86, .55); }
body.sp-frame .sp-header__inner { display: flex; align-items: center; gap: 14px; max-width: 1240px; height: var(--sp-header-h); margin: 0 auto; padding: 0 var(--sp-gutter); }
body.sp-frame :is(.sp-header, .sp-footer) ul { list-style: none; margin: 0; padding: 0; }
body.sp-frame :is(.sp-header, .sp-footer) li { margin: 0; padding: 0; }
body.sp-frame :is(.sp-header, .sp-footer) summary { list-style: none; cursor: pointer; }
body.sp-frame :is(.sp-header, .sp-footer) summary::-webkit-details-marker { display: none; }
body.sp-frame .sp-ico { flex: none; display: block; }

/* --- the brand: emblem, name, "Online Kur'an Akademisi" -------------------- */
body.sp-frame .sp-brand { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; margin-right: auto; color: var(--sp-navy); text-decoration: none; }
body.sp-frame .sp-brand:hover { color: var(--sp-navy); }
body.sp-frame .sp-brand__emblem { width: 48px; height: 48px; flex: none; }
body.sp-frame .sp-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
body.sp-frame .sp-brand__name { font-family: var(--sp-display); font-size: 22px; font-weight: 700; color: var(--sp-navy); white-space: nowrap; }
body.sp-frame .sp-brand__tag { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sp-gold-dark); white-space: nowrap; }
@media (max-width: 767px) {
	body.sp-frame .sp-brand { gap: 9px; }
	body.sp-frame .sp-brand__emblem { width: 42px; height: 42px; }
	body.sp-frame .sp-brand__name { font-size: 19px; }
	body.sp-frame .sp-brand__tag { font-size: 9.5px; letter-spacing: .1em; }
}
@media (max-width: 359px) { body.sp-frame .sp-brand__tag { display: none; } }

/* --- the menus of the bar (1100 px and wider) ---------------------------- */
body.sp-frame .sp-nav { display: none; }
body.sp-frame .sp-nav__list { display: flex; align-items: center; gap: 2px; }
body.sp-frame .sp-nav__trigger {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
	border-radius: 999px; color: var(--sp-ink); font-size: 15.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
body.sp-frame .sp-nav__trigger:hover,
body.sp-frame .sp-nav__group[open] > .sp-nav__trigger { background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-frame .sp-nav__trigger :is(.sp-ico--chevron-down) { transition: transform .2s ease; color: var(--sp-ink-mute); }
body.sp-frame .sp-nav__group[open] > .sp-nav__trigger .sp-ico--chevron-down { transform: rotate(180deg); }
/* "you are here": a small gold dot before the menu that holds the page */
body.sp-frame .sp-nav__trigger:is(.is-trail, .is-page)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-gold); }
body.sp-frame .sp-nav__trigger:is(.is-trail, .is-page) { color: var(--sp-blue-dark); }

/* the wide panel under the bar */
body.sp-frame .sp-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--sp-surface); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line);
	box-shadow: 0 34px 60px -34px rgba(2, 57, 86, .5);
	animation: sp-drop .22s cubic-bezier(.2, .7, .2, 1) both;
}
body.sp-frame .sp-mega__inner {
	display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px;
	max-width: 1240px; max-height: calc(100vh - var(--sp-header-h) - var(--sp-top) - 16px); max-height: calc(100dvh - var(--sp-header-h) - var(--sp-top) - 16px);
	margin: 0 auto; padding: 28px var(--sp-gutter) 34px; overflow-y: auto; overscroll-behavior: contain;
}
body.sp-frame .sp-mega__intro {
	position: relative; align-self: start; padding: 24px; overflow: hidden;
	background: var(--sp-bg); border: 1px solid var(--sp-line-soft); border-radius: var(--sp-radius-lg);
}
body.sp-frame .sp-mega__intro::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; background: url(icons/sp-pattern.svg) center / 50px 50px; opacity: .7; -webkit-mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%); mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%); pointer-events: none; }
body.sp-frame .sp-mega__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 15px; background: var(--sp-navy); color: var(--sp-gold-light); box-shadow: 0 0 0 5px var(--sp-blue-soft); }
body.sp-frame .sp-mega__title { margin: 16px 0 6px; font-family: var(--sp-display); font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--sp-navy); }
body.sp-frame .sp-mega__text { position: relative; z-index: 1; margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--sp-ink-soft); }
body.sp-frame .sp-mega__intro .sp-btn { position: relative; z-index: 1; }
body.sp-frame .sp-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 30px; align-content: start; }
body.sp-frame .sp-mega__col--long { grid-column: span 2; }
body.sp-frame .sp-mega__col--long .sp-mega__list { columns: 2; column-gap: 26px; }
body.sp-frame .sp-mega__col--long .sp-mega__list li { break-inside: avoid; }
body.sp-frame :is(.sp-mega__head, .sp-mega__link) {
	display: flex; align-items: center; min-height: 42px; padding: 4px 0;
	border-bottom: 1px solid var(--sp-line-soft);
	font-family: var(--sp-display); font-size: 17.5px; font-weight: 600; line-height: 1.3; color: var(--sp-navy); text-decoration: none;
}
body.sp-frame .sp-mega__head { margin-bottom: 6px; border-bottom-color: var(--sp-line); }
body.sp-frame :is(.sp-mega__head, .sp-mega__link):hover { color: var(--sp-blue); }
body.sp-frame :is(.sp-mega__head, .sp-mega__link).is-page { color: var(--sp-blue-dark); }
body.sp-frame :is(.sp-mega__head, .sp-mega__link).is-page::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--sp-gold); }
body.sp-frame .sp-mega__list .sp-sublink { display: flex; align-items: center; min-height: 36px; padding: 3px 0; font-size: 14.5px; line-height: 1.35; color: var(--sp-ink-soft); text-decoration: none; }
body.sp-frame .sp-mega__list .sp-sublink:hover { color: var(--sp-blue-dark); }
body.sp-frame .sp-mega__list .sp-sublink.is-page { color: var(--sp-blue-dark); font-weight: 650; }
body.sp-frame .sp-mega__list .sp-subsublist { margin: 0 0 6px 2px; padding-left: 12px; border-left: 2px solid var(--sp-line-soft); }
body.sp-frame .sp-mega__list .sp-subsublist .sp-sublink { min-height: 32px; font-size: 13.5px; }

@media (min-width: 1100px) {
	body.sp-frame .sp-nav { display: block; margin-right: 6px; }
	body.sp-frame .sp-brand { margin-right: 18px; }
	body.sp-frame .sp-header__inner { gap: 10px; }
	body.sp-frame .sp-nav { margin-right: auto; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
	body.sp-frame .sp-nav__trigger { padding: 0 11px; font-size: 15px; }
	body.sp-frame .sp-brand__tag { display: none; }
}

/* --- search, sign-in, registration, the "Menü" button --------------------- */
body.sp-frame .sp-header__tools { display: flex; align-items: center; gap: 8px; flex: none; }
body.sp-frame .sp-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 1px solid var(--sp-line); border-radius: 50%; background: var(--sp-surface); color: var(--sp-navy);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.sp-frame .sp-iconbtn:hover,
body.sp-frame .sp-search[open] > .sp-iconbtn { border-color: var(--sp-blue-line); background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-frame .sp-search__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--sp-surface); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); box-shadow: 0 34px 60px -34px rgba(2, 57, 86, .5); animation: sp-drop .2s ease both; }
body.sp-frame .sp-search__inner { max-width: 780px; margin: 0 auto; padding: 22px var(--sp-gutter) 26px; }
body.sp-frame .sp-search__hint { margin: 18px 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-gold-dark); }

body.sp-frame .sp-searchform { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 5px 5px 14px; background: var(--sp-surface); border: 1.5px solid var(--sp-field); border-radius: 999px; transition: border-color .15s ease, box-shadow .15s ease; }
body.sp-frame .sp-searchform:focus-within { border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(2, 116, 168, .16); }
body.sp-frame .sp-searchform__icon { color: var(--sp-ink-mute); }
body.sp-frame .sp-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; color: var(--sp-ink); }
body.sp-frame .sp-searchform input[type="search"]:focus-visible { outline: none !important; } /* the whole field shows the focus ring instead (the general focus rule uses !important) */
body.sp-frame .sp-searchform input[type="search"]::placeholder { color: var(--sp-ink-mute); opacity: 1; }
body.sp-frame .sp-searchform .sp-btn { flex: none; }

/* buttons of the frame */
body.sp-frame .sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
	font-family: var(--sp-font); font-size: 15px; font-weight: 650; line-height: 1.1; letter-spacing: 0; text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.sp-frame .sp-btn--small { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
body.sp-frame .sp-btn--primary { background: var(--sp-blue); color: #fff; box-shadow: 0 6px 16px -8px rgba(2, 116, 168, .8); }
body.sp-frame .sp-btn--primary:hover { background: var(--sp-blue-dark); color: #fff; transform: translateY(-1px); }
body.sp-frame .sp-btn--ghost { background: var(--sp-surface); border-color: var(--sp-line); color: var(--sp-navy); }
body.sp-frame .sp-btn--ghost:hover { background: var(--sp-blue-soft); border-color: var(--sp-blue-line); color: var(--sp-blue-dark); }
body.sp-frame .sp-btn--outline { background: transparent; border-color: var(--sp-blue); color: var(--sp-blue-dark); }
body.sp-frame .sp-btn--outline:hover { background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-frame .sp-btn--gold { background: var(--sp-gold-light); color: var(--sp-navy); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
body.sp-frame .sp-btn--gold:hover { background: #f4e6bd; color: var(--sp-navy); transform: translateY(-1px); }
body.sp-frame .sp-btn--light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
body.sp-frame .sp-btn--light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

body.sp-frame .sp-header__account { display: none; align-items: center; gap: 8px; }
body.sp-frame .sp-header__account .sp-only-wide { display: none; }
@media (min-width: 600px) { body.sp-frame .sp-header__account { display: flex; } }
@media (min-width: 1100px) { body.sp-frame .sp-header__account .sp-only-wide { display: inline-flex; } }

body.sp-frame .sp-menubtn {
	display: inline-flex; align-items: center; height: 44px; padding: 0 16px 0 13px;
	border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-surface); color: var(--sp-navy);
	font-size: 15px; font-weight: 650; line-height: 1;
}
body.sp-frame .sp-menubtn:hover { background: var(--sp-blue-soft); border-color: var(--sp-blue-line); }
body.sp-frame .sp-menubtn > span { display: inline-flex; align-items: center; gap: 8px; }
body.sp-frame .sp-drawer:not([open]) .sp-menubtn__close,
body.sp-frame .sp-drawer[open] .sp-menubtn__open { display: none; }
body.sp-frame .sp-drawer[open] > .sp-menubtn { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
@media (max-width: 419px) {
	body.sp-frame .sp-menubtn { width: 44px; padding: 0; justify-content: center; }
	body.sp-frame .sp-menubtn > span > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the word stays for screen readers */
}
@media (min-width: 1100px) { body.sp-frame .sp-drawer { display: none; } }

/* --- the sheet of the "Menü" button -------------------------------------- */
body.sp-frame .sp-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--sp-top) + var(--sp-header-h));
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--sp-surface); border-top: 1px solid var(--sp-line);
	animation: sp-sheet .26s cubic-bezier(.2, .7, .2, 1) both;
}
html.sp-sheet-open { overflow: hidden; }
body.sp-frame .sp-sheet__inner { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; padding: 18px var(--sp-gutter) 48px; }
body.sp-frame .sp-sheet__account { display: flex; gap: 10px; }
body.sp-frame .sp-sheet__account { flex-wrap: wrap; }
body.sp-frame .sp-sheet__account .sp-btn { flex: 1 1 0; min-height: 50px; }
body.sp-frame .sp-sheet__account .sp-btn--primary { order: -1; flex: 1 1 100%; } /* the main button on its own line: "Ön kayıt" or "Kursiyer Sayfam" */
body.sp-frame .sp-sheet__list { border-top: 1px solid var(--sp-line-soft); }
body.sp-frame .sp-sheet__list > li { border-bottom: 1px solid var(--sp-line-soft); }
body.sp-frame .sp-sheet__link { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 4px; font-family: var(--sp-display); font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--sp-navy); text-decoration: none; }
body.sp-frame .sp-sheet__link .sp-ico { color: var(--sp-gold-dark); }
body.sp-frame .sp-sheet__link .sp-ico--chevron-down { margin-left: auto; color: var(--sp-ink-mute); transition: transform .2s ease; }
body.sp-frame .sp-acc[open] > .sp-sheet__link .sp-ico--chevron-down { transform: rotate(180deg); }
body.sp-frame .sp-sheet__link.is-page { color: var(--sp-blue-dark); }
body.sp-frame .sp-acc__list { padding: 0 0 14px 36px; animation: sp-fade .2s ease both; }
body.sp-frame .sp-acc__link { display: flex; align-items: center; min-height: 46px; font-size: 16.5px; font-weight: 600; color: var(--sp-ink); text-decoration: none; }
body.sp-frame .sp-acc__link.is-page { color: var(--sp-blue-dark); }
body.sp-frame .sp-acc__sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
body.sp-frame .sp-acc__sub :is(li, .sp-subsublist) { display: contents; }
body.sp-frame .sp-acc__sub .sp-sublink { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--sp-line-soft); border-radius: 999px; background: var(--sp-bg); font-size: 14.5px; font-weight: 500; color: var(--sp-ink-soft); text-decoration: none; }
body.sp-frame .sp-acc__sub .sp-sublink.is-page { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
body.sp-frame .sp-sheet__contact { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--sp-bg); border: 1px solid var(--sp-line-soft); border-radius: var(--sp-radius); }
body.sp-frame .sp-sheet__contact > a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sp-navy); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
body.sp-frame .sp-sheet__contact > a .sp-ico { color: var(--sp-gold-dark); }
body.sp-frame .sp-sheet .sp-follow { margin-top: 8px; }
body.sp-frame .sp-sheet .sp-follow__link { border-color: var(--sp-line); background: var(--sp-surface); color: var(--sp-navy); }

/* topic buttons (search panel, category pages) */
body.sp-frame .sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.sp-frame .sp-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
	border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-surface);
	font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--sp-ink); text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.sp-frame .sp-chip:hover { border-color: var(--sp-blue-line); background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-frame .sp-chip > span { font-size: 13px; font-weight: 500; color: var(--sp-ink-mute); }
body.sp-frame .sp-chip.is-page { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
body.sp-frame .sp-chip--up { color: var(--sp-blue-dark); }

/* the bar that follows the reading of a post */
body.sp-frame .sp-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; pointer-events: none; }
body.sp-frame .sp-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sp-gold), var(--sp-blue)); transform: scaleX(0); transform-origin: 0 50%; }

@keyframes sp-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sp-sheet { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }


/* =============================================================================
   6. PAGE TITLES AND THE "YOU ARE HERE" LINE
   A calm band: the path above, the title below, the star pattern fading in from
   the right. On a post, its picture sits in a small rounded frame at the right.
   ============================================================================= */
body.sp-design .page-header {
	position: relative; display: block; overflow: hidden;
	height: auto; padding: clamp(22px, 4vw, 48px) 0 clamp(18px, 3vw, 32px);
	background-color: transparent; background-size: 0 0; background-repeat: no-repeat; background-attachment: scroll;
	border-bottom: 1px solid var(--sp-line);
	text-align: left;
}
body.sp-design .page-header::before {
	content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: min(62%, 620px);
	background: url(icons/sp-pattern.svg) right top / 72px 72px;
	-webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
	pointer-events: none;
}
body.sp-design .page-header .page-header-inner { position: relative; z-index: 2; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; text-align: left; }
body.sp-design .page-header .page-header-title {
	float: none; max-width: 100%; margin: 0;
	font-family: var(--sp-display); font-size: var(--sp-h1); font-weight: 600; line-height: 1.18; color: var(--sp-navy); text-transform: none; letter-spacing: 0;
}
body.sp-design .background-image-page-header-overlay { display: none; }
/* the post's own picture, shown whole, in a frame (the theme used it as a dark wallpaper) */
body.sp-design .page-header.background-image-page-header::after {
	content: ""; position: absolute; z-index: 1; top: 50%; right: max(var(--sp-gutter), calc((100% - 1180px) / 2 + var(--sp-gutter)));
	width: clamp(104px, 13vw, 148px); aspect-ratio: 1; transform: translateY(-50%);
	background-image: inherit; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: var(--sp-surface);
	border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow);
}
body.sp-design .page-header.background-image-page-header .page-header-inner { padding-right: calc(clamp(104px, 13vw, 148px) + 28px + var(--sp-gutter)); }
@media (max-width: 599px) {
	body.sp-design .page-header.background-image-page-header::after { display: none; }
	body.sp-design .page-header.background-image-page-header .page-header-inner { padding-right: var(--sp-gutter); }
}

/* the sub-topics of a category, as buttons under its title (sp-design.php, 9e) */
body.sp-frame .page-header .sp-topics { order: -1; margin-top: 14px; } /* the band stacks its parts from the bottom: -1 puts the buttons last */
body.sp-frame .page-header .sp-topics .sp-chip { background: rgba(255, 255, 255, .85); }

/* the path: Anasayfa › Yazılarımız */
body.sp-design .site-breadcrumbs { position: static; float: none; max-width: 100%; height: auto; margin: 0; overflow: visible; white-space: normal; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink-mute); text-align: left; }
body.sp-design .site-breadcrumbs ol { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
body.sp-design .site-breadcrumbs ol li { display: inline-flex; align-items: center; min-width: 0; }
body.sp-design .site-breadcrumbs a { color: var(--sp-ink-soft); font-size: inherit; text-decoration: none; padding: 4px 0; }
body.sp-design .site-breadcrumbs a:hover { color: var(--sp-blue-dark); text-decoration: underline; }
body.sp-design .site-breadcrumbs .trail-end :is(a, span) { color: var(--sp-ink-mute); }
body.sp-design .site-breadcrumbs .breadcrumb-sep { display: inline-block; width: 14px; height: 14px; margin: 0 6px; padding: 0; font-size: 0; background-color: var(--sp-gold); -webkit-mask: url(icons/chevron-right.svg) center / 14px 14px no-repeat; mask: url(icons/chevron-right.svg) center / 14px 14px no-repeat; }
/* on a post or a page the last step only repeats the title printed just below: it is not shown twice */
body.sp-design:is(.single, .page) .site-breadcrumbs .trail-end,
body.sp-design:is(.single, .page) .site-breadcrumbs li:nth-last-child(2) .breadcrumb-sep { display: none; }


/* =============================================================================
   7. READING — the text of pages and posts
   Long religious texts: a comfortable line length, generous line height,
   clear headings. The same rules serve posts (.entry-content) and pages (.entry),
   but not the home page, which has its own section (15).
   ============================================================================= */

/* The sheet of paper a page or a post is written on. */
body.sp-design.single #content > article,
body.sp-design:not(.home) #content > article.single-page-article {
	max-width: calc(var(--sp-measure) + 2 * clamp(18px, 5vw, 56px));
	margin: 0 auto;
	padding: clamp(20px, 4vw, 44px) clamp(18px, 5vw, 56px) clamp(22px, 4vw, 48px);
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-sm);
}
body.sp-design.has-sidebar #content > article { max-width: none; } /* next to a side box it uses all the room it has */
/* The theme narrows every paragraph, heading and list of a post to 700 px one by one and adds side padding to each; the sheet above does it once. */
body.sp-design.single-post.content-max-width .entry-content > *,
body.sp-design.single-post.content-max-width :is(.thumbnail, .entry-header, ul.meta, .post-tags, .entry-share, nav.post-navigation, .comments-area),
body.sp-design.single-post.content-max-width #content :is(#related-posts, #author-bio) { max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) { font-size: var(--sp-text); line-height: 1.8; color: var(--sp-ink); }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) p { margin: 0 0 1.15em; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) p:empty { display: none; } /* empty paragraphs were used as spacers */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) > :first-child { margin-top: 0; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) > :last-child { margin-bottom: 0; }

/* Arabic paragraphs. sp-design.php marks a paragraph, quotation or heading that begins in Arabic
   and is Arabic for the most part (at least twice as many Arabic letters as Latin ones) with
   dir="rtl": the browser writes it from the right, in the large Arabic letters, with the room
   Arabic needs between its lines.
   A Turkish paragraph that quotes a verse carries no mark and is read from the left as before;
   inside it (and in list items and comments) the Arabic words are drawn only a little larger
   than the Turkish ones ("SP Arabic Compact"), so that they fit between the Turkish lines.
   The CSS word "unicode-bidi: plaintext" (let every line find its own direction) is deliberately
   NOT used anywhere: when an Arabic line and a Turkish line stand in one paragraph, Chrome draws
   the brackets of the Turkish line the wrong way round — ") akşam 1 kere (" — and a Turkish
   summary that merely begins with a verse would be turned round as a whole. */
body.sp-design :is(.entry-content, .single-page-article .entry) :is(p, pre, blockquote) { text-align: start; }
body.sp-design :is(.entry-content, .single-page-article .entry) .has-text-align-center { text-align: center; }
body.sp-design :is(.entry-content, .single-page-article .entry) .has-text-align-right { text-align: right; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry),
body.sp-design .comment-entry { font-family: var(--sp-font-compact); }
/* (":dir(rtl)" also finds a paragraph inside a marked quotation; '[dir="rtl"]' is for browsers of before 2023 that do not know ":dir") */
body.sp-design :is(.entry-content, .single-page-article .entry) :is(p, pre, blockquote):is([dir="rtl"], :dir(rtl)) { font-family: var(--sp-font); line-height: 2.35; }
body.sp-design :is(.entry-content, .single-page-article .entry) :is(h2, h3, h4):is([dir="rtl"], :dir(rtl)) { line-height: 2.35; }

body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) :is(h1, h2, h3, h4, h5, h6):not(:is(.sp-k, .sp-auth__aside) *) { margin: 1.7em 0 .6em; } /* (not inside the members' page or the sign-in welcome, which have their own) */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) h1 { font-size: var(--sp-h2); }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) h2:not(:is(.sp-k, .sp-auth__aside) *) { padding-bottom: .35em; border-bottom: 1px solid var(--sp-line-soft); }

body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) a:not(.wp-block-button__link):not(.wp-block-file__button) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(2, 116, 168, .4); overflow-wrap: anywhere; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) a:not(.wp-block-button__link):not(.wp-block-file__button):hover { text-decoration: underline; text-decoration-color: currentColor; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) strong { font-weight: 650; color: var(--sp-navy); }

/* lists */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) :is(ul, ol) { margin: 0 0 1.25em; padding: 0 0 0 1.6em; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) li { margin: 0 0 .7em; padding-left: .2em; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) ul > li::marker { color: var(--sp-gold); }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) ol > li::marker { color: var(--sp-blue-dark); font-weight: 700; font-family: var(--sp-display); }

/* quotations: a verse, a hadith, a saying */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry, .comment-entry) blockquote {
	position: relative; margin: 1.6em 0; padding: 18px 22px 18px 26px;
	background: var(--sp-bg); border: 0; border-left: 3px solid var(--sp-gold); border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
	color: var(--sp-ink); font-size: 1em; font-style: normal; line-height: 1.8;
}
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) blockquote p:last-of-type { margin-bottom: 0; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) blockquote cite { display: block; margin-top: .7em; font-size: var(--sp-small); font-style: normal; font-weight: 600; color: var(--sp-gold-dark); }

/* a dividing line becomes the star between two fine lines */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) hr {
	height: 24px; max-width: 240px; width: 100%; margin: 2.2em auto; border: 0; opacity: 1;
	background: url(icons/sp-divider.svg) center / 240px 24px no-repeat;
}

/* preformatted text (some hadith texts were typed this way): readable, wrapped, never wider than the page */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) pre {
	margin: 1.4em 0; padding: 18px 20px; white-space: pre-wrap; overflow-wrap: anywhere;
	background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
	font-family: var(--sp-font); font-size: 1em; line-height: 1.8; color: var(--sp-ink);
}

/* tables: plain, and they scroll inside themselves on a phone instead of widening the page */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: .95em; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* a table typed without WordPress' table block */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) :is(th, td) { padding: 10px 14px; border: 1px solid var(--sp-line); text-align: left; vertical-align: top; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) th { background: var(--sp-blue-soft); color: var(--sp-navy); font-weight: 650; }

/* pictures */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) figure { margin: 1.6em 0; max-width: 100%; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) .wp-block-image img { border-radius: var(--sp-radius); }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) figcaption { margin-top: .6em; font-size: var(--sp-small); color: var(--sp-ink-mute); text-align: center; }

/* videos: as wide as the text, in the right proportion, with round corners */
body.sp-design :is(.wp-block-embed.is-type-video .wp-block-embed__wrapper, .responsive-video-wrap, .wp-block-video video) { border-radius: var(--sp-radius); overflow: hidden; background: #0d1b22; box-shadow: var(--sp-shadow); }
body.sp-design .wp-block-embed iframe { display: block; border: 0; max-width: 100%; }
body.sp-design :is(.entry-content, .single-page-article .entry) iframe { max-width: 100%; }
/* a video whose proportion WordPress does not know is shown 16:9 */
body.sp-design .wp-block-embed.is-type-video:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
body.sp-design .wp-block-embed.is-type-video:not(.wp-has-aspect-ratio) iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* upright videos (phone recordings, shorts) stay phone-sized instead of filling the screen */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) .wp-block-embed:is(.wp-embed-aspect-9-16, .wp-embed-aspect-1-2) { max-width: 340px; margin-left: auto; margin-right: auto; }
body.sp-design .wp-block-video { text-align: center; }
body.sp-design .wp-block-video video { max-width: 100%; width: auto; height: auto; max-height: 78vh; }
body.sp-design .wp-block-audio audio { width: 100%; }
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) .wp-block-columns { gap: clamp(16px, 3vw, 32px); }


/* =============================================================================
   8. A SINGLE POST
   ============================================================================= */
/* the title is already printed in the band above the sheet */
body.sp-design.single #content > article > .entry-header { display: none; }

/* date · category · comments */
body.sp-design.single-post ul.meta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 18px;
	margin: 0 0 clamp(18px, 3vw, 28px); padding: 0 0 12px; border-bottom: 1px solid var(--sp-line-soft);
	font-size: var(--sp-small); line-height: 1.5; letter-spacing: 0; color: var(--sp-ink-mute);
}
body.sp-design.single-post ul.meta li { display: inline-flex; align-items: center; align-self: center; gap: 7px; margin: 0; padding: 0; font-size: var(--sp-small); letter-spacing: 0; line-height: 1.5; }
body.sp-design.single-post ul.meta li::after { display: none; } /* the theme's "-" between the items */
body.sp-design.single-post ul.meta li i { padding: 0; color: var(--sp-gold); font-size: 14px; }
body.sp-design.single-post ul.meta li a { color: var(--sp-ink-soft); font-size: var(--sp-small); letter-spacing: 0; text-decoration: none; padding: 6px 0; }
body.sp-design.single-post ul.meta li a:hover { color: var(--sp-blue-dark); text-decoration: underline; }

/* tags */
body.sp-design .post-tags { margin: 28px 0 0; font-size: var(--sp-small); }
body.sp-design .post-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px; border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-bg); color: var(--sp-ink-soft); text-decoration: none; }

/* share: five quiet round buttons instead of five loud ones */
body.sp-design.single .entry-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 32px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--sp-line-soft); }
body.sp-design .entry-share .theme-heading { float: none; margin: 0; font-family: var(--sp-font); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; text-align: left; color: var(--sp-ink-mute); }
body.sp-design .entry-share ul { float: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; text-align: left; }
body.sp-design .entry-share ul li { float: none; display: block; margin: 0; padding: 0; border: 0; width: auto; }
body.sp-design .entry-share.colored ul li a { display: flex; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sp-line); border-radius: 50%; background-color: var(--sp-surface); color: var(--sp-navy); opacity: 1; }
body.sp-design .entry-share.colored ul li a .oss-icon { fill: currentColor; width: 17px; height: 17px; }
body.sp-design .entry-share.colored ul li a:hover { background-color: var(--sp-blue); border-color: var(--sp-blue); color: #fff; opacity: 1; }

/* previous / next: an arrow and the title (the theme's English "Previous Post" label is not shown) */
body.sp-design.single nav.post-navigation { margin: 24px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--sp-line-soft); }
body.sp-design.single nav.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.sp-design.single nav.post-navigation .nav-links :is(.nav-previous, .nav-next) { float: none; width: auto; max-width: none; margin: 0; padding: 0; border: 0; text-align: left; }
body.sp-design.single nav.post-navigation .nav-links .nav-next { grid-column: 2; }
body.sp-design.single nav.post-navigation .nav-links a { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-bg); text-decoration: none; }
body.sp-design.single nav.post-navigation .nav-links .nav-next a { flex-direction: row-reverse; text-align: right; }
body.sp-design.single nav.post-navigation .nav-links a:hover { border-color: var(--sp-blue); background: var(--sp-blue-soft); }
body.sp-design.single nav.post-navigation .nav-links .title { display: block; flex: none; width: 20px; height: 20px; margin: 0; font-size: 0; line-height: 0; color: transparent; background-color: var(--sp-gold); -webkit-mask: url(icons/arrow-left.svg) center / 20px 20px no-repeat; mask: url(icons/arrow-left.svg) center / 20px 20px no-repeat; }
body.sp-design.single nav.post-navigation .nav-links .nav-next .title { -webkit-mask-image: url(icons/arrow-right.svg); mask-image: url(icons/arrow-right.svg); }
body.sp-design.single nav.post-navigation .nav-links .title > * { display: none; }
body.sp-design.single nav.post-navigation .nav-links .post-title { margin: 0; font-family: var(--sp-display); font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--sp-navy); }
@media (max-width: 599px) {
	body.sp-design.single nav.post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
	body.sp-design.single nav.post-navigation .nav-links .nav-next { grid-column: 1; }
}

/* related posts: small cards */
body.sp-design.single #related-posts { margin: 28px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--sp-line-soft); }
body.sp-design .theme-heading { margin: 0 0 16px; font-size: var(--sp-h4); }
body.sp-design .theme-heading .text::before { display: none; } /* a small icon the theme prints before the words */
body.sp-design #related-posts .oceanwp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 14px; margin: 0; }
body.sp-design #related-posts .oceanwp-row::after { display: none; }
body.sp-design #related-posts .related-post { position: relative; float: none; width: auto; min-height: 0; margin: 0; padding: 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-bg); text-align: left; }
body.sp-design #related-posts .related-post-media { margin: 0 0 10px; }
body.sp-design #related-posts .related-thumb { background-color: var(--sp-surface); border: 1px solid var(--sp-line-soft); border-radius: var(--sp-radius-sm); overflow: hidden; }
body.sp-design #related-posts .related-thumb img { aspect-ratio: 16 / 10; object-fit: contain; }
body.sp-design #related-posts .related-post-title { margin: 0 0 6px; font-size: 15.5px; line-height: 1.35; }
body.sp-design #related-posts .related-post-title a { color: var(--sp-navy); text-decoration: none; }
body.sp-design #related-posts .related-post-title a:hover { color: var(--sp-blue-dark); }
body.sp-design #related-posts .related-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sp-radius); } /* the whole card is the link */
body.sp-design #related-posts time { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sp-ink-mute); }
body.sp-design #related-posts time i { margin: 0; color: var(--sp-gold); }


/* =============================================================================
   9. LISTS OF POSTS — categories, dates, search results
   Every post is a card: (picture) · category · title · a few lines · date.
   ============================================================================= */
body.sp-design #blog-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25em), 1fr)); gap: clamp(14px, 2vw, 22px); }
body.sp-design #blog-entries::after { display: none; } /* the theme's float-clearing element would take a place in the grid */
body.sp-design #blog-entries .blog-entry.post {
	position: relative; float: none; width: auto; margin: 0; padding: clamp(16px, 2.4vw, 22px);
	background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm);
	transition: box-shadow .2s ease, border-color .2s ease;
}
body.sp-design #blog-entries .blog-entry.post:hover { border-color: var(--sp-line-strong); box-shadow: var(--sp-shadow); }
body.sp-design #blog-entries .blog-entry.post .blog-entry-inner { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 0; border: 0; }
body.sp-design .blog-entry.thumbnail-entry .thumbnail { flex: none; float: none; width: clamp(72px, 22%, 104px); margin: 0; padding: 0; }
body.sp-design .blog-entry.thumbnail-entry .thumbnail a { display: block; }
body.sp-design .blog-entry.thumbnail-entry .thumbnail img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sp-radius-sm); border: 1px solid var(--sp-line-soft); background: var(--sp-surface); }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-content { flex: 1 1 auto; min-width: 0; float: none; width: auto; height: 100%; padding: 0; display: flex; flex-direction: column; }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-category { display: block; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sp-font); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; color: #a89f8c; }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-category a { position: relative; z-index: 1; color: var(--sp-gold-dark); text-decoration: none; }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-category a:hover { color: var(--sp-blue-dark); }
body.sp-design .blog-entry.post .blog-entry-header { margin: 0 0 8px; }
body.sp-design .blog-entry.post .blog-entry-header .entry-title { margin: 0; font-size: clamp(18px, 17px + .3vw, 20.5px); line-height: 1.3; }
body.sp-design .blog-entry.post .blog-entry-header .entry-title a { font-family: var(--sp-display); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; color: var(--sp-navy); text-decoration: none; }
body.sp-design .blog-entry.post .blog-entry-header .entry-title a:hover { color: var(--sp-blue-dark); }
body.sp-design .blog-entry.post .blog-entry-header .entry-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sp-radius); } /* the whole card is the link */
body.sp-design .blog-entry.post .blog-entry-summary { margin: 0 0 12px; font-family: var(--sp-font-compact); font-size: 15px; line-height: 1.65; color: var(--sp-ink-soft); }
body.sp-design .blog-entry.post .blog-entry-summary p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-top: auto; padding: 8px 0 0; border-top: 1px solid var(--sp-line-soft); font-family: var(--sp-font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.5; text-transform: none; color: var(--sp-ink-mute); }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-bottom::after { display: none; }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-date { float: none; color: var(--sp-ink-mute); }
body.sp-design .blog-entry.thumbnail-entry .blog-entry-comments { display: none; } /* "0 Yorum" on nearly every card is only noise in a list; the post itself shows its comments */
/* a post pinned to the top of its category (the "Category Sticky Post" plug-in) */
body.sp-design #blog-entries .blog-entry.category-sticky { border: 1px solid var(--sp-gold) !important; background-color: #fffdf6; padding: clamp(16px, 2.4vw, 22px) !important; } /* the Customizer's extra CSS forces a dashed border and a padding with !important */

/* search results */
body.sp-design.search-results #content > article { position: relative; margin: 0 0 14px; padding: clamp(16px, 2.4vw, 22px); background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm); }
body.sp-design.search-results .search-entry-inner { display: flex; align-items: flex-start; gap: 16px; padding: 0; border: 0; }
body.sp-design.search-results .search-entry-inner .thumbnail { flex: none; float: none; width: clamp(72px, 18%, 104px); margin: 0; box-shadow: none; }
body.sp-design.search-results .search-entry-inner .thumbnail img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sp-radius-sm); border: 1px solid var(--sp-line-soft); box-shadow: none; }
body.sp-design.search-results .search-entry-content { flex: 1 1 auto; min-width: 0; float: none; width: auto; margin: 0; padding: 0; }
body.sp-design.search-results .search-entry-title { margin: 0 0 6px; font-size: clamp(18px, 17px + .3vw, 20.5px); line-height: 1.3; }
body.sp-design.search-results .search-entry-title a { color: var(--sp-navy); text-decoration: none; }
body.sp-design.search-results .search-entry-title a:hover { color: var(--sp-blue-dark); }
body.sp-design.search-results .search-entry-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sp-radius); } /* the whole card is the link */
body.sp-design.search-results .search-entry-summary { font-family: var(--sp-font-compact); font-size: 15px; line-height: 1.65; color: var(--sp-ink-soft); }
body.sp-design.search-results .search-entry-summary p { margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.sp-design.search-results .search-entry-readmore a { display: inline-block; padding: 8px 0; border: 0; font-family: var(--sp-font); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sp-blue-dark); text-decoration: none; }
body.sp-design.search-results .search-entry-readmore a:hover { text-decoration: underline; }
/* nothing found */
body.sp-design.search-no-results #content { padding: clamp(18px, 3vw, 28px); background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }

/* page numbers */
body.sp-design .oceanwp-pagination { margin: 28px 0 0; text-align: center; }
body.sp-design ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.sp-design ul.page-numbers li { float: none; margin: 0; }
body.sp-design .page-numbers :is(a, span:not(.elementor-screen-only)),
body.sp-design .page-links span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0; padding: 0 10px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-surface); color: var(--sp-ink-soft); font-size: 15px; font-weight: 600; line-height: 1; }
body.sp-design .page-numbers a:hover { border-color: var(--sp-blue); background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-design .page-numbers span.current { border-color: var(--sp-blue); background: var(--sp-blue); color: #fff; }
body.sp-design .page-numbers span.dots { border-color: transparent; background: transparent; }
/* "more posts are loading" */
body.sp-design .scroller-status { padding: 28px 0 0; color: var(--sp-ink-mute); font-size: var(--sp-small); }
body.sp-design .loader-ellips__dot { background: var(--sp-gold); }


/* =============================================================================
   10. SIDE BOXES (widgets) — shown next to search results and the forum
   ============================================================================= */
body.sp-design .content-area { border-color: transparent; }
body.sp-design .widget-area.sidebar-primary { padding: 0 0 0 clamp(16px, 3vw, 36px) !important; } /* a theme setting forces "padding: 0 0 0 50px !important" */
@media (max-width: 959px) {
	body.sp-design .widget-area.sidebar-primary { padding: 0 !important; }
}
body.sp-design .sidebar-box { margin: 0 0 18px; padding: 18px 20px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); font-size: var(--sp-small); line-height: 1.6; text-transform: none; color: var(--sp-ink-soft); }
body.sp-design .sidebar-box :is(.widget-title, .wp-block-heading, .wp-block-search__label) { display: block; margin: 0 0 12px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--sp-line-soft); font-family: var(--sp-display); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--sp-navy); }
body.sp-design .sidebar-box ul { margin: 0; padding: 0; list-style: none; }
body.sp-design .sidebar-box ul li { margin: 0; padding: 7px 0; border: 0; border-bottom: 1px solid var(--sp-line-soft); line-height: 1.45; }
body.sp-design .sidebar-box ul li:last-child { border-bottom: 0; }
body.sp-design .sidebar-box a { color: var(--sp-blue-dark); text-decoration: none; }
body.sp-design .sidebar-box a:hover { text-decoration: underline; }
body.sp-design .sidebar-box :is(.post-date, time) { display: block; font-size: 12.5px; color: var(--sp-ink-mute); }
/* the long list of categories becomes a cloud of small labels */
body.sp-design .sidebar-box.widget_categories ul { display: flex; flex-wrap: wrap; gap: 6px; }
body.sp-design .sidebar-box.widget_categories ul li { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 0; border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-bg); font-size: 12px; color: var(--sp-ink-mute); }
body.sp-design .sidebar-box.widget_categories ul li a { display: inline-block; padding: 7px 0 7px 12px; font-size: 13px; font-weight: 600; text-transform: capitalize; }
body.sp-design .sidebar-box img { border-radius: var(--sp-radius-sm); }
/* a left-over of the theme's demo (the logo of another company, loaded from outside) is not shown */
body.sp-design .sidebar-box.widget_media_image img[src*="websitedemos.net"] { display: none; }
body.sp-design .sidebar-box.widget_media_image:has(img[src*="websitedemos.net"]) { display: none; }


/* =============================================================================
   11. COMMENTS
   ============================================================================= */
body.sp-design.single #comments { margin: 28px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--sp-line-soft); }
body.sp-design .comments-title { margin: 0 0 18px; }
body.sp-design #comments ol.comment-list { margin: 0; padding: 0; list-style: none; }
body.sp-design #comments ol.children { margin: 0 0 0 clamp(8px, 3vw, 32px); padding: 0 0 0 clamp(10px, 2vw, 18px); list-style: none; border-left: 2px solid var(--sp-line-soft); }
body.sp-design .comment-body { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; padding: 16px 18px; background: var(--sp-bg); border: 1px solid var(--sp-line-soft); border-radius: var(--sp-radius); }
body.sp-design .comment-body img.avatar { flex: none; position: static; float: none; width: 44px; height: 44px; margin: 0; border-radius: 50%; border: 1px solid var(--sp-line); }
body.sp-design .comment-body > .comment-content { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
body.sp-design .comment-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 6px; }
body.sp-design .comment-author .comment-link,
body.sp-design .comment-author .comment-link a { font-family: var(--sp-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--sp-navy); text-decoration: none; }
body.sp-design .comment-author .comment-meta { float: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--sp-ink-mute); }
body.sp-design .comment-author .comment-meta :is(a, span) { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
body.sp-design .comment-author .comment-meta a { color: var(--sp-blue-dark); font-weight: 600; text-decoration: none; padding: 6px 0; }
body.sp-design .comment-entry { font-size: 15.5px; line-height: 1.7; color: var(--sp-ink); }
body.sp-design .comment-entry p { margin: 0 0 .6em; }
body.sp-design .comment-entry p:last-child { margin-bottom: 0; }
body.sp-design #respond { margin: 8px 0 0; }
body.sp-design .comment-reply-title { margin: 0 0 10px; font-size: var(--sp-h4); }
body.sp-design #respond :is(.must-log-in, .logged-in-as) { margin: 0; padding: 14px 18px; background: var(--sp-blue-soft); border-radius: var(--sp-radius); font-size: 15px; color: var(--sp-ink-soft); }
body.sp-design #respond .must-log-in a { font-weight: 650; color: var(--sp-blue-dark); }
body.sp-design #respond :is(.comment-form-author, .comment-form-email, .comment-form-url) { float: none; width: auto; padding: 0; }


/* =============================================================================
   12. FORMS AND BUTTONS — one look everywhere
   ============================================================================= */
/* --- fields ---------------------------------------------------------------- */
body.sp-design form :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea),
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea),
body.sp-design .mailpoet_form :is(input.mailpoet_text, textarea, select) {
	min-height: 48px; padding: 10px 14px;
	background-color: var(--sp-surface); border: 1px solid var(--sp-field); border-radius: var(--sp-radius-sm);
	color: var(--sp-ink); font-family: var(--sp-font); font-size: 16px; line-height: 1.5; box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.sp-design form textarea,
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form textarea { min-height: 150px; }
body.sp-design form :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], select, textarea):focus,
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form :is(input, textarea, select):focus,
body.sp-design .mailpoet_form input.mailpoet_text:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(2, 116, 168, .18); }
body.sp-design ::placeholder { color: var(--sp-ink-mute); opacity: 1; }
body.sp-design label,
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form .wpforms-field-label,
body.sp-design .mailpoet_form label { margin: 0 0 6px; color: var(--sp-ink); font-family: var(--sp-font); font-size: 15px; font-weight: 600; line-height: 1.4; }
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form .wpforms-field-description { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink-mute); }
body.sp-design :is(.wpforms-container .wpforms-required-label, .um-req) { color: var(--sp-danger); }
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form .wpforms-field { padding: 0 0 18px; }
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form input.wpforms-field-medium { max-width: 100%; width: min(100%, 34em); }
body.sp-design :is(div.wpforms-container-full, .wpforms-container) { margin: 20px 0 0; }
body.sp-design .wpforms-container :is(label.wpforms-error, em.wpforms-error) { color: var(--sp-danger); font-size: 13.5px; font-weight: 600; }
body.sp-design .wpforms-confirmation-container-full { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); color: var(--sp-ink); }

/* --- buttons --------------------------------------------------------------- */
body.sp-design :is(.theme-button, .button, input[type="submit"], button[type="submit"], .wp-block-button__link, .wp-element-button, .error404-content a.error-btn),
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form button[type="submit"],
body.sp-design .mailpoet_form input.mailpoet_submit,
body.sp-design #bbpress-forums button.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 24px;
	background-color: var(--sp-blue); border: 1px solid var(--sp-blue); border-radius: 999px; box-shadow: var(--sp-shadow-sm);
	color: #fff; font-family: var(--sp-font); font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
	cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.sp-design :is(.theme-button, .button, input[type="submit"], button[type="submit"], .wp-block-button__link, .wp-element-button, .error404-content a.error-btn):hover,
body.sp-design :is(div.wpforms-container-full, .wpforms-container) .wpforms-form button[type="submit"]:hover,
body.sp-design .mailpoet_form input.mailpoet_submit:hover,
body.sp-design #bbpress-forums button.button:hover { background-color: var(--sp-blue-dark); border-color: var(--sp-blue-dark); color: #fff; box-shadow: var(--sp-shadow); }
/* the quiet button: an outline */
body.sp-design .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; border-color: var(--sp-blue); color: var(--sp-blue-dark); box-shadow: none; }
body.sp-design .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--sp-blue-soft); border-color: var(--sp-blue-dark); color: var(--sp-blue-dark); }
/* the search box of WordPress (in a side box) */
body.sp-design .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
body.sp-design .wp-block-search__input { flex: 1 1 auto; min-width: 0; }
body.sp-design .wp-block-search__button { margin: 0; padding: 0 18px; }
/* the theme's stand-alone search form ("page not found"): its English label is replaced */
body.sp-design form.searchform { position: relative; max-width: 440px; margin-left: auto; margin-right: auto; }
body.sp-design form.searchform .header-search-visible-label { font-size: 0; }
body.sp-design form.searchform .header-search-visible-label::before { content: "Sitede ara"; font-size: 15px; }


/* =============================================================================
   13. MEMBER PAGES (Ultimate Member) AND FORUM (bbPress)
   ============================================================================= */
/* --- sign-in and password pages: a narrow card in the middle ----------------- */
body.sp-design:is(.um-page-login, .um-page-password-reset, .um-page-register) #content > article.single-page-article { max-width: 520px; }
body.sp-design .um { font-family: var(--sp-font); }
body.sp-design .um:is(.um-login, .um-password, .um-register) { max-width: 100% !important; margin: 0 auto !important; padding: 0; } /* Ultimate Member writes a fixed width into the page */
body.sp-design .um .um-field { padding: 0 0 16px; }
body.sp-design .um .um-field-label { margin: 0 0 6px; color: var(--sp-ink); }
body.sp-design .um .um-field-label label { font-size: 15px !important; line-height: 1.4 !important; font-weight: 600; color: var(--sp-ink); } /* Ultimate Member forces size and line height */
/* Ultimate Member forces height, padding, border, radius and font size of its fields with !important */
body.sp-design .um .um-form :is(input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], textarea) {
	height: 48px !important; padding: 0 14px !important; border: 1px solid var(--sp-field) !important; border-radius: var(--sp-radius-sm) !important;
	font-size: 16px !important; color: var(--sp-ink); background-color: var(--sp-surface);
}
body.sp-design .um .um-form textarea { height: auto !important; min-height: 120px; padding: 12px 14px !important; }
body.sp-design .um .um-form :is(input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea):focus { border-color: var(--sp-blue) !important; box-shadow: 0 0 0 3px rgba(2, 116, 168, .18) !important; }
/* Ultimate Member forces border, radius, padding, weight and line height of its buttons with !important */
body.sp-design .um :is(.um-button, a.um-button, input[type="submit"].um-button) {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px !important;
	background: var(--sp-blue); border: 1px solid var(--sp-blue) !important; border-radius: 999px !important; box-shadow: var(--sp-shadow-sm);
	color: #fff; font-family: var(--sp-font); font-size: 15.5px; font-weight: 600 !important; line-height: 1.2 !important;
}
body.sp-design .um :is(a.um-button, input[type="submit"].um-button):hover { background: var(--sp-blue-dark); border-color: var(--sp-blue-dark) !important; }
body.sp-design .um :is(.um-button, a.um-button, input[type="submit"].um-button).um-alt { background: var(--sp-surface); border-color: var(--sp-blue) !important; color: var(--sp-blue-dark); box-shadow: none; }
body.sp-design .um :is(.um-button, a.um-button).um-alt:hover { background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
body.sp-design .um .um-col-alt { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
body.sp-design .um .um-col-alt .um-half { float: none; width: auto; flex: 1 1 160px; }
body.sp-design .um .um-col-alt .um-clear { display: none; }
body.sp-design .um .um-col-alt-b { padding-top: 12px; text-align: center; }
body.sp-design .um a.um-link-alt { display: inline-block !important; padding: 12px 8px; color: var(--sp-blue-dark) !important; font-size: 14.5px; font-weight: 600; } /* Ultimate Member forces a light grey (too pale to read well) and "display: block" */
body.sp-design .um a.um-link-alt:hover { text-decoration: underline; }
body.sp-design .um :is(.um-field-error, .um-field-notice), body.sp-design p.um-notice { border-radius: var(--sp-radius-sm); font-size: 14px; }
body.sp-design .um .um-field-block { color: var(--sp-ink-soft); font-size: 15px; line-height: 1.6; }
body.sp-design .um .um-field-block div { color: inherit; }
/* member profile, account, directory: letters and colours only — their layout stays the plug-in's */
body.sp-design .um-profile-nav { background: var(--sp-navy); border-radius: var(--sp-radius-sm); }
body.sp-design .um-profile-nav-item.active a { background: var(--sp-blue); }
body.sp-design :is(.um-name, .um-member-name) a { font-family: var(--sp-display); color: var(--sp-navy); }
body.sp-design .um-account-side li a.current { color: var(--sp-blue-dark); }
body.sp-design .um-notification-b { background-color: var(--sp-blue) !important; } /* the Customizer's extra CSS forces its colour */

/* --- forum ------------------------------------------------------------------- */
body.sp-design #bbpress-forums { font-family: var(--sp-font); font-size: 15.5px; line-height: 1.7; color: var(--sp-ink); }
body.sp-design #bbpress-forums a { color: var(--sp-blue-dark); }
body.sp-design #bbpress-forums .bbp-breadcrumb { margin: 0 0 14px !important; font-size: 13.5px; color: var(--sp-ink-mute); } /* the Customizer's extra CSS forces "margin: 0 !important" */
body.sp-design #bbpress-forums .bbp-breadcrumb p { margin: 0; }
body.sp-design :is(#bbpress-forums div.bbp-template-notice, #bbpress-forums div.indicator-hint, div.bbp-template-notice) { margin: 0 0 16px; padding: 12px 16px; background: var(--sp-blue-soft); border: 1px solid var(--sp-blue-line); border-radius: var(--sp-radius-sm); color: var(--sp-ink); }
body.sp-design #bbpress-forums div.bbp-template-notice.info { background: var(--sp-cream); border-color: var(--sp-line); }
body.sp-design #bbpress-forums div.bbp-template-notice :is(ul, li, p) { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.6; list-style: none; }
body.sp-design #bbpress-forums :is(ul.bbp-forums, ul.bbp-topics, ul.bbp-replies, ul.bbp-lead-topic, ul.bbp-search-results) { border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; font-size: 15px; background: var(--sp-surface); }
body.sp-design #bbpress-forums :is(li.bbp-header, li.bbp-footer) { background: var(--sp-blue-soft); border-color: var(--sp-line); color: var(--sp-navy); font-weight: 650; }
body.sp-design #bbpress-forums li.bbp-body :is(ul.forum, ul.topic) { border-color: var(--sp-line-soft); }
body.sp-design #bbpress-forums :is(div.odd, ul.odd) { background-color: var(--sp-surface); }
body.sp-design #bbpress-forums :is(div.even, ul.even) { background-color: #fdfbf6; }
body.sp-design #bbpress-forums :is(.bbp-forum-title, .bbp-topic-permalink) { font-family: var(--sp-display); font-size: 17px; font-weight: 600; color: var(--sp-navy); text-decoration: none; }
body.sp-design #bbpress-forums fieldset.bbp-form { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
body.sp-design #bbpress-forums fieldset.bbp-form legend { padding: 0 8px; font-family: var(--sp-display); font-size: 17px; font-weight: 600; color: var(--sp-navy); }
body.sp-design #bbpress-forums fieldset.bbp-form label { display: inline-block; width: auto; margin: 0 0 6px; }
body.sp-design #bbpress-forums fieldset.bbp-form :is(input[type="text"], input[type="password"]) { display: block; width: 100%; max-width: 420px; height: 48px; }
body.sp-design #bbpress-forums .bbp-login-form :is(.bbp-username, .bbp-password, .bbp-remember-me, .bbp-submit-wrapper) { margin: 0 0 14px; float: none; text-align: left; }
body.sp-design #bbpress-forums .bbp-login-form .bbp-remember-me label { display: inline; font-weight: 500; }
body.sp-design #bbpress-forums .bbp-login-form .bbp-remember-me input { width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: -6px; }
body.sp-design #bbp_search_submit { width: auto !important; min-height: 44px; border-radius: 999px; font-family: var(--sp-font); font-size: 14px; } /* the Customizer's extra CSS forces a 75 px width */
body.sp-design #bbpress-forums #bbp-search-form #bbp_search { height: 44px; }


/* =============================================================================
   13b. "KURSİYER SAYFAM" — a member's own page (mu-plugins/sp-kursiyer.php)
   The page brings its own basic style; here it takes the letters, cards and
   spacing of the rest of the site. Its parts keep their names (.sp-k__…).
   ============================================================================= */
/* the page needs no sheet of paper around it: its cards are the sheets */
body.sp-design #content > article.single-page-article:has(.sp-k) { max-width: 1040px; padding: 0; background: transparent; border: 0; box-shadow: none; }
body.sp-design .sp-k { max-width: 1000px; font-family: var(--sp-font); font-size: 16px; line-height: 1.6; color: var(--sp-ink); }
body.sp-design .sp-k :is(.sp-k__title, .sp-k__heading, .sp-k__name, .sp-k__class-name, .sp-k__record-title, .sp-k__figure-value) { font-family: var(--sp-display); letter-spacing: 0; }
body.sp-design .sp-k .sp-k__card { padding: clamp(18px, 2.4vw, 26px); border-color: var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); }
body.sp-design .sp-k .sp-k__student { gap: clamp(14px, 2vw, 20px); }

/* The page's own style gives sizes in "rem"; the theme makes 1 rem only 10 px, so they are given here in pixels. */
body.sp-design .sp-k :is(h2, h3, h4) { padding: 0; border: 0; }
body.sp-design .sp-k .sp-k__muted { font-size: 14px; line-height: 1.55; }
body.sp-design .sp-k .sp-k__foot { margin-top: 8px; }
body.sp-design .sp-k .sp-k__score { font-size: 17px; }
body.sp-design .sp-k .sp-k__score span { font-size: 13px; }
body.sp-design .sp-k .sp-k__sums dt { font-size: 13.5px; }
body.sp-design .sp-k .sp-k__sums dd { font-size: 16px; }
body.sp-design .sp-k .sp-k__mark { font-size: 14px; }
body.sp-design .sp-k .sp-k__table { font-size: 15px; }
body.sp-design .sp-k .sp-k__name { color: #fff; }

/* the greeting card */
body.sp-design .sp-k .sp-k__who { position: relative; overflow: hidden; padding: clamp(22px, 3.4vw, 34px); background: radial-gradient(120% 140% at 0% 0%, #04547c 0%, #034466 45%, var(--sp-navy) 100%); }
body.sp-design .sp-k .sp-k__who::before { content: ""; position: absolute; inset: 0; background: url(icons/sp-pattern-light.svg) center / 64px 64px; -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); pointer-events: none; }
body.sp-design .sp-k .sp-k__who > * { position: relative; }
body.sp-design .sp-k .sp-k__avatar { width: 60px; height: 60px; background: var(--sp-gold-light); color: var(--sp-navy); font-family: var(--sp-display); font-size: 22px; box-shadow: 0 0 0 4px rgba(236, 217, 164, .25); }
body.sp-design .sp-k .sp-k__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--sp-gold-light); }
body.sp-design .sp-k .sp-k__name { font-size: clamp(24px, 19px + 1.4vw, 32px); font-weight: 600; }
body.sp-design .sp-k .sp-k__facts { font-size: 15px; color: #d3e2ea; }

/* the three figures */
body.sp-design .sp-k .sp-k__figures { gap: clamp(12px, 2vw, 18px); }
body.sp-design .sp-k .sp-k__figure { border-top-width: 4px; }
body.sp-design .sp-k .sp-k__figure-label { font-size: 14.5px; }
body.sp-design .sp-k .sp-k__figure-value { font-size: clamp(26px, 22px + 1vw, 34px); font-weight: 600; }
@media (max-width: 599px) {
	/* on a phone each figure is a row: sign, name, number */
	body.sp-design .sp-k .sp-k__figures { grid-template-columns: 1fr; }
	body.sp-design .sp-k .sp-k__figure { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; border-top-width: 0; border-left: 4px solid var(--sp-line); }
	body.sp-design .sp-k .sp-k__figure--good { border-left-color: #1f7a4d; }
	body.sp-design .sp-k .sp-k__figure--warn { border-left-color: var(--sp-gold); }
	body.sp-design .sp-k .sp-k__figure--bad { border-left-color: #b42318; }
	body.sp-design .sp-k .sp-k__figure > :not(.sp-k__icon):not(.sp-k__figure-label):not(.sp-k__figure-value) { grid-column: 1 / -1; }
	body.sp-design .sp-k .sp-k__figure-value { font-size: 24px; text-align: right; }
}

/* section headings: a line runs on after the words */
body.sp-design .sp-k .sp-k__heading { margin: clamp(18px, 3vw, 30px) 0 0; font-size: var(--sp-h3); font-weight: 600; }
body.sp-design .sp-k .sp-k__heading::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 6px; background: linear-gradient(90deg, var(--sp-line), transparent); }

/* classes, records, payments */
body.sp-design .sp-k .sp-k__class-name { font-size: 19px; font-weight: 600; }
body.sp-design .sp-k .sp-k__record-title { font-size: 17px; font-weight: 600; }
body.sp-design .sp-k .sp-k__comment { background: var(--sp-cream); border-left: 3px solid var(--sp-gold); border-radius: 10px; }
body.sp-design .sp-k .sp-k__sums div { background: var(--sp-bg); border: 1px solid var(--sp-line-soft); }
body.sp-design .sp-k .sp-k__badge { font-size: 13px; }
body.sp-design .sp-k :is(.sp-k__more, .sp-k__more-inline) > summary { color: var(--sp-blue-dark); }
body.sp-design .sp-k .sp-k__lessons li { border-bottom-color: var(--sp-line-soft); }
body.sp-design .sp-k .sp-k__table :is(th, td) { border-bottom-color: var(--sp-line-soft); }
@media (max-width: 479px) {
	body.sp-design .sp-k .sp-k__sums { grid-template-columns: 1fr; }
	body.sp-design .sp-k .sp-k__sums div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
}

/* buttons: the pill buttons of the site */
body.sp-design .sp-k .sp-k__button { min-height: 46px; padding: 0 22px; border-width: 1px; font-size: 15px; font-weight: 650; box-shadow: 0 6px 16px -8px rgba(2, 116, 168, .8); }
body.sp-design .sp-k .sp-k__button:hover { background: var(--sp-blue-dark); border-color: var(--sp-blue-dark); }
body.sp-design .sp-k .sp-k__button--ghost { box-shadow: none; }
body.sp-design .sp-k .sp-k__button--ghost:hover { background: var(--sp-blue-soft); color: var(--sp-blue-dark) !important; } /* the page's own style forces the colour of this button with !important */
body.sp-design .sp-k .sp-k__button--small { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

/* a visitor who is not signed in: an inviting card in the middle */
body.sp-design .sp-k--gate { max-width: 620px; }
body.sp-design .sp-k .sp-k__gate { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 56px) clamp(22px, 5vw, 48px); }
body.sp-design .sp-k .sp-k__gate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: url(icons/sp-pattern.svg) center top / 60px 60px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
body.sp-design .sp-k .sp-k__gate > * { position: relative; }
body.sp-design .sp-k .sp-k__gate > .sp-k__icon { width: 72px; height: 72px; padding: 16px; border-radius: 22px; background: var(--sp-navy); color: var(--sp-gold-light); box-shadow: 0 0 0 6px var(--sp-blue-soft); }
body.sp-design .sp-k .sp-k__title { margin: 6px 0 4px; font-size: var(--sp-h2); font-weight: 600; }
body.sp-design .sp-k .sp-k__gate > p:not(.sp-k__actions):not(.sp-k__muted) { max-width: 34em; color: var(--sp-ink-soft); }

/* =============================================================================
   14. FOOT OF THE PAGE (printed by sp-design.php, section 9)
   A blue band inviting to register (not on the home page, which ends with the
   same invitation), then the navy footer: logo, links, phones, e-mail.
   ============================================================================= */
body.sp-frame .sp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-gutter); }
body.sp-frame .sp-footer { position: relative; background: var(--sp-navy); color: #dce8ef; }
body.sp-frame .sp-footer::before { content: ""; position: absolute; inset: 0; background: url(icons/sp-pattern-light.svg) center top / 72px 72px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }
body.sp-frame .sp-footer > * { position: relative; }
body.sp-frame .sp-footer a:not(.sp-btn) { color: #fff; }
body.sp-frame .sp-footer a:not(.sp-btn):hover { color: var(--sp-gold-light); }

body.sp-frame .sp-footer__cta { padding: clamp(40px, 6vw, 68px) 0; background: radial-gradient(120% 140% at 0% 0%, #04547c 0%, #034466 45%, var(--sp-navy) 100%); border-bottom: 1px solid rgba(255, 255, 255, .12); }
body.sp-frame .sp-footer__cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; }
body.sp-frame .sp-footer__cta h2 { margin: 0 0 10px; font-size: var(--sp-h2); color: #fff; }
body.sp-frame .sp-footer__cta p { margin: 0; max-width: 46ch; color: #cfe0ea; font-size: 16.5px; line-height: 1.65; }
body.sp-frame .sp-footer__cta .sp-kicker { margin: 0 0 10px; }
body.sp-frame .sp-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.sp-frame .sp-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--sp-gold-light); }
body.sp-frame .sp-kicker::before { content: ""; flex: none; width: 18px; height: 18px; background: url(icons/sp-star.svg) center / contain no-repeat; }
@media (max-width: 799px) { body.sp-frame .sp-footer__cta-inner { grid-template-columns: 1fr; } }

body.sp-frame .sp-footer__main { padding: clamp(44px, 6vw, 68px) 0 clamp(28px, 4vw, 44px); }
body.sp-frame .sp-footer__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
@media (max-width: 1023px) { body.sp-frame .sp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { body.sp-frame .sp-footer__grid { grid-template-columns: 1fr; gap: 30px; } }
body.sp-frame .sp-footer .sp-footer-logo { display: block; margin: 0 0 16px; }
body.sp-frame .sp-footer .sp-footer-logo a { display: inline-block; border-radius: 8px; }
body.sp-frame .sp-footer .sp-footer-logo img { display: block; width: 210px; height: auto; }
body.sp-frame .sp-footer__brand p { margin: 0; max-width: 32ch; color: #c9d9e2; font-size: 15px; line-height: 1.7; }
body.sp-frame .sp-footer__title { margin: 0 0 12px; font-family: var(--sp-font); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--sp-gold-light); }
body.sp-frame .sp-footer__col ul { display: grid; gap: 0; }
body.sp-frame :is(.sp-footer__link, .sp-footer__contact a) { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; color: #fff; font-size: 15px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
body.sp-frame :is(.sp-footer__link, .sp-footer__contact a):hover { color: var(--sp-gold-light); text-decoration: underline; text-underline-offset: .2em; }
body.sp-frame .sp-footer__link.is-page { color: var(--sp-gold-light); }
body.sp-frame .sp-footer__contact .sp-ico { color: var(--sp-gold-light); }
body.sp-frame .sp-follow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body.sp-frame .sp-follow__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
body.sp-frame .sp-follow__link:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: var(--sp-gold-light); }

body.sp-frame .sp-footer__bottom { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
body.sp-frame .sp-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
body.sp-frame .sp-footer__bottom p { margin: 0; color: #c9d9e2; font-size: 13.5px; line-height: 1.5; }
body.sp-frame .sp-footer__menu { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
body.sp-frame .sp-footer__small { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: #fff; font-size: 14px; text-decoration: none; }
body.sp-frame .sp-footer__small:hover { color: var(--sp-gold-light); text-decoration: underline; }

/* back to top */
body.sp-design #scroll-top { width: 46px; height: 46px; line-height: 46px; right: 16px; bottom: 16px; background: var(--sp-blue); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; box-shadow: var(--sp-shadow); color: #fff; font-size: 20px; }
body.sp-design #scroll-top:hover { background: var(--sp-blue-dark); }

/* page not found */
body.sp-design .error404-content { max-width: 620px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); text-align: center; }
body.sp-design .error404-content .error-title { margin: 0 0 12px; font-size: var(--sp-h2); line-height: 1.25; }
body.sp-design .error404-content .error-text { margin: 0 0 20px; font-size: var(--sp-text); line-height: 1.7; color: var(--sp-ink-soft); }
body.sp-design .error404-content form.searchform { margin-bottom: 20px; }


/* =============================================================================
   15. THE HOME PAGE  (the sections written in home.html)
   Every section is a "group" block with the class sp-section; the classes
   below give each its look. WordPress wraps the inside of a group in one more
   box (…__inner-container); "display: contents" makes that box transparent.
   ============================================================================= */
body.sp-design.home #main #content-wrap { max-width: none; width: auto; padding: 0; }
body.sp-design.home #main .content-area { margin-bottom: 0; } /* the theme leaves 40 px under the content on phones; the last band meets the foot of the page */
body.sp-design .sp-home { font-size: var(--sp-text); line-height: 1.7; }
body.sp-design .sp-home .wp-block-group__inner-container { display: contents; }
body.sp-design .sp-home p { margin: 0 0 1em; }
body.sp-design .sp-home p:empty { display: none; }
/* the theme underlines every link of a page; on the home page the cards and buttons speak for themselves */
body.sp-design.home.page .single-page-article .entry .sp-home a { text-decoration: none; }

/* --- a section, and what every section has ------------------------------------ */
body.sp-design .sp-section { position: relative; margin: 0; padding: var(--sp-section) max(var(--sp-gutter), calc((100% - 1100px) / 2)); }
body.sp-design .sp-section > .wp-block-group__inner-container > *, body.sp-design .sp-section > * { position: relative; }
body.sp-design .sp-section--white { background: var(--sp-surface); border-top: 1px solid var(--sp-line-soft); border-bottom: 1px solid var(--sp-line-soft); }
body.sp-design .sp-section--dark { background: var(--sp-navy); color: #e6eff4; }
body.sp-design :is(.sp-section--dark, .sp-section--pattern)::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
body.sp-design .sp-section--dark::before { background: url(icons/sp-pattern-light.svg) center top / 72px 72px; -webkit-mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 72%); }
body.sp-design .sp-section--pattern::before { background: url(icons/sp-pattern.svg) center top / 72px 72px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000 0%, transparent 70%); }

/* the small line above a heading */
body.sp-design .sp-home .sp-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--sp-gold-dark); }
body.sp-design .sp-home .sp-kicker::before { content: ""; flex: none; width: 18px; height: 18px; background: url(icons/sp-star.svg) center / contain no-repeat; }
body.sp-design .sp-home.sp-section--dark .sp-kicker { color: var(--sp-gold-light); }
body.sp-design .sp-home h2.wp-block-heading { margin: 0 0 14px; max-width: 22em; font-size: clamp(26px, 20px + 1.7vw, 40px); line-height: 1.15; }
body.sp-design .sp-home h2.wp-block-heading a { display: inline-block; padding: 7px 0; margin: -7px 0; color: inherit; }
body.sp-design .sp-home h2.wp-block-heading a:hover { color: var(--sp-blue-dark); }
body.sp-design .sp-home.sp-section--dark h2.wp-block-heading { color: #fff; }
body.sp-design .sp-home .sp-lead { margin: 0 0 clamp(22px, 3vw, 34px); max-width: 44em; font-size: clamp(16.5px, 15.6px + .3vw, 19px); line-height: 1.7; color: var(--sp-ink-soft); }
body.sp-design .sp-home.sp-section--dark .sp-lead { color: #d3e2ea; }
body.sp-design .sp-center { text-align: center; }
body.sp-design .sp-home.sp-center .sp-kicker { justify-content: center; }
body.sp-design .sp-home.sp-center :is(h2.wp-block-heading, .sp-lead) { margin-left: auto; margin-right: auto; }

/* the buttons of the home page */
body.sp-design .sp-home .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
body.sp-design .sp-home .wp-block-buttons.sp-more { margin-top: clamp(22px, 3vw, 34px); }
body.sp-design .sp-home .wp-block-buttons.sp-buttons--center { justify-content: center; }
body.sp-design .sp-home .wp-block-button { margin: 0; }
body.sp-design .sp-home .wp-block-button__link { min-height: 52px; padding: 14px 26px; font-size: 16px; }
body.sp-design .sp-home .sp-button--gold .wp-block-button__link { background-color: var(--sp-gold-light); border-color: var(--sp-gold-light); color: var(--sp-navy); }
body.sp-design .sp-home .sp-button--gold .wp-block-button__link:hover { background-color: #f6ebc9; border-color: #f6ebc9; color: var(--sp-navy); }
body.sp-design .sp-home .sp-button--light .wp-block-button__link { background-color: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; box-shadow: none; }
body.sp-design .sp-home .sp-button--light .wp-block-button__link:hover { background-color: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
body.sp-design .sp-home .sp-button--arrow .wp-block-button__link::after { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url(icons/arrow-right.svg) center / contain no-repeat; mask: url(icons/arrow-right.svg) center / contain no-repeat; }
body.sp-design .sp-home :is(.sp-button--youtube, .sp-button--play) .wp-block-button__link::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url(icons/brand-youtube.svg) center / contain no-repeat; mask: url(icons/brand-youtube.svg) center / contain no-repeat; }
body.sp-design .sp-home .sp-button--play .wp-block-button__link::before { -webkit-mask-image: url(icons/player-play.svg); mask-image: url(icons/player-play.svg); }

/* a grid of cards: a "columns" block laid out as a grid, so it adapts to every width by itself */
body.sp-design .sp-home .wp-block-columns.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5em), 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; }
body.sp-design .sp-home .wp-block-columns.sp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr)); }
body.sp-design .sp-home .wp-block-columns.sp-grid > .wp-block-column { margin: 0; min-width: 0; }
body.sp-design .sp-home .sp-card { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 26px); background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm); color: var(--sp-ink); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
body.sp-design .sp-home .sp-card h3.wp-block-heading { margin: 0 0 8px; font-size: clamp(19px, 18px + .35vw, 22px); line-height: 1.25; color: var(--sp-navy); }
body.sp-design .sp-home .sp-card h3.wp-block-heading a { color: inherit; }
body.sp-design .sp-home .sp-card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--sp-ink-soft); }
/* a card that is one big link: the link of its title stretches over the whole card */
body.sp-design .sp-home .sp-card--link { position: relative; }
body.sp-design .sp-home .sp-card--link:hover { border-color: var(--sp-line-strong); box-shadow: var(--sp-shadow); transform: translateY(-2px); }
body.sp-design .sp-home .sp-card--link h3.wp-block-heading a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sp-radius); }
body.sp-design .sp-home .sp-card--link:hover h3.wp-block-heading { color: var(--sp-blue-dark); }
/* the icon in its small arched niche */
body.sp-design .sp-home .sp-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 66px; margin: 0 0 16px; background: var(--sp-blue-soft); border: 1px solid var(--sp-blue-line); border-radius: 30px 30px 14px 14px; }
body.sp-design .sp-home .sp-icon img { display: block; width: 30px; height: 30px; border-radius: 0; }

/* --- hero ---------------------------------------------------------------------- */
body.sp-design .sp-hero { padding-top: clamp(28px, 4.5vw, 64px); padding-bottom: clamp(40px, 6vw, 84px); background: linear-gradient(180deg, #fff 0%, var(--sp-bg) 100%); overflow: hidden; }
body.sp-design .sp-hero::before { content: ""; position: absolute; inset: 0; background: url(icons/sp-pattern.svg) right top / 72px 72px; -webkit-mask-image: radial-gradient(75% 95% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(75% 95% at 100% 0%, #000 0%, transparent 70%); pointer-events: none; }
body.sp-design .sp-home .wp-block-columns.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; margin: 0; }
body.sp-design .sp-home .sp-hero__grid > .wp-block-column { min-width: 0; margin: 0; }
body.sp-design .sp-home .sp-hero__logo { margin: 0 0 clamp(14px, 2.4vw, 22px); }
body.sp-design .sp-home .sp-hero__logo img { display: block; width: min(100%, 320px); height: auto; border-radius: 0; }
body.sp-design .sp-home h1.wp-block-heading { margin: 0 0 16px; max-width: 16em; font-size: clamp(30px, 21px + 2.5vw, 50px); font-weight: 600; line-height: 1.14; color: var(--sp-navy); }
body.sp-design .sp-home.sp-hero .sp-lead { margin-bottom: clamp(20px, 3vw, 30px); }
body.sp-design .sp-home .sp-hero__grid > .sp-hero__media { align-self: center; }
body.sp-design .sp-hero__media .wp-block-embed { position: relative; margin: 0; }
body.sp-design .sp-hero__media .wp-block-embed::before { content: ""; position: absolute; z-index: 0; right: -14px; bottom: -14px; width: 62%; height: 70%; border: 1px solid var(--sp-gold); border-radius: var(--sp-radius-lg); opacity: .6; }
body.sp-design .sp-hero__media .wp-block-embed .wp-block-embed__wrapper { z-index: 1; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); }
/* text and video side by side when there is room for both (the side menu takes 300 px from 1100 px on) */
@media (min-width: 880px) { /* (see also 15b) */
	body.sp-design .sp-home .wp-block-columns.sp-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
	body.sp-design .sp-home h1.wp-block-heading { font-size: clamp(30px, 12px + 2.3vw, 50px); }
}

/* --- three verses (a dark band) -------------------------------------------------- */
body.sp-design .sp-home.sp-verses .wp-block-columns.sp-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: clamp(20px, 3vw, 40px); }
body.sp-design .sp-home .wp-block-quote.sp-verse { position: relative; margin: 0; padding: 32px 0 0; background: none; border: 0; border-radius: 0; color: #fff; }
body.sp-design .sp-home .wp-block-quote.sp-verse::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: url(icons/sp-star.svg) center / contain no-repeat; }
body.sp-design .sp-home .wp-block-quote.sp-verse p { margin: 0 0 12px; padding: 0; font-style: normal; font-family: var(--sp-display); font-size: clamp(19px, 17.5px + .55vw, 24px); font-weight: 500; line-height: 1.45; color: #fff; }
body.sp-design .sp-home .wp-block-quote.sp-verse cite { display: block; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-gold-light); }
body.sp-design .sp-home .wp-block-quote cite { margin: 0; padding-left: 0; padding-right: 0; }
body.sp-design .sp-home .wp-block-quote :is(cite, cite em)::before { content: none; } /* the theme's dash before a name */

/* --- about: text beside a video --------------------------------------------------- */
body.sp-design .sp-home.sp-about .wp-block-columns.sp-grid { align-items: center; gap: clamp(24px, 4vw, 56px); }
body.sp-design .sp-home .sp-grid > .sp-about__media { align-self: center; }
body.sp-design .sp-about__media .wp-block-embed { margin: 0; }

/* --- the learning path: numbered steps --------------------------------------------- */
body.sp-design .sp-home .wp-block-columns.sp-steps { counter-reset: sp-step; }
body.sp-design .sp-home .sp-step::before { counter-increment: sp-step; content: counter(sp-step); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 14px; border-radius: 50%; background: var(--sp-navy); color: var(--sp-gold-light); font-family: var(--sp-display); font-size: 21px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 5px var(--sp-blue-soft); }
body.sp-design .sp-home .sp-step .sp-step__tag { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-gold-dark); }

/* --- latest posts: the Spectra "post masonry" block, shown as our cards -----------
   The block places its cards with a script (it writes "position: absolute; left; top"
   on each card and a fixed height on the list) and its own style file sets colours and
   paddings with "!important". A grid does the same job without waiting for the script,
   so those values are overruled here — hence "!important". */
body.sp-design .sp-home .wp-block-uagb-post-masonry.uagb-post__items { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5em), 1fr)); gap: clamp(14px, 2vw, 22px); height: auto !important; margin: 0; padding: 0; }
body.sp-design .sp-home .wp-block-uagb-post-masonry.uagb-post__items > article.uagb-post__inner-wrap {
	position: relative !important; left: auto !important; top: auto !important; width: auto !important; max-width: none; transform: none !important;
	margin: 0; padding: clamp(18px, 2.4vw, 24px) !important;
	background: var(--sp-surface) !important; background-clip: border-box !important; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm);
	transition: box-shadow .2s ease, border-color .2s ease;
}
body.sp-design .sp-home .wp-block-uagb-post-masonry > article.uagb-post__inner-wrap:hover { border-color: var(--sp-line-strong); box-shadow: var(--sp-shadow); }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__text { padding: 0 !important; margin: 0; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__image { margin: 0 0 14px; padding: 0; border: 0; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: var(--sp-radius-sm); background: var(--sp-bg); }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__title { margin: 0 0 8px !important; font-family: var(--sp-display); font-size: clamp(18px, 17px + .3vw, 20.5px) !important; font-weight: 600; line-height: 1.3 !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__title a { color: var(--sp-navy) !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__title a:hover { color: var(--sp-blue) !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sp-radius); } /* the whole card is the link */
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post-grid-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0 0 10px !important; font-size: 12.5px !important; font-weight: 500; line-height: 1.5; text-transform: none; color: var(--sp-ink-mute) !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post-grid-byline > * { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--sp-ink-mute) !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post-grid-byline .uagb-post__comment { display: none; } /* "no comments yet" on every card is only noise here */
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post-grid-byline .dashicons { color: var(--sp-gold); font-size: 15px; width: 15px; height: 15px; margin: 0; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__excerpt { font-family: var(--sp-font-compact); font-size: 15px !important; line-height: 1.65 !important; color: var(--sp-ink-soft) !important; }
body.sp-design .sp-home .wp-block-uagb-post-masonry .uagb-post__excerpt p { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --- what our students wrote --------------------------------------------------------- */
body.sp-design .sp-home .wp-block-quote.sp-voice { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: clamp(46px, 5vw, 56px) clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 26px); background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
body.sp-design .sp-home .wp-block-quote.sp-voice::before { content: ""; position: absolute; left: clamp(20px, 2.6vw, 28px); top: clamp(16px, 2vw, 22px); width: 26px; height: 26px; background-color: var(--sp-gold); -webkit-mask: url(icons/quote.svg) center / contain no-repeat; mask: url(icons/quote.svg) center / contain no-repeat; }
body.sp-design .sp-home .wp-block-quote.sp-voice p { margin: 0 0 14px; padding: 0; font-size: 16px; font-style: normal; line-height: 1.7; color: var(--sp-ink); }
body.sp-design .sp-home .wp-block-quote.sp-voice cite { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sp-line); font-family: var(--sp-display); font-size: 16.5px; font-style: normal; font-weight: 600; color: var(--sp-navy); }

/* --- Instagram (the Smash Balloon feed) ------------------------------------------------ */
body.sp-design .sp-social #sb_instagram { padding: 0 !important; margin: 0 0 14px; } /* the plug-in writes its padding into the page */
body.sp-design .sp-social #sb_instagram .sbi_photo { border-radius: var(--sp-radius-sm); overflow: hidden; }
body.sp-design .sp-social #sb_instagram #sbi_load { padding: 0; margin: 0; }
body.sp-design .sp-social #sb_instagram .sbi_follow_btn { margin: 0; }
body.sp-design .sp-social #sb_instagram :is(.sbi_follow_btn a, #sbi_load .sbi_load_btn) { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; margin: 0; padding: 14px 26px; background: var(--sp-blue) !important; border-radius: 999px; color: #fff; font-family: var(--sp-font); font-size: 16px; font-weight: 600; line-height: 1.2; } /* the plug-in writes the button colour into the page */
body.sp-design .sp-social #sb_instagram .sbi_follow_btn a:hover { background: var(--sp-blue-dark) !important; box-shadow: var(--sp-shadow); }

/* --- the last band: how to start, phone, e-mail ------------------------------------------ */
body.sp-design .sp-home .wp-block-columns.sp-join { counter-reset: sp-join; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: 14px; margin: 0 0 14px; }
body.sp-design .sp-home .sp-join > .wp-block-column { position: relative; margin: 0; padding: 16px 18px 6px 68px; min-height: 76px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--sp-radius); }
body.sp-design .sp-home .sp-join > .wp-block-column::before { counter-increment: sp-join; content: counter(sp-join); position: absolute; left: 16px; top: 18px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sp-gold-light); color: var(--sp-navy); font-family: var(--sp-display); font-size: 19px; font-weight: 700; line-height: 1; }
body.sp-design .sp-home .sp-join p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #e6eff4; }
body.sp-design .sp-home .sp-join p br { display: none; }
body.sp-design .sp-home .sp-join p strong { display: block; font-family: var(--sp-display); font-size: 18px; font-weight: 600; color: #fff; }
body.sp-design.home.page .single-page-article .entry .sp-home .sp-join a { display: inline-block; padding: 11px 0; color: var(--sp-gold-light); text-decoration: underline; text-underline-offset: .22em; }
body.sp-design.home.page .single-page-article .entry .sp-home .sp-join a:hover { color: #fff; }
body.sp-design .sp-home .sp-card p.sp-contact__big { font-family: var(--sp-display); font-size: clamp(19px, 18px + .4vw, 23px); line-height: 1.35; overflow-wrap: anywhere; }
body.sp-design .sp-home .sp-card .sp-contact__big a { display: inline-block; padding: 9px 0; color: var(--sp-navy); font-weight: 600; }
body.sp-design .sp-home .sp-card .sp-contact__big a:hover { color: var(--sp-blue-dark); text-decoration: underline; }


/* =============================================================================
   15b. ROUND TWO: the opening facts, the verses in Arabic, sections that appear,
        Arabic passages in posts, the sign-in page
   ============================================================================= */

/* four facts under the opening of the home page */
body.sp-design .sp-home .sp-facts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 12px; margin: clamp(30px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
body.sp-design .sp-home .sp-facts li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; background: rgba(255, 255, 255, .86); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm); }
body.sp-design .sp-home .sp-facts img { flex: none; width: 46px; height: 46px; padding: 10px; background: var(--sp-blue-soft); border: 1px solid var(--sp-blue-line); border-radius: 50%; }
body.sp-design .sp-home .sp-facts span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--sp-ink-soft); }
body.sp-design .sp-home .sp-facts strong { font-family: var(--sp-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--sp-navy); }

/* the opening: text and video side by side when there is room */
@media (min-width: 880px) {
	body.sp-design .sp-home .wp-block-columns.sp-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
	body.sp-design .sp-home.sp-hero h1.wp-block-heading { font-size: clamp(32px, 14px + 2.3vw, 52px); }
}
@media (min-width: 880px) {
	body.sp-design .sp-home .sp-hero__logo img { width: min(100%, 290px); }
}

/* the three verses: each in an arched frame, the Arabic above its meaning */
body.sp-design .sp-home .wp-block-quote.sp-verse {
	display: flex; flex-direction: column; height: 100%;
	padding: 40px clamp(20px, 2.6vw, 30px) 26px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
	border: 1px solid rgba(236, 217, 164, .32); border-radius: 120px 120px 18px 18px / 64px 64px 18px 18px;
	text-align: center;
}
body.sp-design .sp-home .wp-block-quote.sp-verse::before { left: 50%; top: 14px; transform: translateX(-50%); }
body.sp-design .sp-home .wp-block-quote.sp-verse p.sp-verse__ar { margin: 0 0 16px; font-family: "SP Arabic", var(--sp-display); font-size: clamp(20px, 17px + .7vw, 25px); font-weight: 400; line-height: 1.95; color: var(--sp-gold-light); text-align: center; }
body.sp-design .sp-home .wp-block-quote.sp-verse p:not(.sp-verse__ar) { flex: 1 1 auto; font-size: clamp(18px, 16.5px + .45vw, 21.5px); }
body.sp-design .sp-home .wp-block-quote.sp-verse cite { margin-top: 6px; }

/* sections that appear gently: only once site.js has started (it marks the page "sp-reveal-on"),
   and never for what is already on the screen when the page opens */
html.sp-reveal-on body.sp-design .sp-reveal:not(.is-in) > .wp-block-group__inner-container > *,
html.sp-reveal-on body.sp-design .sp-reveal:not(.is-in) > :not(.wp-block-group__inner-container) { opacity: 0; transform: translateY(20px); }
html.sp-reveal-on body.sp-design .sp-reveal > .wp-block-group__inner-container > *,
html.sp-reveal-on body.sp-design .sp-reveal > :not(.wp-block-group__inner-container) { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.sp-reveal-on body.sp-design .sp-reveal > .wp-block-group__inner-container > :nth-child(2),
html.sp-reveal-on body.sp-design .sp-reveal > :nth-child(2) { transition-delay: .08s; }
html.sp-reveal-on body.sp-design .sp-reveal > .wp-block-group__inner-container > :nth-child(3),
html.sp-reveal-on body.sp-design .sp-reveal > :nth-child(3) { transition-delay: .16s; }
html.sp-reveal-on body.sp-design .sp-reveal > .wp-block-group__inner-container > :nth-child(n+4),
html.sp-reveal-on body.sp-design .sp-reveal > :nth-child(n+4) { transition-delay: .24s; }

/* Arabic passages in posts and pages: each one on its own quiet panel, like a page of a mushaf */
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) p[dir="rtl"] {
	position: relative; margin: 1.3em 0; padding: 16px 22px 16px 20px;
	background: linear-gradient(180deg, #fffdf7 0%, var(--sp-cream) 100%);
	border: 1px solid var(--sp-line); border-right: 3px solid var(--sp-gold); border-radius: 14px;
	color: #14232b;
}
body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) p[dir="rtl"] + p[dir="rtl"] { margin-top: -.6em; }

/* the sign-in and password pages: a welcome beside the form */
body.sp-frame:is(.um-page-login, .um-page-password-reset) #content > article.single-page-article { max-width: 980px; padding: 0; overflow: hidden; }
body.sp-frame .sp-auth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
body.sp-frame .sp-auth__aside {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	padding: clamp(28px, 4vw, 48px); background: var(--sp-navy); color: #dce8ef; overflow: hidden;
}
body.sp-frame .sp-auth__aside::before { content: ""; position: absolute; inset: 0; background: url(icons/sp-pattern-light.svg) center / 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000, transparent 75%); mask-image: radial-gradient(120% 90% at 100% 100%, #000, transparent 75%); pointer-events: none; }
body.sp-frame .sp-auth__aside > * { position: relative; }
body.sp-frame .sp-auth__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(236, 217, 164, .4); color: var(--sp-gold-light); }
body.sp-frame .sp-auth__aside h2 { margin: 0 0 10px; font-size: var(--sp-h2); color: #fff; }
/* "Üye Ol" under the sign-in form leads to the registration form too; it stays, as the members plugin prints it */
body.sp-frame .sp-auth__aside p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: #d3e2ea; }
body.sp-frame .sp-auth__aside .sp-auth__note { margin: 6px 0 10px; font-size: 14px; font-weight: 600; color: var(--sp-gold-light); }
body.sp-frame .sp-auth__form { padding: clamp(24px, 4vw, 48px); background: var(--sp-surface); }
@media (max-width: 759px) {
	body.sp-frame .sp-auth { grid-template-columns: 1fr; }
	body.sp-frame .sp-auth__aside { padding: 24px; }
	body.sp-frame .sp-auth__aside h2 { font-size: 24px; }
}

/* =============================================================================
   16. FINGERS, LESS MOVEMENT, PAPER
   ============================================================================= */
/* On a touch screen the small secondary links get the room a fingertip needs
   (44 px). With a mouse they keep their compact size. */
@media (pointer: coarse) {
	body.sp-design .site-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
	body.sp-design.single-post ul.meta li a { display: inline-block; min-width: 44px; padding: 12px 0; }
	body.sp-design .blog-entry.thumbnail-entry .blog-entry-category { margin: -14px 0 -8px; }
	body.sp-design .blog-entry.thumbnail-entry .blog-entry-category a { display: inline-block; min-width: 44px; line-height: 44px; }
	body.sp-design .comment-author .comment-link a { display: inline-block; padding: 12px 0; }
	body.sp-design .comment-author .comment-meta a { padding: 13px 0; }
	body.sp-design.search-results .search-entry-readmore a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
	body.sp-design .sidebar-box.widget_categories ul li a { min-width: 44px; padding-top: 13px; padding-bottom: 13px; }
	body.sp-design:not(.home) :is(.entry-content, .single-page-article .entry) :is(h2, h3, h4) > a { display: inline-block; padding: 8px 0; }
	body.sp-design .sidebar-box:not(.widget_categories) :is(ul, ol) li { padding: 0; }
	body.sp-design .sidebar-box:not(.widget_categories) :is(ul, ol) li a { display: inline-block; min-width: 44px; padding: 12px 0; }
	body.sp-design #bbpress-forums .bbp-breadcrumb a { display: inline-block; min-width: 44px; padding: 11px 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.sp-design *, body.sp-design *::before, body.sp-design *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* !important: this is the visitor's own wish and must win over every animation */
	body.sp-design .sp-home .sp-card--link:hover { transform: none; }
}
@media print {
	body.sp-design { background: #fff; color: #000; font-size: 11.5pt; line-height: 1.55; }
	body.sp-design :is(#top-bar-wrap, #site-header, #footer, #scroll-top, .entry-share, nav.post-navigation, #related-posts, #respond, .widget-area, .site-breadcrumbs, .wp-block-embed, .wp-block-buttons, .sp-header, .sp-footer, .sp-topics),
	body.sp-design .page-header::before, body.sp-design .page-header::after { display: none !important; } /* nothing of the screen furniture belongs on paper */
	body.sp-design #outer-wrap { margin: 0 !important; } /* the theme reserves the room of the side menu here */
	body.sp-design .page-header { padding: 0 0 8pt; border: 0; }
	body.sp-design.single #content > article, body.sp-design #content > article.single-page-article { max-width: none; padding: 0; border: 0; box-shadow: none; }
	body.sp-design :is(.entry-content, .single-page-article .entry) a { color: #000; }
	body.sp-design ul.meta a::after { content: none; } /* the theme prints the address after every link; under the title that is only noise */
	body.sp-design :is(h1, h2, h3) { color: #000; break-after: avoid; }
	body.sp-design :is(p, li, blockquote) { orphans: 3; widows: 3; }
	body.sp-design :is(blockquote, img) { break-inside: avoid; }
}