src/media/css/template.css

@@ -18559,3 +18559,131 @@ nav[data-toggle=toc] .nav-link.active+ul{
   --alert-color: color-mix(in srgb, var(--warning) 90%, black);
   --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
 }
+
+/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */
+.mod-search-responsive {
+	width: 100%;
+}
+
+.mod-search__form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 100%;
+}
+
+.mod-search__input-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 100%;
+}
+
+.mod-search__input-wrapper--inline {
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.mod-search__input {
+	flex: 1;
+	min-width: 0;
+	padding: 0.5rem 0.75rem;
+	font-size: 1rem;
+	line-height: 1.5;
+	border: 1px solid var(--input-border-color, #dee2e6);
+	border-radius: 0.375rem;
+	background-color: var(--input-bg, #fff);
+	color: var(--input-color, #212529);
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.mod-search__input:focus {
+	border-color: var(--color-primary, #0d6efd);
+	outline: 0;
+	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.mod-search__button-wrapper {
+	display: flex;
+}
+
+.mod-search__button-wrapper--left,
+.mod-search__button-wrapper--right {
+	flex-shrink: 0;
+}
+
+.mod-search__button {
+	padding: 0.5rem 1rem;
+	font-size: 1rem;
+	line-height: 1.5;
+	border-radius: 0.375rem;
+	white-space: nowrap;
+	min-height: 44px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.mod-search__button--icon {
+	padding: 0.5rem;
+	width: 44px;
+	height: 44px;
+}
+
+.mod-search__button--icon .icon-search {
+	font-size: 1.25rem;
+}
+
+/* Mobile-first responsive adjustments */
+@media (max-width: 575.98px) {
+	.mod-search__input {
+		font-size: 16px;
+		padding: 0.625rem 0.875rem;
+	}
+	
+	.mod-search__button {
+		padding: 0.625rem 1.25rem;
+		font-size: 1rem;
+		min-height: 48px;
+	}
+	
+	.mod-search__button--icon {
+		width: 48px;
+		height: 48px;
+	}
+	
+	.mod-search__input-wrapper--inline {
+		flex-direction: column;
+	}
+	
+	.mod-search__button-wrapper--left .mod-search__button,
+	.mod-search__button-wrapper--right .mod-search__button {
+		width: 100%;
+	}
+}
+
+/* Tablet improvements */
+@media (min-width: 576px) and (max-width: 767.98px) {
+	.mod-search__input-wrapper--inline {
+		flex-direction: row;
+	}
+}
+
+/* Desktop enhancements */
+@media (min-width: 768px) {
+	.mod-search__form {
+		flex-direction: row;
+		align-items: center;
+	}
+	
+	.mod-search__input-wrapper--inline {
+		flex-direction: row;
+	}
+	
+	.mod-search__button-wrapper--top,
+	.mod-search__button-wrapper--bottom {
+		flex: 0 0 auto;
+	}
+}

src/templates/html/mod_search/README.md

@@ -0,0 +1,126 @@
+# mod_search Mobile Responsive Override
+
+## Overview
+This directory contains a mobile-responsive override for Joomla's `mod_search` module, designed specifically for the MokoCassiopeia template.
+
+## Features
+
+### Mobile Responsiveness
+- **Flexible Layout**: Adapts to different screen sizes automatically
+- **Touch-Friendly**: Minimum 44px touch targets (48px on mobile)
+- **Readable Text**: 16px font size on mobile to prevent auto-zoom on iOS
+- **Proper Spacing**: Adequate padding and gaps for easy interaction
+
+### Responsive Breakpoints
+- **Mobile (< 576px)**: Stacked layout, full-width buttons, larger touch targets
+- **Tablet (576px - 767px)**: Inline search field and button
+- **Desktop (≥ 768px)**: Optimized horizontal layout
+
+### Button Position Support
+The override supports all standard mod_search button positions:
+- **Left**: Search button appears to the left of input field
+- **Right**: Search button appears to the right of input field (default)
+- **Top**: Search button appears above input field
+- **Bottom**: Search button appears below input field
+
+### Icon Button Support
+Supports both text and icon-only search buttons:
+- Text buttons display customizable button text
+- Icon buttons show search icon (icon-search)
+
+## Files
+
+### default.php
+The main template override file that renders the search module with responsive HTML structure.
+
+**Key Classes:**
+- `.mod-search-responsive`: Main wrapper class
+- `.mod-search__form`: Form container with flex layout
+- `.mod-search__input-wrapper`: Input field wrapper
+- `.mod-search__input`: Search input field
+- `.mod-search__button`: Search button
+- `.mod-search__button--icon`: Icon-only button variant
+
+## CSS Styling
+
+The mobile-responsive styles are defined in `/src/media/css/template.css` under the section:
+```
+/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */
+```
+
+### Key CSS Features:
+1. **Flexbox Layout**: Uses modern flexbox for flexible, responsive layouts
+2. **CSS Variables**: Integrates with template's color scheme system
+3. **Mobile-First**: Base styles target mobile, with progressive enhancement
+4. **Accessible**: Proper focus states and ARIA labels
+5. **Touch-Optimized**: Appropriate sizing for touch interaction
+
+## Usage
+
+This override is automatically used when:
+1. The MokoCassiopeia template is active
+2. A mod_search module is published on the site
+
+No additional configuration is required beyond standard mod_search module settings.
+
+## Module Parameters
+
+All standard mod_search parameters are supported:
+- **Width**: Input field width (in characters) - note: overridden by responsive CSS
+- **Button Text**: Custom text for the search button
+- **Button Position**: left, right, top, or bottom
+- **Image Button**: Use icon instead of text button
+- **Max Length**: Maximum search query length
+- **Menu Item**: Target search results page
+
+## Accessibility Features
+
+- Hidden label for screen readers
+- ARIA labels on input and button
+- Proper focus indicators
+- Semantic HTML structure
+- Keyboard navigation support
+
+## Browser Support
+
+- Modern browsers with flexbox support
+- Responsive on all device sizes
+- Works with iOS Safari (no auto-zoom on input focus)
+- Compatible with touch and mouse input
+
+## Customization
+
+To customize the appearance, you can:
+1. Override CSS variables in `user.css`
+2. Modify classes in `default.php` 
+3. Add custom styles targeting `.mod-search-responsive`
+
+Example custom CSS:
+```css
+.mod-search-responsive {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.mod-search__input {
+  border-radius: 25px;
+}
+
+.mod-search__button {
+  border-radius: 25px;
+}
+```
+
+## Testing
+
+The override has been designed to work across:
+- Mobile devices (320px+)
+- Tablets (768px+)
+- Desktop screens (1200px+)
+- Touch and click interactions
+- Portrait and landscape orientations
+
+## License
+
+Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+Licensed under GNU General Public License version 2 or later

src/templates/html/mod_search/default.php

@@ -0,0 +1,94 @@
+<?php
+
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_search
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Mobile responsive override for mod_search module
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Language\Text;
+
+// Get module parameters
+$width = (int) $params->get('width', 20);
+$maxlength = (int) $params->get('maxlength', 200);
+$button_text = $params->get('button_text', '');
+$button_pos = $params->get('button_pos', 'right');
+$imagebutton = $params->get('imagebutton', 0);
+$set_itemid = (int) $params->get('set_itemid', 0);
+$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8');
+
+// Add responsive wrapper class
+$wrapperClass = 'mod-search mod-search-responsive ' . $moduleclass_sfx;
+$inputClass = 'mod-search__input form-control';
+$buttonClass = 'mod-search__button btn btn-primary';
+
+// Build the search button
+if ($imagebutton) {
+	$buttonHtml = '<button class="' . $buttonClass . ' mod-search__button--icon" type="submit" aria-label="' . Text::_('JSEARCH_FILTER_SUBMIT') . '">'
+		. '<span class="icon-search" aria-hidden="true"></span>'
+		. '</button>';
+} else {
+	$button_text = $button_text ?: Text::_('JSEARCH_FILTER_SUBMIT');
+	$buttonHtml = '<button class="' . $buttonClass . '" type="submit">'
+		. htmlspecialchars($button_text, ENT_COMPAT, 'UTF-8')
+		. '</button>';
+}
+
+$output = '';
+
+// Menuitem option
+$mitemid = $set_itemid > 0 ? $set_itemid : $app->input->getInt('Itemid');
+?>
+
+<div class="<?php echo $wrapperClass; ?>">
+	<form action="<?php echo JRoute::_('index.php?option=com_search'); ?>" method="post" class="mod-search__form">
+		<?php if ($button_pos === 'top') : ?>
+			<div class="mod-search__button-wrapper mod-search__button-wrapper--top">
+				<?php echo $buttonHtml; ?>
+			</div>
+		<?php endif; ?>
+
+		<div class="mod-search__input-wrapper <?php echo $button_pos !== 'top' && $button_pos !== 'bottom' ? 'mod-search__input-wrapper--inline' : ''; ?>">
+			<?php if ($button_pos === 'left') : ?>
+				<div class="mod-search__button-wrapper mod-search__button-wrapper--left">
+					<?php echo $buttonHtml; ?>
+				</div>
+			<?php endif; ?>
+
+			<label for="mod-search-searchword<?php echo $module->id; ?>" class="visually-hidden">
+				<?php echo Text::_('COM_SEARCH_SEARCH'); ?>
+			</label>
+			<input
+				id="mod-search-searchword<?php echo $module->id; ?>"
+				name="searchword"
+				class="<?php echo $inputClass; ?>"
+				type="search"
+				maxlength="<?php echo $maxlength; ?>"
+				placeholder="<?php echo Text::_('COM_SEARCH_SEARCH'); ?>"
+				aria-label="<?php echo Text::_('COM_SEARCH_SEARCH'); ?>"
+			/>
+
+			<?php if ($button_pos === 'right') : ?>
+				<div class="mod-search__button-wrapper mod-search__button-wrapper--right">
+					<?php echo $buttonHtml; ?>
+				</div>
+			<?php endif; ?>
+		</div>
+
+		<?php if ($button_pos === 'bottom') : ?>
+			<div class="mod-search__button-wrapper mod-search__button-wrapper--bottom">
+				<?php echo $buttonHtml; ?>
+			</div>
+		<?php endif; ?>
+
+		<input type="hidden" name="task" value="search" />
+		<input type="hidden" name="option" value="com_search" />
+		<input type="hidden" name="Itemid" value="<?php echo $mitemid; ?>" />
+	</form>
+</div>

src/templates/html/mod_search/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title></title></head><body></body></html>