/*
Theme Name:   Gyan Pradip — Kadence Child
Theme URI:    https://edu.gyanpradip.com/
Description:  Child theme of Kadence for edu.gyanpradip.com. Holds the site's custom CSS. Every rule in this file is here for one reason only: Kadence (or the CourseGlade plugin, or WordPress core) exposes no setting for it. Anything that a Customizer setting can do stays in the Customizer.
Author:       Gyan Pradip
Template:     kadence
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  kadence-child
*/

/* === Gyan Pradip brand — CourseGlade color remap ===
   html:root, not :root: CourseGlade's course.css defines these on :root and is
   enqueued after the theme stylesheet, so a plain :root would tie and lose. */
html:root{
  --courseglade-primary:#064E3B;
  --courseglade-primary-dark:#002C22;
  --courseglade-primary-bg:rgba(6,78,59,.06);
  --courseglade-primary-gradient:linear-gradient(135deg,#064E3B 0%,#0A6B50 100%);
}

/* CourseGlade FEATURED badge — plugin hardcodes rgba(0,75,202,.9), no variable to remap */
.courseglade-course-card .courseglade-course-card__badge--featured,
.courseglade-course-card .courseglade-course-card__badge--category{background:rgba(6,78,59,.92);}

/* CourseGlade card title — plugin ships font-weight:800 in course.css.
   Kadence's course typography settings do not target the shortcode card. */
.courseglade-course-card .courseglade-course-card__title{
  font-weight:600;
  /* plugin: 1.375rem (22px) -- heavy in a 382px card, and a 2-line title makes
     the whole row much taller. 19px keeps the plugin's 2-line clamp readable. */
  font-size:19px;
  /* plugin uses its own grey rgb(33,37,41); align with the site palette */
  color:var(--global-palette3);
}

/* === Header search box === matches gyanpradip.com (Shopify) field.
   Kadence has no border-radius / icon-button setting for the search element,
   so radius, size and the round submit pill are done here. */
#main-header .search-toggle-open.search-toggle-style-bordered{
  position:relative;
  display:flex;align-items:center;justify-content:flex-start;
  width:420px;max-width:100%;height:44px;
  padding:0 76px 0 20px;
  border-radius:65px;
  background:#FDFDFD;
  line-height:1;
}
#main-header .search-toggle-open .search-toggle-label{
  font-weight:400;
}
#main-header .search-toggle-open .search-toggle-icon{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:32px;
  background:var(--global-palette1);color:#FDFDFD;
  border-radius:9999px;
}

/* Mobile: compact round icon button (Kadence's padding setting is not responsive) */
@media (max-width:1024px){
  #mobile-header .search-toggle-open.search-toggle-style-bordered{
    width:44px;height:44px;padding:0;border-radius:9999px;justify-content:center;
  }
  #mobile-header .search-toggle-open .search-toggle-icon{
    position:static;transform:none;width:auto;height:auto;background:none;
    color:var(--global-palette1);
  }
}

/* === Header shadow === Kadence has a shadow setting only for the STICKY header
   (header_sticky_box_shadow), not the normal one. Matches gyanpradip.com:
   box-shadow: rgba(4,4,4,.1) 0 1px 5px 0 */
#masthead .site-header-wrap{
  box-shadow:0 1px 5px 0 rgba(4,4,4,.10);
  position:relative;z-index:20;
}

/* === Header button when signed in ===
   Kadence offers one header button slot, and gyanpradip_header_button_label()
   turns it into লগআউট for a signed-in reader. Filled #064E3B is the colour
   every "go on, do this" control on the site uses, so the loudest thing in the
   header was the one control that ends the visit -- and the biggest click
   target next to it. Outline keeps logout available without ranking it first.
   Signed out the button says লগইন and stays filled: there it IS the main
   action, so the rule is scoped to the logged-in body class.
   Border and text share #0C6B3D: at 6.59:1 on white the outline actually
   reads as an edge. The lighter #C4DACD tried first measured 1.47:1 and left
   the button looking unfinished. */
body.logged-in #main-header .header-button{
  background:transparent;border-color:#0C6B3D;color:#0C6B3D;
}
body.logged-in #main-header .header-button:hover,
body.logged-in #main-header .header-button:focus{
  background:#F2F9F5;border-color:#064E3B;color:#064E3B;
}

/* === Footer === Kadence has no margin setting for widget titles.
   gyanpradip.com uses margin: 0 0 30px */
#colophon .widget-title{ margin:0 0 30px; }
/* gyanpradip.com footer lists have no bullets */
#colophon ul{ list-style:none; padding-left:0; margin:0; }

/* === Footer social icons ===
   The core Social Icons block only offers fixed size steps (small 16px /
   normal 24px), and Kadence's footer link colour beats the block's own icon
   colour. gyanpradip.com uses a 32px circle with an 18px white glyph. */
#colophon .wp-block-social-links .wp-social-link{ width:32px; height:32px; }
#colophon .wp-block-social-links .wp-block-social-link-anchor{
  padding:7px; color:#FFFFFF; line-height:0;
}
#colophon .wp-block-social-links .wp-block-social-link-anchor svg{ width:18px; height:18px; }

/* === Search drawer (popup) === Kadence exposes only modal background + text
   colour for this drawer, no settings for the field itself. The extra
   .popup-drawer class keeps these above Kadence's own inline rules whatever
   order the stylesheets load in. Matches the header search pill on
   gyanpradip.com. */
#search-drawer.popup-drawer .drawer-content{ padding:0 24px; }
#search-drawer.popup-drawer .drawer-inner .drawer-content form{ width:100%; max-width:720px; margin:0 auto; }
#search-drawer.popup-drawer .drawer-inner .drawer-content form label{ position:relative; display:block; width:100%; }
#search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-field{
  width:100%; height:64px;
  padding:0 104px 0 28px;
  border:2px solid var(--global-palette1);
  border-radius:65px;
  background:#FDFDFD;
  color:#161616;
  font-size:18px; font-weight:400; line-height:1;
  box-shadow:0 2px 14px rgba(4,4,4,.18);
}
#search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-field:focus{
  color:#161616; outline:none; border-color:var(--global-palette1);
  box-shadow:0 0 0 4px rgba(6,78,59,.25);
}
#search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-submit{ width:88px; height:64px; }
#search-drawer.popup-drawer .drawer-inner .drawer-content form .kadence-search-icon-wrap{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:76px; height:52px;
  border-radius:9999px;
  background:var(--global-palette1); color:#FDFDFD;
}
/* Bangla placeholder — WordPress hardcodes "Search ..." in get_search_form()
   and there is no Customizer field for it; overlay the label instead.
   The text is written as CSS escapes so the file's encoding cannot break it. */
#search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-field::placeholder{ color:transparent; }
#search-drawer.popup-drawer .drawer-inner .drawer-content form label:has(input.search-field:placeholder-shown)::after{
  content:"\0987 -\09AC \09C1 \0995  \0996 \09C1 \0981 \099C \09C1 \09A8 \2026 ";
  position:absolute; left:28px; top:50%; transform:translateY(-50%);
  color:#767676; font-size:18px; pointer-events:none;
}

@media (max-width:767px){
  #search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-field{ height:56px; padding:0 84px 0 20px; font-size:16px; }
  #search-drawer.popup-drawer .drawer-inner .drawer-content form .kadence-search-icon-wrap{ width:60px; height:44px; }
  #search-drawer.popup-drawer .drawer-inner .drawer-content form input.search-submit{ width:70px; height:56px; }
  #search-drawer.popup-drawer .drawer-inner .drawer-content form label:has(input.search-field:placeholder-shown)::after{ left:20px; font-size:16px; }
}

/* === Buttons on a dark / coloured band (green CTA, footer) ===
   These blocks carry their own colour classes, and WordPress core prints
   .has-background / .has-text-color with !important, so the theme's hover
   colours cannot reach them. gyanpradip.com does the same thing in its
   color-inverse sections: hover fills black and adds a white outline. */
.wp-block-button.btn-on-dark > .wp-block-button__link:hover,
.wp-block-button.btn-on-dark > .wp-block-button__link:focus{
  background-color:#040404 !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF;
}

/* === Outline button hover fill ===
   Kadence's outline-button settings expose text and border colour only, no
   background, and its own hover rules use :not(.has-background) /
   :not(.has-text-color), so the selector below matches that specificity.
   Values are gyanpradip.com's secondary-button hover. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color):focus{
  background-color:#161616;
  color:#E3F0E9;
  border-color:#000000;
}

/* === Mobile drawer (offcanvas) ===
   Laid out like gyanpradip.com's: logo and close button share the top row,
   menu rows run edge to edge. Kadence renders the close button in its own
   .drawer-header above .drawer-content and exposes no padding settings for
   either, so the layout has to live here. Colours, width, dividers and
   typography all come from the Customizer. */
#mobile-drawer .drawer-inner{ box-shadow:0 0 10px rgba(0,0,0,.15); }
#mobile-drawer .drawer-header{
  position:absolute; top:0; right:0; z-index:2;
  width:auto; height:80px; padding:0 20px;
  display:flex; align-items:center;
}
#mobile-drawer .drawer-content{ padding:0; }
/* logo row — padding goes on the wrapper so the divider spans the panel */
#mobile-drawer .drawer-content > [data-section="title_tagline"]{
  padding:20px;
  border-bottom:1px solid rgba(4,4,4,.15);
}
#mobile-drawer #mobile-menu > li > a{ padding:15px 20px; }

/* === CourseGlade auth pages — sign-in / registration / password ===
   The plugin prints one fixed 460px card with its own shadow and gradient
   top bar, and Kadence drops it inside the boxed .entry sheet: a card inside
   a card, with ~300px of empty space under it. The markup comes from the
   plugin, so none of this is reachable from a setting. The brand panel is
   added by gyanpradip_auth_split_layout() in functions.php. */
.gp-auth-split{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  max-width:980px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  background:var(--global-palette9);
  box-shadow:0 18px 40px -18px rgba(4,4,4,.25);
}

/* Kadence's own boxed wrapper — the split card is the frame now */
.single-entry:has(.gp-auth-split){ background:none; box-shadow:none; }
.entry-content-wrap:has(.gp-auth-split){ padding:0; }

.gp-auth-brand{
  background:var(--global-palette1);
  color:#E3F0E9;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.gp-auth-brand h2{ margin:0; font-size:26px; line-height:1.25; color:#FFFFFF; }
.gp-auth-brand p{ margin:0; font-size:15px; line-height:1.7; color:rgba(227,240,233,.85); }
.gp-auth-brand ul{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.gp-auth-brand li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; }
.gp-auth-brand li svg{ flex:0 0 auto; width:18px; height:18px; margin-top:4px; color:#8FD3B6; }
/* p.gp-auth-brand__shop, not .gp-auth-brand__shop: the "margin:0" reset on
   .gp-auth-brand p (0,1,1) would otherwise beat a plain class (0,1,0). */
.gp-auth-brand p.gp-auth-brand__shop{ margin-top:auto; padding-top:6px; }
.gp-auth-brand__shop a{
  color:#FFFFFF; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;
}
.gp-auth-brand__shop a:hover{ border-bottom-color:#FFFFFF; }

.gp-auth-form{ display:flex; flex-direction:column; justify-content:center; padding:48px 40px; }
.gp-auth-form .courseglade-container{ width:100%; max-width:none; padding:0; }
/* min-height:60vh on the plugin wrapper is what left the dead space */
.gp-auth-form .courseglade-auth-page{ display:block; min-height:0; }
.gp-auth-form .courseglade-auth-card{
  width:100%; max-width:none; padding:0;
  background:none; border-radius:0; box-shadow:none; overflow:visible;
}
/* the card's gradient top bar belongs to the old floating card */
.gp-auth-form .courseglade-auth-card::before{ display:none; }

@media (max-width:900px){
  .gp-auth-split{ grid-template-columns:1fr; max-width:480px; }
  .gp-auth-brand{ padding:32px 28px; gap:16px; }
  .gp-auth-brand h2{ font-size:22px; }
  .gp-auth-form{ padding:32px 28px; }
}
@media (max-width:767px){
  .gp-auth-brand ul{ display:none; }
}

/* The auth pages sit on plain white instead of the site's grey content
   ground. Kadence's page_background setting is per post type, not per page,
   so using it would repaint every page on the site. */
body:has(.gp-auth-split){ background:var(--global-palette9); }

/* Form-column heading. The site has no title band any more, so this h1 is
   the page's only one. Kept a step under the brand panel's h2 so the panel
   still leads. */
.gp-auth-form .gp-auth-title{ margin:0 0 6px; font-size:24px; line-height:1.25; font-weight:600; color:var(--global-palette3); }
/* .gp-auth-form prefix throughout: Kadence styles .entry-content h1 and
   .entry-content p at (0,1,1), which a bare class would lose to. */
.gp-auth-form .gp-auth-subtitle{ margin:0 0 26px; font-size:15px; line-height:1.6; color:var(--global-palette5); }

/* forgot-password is the one page where the plugin prints its own heading and
   intro line. Ours says the same thing in Bangla, so the plugin pair is
   hidden rather than shown twice in two languages. */
.gp-auth-form .courseglade-auth-heading,
.gp-auth-form .courseglade-auth-subheading{ display:none; }

@media (max-width:900px){
  .gp-auth-form .gp-auth-title{ font-size:22px; }
  .gp-auth-form .gp-auth-subtitle{ margin-bottom:22px; }
}

/* === CourseGlade primary button === the plugin paints it with a gradient
   (--courseglade-primary-gradient) at weight 700 and a 1px transparent
   border. Every other button on the site is flat var(--global-palette1)
   at weight 400 with a 2px border and a black hover, and Kadence's button
   settings cannot reach .courseglade-btn. Sizes are left to the plugin so
   the large "Enroll Now" button keeps its scale. */
.courseglade-btn.courseglade-btn-primary{
  background:var(--global-palette1);
  border:2px solid var(--global-palette1);
  font-weight:400;
}
.courseglade-btn.courseglade-btn-primary:hover:not(:disabled),
.courseglade-btn.courseglade-btn-primary:focus:not(:disabled){
  background:#040404;
  border-color:#040404;
  color:var(--global-palette9);
  box-shadow:none;
}

/* === Enrol popup (built in JS by the plugin, so no settings reach it) === */

/* Kadence styles every <button> with border-radius:8px. The tab is a button,
   so its 2px active underline was being drawn with rounded ends. */
/* The tabs, the eye toggle and the "switch panel" links are all <button>
   elements, and Kadence paints every button black on hover
   (button:hover{background-color:var(--global-palette-btn-bg-hover)} in
   global.min.css). Inside this modal those are text controls, not buttons,
   so the fill is removed and hover becomes a colour change only. The real
   submit button (.courseglade-btn) and the close circle keep their own
   styling, and nothing outside the modal is touched. */
.courseglade-auth-modal button:not(.courseglade-btn):not(.courseglade-auth-modal__close),
.courseglade-auth-modal button:not(.courseglade-btn):not(.courseglade-auth-modal__close):hover,
.courseglade-auth-modal button:not(.courseglade-btn):not(.courseglade-auth-modal__close):focus,
.courseglade-auth-modal button:not(.courseglade-btn):not(.courseglade-auth-modal__close):active{
  background:none;
  box-shadow:none;
}

/* Tabs: the underline carries the state, so only the colour moves. */
.courseglade-auth-modal .courseglade-auth-tab{ border-radius:0; }
.courseglade-auth-modal .courseglade-auth-tab:hover{
  color:var(--global-palette1);
  border-bottom-color:var(--global-palette6);
}
.courseglade-auth-modal .courseglade-auth-tab.is-active,
.courseglade-auth-modal .courseglade-auth-tab.is-active:hover{
  color:var(--global-palette1);
  border-bottom-color:var(--global-palette1);
}

/* "নতুন এখানে? অ্যাকাউন্ট খুলুন" and the eye toggle */
.courseglade-auth-modal .courseglade-auth-divider button:hover{ color:var(--global-palette2); }
.courseglade-auth-modal .courseglade-password-toggle:hover{ color:var(--global-palette1); }

/* Fields: the modal sits outside .entry-content, so Kadence's input styling
   never reaches it and the plugin's own 3px/38px values show through. These
   are the 8px/46px used by the sign-in page. */
.courseglade-auth-modal .courseglade-form-input{
  border-radius:8px;
  min-height:46px;
  padding:10px 14px;
}

/* Submit button: site button metrics (the modal one carries no size class) */
.courseglade-auth-modal .courseglade-btn{ font-size:16px; padding:10px 18px; }

/* Close button: the plugin uses a light grey glyph that barely reads */
.courseglade-auth-modal .courseglade-auth-modal__close{
  background:var(--global-palette7);
  color:var(--global-palette4);
}
.courseglade-auth-modal .courseglade-auth-modal__close:hover{
  background:var(--global-palette6);
  color:var(--global-palette1);
}


/* Footer "দ্রুত লিংক": the "আমার ই-বুক" (/dashboard/) link lives in a block
   widget, not a nav menu, so gyanpradip_menu_visibility() cannot reach it.
   Hide it from logged-out visitors. Core adds .logged-in to <body> only for
   logged-in users, and LiteSpeed never caches logged-in users, so the guest
   cached HTML always lacks the class -- correct under page cache. */
body:not(.logged-in) #colophon .wp-block-list li:has(> a[href*="/dashboard/"]){
  display:none;
}


/* === CourseGlade archive: card + filter bar polish ===
   /courses/ and /free-ebooks/. NOTE: this child style.css is enqueued BEFORE
   the plugin's base.css/course.css, so every rule below has to win on
   specificity alone -- hence the doubled class names. */

/* Card outline. The site background is white now, and the plugin gives cards
   no border (it explicitly sets border-style:none at (0,2,0)) -- only a
   .06-alpha shadow. White card on white page = edges disappear. */
.courseglade-course-grid .courseglade-course-card.courseglade-course-card{
  border:1px solid var(--global-palette6);
  /* plugin animates box-shadow only; add the lift and border fade */
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.courseglade-course-grid .courseglade-course-card.courseglade-course-card:hover{
  transform:translateY(-2px);
  border-color:var(--global-palette1);
}

/* Filter bar carried a much heavier shadow than the cards
   (0 12px 28px/.08 vs 0 4px 12px/.06), so it floated above the grid.
   Same border + shadow language as the cards. */
.courseglade-course-filters.courseglade-course-filters{
  border:1px solid var(--global-palette6);
  box-shadow:0 4px 12px rgba(26,28,30,.06);
}

/* Mobile: the plugin keeps the desktop 32px gap after the grid collapses to
   one column, which is a lot of dead scroll between stacked cards. */
@media (max-width:767px){
  .courseglade-course-grid.courseglade-course-grid{ gap:20px; }
}

/* Free-only listings (/free-ebooks/ renders with data-category="free"):
   every card there is free, so the green "বিনামূল্যে" badge just repeats the
   price line below it. Scoped by the grid's own filter attribute rather than a
   page id, so any free-only listing gets the same treatment. On /courses/ the
   badge stays -- there it marks the free books among the paid ones. */
[data-courseglade-grid][data-category="free"] .courseglade-course-card__badge--free{
  display:none;
}


/* ============================================================================
   HOME PAGE (page 125) -- Gutenberg build, 2026-09-10
   ----------------------------------------------------------------------------
   The page is core blocks only: group / columns / heading / paragraph /
   buttons / image / list / details / shortcode. No HTML block anywhere, and
   the book cards come from [courseglade_courses], so the catalogue stays the
   single source of truth.

   That means every decoration the old hand-written markup carried in its own
   tags -- icons, the marquee, the tile layout -- has to live here instead.
   Icons are inline SVG data URIs on ::before, so the block content stays
   plain text a person can edit in the editor.

   Palette: brand green #064E3B, highlight #0C6B3D, icon #1A7A4C, card tint
   #E3F0E9 -- all read off the live gyanpradip.com. Category colours are that
   shop's own category ring colours.
   ============================================================================ */

.gp-hero,.gp-marquee,.gp-cats,.gp-books,.gp-free,.gp-steps,.gp-faq{
  --gp-ink:#123A2E;
  --gp-muted:#55655C;
  --gp-line:#DCE9E2;
  --gp-green:#064E3B;
  --gp-green-mid:#0C6B3D;
}
.gp-hero h1,.gp-hero h2,.gp-cats h2,.gp-books h2,.gp-free h2,.gp-steps h2,.gp-steps h3,.gp-faq h2{color:var(--gp-ink)}

/* --- shared bits -------------------------------------------------------- */

/* eyebrow: a pill instead of a bare line, with the brand dot in front */
.gp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:#E3F0E9;color:var(--gp-green-mid);
  font-size:13px;font-weight:600;letter-spacing:.4px;
  padding:7px 15px;border-radius:100px;margin:0 0 18px;
}
.gp-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#1A7A4C}
.gp-eyebrow--center{margin-left:auto;margin-right:auto}

.gp-headrow.wp-block-columns{gap:30px;margin-bottom:34px;align-items:flex-end}
.gp-headrow__note{color:var(--gp-muted);font-size:17px;line-height:1.8;margin:0}
.gp-cats h2,.gp-books h2,.gp-free h2,.gp-steps h2,.gp-faq h2{
  font-size:36px;line-height:1.3;font-weight:600;letter-spacing:-.6px;margin:0 0 8px;
}

/* text link with the diagonal arrow the design uses for "see all" */
.gp-link{margin:0;font-size:16px;font-weight:600}
.gp-link a{color:var(--gp-ink);text-decoration:none;display:inline-flex;align-items:center;gap:14px}
.gp-link a:after{content:"\2197";font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:1}
.gp-link a:hover{text-decoration:underline}

/* --- hero --------------------------------------------------------------- */
/* Two stacked gradients: a block background can only hold one, so the hero
   background stays here rather than in the block's own settings. */
.gp-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 60% at 82% 12%, rgba(31,138,95,.07), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F4FAF7 58%,#EAF3EE 100%);
}
.gp-hero-cols.wp-block-columns{gap:46px;margin-bottom:0}
.gp-hero .gp-h1{
  font-size:clamp(36px,3.5vw,50px);line-height:1.32;letter-spacing:-1.1px;
  font-weight:600;margin:0 0 18px;
}
.gp-hero .gp-h1 em{font-style:normal;color:var(--gp-green-mid)}
.gp-hero .gp-lead{font-size:17px;line-height:1.85;color:#48584F;max-width:430px;margin:0}
.gp-actions.wp-block-buttons{gap:14px;margin:30px 0 20px}
.gp-hero .wp-block-button__link{
  min-height:54px;padding:12px 26px;font-size:16px;font-weight:600;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
}
.gp-btn .wp-block-button__link{background:var(--gp-green);color:#fff}
.gp-btn .wp-block-button__link:hover{background:var(--gp-green-mid);color:#fff}
.gp-btn-ghost .wp-block-button__link{
  background:#fff;border:1px solid #C4DACD;color:var(--gp-green-mid);font-weight:500;
}
.gp-btn-ghost .wp-block-button__link:hover{background:#F2F9F5;border-color:#1A7A4C;color:var(--gp-green-mid)}
.gp-note{font-size:13px;color:var(--gp-muted);display:flex;align-items:center;gap:8px;margin:0}
.gp-note:before{
  content:"\2713";display:inline-grid;place-items:center;flex:none;
  width:19px;height:19px;border:1px solid #9BB6A8;border-radius:50%;
  color:var(--gp-green-mid);font-size:11px;
}
.gp-hero-art img{display:block;width:100%;height:auto;max-width:530px;margin-inline:auto}

/* trust strip: a plain list in the editor, a four-up icon row on screen */
.gp-trust.wp-block-list{
  list-style:none;margin:34px 0 0;padding:24px 0 26px;
  border-top:1px solid var(--gp-line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.gp-trust li{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;color:#3F5348;
}
.gp-trust li:before{
  content:"";flex:none;width:19px;height:19px;
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.gp-trust li:nth-child(1):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E")}
.gp-trust li:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E")}
.gp-trust li:nth-child(3):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.gp-trust li:nth-child(4):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E")}

/* --- marquee ------------------------------------------------------------ */
/* The list holds every title twice, so translating by -50% lands exactly on
   the loop point and the scroll never jumps. */
/* Flat tint, not rgba white: the body behind this strip is pure white, so a
   translucent white resolved to white and the band vanished. #FBFDFC is what
   the design showed -- 60% white over the #F8FBF9 paper it sat on.
   The theme puts 32px between top-level groups, which framed this bordered
   band in two white stripes; the design has the hero, the strip and the
   category band flush. The .entry-content prefix is needed: the rule that sets
   the 32px has one class of specificity and loads after this sheet, so a bare
   .gp-hero would tie and lose. */
.entry-content .gp-hero,
.entry-content .gp-marquee{margin-top:0;margin-bottom:0}
/* Same 32px gap, same fix: it left a white stripe between the FAQ band and the
   green CTA that closes the page. */
.entry-content .gp-faq{margin-bottom:0}
.gp-marquee{
  border-top:1px solid var(--gp-line);border-bottom:1px solid var(--gp-line);
  background:#FBFDFC;overflow:hidden;padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.gp-marquee__track.wp-block-list{
  list-style:none;margin:0;padding:0;
  display:flex;gap:26px;width:max-content;
  animation:gp-scroll 46s linear infinite;
}
.gp-marquee__track li{display:flex;align-items:center;gap:26px;font-size:15px;color:#3F5348;white-space:nowrap}
.gp-marquee__track li:after{content:"\2726";color:#C79A2E}
@keyframes gp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .gp-marquee__track.wp-block-list{animation:none} }

/* --- category tiles ----------------------------------------------------- */
.gp-cat-grid.wp-block-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gp-cat-grid .wp-block-button{width:100%}
.gp-cat .wp-block-button__link{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  width:100%;padding:22px 17px;border-radius:9px;
  background:#fff;border:1px solid #DDE9E3;color:var(--gp-ink);
  font-size:15px;font-weight:500;line-height:1.4;text-align:left;
  transition:transform .2s,border-color .2s;
}
.gp-cat .wp-block-button__link:before{
  content:"";flex:none;width:39px;height:39px;border-radius:50%;
  /* flat fallback first: color-mix() is unsupported below Safari 16.2 */
  background:#EEF4F1 no-repeat center;
  background:color-mix(in srgb, var(--cat) 12%, white) no-repeat center;
  background-size:20px 20px;
}
.gp-cat .wp-block-button__link:hover{transform:translateY(-4px);border-color:var(--cat);color:var(--gp-ink)}
.gp-cat--skills{--cat:#064E3B}
.gp-cat--marketing{--cat:#1F8A5F}
.gp-cat--sales{--cat:#6B3FA0}
.gp-cat--business{--cat:#9A7B12}
.gp-cat--islamic{--cat:#B34747}
.gp-cat--free{--cat:#237A6E}
.gp-cat--skills .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064E3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 16.5 8.5 11.5 1 19'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E")}
.gp-cat--marketing .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h4l7-5v12l-7-5H3z'/%3E%3Cpath d='M17 8a4 4 0 0 1 0 8'/%3E%3C/svg%3E")}
.gp-cat--sales .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B3FA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3C/svg%3E")}
.gp-cat--business .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")}
.gp-cat--islamic .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B34747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E")}
.gp-cat--free .wp-block-button__link:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E")}

/* --- book grids (CourseGlade shortcode) --------------------------------- */
/* The shortcode ships a search + sort bar and pagination; on the home page
   both belong on /courses/, not here. */
.gp-books .courseglade-course-filters,
.gp-books .courseglade-pagination,
.gp-free .courseglade-course-filters,
.gp-free .courseglade-pagination{display:none}
.gp-books .courseglade-courses,
.gp-free .courseglade-courses{margin:0}
/* .gp-free .gp-free-note, not the bare class: a paragraph rule that loads
   after this sheet zeroes the top margin at equal specificity, so the 26px
   gap under the card grid never appeared. */
.gp-free .gp-free-note{color:var(--gp-muted);font-size:14px;margin:26px 0 0}

/* --- steps -------------------------------------------------------------- */
.gp-step-grid.wp-block-columns{gap:50px;margin-top:42px}
.gp-step-grid .wp-block-column{border-top:1px solid var(--gp-line);padding-top:20px}
.gp-step__num{color:#4E8F6C;font-size:36px;font-weight:300;line-height:1.3;margin:0}
.gp-steps h3{font-size:22px;font-weight:500;margin:18px 0 10px}
.gp-steps .wp-block-column p:not(.gp-step__num){color:var(--gp-muted);line-height:1.8;font-size:16px;margin:0}

/* --- FAQ ---------------------------------------------------------------- */
.gp-faq-cols.wp-block-columns{gap:75px}
.gp-faq h2{margin-bottom:22px}
.gp-faq .gp-link{margin-top:22px}
.gp-faq-item.wp-block-details{
  border-bottom:1px solid #CFE0D6;padding:0 0 4px;
  background:none;border-radius:0;
}
.gp-faq-item summary{
  list-style:none;font-size:18px;font-weight:500;cursor:pointer;
  position:relative;padding:19px 35px 19px 0;color:var(--gp-ink);
}
.gp-faq-item summary::-webkit-details-marker{display:none}
.gp-faq-item summary:after{
  content:"+";position:absolute;right:2px;top:16px;
  color:var(--gp-green-mid);font-size:24px;font-family:Arial,Helvetica,sans-serif;
}
.gp-faq-item[open] summary:after{content:"\2212"}
.gp-faq-item p{font-size:15px;color:#455449;line-height:1.85;padding:0 28px 15px 0;margin:0}
.gp-faq-item p a{color:var(--gp-green);text-decoration:underline}

/* --- responsive --------------------------------------------------------- */
@media(min-width:1500px){
  .gp-hero .gp-h1{font-size:54px}
}
@media(max-width:1050px){
  .gp-cat-grid.wp-block-buttons{grid-template-columns:repeat(3,1fr)}
  .gp-cat .wp-block-button__link{flex-direction:row;align-items:center;gap:12px}
  .gp-faq-cols.wp-block-columns{gap:40px}
  .gp-step-grid.wp-block-columns{gap:30px}
}
@media(max-width:781px){
  .gp-hero-cols.wp-block-columns{gap:0}
  .gp-hero .gp-h1{font-size:clamp(29px,7.6vw,42px);line-height:1.36}
  .gp-hero-art img{max-width:400px;margin-top:26px}
  .gp-trust.wp-block-list{grid-template-columns:repeat(2,1fr);gap:18px 10px;margin-top:24px;padding:20px 0}
  .gp-trust li{font-size:12px;justify-content:flex-start}
  .gp-cats h2,.gp-books h2,.gp-free h2,.gp-steps h2,.gp-faq h2{font-size:29px}
  .gp-headrow.wp-block-columns{gap:12px;margin-bottom:26px}
  .gp-headrow__note{font-size:15px}
  .gp-link,.gp-headrow .gp-link p{font-size:15px}
  .gp-headrow .has-text-align-right{text-align:left}
  .gp-cat-grid.wp-block-buttons{grid-template-columns:repeat(2,1fr);gap:10px}
  .gp-cat .wp-block-button__link{padding:15px 12px;gap:10px;font-size:13px}
  .gp-cat .wp-block-button__link:before{width:32px;height:32px;background-size:17px 17px}
  .gp-step-grid.wp-block-columns{gap:22px;margin-top:30px}
  .gp-steps h3{margin:8px 0}
  .gp-marquee{padding:12px 0}
  .gp-marquee__track.wp-block-list{gap:18px;animation-duration:34s}
  .gp-marquee__track li{gap:18px;font-size:13px}
  .gp-faq-cols.wp-block-columns{gap:25px}
  .gp-faq-item summary{font-size:16px}
}

/* --- site chrome -------------------------------------------------------- */
/* Carried over from the previous build. Both rules are deliberately
   site-wide, not home-only: black under a green CTA reads as a jump, and a
   white header needs a defined edge where a coloured section starts. */
#masthead{border-bottom:1px solid rgba(6,78,59,.12)}
#colophon.site-footer .site-footer-row-container-inner{background-color:#002C22}
#colophon.site-footer{background-color:#002C22}

/* --- CourseGlade grid alignment ------------------------------------------ */
/* The plugin ships its own 1320px container with 15px side padding, and that
   max-width outranks the group's constrained-layout rule -- so the card rows
   sat 45px wider than every heading above them. Pin the container to the
   section width instead. */
/* Doubled class: base.css raises the container to 1320px inside a
   min-width media query and loads after this stylesheet, so a plain
   .courseglade-container here would lose the tie. */
.gp-books .courseglade-container.courseglade-container,
.gp-free .courseglade-container.courseglade-container{max-width:1200px;padding-left:0;padding-right:0;margin-inline:auto}

/* --- centred eyebrow ------------------------------------------------------ */
/* An inline-flex box ignores margin:auto, so the pill in the steps section sat
   at the far left of the full-width group instead of under its heading. */
.gp-eyebrow{display:flex;width:fit-content}
.gp-eyebrow--center{margin-inline:auto}

/* On the green band the pill background matched the band exactly, which read
   as no pill at all. */
.gp-free .gp-eyebrow{background:#fff}

/* --- book covers -------------------------------------------------------- */
/* The books have no featured images, so the plugin renders a grey placeholder
   glyph. The card keeps its taxonomy classes, so each subject can tint its
   own placeholder in that category colour -- the same colours the tiles and
   the shop use. Nothing is added to the markup.
   "free" comes first: a book tagged both free and a subject should show the
   subject colour, and the subject rules below override it. */
.gp-books .courseglade-course-card__placeholder,
.gp-free .courseglade-course-card__placeholder{background:#F1F5F3;color:#7C8C84}
.gp-books .courseglade_course_cat-free .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-free .courseglade-course-card__placeholder{background:#E4F1EC;color:#237A6E}
.gp-books .courseglade_course_cat-skills .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-skills .courseglade-course-card__placeholder{background:#E6EEEA;color:#064E3B}
.gp-books .courseglade_course_cat-marketing .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-marketing .courseglade-course-card__placeholder{background:#E6F3EC;color:#1F8A5F}
.gp-books .courseglade_course_cat-sales .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-sales .courseglade-course-card__placeholder{background:#F0EAF7;color:#6B3FA0}
.gp-books .courseglade_course_cat-business .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-business .courseglade-course-card__placeholder{background:#F7F2E1;color:#9A7B12}
.gp-books .courseglade_course_cat-islamic .courseglade-course-card__placeholder,
.gp-free .courseglade_course_cat-islamic .courseglade-course-card__placeholder{background:#F8EAEA;color:#B34747}


/* ============================================================================
   CATALOGUE PAGES -- /courses/ and /free-ebooks/  (2026-09-10)
   ----------------------------------------------------------------------------
   Both pages hold nothing but [courseglade_courses]. The heading is put into
   the plugin's own filter bar by gyanpradip_catalog_heading() in functions.php;
   what follows is only what that arrangement needs to look right.
   ============================================================================ */

/* The site header already carries a search that finds books, so the bar's own
   search box was a second box competing for the same job -- and it held 936px
   of a 1212px bar. With it gone the bar's space-between puts the heading on the
   left and the sort control on the right, no layout work needed.
   Doubled class: the plugin's course.css loads after this stylesheet, so an
   equal-specificity rule here would lose the tie. */
.courseglade-filter-group--search.courseglade-filter-group--search{display:none}

/* The bar arrives styled as a card -- white, 1px #E6E6E6, 8px radius and the
   same 0 4px 12px shadow the book cards carry -- so the page's own heading sat
   inside a box that looked exactly like one of the books under it. Stripped
   back to a plain header row with one hairline under it, in the site's own
   line colour rather than the plugin's neutral grey.
   Doubled class: the plugin's course.css sets all of this at one class of
   specificity and loads after this stylesheet. */
.courseglade-course-filters.courseglade-course-filters{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0 0 18px;border-bottom:1px solid #DCE9E2;
}

.courseglade-course-filters .gp-cat-head{flex:1 1 auto;min-width:0}
/* Home page pill, reused. Only the gap under it differs here. */
.courseglade-course-filters .gp-cat-head .gp-eyebrow{margin-bottom:10px}
.courseglade-course-filters .gp-cat-head h1{
  /* #123A2E is --gp-ink, written out because that variable is scoped to the
     home page sections and this bar is on another template. */
  margin:0;color:#123A2E;
  font-size:30px;line-height:1.3;letter-spacing:-.7px;font-weight:600;
}
.courseglade-course-filters .gp-cat-head__note{margin:5px 0 0;font-size:14px;color:#55655C}

/* The sort control. Its label is in the markup already, hidden for screen
   readers only; shown here because the option text on its own does not say
   that the control sorts anything. The two greys the plugin uses (#DEE2E6 on
   the select, #E6E6E6 on the bar) give way to the site's line colour. */
.courseglade-course-filters .courseglade-filter-group:not(.courseglade-filter-group--search){
  display:flex;align-items:center;gap:10px;
}
/* !important throughout: the theme's own .screen-reader-text rule marks every
   one of these declarations important, so nothing else can bring the label back
   into view. Only this one label is unhidden; the search group's label stays
   hidden with the group. */
.courseglade-course-filters .courseglade-filter-group:not(.courseglade-filter-group--search) label.screen-reader-text{
  position:static!important;width:auto!important;height:auto!important;
  overflow:visible!important;clip:auto!important;clip-path:none!important;
  white-space:nowrap;margin:0;font-size:14px;color:#55655C;
}
.courseglade-course-filters .courseglade-filter-select.courseglade-filter-select{
  border-color:#C9DDD2;color:#123A2E;
}

/* Fallback path: no filter bar, so the heading stands on its own above the grid. */
.gp-cat-head--alone{margin:0 0 24px}

/* Category row, between the header rule and the grid. The current one is
   filled rather than tinted per subject: six coloured pills would compete with
   the book covers under them, and only one of the six is ever the answer to
   "where am I". */
/* .courseglade-container prefix on the list: the theme indents every ul in
   the content by 32px at one class of specificity and loads after this sheet,
   so a plain padding:0 lost the tie and the row sat inset from the cards. */
.courseglade-container .gp-cat-chips,
/* 24px above, 40px below: the row is part of the header, not a caption on the
   grid, and an equal gap on both sides made it read as belonging to neither. */
.gp-cat-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 40px;padding:0;list-style:none}
.gp-cat-chips a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:100px;
  border:1px solid #DDE9E3;background:#fff;color:#123A2E;
  font-size:14px;line-height:1.4;text-decoration:none;
  transition:border-color .2s,background .2s,color .2s;
}
.gp-cat-chips a:hover{border-color:#1A7A4C;background:#F2F9F5;color:#0C6B3D}
.gp-cat-chips b{font-weight:400;font-size:13px;opacity:.55}
.gp-cat-chips .is-current a{background:#064E3B;border-color:#064E3B;color:#fff}
.gp-cat-chips .is-current b{opacity:.7}

@media(max-width:767px){
  /* The bar turns into a column with align-items:center at this width, so the
     heading box shrinks to its text and sits in the middle. align-self, not
     flex-basis: in a column the basis is the height, not the width. */
  .courseglade-course-filters .gp-cat-head{align-self:stretch}
  .courseglade-course-filters .gp-cat-head h1{font-size:23px;letter-spacing:-.4px}
  .courseglade-course-filters.courseglade-course-filters{padding-bottom:14px}
  .gp-cat-chips{gap:7px;margin-bottom:30px}
  .gp-cat-chips a{padding:7px 13px;font-size:13px;gap:6px}
}
/* ============================================================================
   BOOK PAGE -- single courseglade_course  (2026-09-10)
   ----------------------------------------------------------------------------
   The plugin's single-course template ships its own scale and palette: 1320px
   container, 56px/800 headings in #212529, #F3F3F6 bands, 32px card radii, and
   a leftover rgba(0,75,202,…) blue that the colour remap in this file could not
   reach because it is written as a literal, not a variable.
   Nothing here hides anything the plugin prints -- every rule only changes how
   an element looks, so the page keeps all of its information.
   Doubled class on the shared selectors: course.css loads after this sheet.
   ============================================================================ */

/* --- width: the rest of the site settles on 1200px.
       The body prefix is needed: base.css raises the container to 1320px from
       a :root-prefixed rule inside a min-width query and loads after this
       sheet, so a selector of equal weight lost the tie. --- */
body .courseglade-single-course .courseglade-container.courseglade-container{max-width:1200px}

/* --- headings: 800-weight display type in a grey the site does not use --- */
.courseglade-course-hero__title{
  font-size:42px;line-height:1.25;letter-spacing:-1px;font-weight:600;color:#123A2E;
}
.courseglade-course-hero__excerpt{font-size:18px;line-height:1.75;color:#48584F}
.courseglade-course-section__title{
  font-size:26px;line-height:1.35;letter-spacing:-.5px;font-weight:600;color:#123A2E;
}
.courseglade-instructor-card__name{font-size:19px;font-weight:600;color:#123A2E}
.courseglade-reviews-summary__number{font-size:40px;font-weight:600;color:#123A2E}
.courseglade-reviews-empty__title,
.courseglade-reviews-form__heading{font-size:17px;font-weight:600;color:#123A2E}
.courseglade-course-sidebar__includes-title{font-size:16px;font-weight:600;color:#123A2E}
.courseglade-course-highlights__value{font-size:19px;font-weight:600;color:#123A2E}
.courseglade-course-highlights__label{color:#55655C;letter-spacing:.6px}
.courseglade-course-description{color:#3F5348;line-height:1.85}

/* --- the stats band: #F3F3F6 is a cool grey-lavender; the site's paper is
       #F8FBF9, and its bands are edged with a hairline rather than a step --- */
.courseglade-course-highlights.courseglade-course-highlights{
  background:#F8FBF9;border-top:1px solid #DCE9E2;border-bottom:1px solid #DCE9E2;
}

/* --- the leftover plugin blue, in three places ------------------------- */
.courseglade-course-hero__category.courseglade-course-hero__category{
  background:#E3F0E9;border-color:#CFE2D7;color:#0C6B3D;border-radius:100px;
}
.courseglade-course-hero__category:hover{background:#D5E8DE;border-color:#1A7A4C}
.courseglade-course-learn-card__icon,
.courseglade-reviews-empty__icon{background:#E3F0E9;color:#0C6B3D}

/* --- cards: the site's own card is 12px with a #DDE9E3 hairline, not a
       32px pill floating on a 20px-deep shadow ------------------------- */
.courseglade-course-sidebar__card.courseglade-course-sidebar__card{
  border-radius:12px;border:1px solid #DDE9E3;
  box-shadow:0 4px 12px rgba(18,58,46,.06);
}
.courseglade-course-learn-card.courseglade-course-learn-card{
  border-radius:12px;border:1px solid #DDE9E3;box-shadow:none;padding:22px;
}
.courseglade-course-learn-card__text{color:#3F5348}
.courseglade-instructor-card.courseglade-instructor-card,
.courseglade-reviews-empty.courseglade-reviews-empty,
.courseglade-reviews-form.courseglade-reviews-form{
  border:1px solid #DDE9E3;border-radius:12px;
}

/* --- instructor stat chips: mint #D3F9D8 on #1A7431 is a third green.
       Same pill as the category row on the catalogue pages. --- */
.courseglade-instructor-card__stat.courseglade-instructor-card__stat{
  background:#E3F0E9;color:#0C6B3D;border-radius:100px;
}
.courseglade-instructor-card__stat-value{color:#064E3B}
.courseglade-instructor-card__role-badge{background:#E3F0E9;color:#0C6B3D}

/* --- bars: the amber #FAB005 is not in the palette; #C79A2E is the gold the
       home page marquee already uses. Tracks pick up the card tint. --- */
.courseglade-reviews-breakdown__fill{background:#C79A2E}
.courseglade-reviews-breakdown__bar,
.courseglade-course-sidebar__progress-bar{background:#E4EDE8}
.courseglade-reviews-breakdown__label,
.courseglade-reviews-breakdown__count,
.courseglade-reviews-summary__count,
.courseglade-reviews-empty__sub{color:#55655C}

/* --- secondary button: #F3F3F6 again. The site's second button is white with
       a green outline (hero, catalogue, header). --- */
.courseglade-btn-secondary.courseglade-btn-secondary{
  background:#fff;border:1px solid #C4DACD;color:#0C6B3D;font-weight:600;
}
.courseglade-btn-secondary.courseglade-btn-secondary:hover{
  background:#F2F9F5;border-color:#1A7A4C;color:#064E3B;
}
.courseglade-btn-outline.courseglade-btn-outline{font-weight:600}
.courseglade-form-input{border-color:#C9DDD2}
.courseglade-form-input:focus{border-color:#1A7A4C;box-shadow:0 0 0 3px rgba(6,78,59,.12)}

/* --- hero: the grid always reserves a 517px media column, and a book with no
       cover image left that half of the first screen blank. When the media
       column has no child, the copy takes the full width. The element itself
       stays in the markup; only the column it sits in collapses. --- */
.courseglade-course-hero__grid:not(:has(.courseglade-course-hero__media > *)){
  grid-template-columns:1fr;
}
.courseglade-course-hero__grid:not(:has(.courseglade-course-hero__media > *)) .courseglade-course-hero__content{
  max-width:820px;
}

/* --- the three places the template still reads as a course -------------
   Checked on all seven books: the highlight band always prints the same
   four cells in the same order (1 Duration, 2 Lessons, 3 Level, 4 Last
   Updated) and the sidebar always prints two features, so position is a
   safe handle. Nothing is removed from the markup -- only the display.

   1 Duration says "3m" / "7m" / "--" for a book nobody reads in minutes;
   2 Lessons is empty on every one of the seven. --- */
.courseglade-course-highlights__grid .courseglade-course-highlights__item:nth-child(1),
.courseglade-course-highlights__grid .courseglade-course-highlights__item:nth-child(2){
  display:none;
}
/* two cells left, so the plugin's repeat(4,1fr) would leave the band half
   empty. Doubled class: course.css sets the four columns after this sheet,
   and repeats the rule inside three later media queries. */
.courseglade-course-highlights__grid.courseglade-course-highlights__grid{
  grid-template-columns:repeat(2,1fr);
}

/* the first sidebar feature is the reading time or the lesson count; the
   second is the lifetime-access line, which is right for a book.
   :not(:only-child) leaves the list alone if a book ever prints just one. */
.courseglade-course-sidebar__features .courseglade-course-sidebar__feature:first-child:not(:only-child){
  display:none;
}

/* "1 Student  7 Courses" under the author's name: a reader count and a
   course count, neither of which describes a book. The chip styling above
   stays where it is in case the row is ever wanted back. */
.courseglade-instructor-card__stats.courseglade-instructor-card__stats{display:none}

@media(max-width:767px){
  .courseglade-course-hero__title{font-size:29px;letter-spacing:-.5px}
  .courseglade-course-hero__excerpt{font-size:16px}
  .courseglade-course-section__title{font-size:22px}
  .courseglade-reviews-summary__number{font-size:34px}
}

/* ============================================================================
   SEARCH RESULTS  (2026-09-10)
   ----------------------------------------------------------------------------
   The layout itself is set in the Customizer (Search Results: title on, one
   column, author removed from the meta because the posting user's display name
   is an email address). What is left here is the same width, type and card
   treatment the catalogue and book pages use.
   Nothing is hidden: every result, both dates and the excerpt still print.
   ============================================================================ */

.search-results .content-container.content-container,
.search-archive-hero-section .entry-header{max-width:1200px;margin-inline:auto}

/* --- the results title ------------------------------------------------- */
/* The title block starts flush against the header bar -- Kadence gives this
   hero no top padding at all. 64px sits between the book page's 80 and the
   catalogue's 120, which is right for a single line of type. */
.search-archive-hero-section .entry-header{padding:64px 0 20px;border-bottom:1px solid #DCE9E2}
.search-archive-hero-section .search-title{
  font-size:34px;line-height:1.3;letter-spacing:-.7px;font-weight:600;color:#123A2E;margin:0;
}
.search-archive-hero-section .search-title span{color:#0C6B3D}

/* --- each result ------------------------------------------------------- */
.search-results article.entry.loop-entry{
  border:1px solid #DDE9E3;border-radius:12px;background:#fff;
  box-shadow:none;
}
.search-results article.entry .entry-content-wrap{padding:26px 28px}
.search-results .entry-title{font-size:22px;line-height:1.4;font-weight:600}
.search-results .entry-title a{color:#123A2E;text-decoration:none}
.search-results .entry-title a:hover{color:#0C6B3D}
.search-results .entry-summary{color:#3F5348;line-height:1.8}

/* The theme prints the modified date as a second <time> for schema and keeps
   it out of view itself, so only the published one is labelled. */
.search-results .entry-meta{font-size:13px;color:#55655C}
.search-results .entry-meta .published:before{content:"প্রকাশ "}

/* Kadence puts 120px above the content area site-wide. Under a results title
   that already has a rule under it, that reads as a hole rather than a break. */
.search-results .content-area{margin-top:40px}

/* --- read more --------------------------------------------------------- */
.search-results .post-more-link{
  color:#0C6B3D;font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;
}
.search-results .post-more-link:hover{color:#064E3B}

@media(max-width:767px){
  .search-archive-hero-section .entry-header{padding-top:36px}
  .search-archive-hero-section .search-title{font-size:25px;letter-spacing:-.4px}
  .search-results article.entry .entry-content-wrap{padding:20px}
  .search-results .entry-title{font-size:19px}
}